realty/virgo.wzfrontend/workark_wx/subPages/shopPage/good/good.vue

<template>
	<view class="goods-detail-wrapper">
		<uv-swiper :list="goods.thumb" height="400" indicator indicatorMode="dot" circular></uv-swiper>
		<view class="content">
			<view class="title">{{ goods.name }}</view>
			<view class="desc">{{ goods.descript }}</view>
			<view class="price">{{ formatPrice(goods.price) }}</view>
			<uv-row gutter="16" class="express">
				<uv-col :span="6">运费：免运费</uv-col>
				<uv-col :span="6">剩余：{{goods.stock}}</uv-col>
			</uv-row>
		</view>
		<view class="detail">
			<uv-parse :content="goods.detail"></uv-parse>
		</view>
		<view class="navigation">
			<view class="left">
				<view class="item" @click="like">
					<uv-icon name="heart" size="25" :color="likeColor"></uv-icon>
					<view class="text uv-line-1">收藏</view>
				</view>
				<view class="item car" @click="toCart">
					<uv-badge :value="cartCount" type="error" :offset="[0,0]" max="99" numberType="overflow" absolute
						:customStyle="{
							zIndex:99
						}"></uv-badge>
					<uv-icon name="shopping-cart" size="30" color="content"></uv-icon>
					<view class="text uv-line-1">购物车</view>
				</view>
			</view>
			<view class="right">
				<view class="cart btn uv-line-1" @click="showSkuPop('cart')">加入购物车</view>
				<view class="buy btn uv-line-1" @click="showSkuPop('buy')">立即购买</view>
			</view>
		</view>
		<uv-popup ref="popup" mode="bottom" :closeable="true">
			<view class="sku">
				<view class="goods">
					<uv-row>
						<uv-col :span="4" class="left">
							<uv-image width="170rpx" height="170rpx" :src="goods.picture"></uv-image>
						</uv-col>
						<uv-col :span="8" class="right">
							<view class="price">{{formatPrice(price)}}</view>
							<view class="stock">剩余<text class="stock_num">{{stock}}</text>件</view>
							<template v-if="!sku.none_sku">
								<view class="tips">{{hasSel?'已选择':'请选择'}}
									<text v-for="(item,index) in sku.tree" :key="index" style="padding-left:10rpx;">
										{{item.sel?item.v[parseInt(item.sel)].name:item.k}}
									</text>
								</view>
							</template>
						</uv-col>
					</uv-row>
				</view>
				<template v-if="!sku.none_sku">
					<view class="skuv-list">
						<block v-for="(category,index) in sku.tree" :key="index">
							<view class="tree">
								<view class="title">{{category.k}}</view>
							</view>
							<view class="node-list">
								<view class="node" v-for="(node,index2) in category.v" :key="index2">
									<uv-tags :type="node.mode=='disable'?'info':'warning'" :text="node.name"
										:plain="node.mode=='default'?true:(node.mode=='select'?false:true)"
										@click="selSku(category,node)">
									</uv-tags>
								</view>
							</view>
						</block>
					</view>
				</template>

				<view class="count uv-flex uv-row-between">
					<view>购买数量</view>
					<view>
						<uv-number-box v-model="count" :max="stock"></uv-number-box>
					</view>
				</view>
				<view class="action">
					<uv-button type="error" shape="circle" @click="buy">确定</uv-button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import {
		getGoods,
		like,
		noLisk,
		addCart,
		getCartCount
	} from '@/request/api/shop.js'
	export default {
		data() {
			return {
				ifLike: false,
				likeColor: 'content',
				cartCount: '',
				showSku: false,
				stock: '',
				price: '',
				hasSel: false,
				sku: {
					tree: [],
					list: [],
					price: '0', // 默认价格（单位元）
					stock_num: 0, // 商品总库存
					collection_id: 0, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
					none_sku: false, // 是否无规格商品
					hide_stock: false, // 是否隐藏剩余库存					
					sel: {}
				},
				count: 1,
				offline: false,
				goods: {
					id: '',
					name: '',
					price: 0,
					express: '免运费',
					remain: 0,
					thumb: [],
					stock: ''
				},
				actionType: 'buy'
			}
		},
		onLoad(option) {
			this.goods.id = option.id
			this.init()
		},
		methods: {
			async init() {
				this.getCartCount();
				let goodData = await getGoods(this.goods.id);
				if (goodData.state) {
					let res = goodData.data;
					let goods = res.goods
					this.offline = !goods.isOnSale
					let sku = res.sku
					sku.price = (sku.price / 100).toFixed(2)

					if (!sku.none_sku) {
						for (var i in sku.tree) {
							for (var m in sku.tree[i].v) {
								sku.tree[i].v[m].mode = 'default';

							}
						}
					}
					this.sku = sku;
					this.stock = goods.stock;
					this.price = goods.price;
					goods.thumb = new Array()
					goods.picture = this.shopImage(goods.pic);
					const gallery = goods.gallery.split(',')
					for (var index in gallery) {
						goods.thumb.push(this.shopImage(gallery[index]));
					}
					this.goods = goods;
					if (res.favorite === true) {
						this.likeColor = 'error'
						this.ifLike = true
					}
				}
			},
			toCart() {
				this.$navigateTo('/subPages/shopPage/cart/cart');
			},
			formatPrice(price) {
				return '¥' + (price / 100).toFixed(2)
			},
			like() {
				if (this.ifLike === false) {
					like(this.goods.id).then(res => {
						this.$toast('收藏成功')
						this.ifLike = true
						this.likeColor = 'error'
					})
				} else {
					noLisk(this.goods.id).then(res => {
						this.$toast('取消收藏成功')
						this.ifLike = false
						this.likeColor = 'content'
					})

				}
			},
			showSkuPop(type) {
				this.actionType = type;
				this.$refs.popup.open();
			},
			async buy() {
				let idSku = '';
				if (!this.sku.none_sku) {
					if(this.sku.sel) idSku = this.sku.sel.id;
					if (!idSku) {
						return this.$toast('请选择商品规格')
					}
				}
				const params = {
					idGoods: this.goods.id,
					count: this.count,
					idSku: idSku
				}
				let cartData = await addCart(params);
				if (cartData.state) {
					this.$refs.popup.close();
					if ('cart' == this.actionType) {
						this.$toast('成功加入购物车');
						this.init();
					} else {
						this.toCart()
					}
				}
			},
			//todo 商品规格选择算法待优化
			selSku(category, node) {
				if (node.mode == 'disable') {
					return;
				}
				this.hasSel = true;
				let selItem = {};
				const skuDataId = node.id;
				const categoryks = category.k_s;
				let sku = this.sku;
				let skuTree = sku.tree;
				let list = sku.list;
				let anotherArr = new Array();
				//提取当前选择的所有组合选项。
				for (const i in list) {
					const item = list[i];
					if (item[categoryks] == skuDataId) {
						anotherArr.push(item);
					}
				}
				for (const i in skuTree) {
					const ks = skuTree[i].k_s;
					for (const j in skuTree[i].v) {
						const id = skuTree[i].v[j].id;
						if (categoryks == ks) {
							//统一类规格中，设置当前选项为select，其他选项为default
							if (skuDataId == id) {
								skuTree[i].v[j].mode = 'select';
								skuTree[i].sel = j
								selItem[ks] = skuTree[i].v[j].id;
							} else {
								skuTree[i].v[j].mode = 'default';
							}
						} else {
							let disable = true;
							for (const m in anotherArr) {
								if (anotherArr[m][ks] == id) {
									disable = false;
								}
							}
							if (disable) {
								skuTree[i].v[j].mode = 'disable';
							} else {
								if (skuTree[i].v[j].mode !== 'select') {
									skuTree[i].v[j].mode = 'default';
								} else {
									skuTree[i].sel = j
									selItem[ks] = skuTree[i].v[j].id;
								}
							}
						}
					}
				}
				this.sku = {};
				sku.tree = skuTree;
				this.sku = sku;

				let skuSelItem;
				for (const i in list) {
					const item = list[i];
					let sel = true;
					for (const j in skuTree) {
						const key = skuTree[j].k_s;
						if (selItem[key] !== item[key]) {
							sel = false;
							break;
						}
					}
					if (sel) {
						skuSelItem = item;
						break;
					}
				}

				if (skuSelItem) {
					this.stock = skuSelItem.stock_num;
					this.price = skuSelItem.price;
					this.sku.sel = skuSelItem;
				} else {
					this.sku.sel = {};
				}
			},
			async getCartCount() {
				let countData = await getCartCount();
				if (countData.state) this.cartCount = countData.data;
			}
		}
	}
