453530270@qq.com
2 years ago
4 changed files with 1601 additions and 49 deletions
File diff suppressed because it is too large
@ -0,0 +1,174 @@ |
|||
<template> |
|||
<wh-popup :value="value" @input="onChangeValue" border-radius="20" :localdata="goodsInfo" :mode="skuMode" |
|||
:maskCloseAble="true" @open="openSkuPopup" @close="closeSkuPopup" @add-cart="addCart" @buy-now="buyNow" |
|||
buyNowText="立即购买" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import { setCartTotalNum } from '@/core/app' |
|||
import * as CartApi from '@/api/cart' |
|||
// import GoodsSkuPopup from '@/components/goods-sku-popup' |
|||
import WhPopup from '@/components/wh-popup' |
|||
|
|||
export default { |
|||
components: { |
|||
WhPopup |
|||
}, |
|||
model: { |
|||
prop: 'value', |
|||
event: 'input' |
|||
}, |
|||
props: { |
|||
// true 组件显示 false 组件隐藏 |
|||
value: { |
|||
Type: Boolean, |
|||
default: false |
|||
}, |
|||
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买 |
|||
skuMode: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
// 商品详情信息 |
|||
goods: { |
|||
type: Object, |
|||
default: {} |
|||
} |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
goodsInfo: {} |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
const app = this |
|||
const { goods } = app |
|||
app.goodsInfo = { |
|||
_id: goods.goods_id, |
|||
name: goods.goods_name, |
|||
goods_thumb: goods.goods_image, |
|||
sku_list: app.getSkuList(), |
|||
spec_list: app.getSpecList() |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
// 监听组件显示隐藏 |
|||
onChangeValue(val) { |
|||
this.$emit('input', val) |
|||
}, |
|||
|
|||
// 整理商品SKU列表 |
|||
getSkuList() { |
|||
const app = this |
|||
const { goods: { goods_name, goods_image, skuList } } = app |
|||
const skuData = [] |
|||
skuList.forEach(item => { |
|||
skuData.push({ |
|||
_id: item.id, |
|||
goods_sku_id: item.goods_sku_id, |
|||
goods_id: item.goods_id, |
|||
goods_name: goods_name, |
|||
image: item.image_url ? item.image_url : goods_image, |
|||
price: item.goods_price * 100, |
|||
stock: item.stock_num, |
|||
spec_value_ids: item.spec_value_ids, |
|||
sku_name_arr: app.getSkuNameArr(item.spec_value_ids) |
|||
}) |
|||
}) |
|||
return skuData |
|||
}, |
|||
|
|||
// 获取sku记录的规格值列表 |
|||
getSkuNameArr(specValueIds) { |
|||
const app = this |
|||
const defaultData = ['默认'] |
|||
const skuNameArr = [] |
|||
if (specValueIds) { |
|||
specValueIds.forEach((valueId, groupIndex) => { |
|||
const specValueName = app.getSpecValueName(valueId, groupIndex) |
|||
skuNameArr.push(specValueName) |
|||
}) |
|||
} |
|||
return skuNameArr.length ? skuNameArr : defaultData |
|||
}, |
|||
|
|||
// 获取指定的规格值名称 |
|||
getSpecValueName(valueId, groupIndex) { |
|||
const app = this |
|||
const { goods: { specList } } = app |
|||
const res = specList[groupIndex].valueList.find(specValue => { |
|||
return specValue.spec_value_id == valueId |
|||
}) |
|||
return res.spec_value |
|||
}, |
|||
|
|||
// 整理规格数据 |
|||
getSpecList() { |
|||
const { goods: { specList } } = this |
|||
const defaultData = [{ name: '默认', list: [{ name: '默认' }] }] |
|||
const specData = [] |
|||
specList.forEach(group => { |
|||
const children = [] |
|||
group.valueList.forEach(specValue => { |
|||
children.push({ name: specValue.spec_value }) |
|||
}) |
|||
specData.push({ |
|||
name: group.spec_name, |
|||
list: children |
|||
}) |
|||
}) |
|||
return specData.length ? specData : defaultData |
|||
}, |
|||
|
|||
// sku组件 开始----------------------------------------------------------- |
|||
openSkuPopup() { |
|||
// console.log("监听 - 打开sku组件") |
|||
}, |
|||
|
|||
closeSkuPopup() { |
|||
// console.log("监听 - 关闭sku组件") |
|||
}, |
|||
|
|||
// 加入购物车按钮 |
|||
addCart(selectShop) { |
|||
const app = this |
|||
const { goods_id, goods_sku_id, buy_num } = selectShop |
|||
CartApi.add(goods_id, goods_sku_id, buy_num) |
|||
.then(result => { |
|||
// 显示成功 |
|||
app.$toast(result.message) |
|||
// 隐藏当前弹窗 |
|||
app.onChangeValue(false) |
|||
// 购物车商品总数量 |
|||
const cartTotal = result.data.cartTotal |
|||
// 缓存购物车数量 |
|||
setCartTotalNum(cartTotal) |
|||
// 传递给父级 |
|||
app.$emit('addCart', cartTotal) |
|||
}) |
|||
}, |
|||
|
|||
// 立即购买 |
|||
buyNow(selectShop) { |
|||
// 跳转到订单结算页 |
|||
this.$navTo('pages/checkout/index', { |
|||
mode: 'buyNow', |
|||
goodsId: selectShop.goods_id, |
|||
goodsSkuId: selectShop.goods_sku_id, |
|||
goodsNum: selectShop.buy_num |
|||
}) |
|||
// 隐藏当前弹窗 |
|||
this.onChangeValue(false) |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue