You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
318 lines
7.4 KiB
318 lines
7.4 KiB
<template>
|
|
<goods-sku-popup :modelValue="modelValue" @input="onChangeValue" border-radius="20" :localdata="goodsInfo"
|
|
:mode="skuMode" :maskCloseAble="true" :priceColor="appTheme.mainBg" :buyNowBackgroundColor="appTheme.mainBg"
|
|
:addCartColor="appTheme.viceText" :addCartBackgroundColor="appTheme.viceBg"
|
|
:activedStyle="{ color: appTheme.mainBg, borderColor: appTheme.mainBg, backgroundColor: activedBtnBackgroundColor }"
|
|
@open="openSkuPopup" @close="closeSkuPopup" @add-cart="addCart" @buy-now="buyNow" @num-change='numChange'
|
|
@selected-old='selectedOld' buyNowText="立即购买" :maxBuyNum="maxBuyNum" :addressResult='addressResult'
|
|
:stockValue='stockValue' />
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
setCartTotalNum
|
|
} from '@/core/app'
|
|
import {
|
|
hex2rgba
|
|
} from '@/utils/color'
|
|
import * as CartApi from '@/api/cart'
|
|
import GoodsSkuPopup from '@/components/goods-sku-popup'
|
|
import * as GoodsApi from '@/api/goods'
|
|
|
|
export default {
|
|
components: {
|
|
GoodsSkuPopup
|
|
},
|
|
emits: ['update:modelValue'],
|
|
props: {
|
|
goodSource: {
|
|
Type: String || Number,
|
|
default: 0
|
|
},
|
|
activeTimeId: {
|
|
Type: String || Number,
|
|
default: null
|
|
},
|
|
sharpGoodsId: {
|
|
Type: String || Number,
|
|
default: null
|
|
},
|
|
// 控制组件显示隐藏
|
|
modelValue: {
|
|
Type: Boolean,
|
|
default: false
|
|
},
|
|
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
|
|
skuMode: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
// 商品详情信息
|
|
goods: {
|
|
type: Object,
|
|
default: {}
|
|
},
|
|
addressResult: {
|
|
type: Object
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
// 商品信息
|
|
goodsInfo: {},
|
|
// 限购数量
|
|
maxBuyNum: null,
|
|
selectSku: '',
|
|
shopNum: 1,
|
|
stockValue: '有货',
|
|
}
|
|
},
|
|
computed: {
|
|
// 规格按钮选中时的背景色
|
|
activedBtnBackgroundColor() {
|
|
return hex2rgba(this.appTheme.mainBg, 0.1)
|
|
}
|
|
},
|
|
mounted() {
|
|
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()
|
|
}
|
|
console.log(111, app.goods)
|
|
console.log(111222, goods)
|
|
app.maxBuyNum = app.getMaxBuyNum()
|
|
},
|
|
|
|
methods: {
|
|
// 监听组件显示隐藏
|
|
onChangeValue(val) {
|
|
this.$emit('update:modelValue', val)
|
|
},
|
|
|
|
// 整理商品SKU列表
|
|
getSkuList() {
|
|
const app = this
|
|
const {
|
|
goods: {
|
|
goods_name,
|
|
goods_image,
|
|
skuList
|
|
}
|
|
} = app
|
|
const skuData = []
|
|
if (skuList && skuList.length > 0) {
|
|
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: app.goodSource==0?item.goods_price * 100:item.seckill_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 {
|
|
goods: {
|
|
specList
|
|
}
|
|
} = app
|
|
const skuNameArr = []
|
|
if (specValueIds) {
|
|
if (specList && specList.length > 0) {
|
|
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 = []
|
|
if (specList && specList.length > 0) {
|
|
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
|
|
},
|
|
|
|
// 限购数量
|
|
getMaxBuyNum() {
|
|
const {
|
|
goods
|
|
} = this
|
|
return goods.is_restrict ? goods.restrict_single : null
|
|
},
|
|
selectedOld(e) {
|
|
this.selectSku = e
|
|
this.$emit('getSku', {
|
|
selectSku: this.selectSku,
|
|
shopNum: this.shopNum
|
|
})
|
|
},
|
|
numChange(e) {
|
|
this.shopNum = e
|
|
this.$emit('getSku', {
|
|
selectSku: this.selectSku,
|
|
shopNum: this.shopNum
|
|
})
|
|
},
|
|
// sku组件 开始-----------------------------------------------------------
|
|
openSkuPopup() {
|
|
// console.log("监听 - 打开sku组件")
|
|
},
|
|
|
|
closeSkuPopup() {
|
|
// console.log("监听 - 关闭sku组件")
|
|
},
|
|
async getGoodsStockInfor(selectShop, type) {
|
|
let that = this;
|
|
let params = {
|
|
list: [{
|
|
goods_id: selectShop.goods_id,
|
|
num: selectShop.buy_num
|
|
}],
|
|
province: that.addressResult ? that.addressResult.province : '江苏省',
|
|
city: that.addressResult ? that.addressResult.city : '南京市',
|
|
district: that.addressResult ? that.addressResult.district : '玄武区'
|
|
}
|
|
let {
|
|
status,
|
|
message,
|
|
data
|
|
} = await GoodsApi.getGoodsStock(params);
|
|
if (status == 200) {
|
|
that.stockValue = data[0].state
|
|
if (that.stockValue == '无货') {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "该商品暂时无货"
|
|
})
|
|
} else {
|
|
if (type == 1) {
|
|
that.addCartInfor(selectShop)
|
|
} else {
|
|
that.buyNowInfor(selectShop)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
// 加入购物车按钮
|
|
addCart(selectShop) {
|
|
const app = this
|
|
app.getGoodsStockInfor(selectShop, 1)
|
|
},
|
|
addCartInfor(selectShop) {
|
|
const app = this
|
|
app.selectInfor = selectShop
|
|
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) {
|
|
const app = this
|
|
app.getGoodsStockInfor(selectShop, 2)
|
|
},
|
|
buyNowInfor(selectShop) {
|
|
const app = this
|
|
this.selectInfor = selectShop
|
|
if (uni.getStorageSync("userInfo").user_type == 40) {
|
|
// 隐藏当前弹窗
|
|
this.onChangeValue(false);
|
|
uni.$emit("onenPrice", selectShop)
|
|
return;
|
|
}
|
|
// 跳转到订单结算页
|
|
this.$navTo('pages/sureOrder/index', {
|
|
mode: app.goodSource == 0 ? 'buyNow' : 'sharp',
|
|
goodsId: selectShop.goods_id,
|
|
goodsSkuId: selectShop.goods_sku_id,
|
|
goodsNum: selectShop.buy_num,
|
|
goodSource: app.goodSource,
|
|
activeTimeId: app.activeTimeId,
|
|
sharpGoodsId: app.sharpGoodsId,
|
|
})
|
|
// 隐藏当前弹窗
|
|
this.onChangeValue(false)
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|
|
|