刘文博 / gulu-vue

Blame view

src/pages/cart/cart.vue 13.9 KB
edit raw normal view history
0db291810   BigBoss   “-mcomfirmOder页面 
1
 
  <template>
a3d2beaa8   范牧   立即支付功能 
2
3
 
    <view class="content">
      <block v-if="cartList.length==0">
7a7226fea   范牧   冲突合并 
4
a3d2beaa8   范牧   立即支付功能 
5
6
7
8
9
10
 
      </block>
      <block v-else>
        <view class="card">
          <view class="cardHeader">
            <view
              v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
93e6a2650   喻鹏   首页懒加载 
11
 
  			@touchstart="pChange(pIsoPen)"
a3d2beaa8   范牧   立即支付功能 
12
13
14
15
16
17
18
19
20
 
            >
              <span class="correct"></span>
            </view>
            <image
              src="../../static/store.png"
              mode="aspectFill"
            ></image>
            <text>非常戴镜</text>
          </view>
a3d2beaa8   范牧   立即支付功能 
21
22
23
 
          <view
            class="cardBody"
            v-for="(item,index) in cartList"
93e6a2650   喻鹏   首页懒加载 
24
 
            :key="index"
a3d2beaa8   范牧   立即支付功能 
25
26
27
28
 
            @longpress="delCart(item.cart_id,index)"
          >
            <view
              v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
93e6a2650   喻鹏   首页懒加载 
29
 
  			@touchstart="Change(childIsOpen[index],index)"
a3d2beaa8   范牧   立即支付功能 
30
31
32
33
34
35
36
37
38
39
40
 
            >
              <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">
55420a8a9   范牧   解决冲突 
41
42
43
 
              <!-- <view class="imageWrap">
                <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
              </view> -->
a3d2beaa8   范牧   立即支付功能 
44
45
46
47
48
 
              <view class="infoRight">
                <view
                  class="goodName"
                  @tap="toGoods(item.pid,item.sk_id)"
                >{{item.p_name}}</view>
0bda9efec   BigBoss   购物车功能修改 
49
50
51
52
53
54
55
56
 
                <view class="describ">
                      <view class="people">
                      	使用人:{{item.peopleName}}
                      </view>
  					<view class="skuInfo">
  						{{item.sku_name}}
  					</view>
                </view>
a3d2beaa8   范牧   立即支付功能 
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
                <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">
0bda9efec   BigBoss   购物车功能修改 
84
 
            <view class="paybtn" @click="toComfirmOrder">立即结算</view>
a3d2beaa8   范牧   立即支付功能 
85
86
 
        </view>
      </view>
7a7226fea   范牧   冲突合并 
87
a3d2beaa8   范牧   立即支付功能 
88
 
    </view>
0db291810   BigBoss   “-mcomfirmOder页面 
89
90
91
 
  </template>
  
  <script>
0bda9efec   BigBoss   购物车功能修改 
92
7a7226fea   范牧   冲突合并 
93
 
  import store from '@/store'
