|
|
@@ -0,0 +1,415 @@
|
|
|
+<template>
|
|
|
+ <view class="page">
|
|
|
+ <!-- 购物车 -->
|
|
|
+ <u-navbar title="购物车" :background="background" title-color="#ffffff" back-icon-color="#ffffff" is-fixed>
|
|
|
+ <template slot="right">
|
|
|
+ <text class="navbar-button" v-show="enbleEdit==false" @click="enbleEdit=true">编辑</text>
|
|
|
+ <text class="navbar-button" v-show="enbleEdit==true" @click="enbleEdit=false">完成</text>
|
|
|
+ </template>
|
|
|
+ </u-navbar>
|
|
|
+ <u-checkbox-group class="order" @change="checkboxGroupChange">
|
|
|
+ <u-checkbox @change="checkboxChange" style="width: 100%;" v-model="item.checked" shape="circle" v-for="(item,index) in goodsList" :key="item.id" :name="item.id">
|
|
|
+ <view class="item">
|
|
|
+ <view class="left">
|
|
|
+ <image :src="item.goodsUrl" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="title u-line-2">{{ item.title }}</view>
|
|
|
+ <view class="type">{{ item.type }}</view>
|
|
|
+ <!-- <view class="delivery-time">发货时间 {{ item.deliveryTime }}</view> -->
|
|
|
+ <view class="price-row">
|
|
|
+ <view class="brand">
|
|
|
+ {{ item.brand }}
|
|
|
+ </view>
|
|
|
+ <view class="demo-count-box">
|
|
|
+ <u-number-box v-model="selectedCount" :min="1" @change="selectedCountChange"></u-number-box>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-checkbox>
|
|
|
+ </u-checkbox-group>
|
|
|
+ <u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
|
|
|
+ <view class="navigation">
|
|
|
+ <view class="left">
|
|
|
+ <view class="item">
|
|
|
+ <u-checkbox shape="circle" @change="checkedAll" v-model="checkedAllValue">全选</u-checkbox>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right" v-show="enbleEdit==false">
|
|
|
+ <view class="total">合计：<text>2条</text></view>
|
|
|
+ <view class="buy btn u-line-1" @click="handleSubmit">立即下单</view>
|
|
|
+ </view>
|
|
|
+ <view class="right" v-show="enbleEdit==true">
|
|
|
+ <view class="buy btn u-line-1" @click="handleDel">删除</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ background: {
|
|
|
+ backgroundColor: "#0291FD",
|
|
|
+ color: "#ffffff"
|
|
|
+
|
|
|
+ },
|
|
|
+ buttonCustomStyle: {
|
|
|
+ color: "#ffffff",
|
|
|
+ background: "transparent",
|
|
|
+ border: "none"
|
|
|
+ },
|
|
|
+ selectedCount: 0,
|
|
|
+ checkedAllValue: false,
|
|
|
+ enbleEdit: false,
|
|
|
+ loadStatus: "false",
|
|
|
+ goodsList: [],
|
|
|
+ list: [{
|
|
|
+ id: "1",
|
|
|
+ goodsUrl: 'https://img12.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
|
|
|
+ title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
|
|
|
+ type: '胎动品牌；修补类型；普通积分',
|
|
|
+ deliveryTime: '付款后30天内发货',
|
|
|
+ price: '348.58',
|
|
|
+ number: 2,
|
|
|
+ checked: false,
|
|
|
+ disabled: false,
|
|
|
+ brand: "SAILUN"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "2",
|
|
|
+ goodsUrl: 'https://img12.360buyimg.com/n7/jfs/t1/47645/22/6120/140457/5d3d17deEec9f8e8d/3687ff03ca89b48c.jpg',
|
|
|
+ title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
|
|
|
+ type: '胎动品牌；修补类型；普通积分',
|
|
|
+ deliveryTime: '付款后30天内发货',
|
|
|
+ price: '135.00',
|
|
|
+ number: 1,
|
|
|
+ checked: false,
|
|
|
+ disabled: false,
|
|
|
+ brand: "SAILUN"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "3",
|
|
|
+ goodsUrl: 'https://img11.360buyimg.com/n7/jfs/t1/88990/24/4208/105799/5de4c6e9E24bc09d0/f810effb14c9c13a.jpg',
|
|
|
+ title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
|
|
|
+ type: '胎动品牌；修补类型；普通积分',
|
|
|
+ deliveryTime: '付款后7天内发货',
|
|
|
+ price: '128.05',
|
|
|
+ number: 1,
|
|
|
+ checked: false,
|
|
|
+ disabled: false,
|
|
|
+ brand: "SAILUN"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "4",
|
|
|
+ goodsUrl: 'https://img12.360buyimg.com/n7/jfs/t1/93698/23/4500/114562/5de713dfEfc997085/e8deaa979909851d.jpg',
|
|
|
+ title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
|
|
|
+ type: '胎动品牌；修补类型；普通积分',
|
|
|
+ deliveryTime: '保质5年',
|
|
|
+ price: '1998',
|
|
|
+ number: 3,
|
|
|
+ checked: false,
|
|
|
+ disabled: false,
|
|
|
+ brand: "SAILUN"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "5",
|
|
|
+ goodsUrl: 'https://img11.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
|
|
|
+ title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
|
|
|
+ type: '胎动品牌；修补类型；普通积分',
|
|
|
+ deliveryTime: '保质5年',
|
|
|
+ price: '2354',
|
|
|
+ number: 1,
|
|
|
+ checked: false,
|
|
|
+ disabled: false,
|
|
|
+ brand: "SAILUN"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "6",
|
|
|
+ goodsUrl: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
|
|
|
+ title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
|
|
|
+ type: '胎动品牌；修补类型；普通积分',
|
|
|
+ deliveryTime: '珍藏10年好酒',
|
|
|
+ price: '1543',
|
|
|
+ number: 3,
|
|
|
+ checked: false,
|
|
|
+ disabled: false,
|
|
|
+ brand: "SAILUN"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "7",
|
|
|
+ goodsUrl: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
|
|
|
+ title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
|
|
|
+ type: '胎动品牌；修补类型；普通积分',
|
|
|
+ deliveryTime: '口感好',
|
|
|
+ price: '120',
|
|
|
+ number: 1,
|
|
|
+ checked: false,
|
|
|
+ disabled: false,
|
|
|
+ brand: "SAILUN"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "8",
|
|
|
+ goodsUrl: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
|
|
|
+ title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
|
|
|
+ type: '胎动品牌；修补类型；普通积分',
|
|
|
+ deliveryTime: '使用方便',
|
|
|
+ price: '451',
|
|
|
+ number: 9,
|
|
|
+ checked: false,
|
|
|
+ disabled: false,
|
|
|
+ brand: "SAILUN"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.addRandomData();
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ this.loadStatus = 'loading';
|
|
|
+ // 模拟数据加载
|
|
|
+ setTimeout(() => {
|
|
|
+ this.addRandomData();
|
|
|
+ this.loadStatus = 'loadmore';
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ selectedCountChange: function(){},
|
|
|
+ checkboxGroupChange: function(params) {
|
|
|
+ console.log(1)
|
|
|
+ console.log(params)
|
|
|
+ },
|
|
|
+ checkboxChange: function(params) {
|
|
|
+ if(!params.value){
|
|
|
+ this.checkedAllValue = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkedAll: function(params) {
|
|
|
+ console.log(this.checkedAllValue)
|
|
|
+ if(params.value){
|
|
|
+ this.list.map(val => {
|
|
|
+ val.checked = true;
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.list.map(val => {
|
|
|
+ val.checked = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ handleSubmit: function(){},
|
|
|
+ handleDel: function(){},
|
|
|
+ addRandomData() {
|
|
|
+ for (let i = 0; i < 10; i++) {
|
|
|
+ let index = this.$u.random(0, this.list.length - 1);
|
|
|
+ // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
|
|
|
+ let item = JSON.parse(JSON.stringify(this.list[index]))
|
|
|
+ item.id = this.$u.guid();
|
|
|
+ this.goodsList.push(item);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .page{
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+ }
|
|
|
+ .navbar-button {
|
|
|
+ padding: 24rpx 26rpx;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order {
|
|
|
+ width: 710rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin: 20rpx auto;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ box-sizing: content-box;
|
|
|
+ padding: 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .store {
|
|
|
+ margin: 0 10rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ color: $u-type-warning-dark;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ margin: 20rpx 0 0;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ margin-right: 20rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ .title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .type {
|
|
|
+ margin: 10rpx 0;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $u-tips-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .delivery-time {
|
|
|
+ color: #e5d001;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ font-size: 26rpx;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ color: #FF0000;
|
|
|
+ }
|
|
|
+ .brand{
|
|
|
+ color: #999999;
|
|
|
+ background: #F3F3F3;
|
|
|
+ padding: 0 8rpx;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ }
|
|
|
+ .exchange {
|
|
|
+ background: #0094FE;
|
|
|
+ color: #FFFFFF;
|
|
|
+ padding: 4rpx 16rpx;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ text-align: right;
|
|
|
+
|
|
|
+ .decimal {
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .number {
|
|
|
+ color: $u-tips-color;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .total {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ .total-price {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ line-height: 52rpx;
|
|
|
+ width: 160rpx;
|
|
|
+ border-radius: 26rpx;
|
|
|
+ border: 2rpx solid $u-border-color;
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: $u-type-info-dark;
|
|
|
+ }
|
|
|
+
|
|
|
+ .evaluate {
|
|
|
+ color: $u-type-warning-dark;
|
|
|
+ border-color: $u-type-warning-dark;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .navigation {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 100rpx;
|
|
|
+ border: solid 2rpx #f2f2f2;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 16rpx 0;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 100;
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ font-size: 20rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ margin: 0 30rpx;
|
|
|
+
|
|
|
+ &.car {
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .car-num {
|
|
|
+ position: absolute;
|
|
|
+ top: -10rpx;
|
|
|
+ right: -10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ font-size: 28rpx;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ line-height: 66rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cart {
|
|
|
+ background-color: #ed3f14;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .buy {
|
|
|
+ margin: 0 16rpx;
|
|
|
+ background-color: #ff7900;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
wangxiaoying