Blame view

src/pages/cart/cart.vue 14.1 KB
61d825263   BigBoss   确认订单修改
1
2
3
4
5
6
7
8
9
10
  <template>
    <view class="content">
      <block v-if="cartList.length==0">
  
      </block>
      <block v-else>
        <view class="card">
          <view class="cardHeader">
            <view
              v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
2cd0b0f44   范牧   bug修复
11
              @click="pClick"
61d825263   BigBoss   确认订单修改
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
            >
              <span class="correct"></span>
            </view>
            <image
              src="../../static/store.png"
              mode="aspectFill"
            ></image>
            <text>非常戴镜</text>
          </view>
          <view
            class="cardBody"
            v-for="(item,index) in cartList"
            :key="index"
            @longpress="delCart(item.cart_id,index)"
          >
            <view
              v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'"
2cd0b0f44   范牧   bug修复
29
              @click="childClick(cartList[index],index)"
61d825263   BigBoss   确认订单修改
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
            >
              <span class="correct"></span>
            </view>
            <view class="imageWrap">
              <image
                :src="item.img_index_url"
                mode="aspectFit"
                style="width: 188rpx;height: 168rpx;"
              ></image>
            </view>
            <view class="goodInfo">
              <!-- <view class="imageWrap">
                <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
              </view> -->
              <view class="infoRight">
                <view
                  class="goodName"
                  @tap="toGoods(item.pid,item.sk_id)"
                >{{item.p_name}}</view>
2cd0b0f44   范牧   bug修复
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
                <view
                  class="describ"
                  @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)"
                >
                  <view class="desL">
                    <view class="people">
                      使用人:{{item.peopleName}}
                    </view>
                    <view class="skuInfo">
                      {{item.sku_name}}
                    </view>
                  </view>
                  <view class="desR">
                    <image
                      src="../../static/right.png"
                      mode="aspectFit"
                      style="width: 18rpx;height: 18rpx;"
                    ></image>
                  </view>
61d825263   BigBoss   确认订单修改
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
                </view>
                <view class="priceBox">
                  <view class="price">¥{{item.nowPrice*item.num}}</view>
                  <text class="maxCount">(限购{{maxCount}}副)</text>
                  <view class="counter">
                    <view
                      class="btn"
                      disabled="this.addDisabled"
                      type="default"
                      @tap="counter(index,false,item)"
                    >-</view>
                    <text>{{item.num}}</text>
                    <view
                      class="btn"
                      disabled="this.desDisabled"
                      type="default"
                      @tap="counter(index,true,item)"
                    >+</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </block>
      <view class="footer">
        <view class="footerLeft">实付金额:<text>¥{{totalPrice}}</text></view>
        <view class="footerRight">
2cd0b0f44   范牧   bug修复
96
97
98
99
          <view
            class="paybtn"
            @click="toComfirmOrder"
          >立即结算</view>
61d825263   BigBoss   确认订单修改
100
101
        </view>
      </view>
2cd0b0f44   范牧   bug修复
102
103
104
105
106
107
108
109
110
111
112
113
114
115
      <BottomSheet
        v-if="isShowBottom"
        :isCart="isCart"
        @addCart="addCart"
        :sk_id="sk_id"
        :propMpId="mp_id"
        @chooseCartModi="chooseCartModi"
        :cart_id="cart_id"
        :index="cartIndex"
        :pid="pid"
        :goodInfo="goodInfo"
        :isShowBottom="isShowBottom"
        @closeBottom="closeBottom"
      ></BottomSheet>
61d825263   BigBoss   确认订单修改
116
117
118
119
120
121
    </view>
  </template>
  
  <script>
  
  import store from '@/store'