ab4209caf   喻鹏   update 
94
7a7226fea   范牧   冲突合并 
95
 
  export default {
7a7226fea   范牧   冲突合并 
96
97
98
99
100
 
    data() {
      return {
        totalPrice: 0,
        pIsoPen: false,
        // childIsOpen:[],
a3d2beaa8   范牧   立即支付功能 
101
 
        maxCount: 20,
7a7226fea   范牧   冲突合并 
102
103
104
 
      }
    },
    computed: {
0bda9efec   BigBoss   购物车功能修改 
105
106
107
 
  	// skInfo(){
  	// 	return filters()
  	// }
7a7226fea   范牧   冲突合并 
108
 
      cartList() {
b9fb65756   喻鹏   购物车和推荐产品根据sk_id来对应价格 
109
 
        // console.log('cart-list', this.$store.state.cart.cartList);
0bda9efec   BigBoss   购物车功能修改 
110
 
  	  // this.totalPrice=0
637a02b07   尹聃   添加购物车 
111
 
        return this.$store.state.cart.cartList
7a7226fea   范牧   冲突合并 
112
113
114
115
116
117
118
119
120
 
      },
      childIsOpen() {
        const temp = []
        temp.length = this.$store.state.cart.cartList.length
        for (let i = 0; i < temp.length; i++) {
          temp[i] = false
        }
        console.log('this.childisOPne===>', temp)
        return temp
a3d2beaa8   范牧   立即支付功能 
121
 
      },
7a7226fea   范牧   冲突合并 
122
123
 
    },
    onLoad: function() {
55420a8a9   范牧   解决冲突 
124
125
 
      //  store.dispatch('cart/addCart', {
      //    uid: this.$store.state.user.userInfo.uid,
a3d2beaa8   范牧   立即支付功能 
126
127
128
129
130
131
132
 
      // openid: this.$store.state.user.userInfo.openid,
      // mp_id: 7,
      // sk_id: 7,
      // num: 1,
      // pid: 8,
      // price: 128,
      // checkedSKU:{},
55420a8a9   范牧   解决冲突 
133
 
      //  })
7a7226fea   范牧   冲突合并 
134
 
      store.dispatch('cart/getCartList', {
a3d2beaa8   范牧   立即支付功能 
135
 
        uid: this.$store.state.user.userInfo.uid, // 用户id
7a7226fea   范牧   冲突合并 
136
137
 
      })
    },
7a7226fea   范牧   冲突合并 
138
 
    methods: {
b9fb65756   喻鹏   购物车和推荐产品根据sk_id来对应价格 
139
 
      toGoods(id, sk_id) {
55420a8a9   范牧   解决冲突 
140
141
142
143
144
145
146
147
 
        console.log('cart-list', this.$store.state.cart.cartList)
        console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id)
        uni.navigateTo({
          url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,
          success: res => {},
          fail: () => {},
          complete: () => {},
        })
7a7226fea   范牧   冲突合并 
148
 
      },
0bda9efec   BigBoss   购物车功能修改 
149
150
151
152
153
154
155
156
 
  	toComfirmOrder(){
  		uni.navigateTo({
  			url:`../confirmOrder/confirmOrder`,
  			fail(res) {
  				console.log(res)
  			}
  		})
  	},
b83c44fe1   喻鹏   购物车和用户推荐传参 
157
 
      counter(index, isadd, item) {
7a7226fea   范牧   冲突合并 
158
159
 
        // console.log('===>>counter ===>num',num)
        // console.log('===>>counter ===>isadd',isadd)
55420a8a9   范牧   解决冲突 
160
161
 
        console.log('item=====>', item)
        console.log('num=====>', item.num)
a3d2beaa8   范牧   立即支付功能 
162
 
        const nums = parseInt(item.num)
7a7226fea   范牧   冲突合并 
163
 
        if (isadd) {
b83c44fe1   喻鹏   购物车和用户推荐传参 
164
 
          if (nums >= this.maxCount) {
7a7226fea   范牧   冲突合并 
165
166
167
168
 
            this.addDisabled = true
          } else {
            this.addDisabled = true
            // 修改num
55420a8a9   范牧   解决冲突 
169
170
171
 
            if (this.childIsOpen[index]) {
              this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice
            }
7a7226fea   范牧   冲突合并 
172
 
            store.dispatch('cart/modiCart', {
acc7ee230   喻鹏   购物车，用户推荐，新增验光逻辑修改 
173
174
 
              uid: this.$store.state.user.userInfo.uid,
              openid: this.$store.state.user.userInfo.openid,
b83c44fe1   喻鹏   购物车和用户推荐传参 
175
176
 
              mp_id: item.mp_id,
              sk_id: item.sk_id,
a3d2beaa8   范牧   立即支付功能 
177
178
 
              price: item.nowPrice,
              pid: item.pid,
b83c44fe1   喻鹏   购物车和用户推荐传参 
179
 
              num: nums + 1,
a3d2beaa8   范牧   立即支付功能 
180
 
              cart_id: item.cart_id,
7a7226fea   范牧   冲突合并 
181
182
 
              args: {
                index: index,
a3d2beaa8   范牧   立即支付功能 
183
184
 
                isadd: isadd,
              },
7a7226fea   范牧   冲突合并 
185
186
187
188
 
            })
            this.addDisabled = false
          }
        } else {
b83c44fe1   喻鹏   购物车和用户推荐传参 
189
 
          if (nums <= 1) {
7a7226fea   范牧   冲突合并 
190
191
192
193
 
            this.desDisabled = true
          } else {
            this.desDisabled = false
            // post 请求修改相关参数
55420a8a9   范牧   解决冲突 
194
 
            if (this.childIsOpen[index]) {
a3d2beaa8   范牧   立即支付功能 
195
 
              this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice
55420a8a9   范牧   解决冲突 
196
 
            }
7a7226fea   范牧   冲突合并 
197
 
            store.dispatch('cart/modiCart', {
acc7ee230   喻鹏   购物车，用户推荐，新增验光逻辑修改 
198
199
 
              uid: this.$store.state.user.userInfo.uid,
              openid: this.$store.state.user.userInfo.openid,
b83c44fe1   喻鹏   购物车和用户推荐传参 
200
201
 
              mp_id: item.mp_id,
              sk_id: item.sk_id,
a3d2beaa8   范牧   立即支付功能 
202
203
 
              price: item.nowPrice,
              pid: item.pid,
b83c44fe1   喻鹏   购物车和用户推荐传参 
204
 
              num: nums - 1,
a3d2beaa8   范牧   立即支付功能 
205
 
              cart_id: item.cart_id,
7a7226fea   范牧   冲突合并 
206
207
 
              args: {
                index: index,
a3d2beaa8   范牧   立即支付功能 
208
209
 
                isadd: isadd,
              },
7a7226fea   范牧   冲突合并 
210
211
212
213
 
            })
            this.desDisabled = true
          }
        }
55420a8a9   范牧   解决冲突 
214
215
216
 
      // store.dispatch('cart/getCartList', {
      //   uid: this.$store.state.user.userInfo.uid // 用户id
      // })
7a7226fea   范牧   冲突合并 
217
 
      },
7a7226fea   范牧   冲突合并 
218
219
220
221
222
223
224
225
226
227
228
229
 
      Change(isopen, indexC) {
        // console.log('lalla===>',isopen)
        this.childIsOpen[indexC] = !isopen
        if (!isopen) {
          this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
        } else {
          this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
        }
        let m = true
        for (let i = 0; i < this.childIsOpen.length; i++) {
          m = m & this.childIsOpen[i]
        }
42375342f   范牧   解决冲突 
230
 
        if (m === 1) {
7a7226fea   范牧   冲突合并 
231
232
233
234
235
236
237
238
239
240
241
242
 
          this.pIsoPen = true
        } else {
          this.pIsoPen = false
        }
      },
      pChange(isopen) {
        this.pIsoPen = !isopen
        for (let i = 0; i < this.childIsOpen.length; i++) {
          this.childIsOpen[i] = !isopen
        }
        if (this.pIsoPen) {
          // 计算总价逻辑
55420a8a9   范牧   解决冲突 
243
 
          if (this.childIsOpen.length !== 0) {
7a7226fea   范牧   冲突合并 
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
 
            for (let i = 0; i < this.childIsOpen.length; i++) {
              if (this.childIsOpen[i]) {
                this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)
              }
            }
          }
        } else {
          this.totalPrice = 0
        }
      },
      delCart(cart_id, index) {
        // console.log('userInfo',this.$store.state.user.userInfo)
        cart_id = parseInt(cart_id)
        // console.log('delcart------>cart_id',cart_id)
        // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
        // console.log('delcart======>index',index)
93e6a2650   喻鹏   首页懒加载 
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
 
  	  uni.showModal({
  	    title: '是否删除该商品',
  	    // content: '是否删除该商品',
  	    success: function (res) {
  	      if (res.confirm) { 
  			if (this.childIsOpen[index]) {
  			  this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[index].nowPrice*this.$store.state.cart.cartList[index].num)
  			}
  			console.log('index===>',index)
  	        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),
  	  })
a3d2beaa8   范牧   立即支付功能 
278
279
 
      },
    },
