Commit 88c0598d36fb0cb00ec272b1343eea3ef4aaca86
1 parent
bf61c5f4b1
Exists in
master
详情页参数选择修改
Showing
3 changed files
with
77 additions
and
23 deletions
Show diff stats
src/components/CommodityCard/CommodityCard.vue
| ... | ... | @@ -3,11 +3,13 @@ |
| 3 | 3 | class="card" |
| 4 | 4 | @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)" |
| 5 | 5 | > |
| 6 | - <easy-loadimage mode="widthFix" | |
| 7 | - :scroll-top="scrollTop" | |
| 8 | - :image-src="goods.imgurl?goods.imgurl:goods.pic" | |
| 9 | - :viewHeight="viewHeight"></easy-loadimage> | |
| 10 | -<!-- <image | |
| 6 | + <easy-loadimage | |
| 7 | + mode="widthFix" | |
| 8 | + :scroll-top="scrollTop" | |
| 9 | + :image-src="goods.imgurl?goods.imgurl:goods.pic" | |
| 10 | + :viewHeight="viewHeight" | |
| 11 | + ></easy-loadimage> | |
| 12 | + <!-- <image | |
| 11 | 13 | mode="widthFix" |
| 12 | 14 | :src="goods.imgurl?goods.imgurl:goods.pic" |
| 13 | 15 | ></image> --> |
| ... | ... | @@ -29,7 +31,7 @@ |
| 29 | 31 | import easyLoadimage from '@/components/EasyLoadimage/EasyLoadimage.vue' |
| 30 | 32 | // const MockData = require('@/static/easy-loadimage/mock-data.json') |
| 31 | 33 | export default { |
| 32 | - components:{easyLoadimage}, | |
| 34 | + components: { easyLoadimage }, | |
| 33 | 35 | props: { |
| 34 | 36 | /** |
| 35 | 37 | * 商品数据 |
| ... | ... | @@ -44,22 +46,22 @@ export default { |
| 44 | 46 | trade_num: String, |
| 45 | 47 | goodType: String, |
| 46 | 48 | }, |
| 47 | - scrollTop:Number, | |
| 48 | - viewHeight:Number, | |
| 49 | + scrollTop: Number, | |
| 50 | + viewHeight: Number, | |
| 49 | 51 | }, |
| 50 | 52 | created () { |
| 51 | 53 | }, |
| 52 | 54 | data () { |
| 53 | 55 | return { |
| 54 | - | |
| 56 | + | |
| 55 | 57 | } |
| 56 | 58 | }, |
| 57 | 59 | |
| 58 | 60 | methods: { |
| 59 | 61 | toGoods (id, skId) { |
| 60 | - console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId) | |
| 62 | + console.log('---', '../details/details?pid=' + id + '&sk_id=' + skId) | |
| 61 | 63 | uni.navigateTo({ |
| 62 | - url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId, | |
| 64 | + url: '../details/details?pid=' + id + '&sk_id=' + skId, | |
| 63 | 65 | success: res => {}, |
| 64 | 66 | fail: () => {}, |
| 65 | 67 | complete: () => {}, |
| ... | ... | @@ -70,7 +72,6 @@ export default { |
| 70 | 72 | </script> |
| 71 | 73 | |
| 72 | 74 | <style lang="scss"> |
| 73 | - | |
| 74 | 75 | image { |
| 75 | 76 | width: 100%; |
| 76 | 77 | height: 120rpx; | ... | ... |
src/pages/details/details.vue
| ... | ... | @@ -168,14 +168,16 @@ |
| 168 | 168 | </view> |
| 169 | 169 | </view> |
| 170 | 170 | <!-- 参数选择 --> |
| 171 | - <!-- <BottomSheet | |
| 172 | - :isCart="isCart" | |
| 173 | - @addCart="addCart" | |
| 174 | - :pid="pid" | |
| 175 | - :goodInfo="goodInfo" | |
| 176 | - :isShowBottom="isShowBottom" | |
| 177 | - @closeBottom="closeBottom" | |
| 178 | - ></BottomSheet> --> | |
| 171 | + <template v-if="isShowBottom"> | |
| 172 | + <BottomSheet | |
| 173 | + :isCart="isCart" | |
| 174 | + @addCart="addCart" | |
| 175 | + :pid="pid" | |
| 176 | + :goodInfo="goodInfo" | |
| 177 | + :isShowBottom="isShowBottom" | |
| 178 | + @closeBottom="closeBottom" | |
| 179 | + ></BottomSheet> | |
| 180 | + </template> | |
| 179 | 181 | <!-- 分享 --> |
| 180 | 182 | <template> |
| 181 | 183 | <uni-popup |
| ... | ... | @@ -203,13 +205,13 @@ import Introduce from './components/Introduce' // 商品介绍基本信息组件 |
| 203 | 205 | import AfterSails from './components/AfterSails' // 售后保障组件 |
| 204 | 206 | import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue' // 分享组件 |
| 205 | 207 | import uniPopupPost from '@/components/uni-popup/uni-popup-post.vue' // 分享组件 |
| 206 | -// import BottomSheet from '@/components/BottomSheet/BottomSheet.vue' // 参数选择组件 | |
| 208 | +import BottomSheet from '@/components/BottomSheet/BottomSheet.vue' // 参数选择组件 | |
| 207 | 209 | |
| 208 | 210 | export default { |
| 209 | 211 | components: { |
| 210 | 212 | Introduce, |
| 211 | 213 | AfterSails, |
| 212 | - // BottomSheet, | |
| 214 | + BottomSheet, | |
| 213 | 215 | uniPopupShare, |
| 214 | 216 | uniPopupPost, |
| 215 | 217 | }, |
| ... | ... | @@ -225,6 +227,8 @@ export default { |
| 225 | 227 | '售后保障', |
| 226 | 228 | ], |
| 227 | 229 | showPostImg: false, // 是否展示分享海报 |
| 230 | + isShowBottom: false, // 是否展示参数选择 | |
| 231 | + isCart: 1, // 参数选择 按钮判断 | |
| 228 | 232 | } |
| 229 | 233 | }, |
| 230 | 234 | onLoad({ pid = this.pid, sk_id: skId }) { |
| ... | ... | @@ -239,6 +243,10 @@ export default { |
| 239 | 243 | }, |
| 240 | 244 | computed: { |
| 241 | 245 | // 获取轮播图数据 |
| 246 | + goodInfo() { | |
| 247 | + return this.$store.state.details.goodInfo | |
| 248 | + }, | |
| 249 | + // 获取轮播图数据 | |
| 242 | 250 | carousel() { |
| 243 | 251 | return this.$store.state.details.carousel |
| 244 | 252 | }, |
| ... | ... | @@ -282,6 +290,10 @@ export default { |
| 282 | 290 | pid, |
| 283 | 291 | sk_id: skId, |
| 284 | 292 | }) |
| 293 | + store.dispatch('read/fetch', { | |
| 294 | + pid, | |
| 295 | + sk_id: skId, | |
| 296 | + }) | |
| 285 | 297 | }, |
| 286 | 298 | // 获取购物车数目 |
| 287 | 299 | getCartNum() { |
| ... | ... | @@ -390,6 +402,43 @@ export default { |
| 390 | 402 | this.$refs.uniPopupPost.open() |
| 391 | 403 | }) |
| 392 | 404 | }, |
| 405 | + // 参数选择弹窗开关 | |
| 406 | + showBottom(isCart) { | |
| 407 | + this.isCart = isCart | |
| 408 | + this.isShowBottom = true | |
| 409 | + }, | |
| 410 | + closeBottom() { | |
| 411 | + this.isShowBottom = false | |
| 412 | + }, | |
| 413 | + // 前往购物车 | |
| 414 | + toCart() { | |
| 415 | + uni.switchTab({ | |
| 416 | + url: '/pages/cart/cart', | |
| 417 | + success: res => {}, | |
| 418 | + fail: (error) => { console.log('跳转购物车失败======>', error) }, | |
| 419 | + complete: () => { console.log('toCart') }, | |
| 420 | + }) | |
| 421 | + }, | |
| 422 | + // 加入购物车 | |
| 423 | + addCart (mpId, num, checkedSKU, skId) { | |
| 424 | + this.addCartList.mp_id = mpId | |
| 425 | + this.addCartList.sk_id = skId | |
| 426 | + this.addCartList.num = num | |
| 427 | + this.addCartList.checkedSKU = checkedSKU | |
| 428 | + console.log('添加购物车的参数', this.addCartList) | |
| 429 | + store.dispatch('cart/addCart', this.addCartList).then((res) => { | |
| 430 | + if (res.code === 1) { | |
| 431 | + uni.showToast({ | |
| 432 | + title: '添加成功~', | |
| 433 | + icon: 'success', | |
| 434 | + }) | |
| 435 | + } | |
| 436 | + // 再次请求购物车接口，实现实时更新 | |
| 437 | + store.dispatch('cart/getCartList', { | |
| 438 | + uid: this.$store.state.user.userInfo.uid, | |
| 439 | + }) | |
| 440 | + }) | |
| 441 | + }, | |
| 393 | 442 | }, |
| 394 | 443 | } |
| 395 | 444 | </script> | ... | ... |
src/store/modules/details.js
| ... | ... | @@ -8,6 +8,8 @@ const { |
| 8 | 8 | } = urlAlias |
| 9 | 9 | |
| 10 | 10 | const state = { |
| 11 | + // 为配合参数选择框 | |
| 12 | + goodInfo: {}, | |
| 11 | 13 | // 轮播图 |
| 12 | 14 | carousel: [ |
| 13 | 15 | '/static/img/detail/d9.png', |
| ... | ... | @@ -51,7 +53,8 @@ const state = { |
| 51 | 53 | } |
| 52 | 54 | |
| 53 | 55 | const mutations = { |
| 54 | - INIT: (state, { carousel, goodsInfo, tag, specification, evaluate, more, skuList }) => { | |
| 56 | + INIT: (state, { goodInfo, carousel, goodsInfo, tag, specification, evaluate, more, skuList }) => { | |
| 57 | + state.goodInfo = goodInfo | |
| 55 | 58 | state.carousel = carousel |
| 56 | 59 | state.goodsInfo = goodsInfo |
| 57 | 60 | state.tag = tag |
| ... | ... | @@ -95,6 +98,7 @@ const actions = { |
| 95 | 98 | } |
| 96 | 99 | |
| 97 | 100 | commit('INIT', { |
| 101 | + goodInfo: data, | |
| 98 | 102 | skuList: data.skuList, |
| 99 | 103 | carousel: data.pics, |
| 100 | 104 | goodsInfo: { | ... | ... |