2cd0b0f44   范牧   bug修复
122
123
124
125
126
  import BottomSheet from '../../components/BottomSheet/BottomSheet.vue'
  export default {
    components: {
      BottomSheet,
    },
61d825263   BigBoss   确认订单修改
127
128
    data() {
      return {
2cd0b0f44   范牧   bug修复
129
130
131
132
133
134
135
136
137
        pid: Number,
        isCart: Number,
        sk_id: String,
        mp_id: String,
        isShowBottom: false,	// 底部弹窗开关
        cart_id: Number,
        maxCount: 20,
        cartIndex: Number,
        cartList: [],
61d825263   BigBoss   确认订单修改
138
139
140
      }
    },
    computed: {
2cd0b0f44   范牧   bug修复
141
142
143
144
145
146
147
      pIsoPen () {
        if (this.cartList.length > 0) {
          return !this.cartList.find(item => !item.isChecked)
        }
        return false
      },
      goodInfo () {
61d825263   BigBoss   确认订单修改
148
  	  return this.$store.state.read.goodInfo
2cd0b0f44   范牧   bug修复
149
150
151
152
153
154
      },
      totalPrice() {
        let totalPrice = 0
        this.cartList.forEach((item) => {
  			 if (item.isChecked) {
            totalPrice += item.nowPrice * item.num
1dbb125ac   吉鹏   购物车bug修改重构
155
  			 }
2cd0b0f44   范牧   bug修复
156
157
158
159
        })
        return totalPrice
      },
    },
61d825263   BigBoss   确认订单修改
160
    onShow() {
61d825263   BigBoss   确认订单修改
161
162
      await this.$store.dispatch('cart/getCartList', {
        uid: this.$store.state.user.userInfo.uid, // 用户id
1dbb125ac   吉鹏   购物车bug修改重构
163
      })
2cd0b0f44   范牧   bug修复
164
165
166
  
      this.cartList = this.$store.state.cart.cartList
      this.cartList.forEach((item) => {
1dbb125ac   吉鹏   购物车bug修改重构
167
  		 item.isChecked = false
2cd0b0f44   范牧   bug修复
168
      })
61d825263   BigBoss   确认订单修改
169
    },
bd002a8ec   范牧   购物车跳转刷新问题
170
171
    onLoad: async function() {
    },
61d825263   BigBoss   确认订单修改
172
    methods: {
2cd0b0f44   范牧   bug修复
173
174
175
176
177
  	  // 全选按钮
  	  pClick() {
  		  const pStatus = !this.cartList.find(item => !item.isChecked)
  		  const oldList = this.cartList
  		  oldList.forEach((item, index) => {
1dbb125ac   吉鹏   购物车bug修改重构
178
  		  	 item.isChecked = !pStatus
2cd0b0f44   范牧   bug修复
179
  			  this.cartList.splice(index, 1, item)
1dbb125ac   吉鹏   购物车bug修改重构
180
  		  })
61d825263   BigBoss   确认订单修改
181
  	  },
2cd0b0f44   范牧   bug修复
182
183
  	  // 单选按钮
  	  childClick(type, index) {
1dbb125ac   吉鹏   购物车bug修改重构
184
  		  this.cartList[index].isChecked = !this.cartList[index].isChecked
2cd0b0f44   范牧   bug修复
185
186
  		  // vue没有办法监听数组内部值的变化,所以需要通过这个方法去触发
  		  this.cartList.splice(index, 1, this.cartList[index])
61d825263   BigBoss   确认订单修改
187
  	  },
2cd0b0f44   范牧   bug修复
188
189
  	  // 修改购物车
  	  chooseCartModi(mp_id, sk_id, price, pid, num, cart_id, index) {
61d825263   BigBoss   确认订单修改
190
191
192
193
194
195
196
197
198
199
  		  // console.log('modi',mp_id,sk_id,price,pid,num,cart_id)
  		  store.dispatch('cart/modiCart', {
  		    uid: this.$store.state.user.userInfo.uid,
  		    openid: this.$store.state.user.userInfo.openid,
  		    mp_id: mp_id,
  		    sk_id: sk_id,
  		    price: price,
  		    pid: pid,
  		    num: num,
  		    cart_id: cart_id,
2cd0b0f44   范牧   bug修复
200
          args: {
61d825263   BigBoss   确认订单修改
201
  			  index: index,
2cd0b0f44   范牧   bug修复
202
203
204
205
206
207
208
209
          },
  		  })
  		  this.$nextTick(function() {
  		  	store.dispatch('cart/getCartList', {
  		  		 uid: this.$store.state.user.userInfo.uid, // 用户id
  		  	}).then(() => {
            this.cartList = this.$store.state.cart.cartList
          })
61d825263   BigBoss   确认订单修改
210
  		  })
61d825263   BigBoss   确认订单修改
211
  	  },
2cd0b0f44   范牧   bug修复
212
213
  	  // 底部弹窗开关
  	  showBottom(isCart, pid, skId, mp_id, cart_id, index) {
61d825263   BigBoss   确认订单修改
214
  		  store.dispatch('read/fetch', {
2cd0b0f44   范牧   bug修复
215
216
217
          pid,
          sk_id: skId,
  		  }).then(() => {
61d825263   BigBoss   确认订单修改
218
  			  this.cartIndex = index
2cd0b0f44   范牧   bug修复
219
220
221
222
223
224
  			  this.sk_id = skId
  			  this.pid = pid
  			  this.mp_id = mp_id
  			  this.isCart = isCart
  			  this.cart_id = cart_id
  			  this.isShowBottom = true
61d825263   BigBoss   确认订单修改
225
226
  		  })
  	  },
2cd0b0f44   范牧   bug修复
227
228
  	  closeBottom() {
  	  	this.isShowBottom = false
61d825263   BigBoss   确认订单修改
229
  	  },
2cd0b0f44   范牧   bug修复
230
      toGoods(id, skId) {
61d825263   BigBoss   确认订单修改
231
        uni.navigateTo({
2cd0b0f44   范牧   bug修复
232
          url: '../details/details?pid=' + id + '&sk_id=' + skId,
61d825263   BigBoss   确认订单修改
233
234
235
236
237
          success: res => {},
          fail: () => {},
          complete: () => {},
        })
      },
2cd0b0f44   范牧   bug修复
238
239
240
241
242
243
244
245
246
247
248
249
250
      toComfirmOrder() {
        this.$store.state.cart.checkedCartLst = this.cartList.filter(item => item.isChecked)
        if (this.$store.state.cart.checkedCartLst.length > 0) {
          uni.navigateTo({
            url: '../confirmOrder/confirmOrder?isCart=true',
          })
        } else {
          uni.showToast({
            title: '您还没有选择宝贝哦~',
            icon: 'none',
          })
        }
      },
61d825263   BigBoss   确认订单修改
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
      counter(index, isadd, item) {
        // console.log('item=====>', item)
        // console.log('num=====>', item.num)
        const nums = parseInt(item.num)
        if (isadd) {
          if (nums >= this.maxCount) {
            this.addDisabled = true
          } else {
            this.addDisabled = true
            store.dispatch('cart/modiCart', {
              uid: this.$store.state.user.userInfo.uid,
              openid: this.$store.state.user.userInfo.openid,
              mp_id: item.mp_id,
              sk_id: item.sk_id,
              price: item.nowPrice,
              pid: item.pid,
              num: nums + 1,
              cart_id: item.cart_id,
              args: {
                index: index,
                isadd: isadd,
              },
            })
            this.addDisabled = false
          }
        } else {
          if (nums <= 1) {
            this.desDisabled = true
          } else {
            this.desDisabled = false
2cd0b0f44   范牧   bug修复
281

61d825263   BigBoss   确认订单修改
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
            store.dispatch('cart/modiCart', {
              uid: this.$store.state.user.userInfo.uid,
              openid: this.$store.state.user.userInfo.openid,
              mp_id: item.mp_id,
              sk_id: item.sk_id,
              price: item.nowPrice,
              pid: item.pid,
              num: nums - 1,
              cart_id: item.cart_id,
              args: {
                index: index,
                isadd: isadd,
              },
            })
            this.desDisabled = true
          }
        }
61d825263   BigBoss   确认订单修改
299
300
301
302
303
304
      },
      delCart(cart_id, index) {
        cart_id = parseInt(cart_id)
  	  uni.showModal({
  	    title: '是否删除该商品',
  	    success: function (res) {
2cd0b0f44   范牧   bug修复
305
  	      if (res.confirm) {
61d825263   BigBoss   确认订单修改
306
307
308
309
310
311
312
313
  	        store.dispatch('cart/delCart', {
  	          uid: this.$store.state.user.userInfo.uid,
  	          openid: this.$store.state.user.userInfo.openid,
  	          cart_id: cart_id, // 要修改的购物车id
  	          arg: index, // 由于action 传参是能接收两参数,因此将index放入对象
  	        })
  	      }
  	    }.bind(this),
2cd0b0f44   范牧   bug修复
314
  	  })
61d825263   BigBoss   确认订单修改
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
  	  // this.cartList.splice(index,1)
      },
    },
  }
  </script>
  
  <style lang="scss">
  .content {
    min-height: 100vh;
    background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
  
    .partentCheck {
      width: 16px;
      height: 16px;
      border-radius: 22px;
      border: 1px solid #cfcfcf;
      background-color: #ffffff;
      margin: 24rpx 12rpx 24rpx 24rpx;
    }
    .partentChecked {
      width: 18px;
      height: 18px;
      border-radius: 22px;
      background-color: #ff6b4a;
      margin: 24rpx 12rpx 24rpx 24rpx;
      .correct {
        display: inline-block;
        position: relative;
        width: 10rpx;
        height: 2rpx;
        background: #ffffff;
        line-height: 0;
        font-size: 0;
        position: relative;
        top: -7px;
        left: 4px;
        -webkit-transform: rotate(45deg);
      }
      .correct:after {
        content: "/";
        display: block;
        width: 16rpx;
        height: 2rpx;
        background: #ffffff;
        -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
      }
    }
  
    .card {
      background-color: #ffffff;
      border-radius: 16rpx;
      box-sizing: border-box;
      padding: 36rpx 36rpx 36rpx 18rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 180rpx;
      .cardHeader {
        width: 100%;
        height: 36rpx;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 20rpx;
        image {
          height: 32rpx;
          width: 32rpx;
          padding-left: 6px;
          padding-right: 10px;
        }
        text {
          // font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #333333;
          letter-spacing: -0.26px;
        }
      }
      .cardBody {
        width: 100%;
        min-height: 300rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .goodInfo {
          width: 390rpx;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          padding-left: 6px;
  
          .imageWrap {
            height: 188rpx;
            width: 188rpx;
            margin-right: 28rpx;
  
            image {
              border-radius: 4px;
              height: 188rpx;
              width: 188rpx;
            }
          }
          .infoRight {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            min-height: 240rpx;
2cd0b0f44   范牧   bug修复
429
            width: 100%;
61d825263   BigBoss   确认订单修改
430
431
432
433
434
435
436
437
438
439
440
441
            .goodName {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              text-align: justify;
              overflow: hidden;
              font-size: 28rpx;
              color: #333333;
            }
            .describ {
              width: 100%;
              min-height: 80rpx;
2cd0b0f44   范牧   bug修复
442
443
              background: #f9f9f9;
              border-radius: 2px;
61d825263   BigBoss   确认订单修改
444
445
446
447
448
              box-sizing: border-box;
              padding: 10rpx;
              font-size: 20rpx;
              letter-spacing: -0.23px;
              color: #999999;
2cd0b0f44   范牧   bug修复
449
450
451
452
453
454
455
456
              display: flex;
              justify-content: space-between;
              align-items: center;
              .desL {
                view {
                  margin: 10rpx 0 10rpx 0;
                }
              }
61d825263   BigBoss   确认订单修改
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
            }
            .priceBox {
              display: flex;
              justify-content: space-between;
              align-items: center;
              // margin-top: 26px;
              width: 100%;
              font-size: 14px;
              color: #999999;
              .maxCount {
                color: #999999;
                font-size: 20rpx;
              }
              .price {
                color: #ff6b4a;
                font-size: 28rpx;
              }
              .counter {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                font-size: 28rpx;
                color: #333333;
                width: 122rpx;
                .btn {
                  display: flex;
                  justify-content: center;
                  line-height: 32rpx;
                  height: 32rpx;
                  width: 32rpx;
                  background-color: #f2f2f2;
                  color: #cfcfcf;
                }
              }
            }
          }
        }
      }
    }
    .footer {
      position: fixed;
      left: 0;
      bottom: 0px;
      height: 112rpx;
      width: 100%;
      background-color: #ffffff;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .footerLeft {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        color: #333333;
        text {
          color: #ff6b4a;
        }
      }
      .footerRight {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 50%;
        margin-right: 26rpx;
        .paybtn {
          display: flex;
          justify-content: center;
          align-items: center;
          background: #ff6b4a;
          border-radius: 20px;
          border-radius: 20px;
          color: #ffffff;
          width: 204rpx;
          height: 80rpx;
        }
      }
    }
  }
  /* 隐藏滚动条 */
2cd0b0f44   范牧   bug修复
539
540
541
542
543
544
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }
  </style>