</script>


<style lang="scss" scoped>
	.goods-detail-wrapper {
		padding-bottom: 140rpx;
	}

	.content {
		padding: 30rpx;
		background: #fff;

		.title {
			font-size: 32rpx;
		}

		.desc {
			font-size: 12px;
			color: #999999;
			letter-spacing: 0;
			line-height: 18px;
			margin: 6px 0;
		}

		.price {
			color: #FA3534;
			font-size: 40rpx;
		}

		.express {
			color: #999;
			font-size: 24rpx;
			padding: 10rpx 0rpx;
		}
	}

	.navigation {
		background-color: #ffffff;
		box-shadow: 0px 2px 10px rgba(3, 3, 3, 0.1);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		padding-right: 40rpx;
		padding-left: 40rpx;

		.left {
			display: flex;
			align-items: center;
			font-size: 20rpx;
			flex: 1;
			width: 0;

			.item {
				margin: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.text {
						position: relative;
						top: -4rpx;
					}
				}

			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			.btn {
				line-height: 66rpx;
				padding: 0 40rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}

			.buy {
				background-color: #ff7900;
			}
		}
	}

	.sku {
		padding: 24rpx 32rpx;

		.goods {
			.right {
				padding-left: 20rpx;

				.price {
					color: #FA3534;
					font-size: 34rpx;
				}

				.stock {
					margin-top: 8px;
					color: #969799;
					font-size: 12px;

					.stock_num {
						margin-right: 16rpx;
						margin-left: 16rpx;
					}
				}

				.tips {
					margin-top: 8px;
					color: #969799;
					font-size: 12px;
					line-height: 16px;
				}
			}
		}

		.skuv-list {
			.tree {
				margin-top: 30rpx;

				.title {
					padding-bottom: 12px;
				}
			}

			.node-list {
				display: flex;

				.node {
					justify-content: center;
					min-width: 80rpx;
					margin: 0 24rpx 24rpx 0;
					line-height: 24rpx;
					vertical-align: middle;
				}
			}
		}

		.count {
			padding: 24rpx 0rpx;
			overflow: hidden;
			line-height: 60rpx;
			padding-bottom: 60rpx;

		}
	}
</style>