You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

204 lines
5.4 KiB
Vue

<template>
<goods-sku-popup :value="value" @input="onChangeValue" border-radius="20" :custom-action="findGoodsInfo"
:mode="skuMode" :defaultPrice="goods.price" :defaultStock="goods.stock" :maskCloseAble="true"
@open="openSkuPopup" @close="closeSkuPopup" @add-cart="addCart" @buy-now="buyNow" />
</template>
<script>
import { setCartTotalNum } from '@/utils/app'
import * as CartApi from '@/api/cart'
import * as GoodsApi from '@/api/goods'
import GoodsSkuPopup from '@/components/goods-sku-popup'
let goodsInfo;
export default {
components: {
GoodsSkuPopup
},
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 {}
},
created() {
const app = this
const { goods } = app
goodsInfo = {
_id: goods.goodsId,
name: goods.name,
goods_thumb: goods.logo,
sku_list: app.getSkuList(),
spec_list: app.getSpecList()
}
},
methods: {
// 监听组件显示隐藏
onChangeValue(val) {
this.$emit('input', val)
},
/**
* 获取商品信息
* 这里可以看到每次打开SKU都会去重新请求商品信息,为的是每次打开SKU组件可以实时看到剩余库存
*/
findGoodsInfo() {
return new Promise((resolve, reject) => {
resolve(goodsInfo)
})
},
// 整理商品SKU列表
getSkuList() {
const app = this
const { goods: { name, logo, skuList } } = app
const skuData = []
if (skuList) {
skuList.forEach(item => {
skuData.push({
_id: item.id,
sku_id: item.skuId,
goods_id: item.goodsId,
name: name,
image: item.logo ? item.logo : logo,
price: item.price,
stock: item.stock,
spec_value_ids: item.specIds,
sku_name_arr: app.getSkuNameArr(item.specIds)
})
})
}
return skuData
},
// 获取sku记录的规格值列表
getSkuNameArr(specValueIds) {
const app = this
const defaultData = ['默认']
const skuNameArr = []
if (specValueIds != "" && specValueIds.length > 0) {
specValueIds.forEach((valueId, specId) => {
const specValueName = app.getSpecValueName(valueId, specId)
skuNameArr.push(specValueName)
})
}
const result = skuNameArr.length ? skuNameArr : defaultData
return result
},
// 获取指定的规格值名称
getSpecValueName(valueId, specId) {
const app = this
const { goods: { specList } } = app
if (specList.length > 0) {
const res = specList[specId].valueList.find(specValue => {
return specValue.specValueId == valueId
})
if (res) {
return res.specValue
} else {
return ""
}
} else {
return ""
}
},
// 整理规格数据
getSpecList() {
const { goods: { specList } } = this;
const defaultData = [{ name: '默认', list: [{ name: '默认' }] }];
const specData = [];
if (specList.length > 0) {
specList.forEach(group => {
const children = [];
group.valueList.forEach(specValue => {
children.push({ name: specValue.specValue });
})
specData.push({
name: group.name,
list: children
})
})
}
return specData.length > 0 ? specData : defaultData
},
// sku组件 开始-----------------------------------------------------------
openSkuPopup() {
// console.log("监听 - 打开sku组件")
},
closeSkuPopup() {
// console.log("监听 - 关闭sku组件")
},
// 加入购物车按钮
addCart(selectShop) {
const app = this
console.log(selectShop)
const { goods_id, sku_id, buy_num } = selectShop
CartApi.save(goods_id, '+', sku_id, buy_num)
.then(result => {
// 隐藏当前弹窗
app.onChangeValue(false)
// 购物车商品总数量
const cartTotal = result.data.cartTotal
// 缓存购物车数量
setCartTotalNum(cartTotal)
// 传递给父级
app.$emit('addCart', cartTotal)
})
},
// 立即购买
buyNow(selectShop) {
// 跳转到订单结算页
this.$navTo('pages/settlement/goods', {
mode: 'buyNow',
goodsId: selectShop.goods_id,
skuId: selectShop.sku_id,
buyNum: selectShop.buy_num
})
// 隐藏当前弹窗
this.onChangeValue(false)
}
}
}
</script>
<style lang="scss" scoped>
</style>