yanzong_qianduan/pages/goods/components/SkuPopup.vue

<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" />
</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'

	export default {
		components: {
			GoodsSkuPopup
		},
		emits: ['update:modelValue'],
		props: {
			// 控制组件显示隐藏
			modelValue: {
				Type: Boolean,
				default: false
			},
			// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
			skuMode: {
				type: Number,
				default: 1
			},
			// 商品详情信息
			goods: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				// 商品信息
				goodsInfo: {},
				// 限购数量
				maxBuyNum: null,
				selectSku: '',
				shopNum: 1,
			}
		},
		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: 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 {
					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组件")
			},

			// 加入购物车按钮
			addCart(selectShop) {
				this.selectInfor = 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.selectInfor = selectShop
				if (uni.getStorageSync("userInfo").user_type == 40) {
					// 隐藏当前弹窗
					this.onChangeValue(false);
					uni.$emit("onenPrice", selectShop)
					return;
					console.log(selectShop)
				}
				// 跳转到订单结算页
				this.$navTo('pages/sureOrder/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>