7a7226fea   范牧   冲突合并 
280
 
  }
0db291810   BigBoss   “-mcomfirmOder页面 
281
282
 
  </script>
6111092e8   BigBoss   update cart 
283
 
  <style lang="scss">
637a02b07   尹聃   添加购物车 
284
 
  .content {
a3d2beaa8   范牧   立即支付功能 
285
286
287
288
289
290
291
292
 
    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;
66638e4bb   喻鹏   购物车样式和新增验光单样式修改 
293
a3d2beaa8   范牧   立即支付功能 
294
295
296
297
298
299
 
    .partentCheck {
      width: 16px;
      height: 16px;
      border-radius: 22px;
      border: 1px solid #cfcfcf;
      background-color: #ffffff;
93e6a2650   喻鹏   首页懒加载 
300
 
      margin: 24rpx 12rpx 24rpx 24rpx;
a3d2beaa8   范牧   立即支付功能 
301
302
303
304
305
306
 
    }
    .partentChecked {
      width: 18px;
      height: 18px;
      border-radius: 22px;
      background-color: #ff6b4a;
93e6a2650   喻鹏   首页懒加载 
307
 
      margin: 24rpx 12rpx 24rpx 24rpx;
a3d2beaa8   范牧   立即支付功能 
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
 
      .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%);
      }
    }
66638e4bb   喻鹏   购物车样式和新增验光单样式修改 
330
a3d2beaa8   范牧   立即支付功能 
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
 
    .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;
7a7226fea   范牧   冲突合并 
373
a3d2beaa8   范牧   立即支付功能 
374
375
376
377
 
          .imageWrap {
            height: 188rpx;
            width: 188rpx;
            margin-right: 28rpx;
7a7226fea   范牧   冲突合并 
378
a3d2beaa8   范牧   立即支付功能 
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
 
            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;
            .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%;
0bda9efec   BigBoss   购物车功能修改 
402
 
              min-height: 80rpx;
a3d2beaa8   范牧   立即支付功能 
403
404
405
406
407
408
 
              // box-sizing: border-box;
              // padding: 10rpx;
              font-size: 20rpx;
              letter-spacing: -0.23px;
              text-align: justify;
              color: #999999;
0bda9efec   BigBoss   购物车功能修改 
409
410
411
 
  			view{
  				margin: 10rpx 0 10rpx 0 ;
  			}
a3d2beaa8   范牧   立即支付功能 
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
 
            }
            .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: 24rpx;
              }
              .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;
                }
              }
            }
          }
        }
      }
    }
a3d2beaa8   范牧   立即支付功能 
452
453
454
455
456
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
 
    .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;
        }
      }
    }
  }
7a7226fea   范牧   冲突合并 
493
 
  </style>