Commit 0bda9efecb78d2453ed3aed490be6f1eda6a2665
1 parent
ba260b3f99
Exists in
master
购物车功能修改
Showing
4 changed files
with
105 additions
and
116 deletions
Show diff stats
src/pages/cart/cart.vue
| ... | ... | @@ -46,28 +46,14 @@ |
| 46 | 46 | class="goodName" |
| 47 | 47 | @tap="toGoods(item.pid,item.sk_id)" |
| 48 | 48 | >{{item.p_name}}</view> |
| 49 | - <!-- <view class="describ"> --> | |
| 50 | - <uni-collapse accordion="true" style="justify-content: space-around;width: 196px;"> | |
| 51 | - <uni-collapse-item | |
| 52 | - showAnimation='true' | |
| 53 | - :title="item.tag.prod_tag_fun[0].label&&item.tag.prod_tag_fun[1].label?item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'...':'暂无数据'"> | |
| 54 | - <text class="describ"> | |
| 55 | - <block | |
| 56 | - v-for="tag in item.tag.prod_tag_fun" | |
| 57 | - :key="tag.value" | |
| 58 | - > | |
| 59 | - {{tag.label+` `}} | |
| 60 | - </block> | |
| 61 | - </text> | |
| 62 | - <!-- <text> | |
| 63 | - <block v-for="tag in item.tag.prod_tag_style" :key="tag.value"> | |
| 64 | - {{tag.label+` `}} | |
| 65 | - </block> | |
| 66 | - </text> --> | |
| 67 | - </uni-collapse-item> | |
| 68 | - </uni-collapse> | |
| 69 | - <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> --> | |
| 70 | - <!-- </view> --> | |
| 49 | + <view class="describ"> | |
| 50 | + <view class="people"> | |
| 51 | + 使用人:{{item.peopleName}} | |
| 52 | + </view> | |
| 53 | + <view class="skuInfo"> | |
| 54 | + {{item.sku_name}} | |
| 55 | + </view> | |
| 56 | + </view> | |
| 71 | 57 | <view class="priceBox"> |
| 72 | 58 | <view class="price">￥{{item.nowPrice*item.num}}</view> |
| 73 | 59 | <text class="maxCount">(限购{{maxCount}}副)</text> |
| ... | ... | @@ -95,12 +81,7 @@ |
| 95 | 81 | <view class="footer"> |
| 96 | 82 | <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> |
| 97 | 83 | <view class="footerRight"> |
| 98 | - <navigator | |
| 99 | - url="/pages/confirmOrder/confirmOrder" | |
| 100 | - hover-class="navigator-hover" | |
| 101 | - > | |
| 102 | - <view class="paybtn">立即结算</view> | |
| 103 | - </navigator> | |
| 84 | + <view class="paybtn" @click="toComfirmOrder">立即结算</view> | |
| 104 | 85 | </view> |
| 105 | 86 | </view> |
| 106 | 87 | |
| ... | ... | @@ -108,12 +89,10 @@ |
| 108 | 89 | </template> |
| 109 | 90 | |
| 110 | 91 | <script> |
| 111 | -import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' | |
| 112 | -import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' | |
| 92 | + | |
| 113 | 93 | import store from '@/store' |
| 114 | 94 | |
| 115 | 95 | export default { |
| 116 | - components: { UniCollapse, UniCollapseItem }, | |
| 117 | 96 | data() { |
| 118 | 97 | return { |
| 119 | 98 | totalPrice: 0, |
| ... | ... | @@ -123,10 +102,12 @@ export default { |
| 123 | 102 | } |
| 124 | 103 | }, |
| 125 | 104 | computed: { |
| 126 | - | |
| 105 | + // skInfo(){ | |
| 106 | + // return filters() | |
| 107 | + // } | |
| 127 | 108 | cartList() { |
| 128 | 109 | // console.log('cart-list', this.$store.state.cart.cartList); |
| 129 | - this.totalPrice=0 | |
| 110 | + // this.totalPrice=0 | |
| 130 | 111 | return this.$store.state.cart.cartList |
| 131 | 112 | }, |
| 132 | 113 | childIsOpen() { |
| ... | ... | @@ -165,6 +146,14 @@ export default { |
| 165 | 146 | complete: () => {}, |
| 166 | 147 | }) |
| 167 | 148 | }, |
| 149 | + toComfirmOrder(){ | |
| 150 | + uni.navigateTo({ | |
| 151 | + url:`../confirmOrder/confirmOrder`, | |
| 152 | + fail(res) { | |
| 153 | + console.log(res) | |
| 154 | + } | |
| 155 | + }) | |
| 156 | + }, | |
| 168 | 157 | counter(index, isadd, item) { |
| 169 | 158 | // console.log('===>>counter ===>num',num) |
| 170 | 159 | // console.log('===>>counter ===>isadd',isadd) |
| ... | ... | @@ -410,49 +399,16 @@ export default { |
| 410 | 399 | } |
| 411 | 400 | .describ { |
| 412 | 401 | width: 100%; |
| 413 | - // min-height: 80rpx; | |
| 402 | + min-height: 80rpx; | |
| 414 | 403 | // box-sizing: border-box; |
| 415 | 404 | // padding: 10rpx; |
| 416 | 405 | font-size: 20rpx; |
| 417 | 406 | letter-spacing: -0.23px; |
| 418 | 407 | text-align: justify; |
| 419 | 408 | color: #999999; |
| 420 | - // background: #F9F9F9; | |
| 421 | - // display: flex; | |
| 422 | - // justify-content: center; | |
| 423 | - // align-items: center; | |
| 424 | - // text{ | |
| 425 | - // text-overflow: -o-ellipsis-lastline; | |
| 426 | - // overflow: hidden; | |
| 427 | - // text-overflow: ellipsis; | |
| 428 | - // display: -webkit-box; | |
| 429 | - // -webkit-line-clamp: 2; | |
| 430 | - // line-clamp: 2; | |
| 431 | - // -webkit-box-orient: vertical; | |
| 432 | - // } | |
| 433 | - // .icon { | |
| 434 | - // width: 0; | |
| 435 | - // height: 0; | |
| 436 | - // border-left: 5px transparent; | |
| 437 | - // border-right: 5px transparent; | |
| 438 | - // border-top: 5px #979797; | |
| 439 | - // border-bottom: 0 transparent; | |
| 440 | - // border-style: solid; | |
| 441 | - // position: relative; | |
| 442 | - // margin-left: 10px; | |
| 443 | - // // transform: scaleY(-1); | |
| 444 | - // } | |
| 445 | - // .icon::after{ | |
| 446 | - // content: ''; | |
| 447 | - // position: absolute; | |
| 448 | - // top: -6.5px; | |
| 449 | - // left: -5px; | |
| 450 | - // border-left: 5px transparent; | |
| 451 | - // border-right: 5px transparent; | |
| 452 | - // border-top: 5px #FFFFFF; | |
| 453 | - // border-bottom: 0 transparent; | |
| 454 | - // border-style: solid; | |
| 455 | - // } | |
| 409 | + view{ | |
| 410 | + margin: 10rpx 0 10rpx 0 ; | |
| 411 | + } | |
| 456 | 412 | } |
| 457 | 413 | .priceBox { |
| 458 | 414 | display: flex; | ... | ... |
src/pages/frameDetail/components/BottomSheet.vue
| ... | ... | @@ -241,7 +241,15 @@ |
| 241 | 241 | </view> |
| 242 | 242 | <view |
| 243 | 243 | class="button" |
| 244 | + @click.native="addCart" | |
| 245 | + v-if="isCart" | |
| 246 | + > | |
| 247 | + 加入购物车 | |
| 248 | + </view> | |
| 249 | + <view | |
| 250 | + class="button" | |
| 244 | 251 | @click="toComfirmOrder" |
| 252 | + v-else | |
| 245 | 253 | > |
| 246 | 254 | 立即结算 |
| 247 | 255 | </view> |
| ... | ... | @@ -262,7 +270,8 @@ import store from '@/store' |
| 262 | 270 | props: { |
| 263 | 271 | isShowBottom : Boolean, |
| 264 | 272 | pid: Number, |
| 265 | - goodInfo:Object | |
| 273 | + goodInfo:Object, | |
| 274 | + isCart:Boolean | |
| 266 | 275 | }, |
| 267 | 276 | data() { |
| 268 | 277 | return { |
| ... | ... | @@ -379,6 +388,26 @@ import store from '@/store' |
| 379 | 388 | }, |
| 380 | 389 | name : "bottomSheet", |
| 381 | 390 | methods: { |
| 391 | + addCart(){ | |
| 392 | + const that = this | |
| 393 | + const checkedSKUName = [that.goodInfo.attrList[0].meta_name,that.goodInfo.attrList[1].meta_name] | |
| 394 | + const checkedSKU = [] | |
| 395 | + let j; | |
| 396 | + for (let i = 0;i<that.current.length;i++) { | |
| 397 | + checkedSKU.push(that.goodInfo.attrList[i].attr[that.current[i]]) | |
| 398 | + // console.log('i', i, j, i !== this.current.length - 1) | |
| 399 | + if (i !== this.current.length - 1) { | |
| 400 | + // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应 | |
| 401 | + j = this.current[i] * this.attrList[1].attr.length | |
| 402 | + } else { | |
| 403 | + j += this.current[i] | |
| 404 | + } | |
| 405 | + } | |
| 406 | + let sk_id = this.skuList[j].sk_id | |
| 407 | + console.log('选择的商品sk_id',sk_id,'选择的商品参数',checkedSKU) | |
| 408 | + this.$emit("addCart",this.mp_id,this.count,checkedSKU,sk_id)//添加购物车 | |
| 409 | + this.$emit("closeBottom")//关闭弹窗 | |
| 410 | + }, | |
| 382 | 411 | onClickLoveItem(index,name){ |
| 383 | 412 | const loveList = this.loveList |
| 384 | 413 | for (let index = 0; index < loveList.length; index++) { | ... | ... |
src/pages/frameDetail/frameDetail.vue
| ... | ... | @@ -317,16 +317,17 @@ |
| 317 | 317 | <view class="botton_2"> |
| 318 | 318 | <view |
| 319 | 319 | class="botton_input" |
| 320 | - @tap="addCart()" | |
| 320 | + @tap="showBottom(true)" | |
| 321 | 321 | >加入购物车</view> |
| 322 | 322 | <view |
| 323 | 323 | class="botton_now" |
| 324 | 324 | |
| 325 | - @click="showBottom()" | |
| 325 | + @click="showBottom(false)" | |
| 326 | 326 | >立即购买</view> |
| 327 | 327 | </view> |
| 328 | 328 | </view> |
| 329 | - <BottomSheet v-if="isShowBottom" :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet> | |
| 329 | + <BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart" | |
| 330 | + :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet> | |
| 330 | 331 | </view> |
| 331 | 332 | </template> |
| 332 | 333 | |
| ... | ... | @@ -339,17 +340,10 @@ export default { |
| 339 | 340 | }, |
| 340 | 341 | data () { |
| 341 | 342 | return { |
| 343 | + isCart:Boolean, | |
| 342 | 344 | isShowBottom : false, //底部弹窗开关 |
| 343 | 345 | test: '', |
| 344 | 346 | goodType: 2, |
| 345 | - pid: 0, | |
| 346 | - // 购物车数据 | |
| 347 | - addCartList: { | |
| 348 | - mp_id: 0, | |
| 349 | - sk_id: 0, | |
| 350 | - num: 1, | |
| 351 | - price: '', | |
| 352 | - }, | |
| 353 | 347 | screenItems: [ |
| 354 | 348 | { current: 0, text: '商品介绍' }, |
| 355 | 349 | { current: 1, text: '规格参数' }, |
| ... | ... | @@ -388,7 +382,20 @@ export default { |
| 388 | 382 | label: '眼镜盒', |
| 389 | 383 | value: '262', |
| 390 | 384 | }], |
| 391 | - }, | |
| 385 | + }, | |
| 386 | + | |
| 387 | + pid: 0, | |
| 388 | + // 购物车数据 | |
| 389 | + addCartList: { | |
| 390 | + uid: Number,//用户的唯一识别码 | |
| 391 | + openid: String, | |
| 392 | + mp_id: Number,//使用人 | |
| 393 | + sk_id: Number,//产品的sku_id | |
| 394 | + num: Number,//购买数量 | |
| 395 | + pid: Number,//产品id | |
| 396 | + price: Number,//价格 | |
| 397 | + checkedSKU:Object//产品信息 | |
| 398 | + }, | |
| 392 | 399 | } |
| 393 | 400 | }, |
| 394 | 401 | onLoad: function ({ pid, sk_id: skId }) { |
| ... | ... | @@ -407,10 +414,11 @@ export default { |
| 407 | 414 | this.tag = this.goodInfo.tag |
| 408 | 415 | this.test = this.goodInfo.prodIntro1 |
| 409 | 416 | this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"') |
| 410 | - // addCart | |
| 417 | + // addCart | |
| 418 | + this.addCartList.uid = this.$store.state.user.userInfo.uid | |
| 419 | + this.addCartList.openid = this.$store.state.user.userInfo.openid | |
| 420 | + this.addCartList.pid = this.goodInfo.pid | |
| 411 | 421 | this.addCartList.price = this.goodInfo.priceArea.Min_Price |
| 412 | - this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id | |
| 413 | - this.addCartList.mp_id = this.goodInfo.glassData.mp_id | |
| 414 | 422 | }) |
| 415 | 423 | store.dispatch('cart/getCartList') |
| 416 | 424 | // console.log(this.$store.state.user.userInfo.uid + 'ssss') |
| ... | ... | @@ -429,7 +437,8 @@ export default { |
| 429 | 437 | }, |
| 430 | 438 | methods: { |
| 431 | 439 | //底部弹窗开关 |
| 432 | - showBottom(){ | |
| 440 | + showBottom(isCart){ | |
| 441 | + this.isCart = isCart; | |
| 433 | 442 | this.isShowBottom = true; |
| 434 | 443 | }, |
| 435 | 444 | closeBottom(){ |
| ... | ... | @@ -445,20 +454,19 @@ export default { |
| 445 | 454 | }) |
| 446 | 455 | }, |
| 447 | 456 | // 加入购物车 |
| 448 | - addCart () { | |
| 449 | - store.dispatch('cart/addCart', { | |
| 450 | - uid: this.$store.state.user.userInfo.uid, | |
| 451 | - openid: this.$store.state.user.userInfo.openid, | |
| 452 | - mp_id: this.addCartList.mp_id, | |
| 453 | - sk_id: this.addCartList.sk_id, | |
| 454 | - num: this.addCartList.num, | |
| 455 | - pid: this.pid, | |
| 456 | - price: this.addCartList.price, | |
| 457 | - }) | |
| 458 | - // 再次请求购物车接口，实现实时更新 | |
| 459 | - store.dispatch('cart/getCartList', { | |
| 460 | - uid: this.$store.state.user.userInfo.uid, | |
| 461 | - }) | |
| 457 | + addCart (mp_id,num,checkedSKU,sk_id) { | |
| 458 | + this.addCartList.mp_id = mp_id | |
| 459 | + this.addCartList.sk_id = sk_id | |
| 460 | + this.addCartList.num = num | |
| 461 | + this.addCartList.checkedSKU = checkedSKU | |
| 462 | + console.log('添加购物车的参数',this.addCartList) | |
| 463 | + store.dispatch('cart/addCart', this.addCartList).then((res)=>{ | |
| 464 | + console.log('*-*-*-*--*-',res) | |
| 465 | + // 再次请求购物车接口，实现实时更新 | |
| 466 | + store.dispatch('cart/getCartList', { | |
| 467 | + uid: this.$store.state.user.userInfo.uid, | |
| 468 | + }) | |
| 469 | + }) | |
| 462 | 470 | }, |
| 463 | 471 | goPerchase () { |
| 464 | 472 | // switch (this.updateGoodType) { | ... | ... |
src/store/modules/cart.js
| ... | ... | @@ -28,21 +28,16 @@ const mutations = { |
| 28 | 28 | |
| 29 | 29 | const actions = { |
| 30 | 30 | // 获取购物车列表 |
| 31 | - getCartList({ commit }, param) { | |
| 32 | - request({ | |
| 31 | + getCartList({ commit }, param) { | |
| 32 | + return new Promise((resolve) => request({ | |
| 33 | 33 | url: cartList, |
| 34 | 34 | data: param, |
| 35 | 35 | success: (res) => { |
| 36 | 36 | console.log('cart===>接口数据', res.data.data) |
| 37 | - commit('INIT', res.data.data) | |
| 37 | + commit('INIT', res.data.data) | |
| 38 | + resolve(res.data.data) | |
| 38 | 39 | }, |
| 39 | - // fail: (res) => { | |
| 40 | - // console.log('fail status === > ', res) | |
| 41 | - // }, | |
| 42 | - // complete: (res) => { | |
| 43 | - // console.log('complete status === > ', res) | |
| 44 | - // }, | |
| 45 | - }) | |
| 40 | + })) | |
| 46 | 41 | }, |
| 47 | 42 | // 修改购物车数量 |
| 48 | 43 | modiCart({ commit }, param) { |
| ... | ... | @@ -87,21 +82,22 @@ const actions = { |
| 87 | 82 | // 添加到购物车 |
| 88 | 83 | addCart({ commit }, param) { |
| 89 | 84 | console.log('请求接口开始') |
| 90 | - request({ | |
| 85 | + return new Promise((resolve) => request({ | |
| 91 | 86 | url: cartAdd, |
| 92 | 87 | data: param, |
| 93 | 88 | success: (res) => { |
| 94 | 89 | console.log('add-parm', param) |
| 95 | 90 | console.log('addcart===>res.data===>', res.data) |
| 96 | - // commit('INIT', res.data.data) | |
| 91 | + // commit('INIT', res.data.data) | |
| 92 | + resolve(res.data) | |
| 97 | 93 | }, |
| 98 | 94 | fail: (res) => { |
| 99 | - console.log('fail status === > ', res) | |
| 95 | + console.log('添加购物车失败 === > ', res) | |
| 100 | 96 | }, |
| 101 | 97 | complete: (res) => { |
| 102 | - console.log('complete status === > ', res) | |
| 98 | + console.log('添加购物车完成 === > ', res) | |
| 103 | 99 | }, |
| 104 | - }) | |
| 100 | + })) | |
| 105 | 101 | }, |
| 106 | 102 | } |
| 107 | 103 | ... | ... |