sct/pagesT/goodsGroup/goodsGroupDetail.vue

<template>
	<view :class="['qn-page-' + theme]">
		<view class="goods-ul">
			<view class="goods-li clearfix" v-for="(item, index) in group_detail.goodsData" :key="index">
				<view class="float_left goods-img">
					<block v-if="item.isDistribution === 4">
						<view v-if="!(item.inventorTotal - 0) || item.inventorTotal - 0 <= 0" class="sale-end"><text class="ibonfont ibonbuhuozhong"></text></view>
					</block>
					<image :src="item.images[0]" mode="aspectFill"></image>
				</view>
				<view class="float_left goods-info">
					<view class="goods-name ellipsis">{{ item.title }}</view>
					<view class="goods-sku" @click="skuOpen(item, index)">
						<block v-if="item.nowSkuData">
							<text>{{ item.nowSkuData.unitName }};</text>
							<text v-for="(spec, specI) in item.nowSkuData.specGroup" :key="specI">{{ spec.specValueName }};</text>
						</block>

						<text v-else>请选择商品规格</text>
						<text class="ibonfont iboncollpse"></text>
					</view>
					<view class="num-view clearfix">
						<view class="godos-price float_left">原价 ¥{{ item.maxMarketPrice }}</view>
						<view class="goods-num float_right">
							<text class="ibonfont ibonguanbi1"></text>
							<text>1</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-view clearfix">
			<view class="price-main float_left">
				<view class="total">
					<text>总价：</text>
					<text class="primary-color">¥{{ group_detail.price || '0.00' }}</text>
				</view>
				<view class="desc">已省¥{{ group_detail.originPrice - group_detail.price }}</view>
			</view>
			<view class="confirm-btn float_right" @click="buyNow">立即购买</view>
		</view>
		<u-popup :mask-close-able="false" border-radius="16" mode="bottom" v-model="sku_show">
			<view class="sku-sel-pop" v-if="goods_detail.id">
				<text class="ibonfont ibonguanbi1" @click="skuCancel"></text>
				<view class="goods-view clearfix">
					<view class="float_left goods-img"><image :src="goods_detail.images[0]" mode="aspectFill"></image></view>
					<view class="float_right goods-info">
						<view class="goods-name ellipsis">{{ goods_detail.title }}</view>
						<block v-if="now_sku_data.id">
							<view class="goods-stock">库存：{{ Number(now_sku_data.inventory) || 0 }}</view>
							<view class="goods-price">原价：¥{{ now_sku_data.salePrice || 0 }}</view>
						</block>
						<block v-else>
							<view class="goods-stock">库存：{{ Number(goods_detail.inventory) || 0 }}</view>
							<view class="goods-price">原价：¥{{ goods_detail.maxSalePrice || 0 }}</view>
						</block>
					</view>
				</view>
				<scroll-view scroll-y="true" style="max-height: 700upx;overflow-y: auto;">
					<view class="sku-ul">
						<view class="sku-li">
							<view class="sku-name">单位</view>
							<view class="sku-val-ul">
								<view
									class="sku-val-li"
									v-for="(unit, uniti) in goods_detail.unitData"
									:key="uniti"
									:class="[parseInt(spec_id_group[1]) === parseInt(unit.unitId) ? 'primary-btn-pain' : '']"
									@click="changeSku(unit.unitId, 1, '', unit)"
								>
									<text :style="{ color: !unit.isdisabled ? '#999' : '' }">{{ unit.unitName }}</text>
								</view>
							</view>
						</view>
						<view class="sku-li" v-for="(item, index) in goods_detail.specGroup" :key="index">
							<view class="sku-name">{{ item.groupSpec.specName }}</view>
							<view class="sku-val-ul">
								<view
									v-for="(sku, skuI) in item.params"
									:key="skuI"
									class="sku-val-li"
									:class="[parseInt(spec_id_group[index + 2]) === parseInt(sku.specValueId) ? 'primary-btn-pain' : '']"
									@click="changeSku(sku.specValueId, index + 2, item.groupSpec.specId, sku)"
								>
									<text :style="{ color: !sku.isdisabled ? '#999' : '' }">{{ sku.specValueName }}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="confirm-btn primary-btn" @click="skuConfirm">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sku_show: false,
			group_id: '',
			group_detail: {},
			goods_detail: {},
			now_sku_data: {},
			spec_id_group: [],
			goods_index: ''
		};
	},
	computed: {
		baseSet() {
			return this.$store.state.baseSet;
		}
	},
	onLoad(options) {
		this.group_id = options.id;
		this.detailsApiComBinPackage();
	},
	onShow() {},
	methods: {
		skuConfirm() {
			if (!this.now_sku_data.id) {
				this.$u.toast('请选择要购买的规格');
				return;
			}
			if (this.goods_detail.joinSku && this.goods_detail.joinSku.length) {
				if (this.goods_detail.joinSku.indexOf(this.now_sku_data.id) === -1) {
					this.$u.toast('抱歉该规格没有参与组合套餐活动');
					return;
				}
			}
			this.skuCancel();
		},
		skuCancel() {
			this.sku_show = false;
		},
		skuOpen(goods, index) {
			this.sku_show = true;
			this.spec_id_group = [goods.id];
			this.now_sku_data = {};

			this.goods_index = index;

			// 过滤出没有参与活动的规格
			if (goods.joinSku && goods.joinSku.length) {
				goods.specMultiple = goods.specMultiple.filter(item => goods.joinSku.includes(item.id));
			}
			// 多规格时处理属性禁用标示
			if (goods.specType === 2) {
				goods.specGroup = goods.specGroup.map(item => {
					return {
						...item,
						params: item.params.map(itemP => {
							return {
								...itemP,
								isdisabled: true
							};
						})
					};
				});
				goods.unitData.forEach(item => {
					item.isdisabled = true;
				});
			} else {
				//单规格 添加当前单位没有库存的标记
				const arr = goods.specMultiple.filter(item => item.inventory <= 0);
				goods.unitData.forEach(item => {
					// 没有开启预售判断库存
					if (goods.isDistribution === 4) {
						item.isdisabled = !arr.find(itemF => itemF.unitId === item.unitId);
					} else {
						item.isdisabled = true;
					}
				});
			}
			this.goods_detail = goods;
		},
		async detailsApiComBinPackage() {
			this.$u.api.detailsApiComBinPackage(this.group_id).then(res => {
				this.group_detail = res.data;
			});
		},
		changeSku(id, index, specId, row) {
			if (row && !row.isdisabled) {
				return;
			}
			this.$set(this.spec_id_group, index, parseInt(id));
			if (this.spec_id_group.every(item => !!item)) {
				const indexGroup = this.spec_id_group.join(':');
				const nowSkuData = this.goods_detail.specMultiple.find(item => item.index === indexGroup);
				if (nowSkuData) {
					this.now_sku_data = nowSkuData;
					let target = this.$u.deepClone(this.group_detail);
					target.goodsData[this.goods_index].nowSkuData = nowSkuData;
					this.group_detail = target;
				}
			}
			// 判断当前规格是否要禁用，规格组不存在或者库存为0的时候，当前规格禁用
			if (index) {
				// 过滤出包含当前规格的规格组
				const containSpecMultiple = this.goods_detail.specMultiple.filter(item => item.indexGroup.includes(id + ''));
				const target = this.$u.deepClone(this.goods_detail.specGroup);
				target.forEach(item => {
					if (item.groupSpec.specId !== specId) {
						item.params.forEach(itemP => {
							// 没有开启预售判断库存
							if (this.baseSet.preSale === 4) {
								const isObj = containSpecMultiple.find(itemF => {
									return itemF.indexGroup.includes(itemP.specValueId + '');
								});
								itemP.isdisabled = !!isObj && isObj.inventory > 0;
							} else {
								itemP.isdisabled = true;
							}
						});
					}
				});
				// console.log(target);
				this.goods_detail.specGroup = target;
			}
		},
		buyNow() {
			const isBuy = this.group_detail.goodsData.find(item => {
				return !item.nowSkuData;
			});
			if (isBuy) {
				this.$u.toast('请选择规格');
				return;
			}
			const lists = this.group_detail.goodsData.map(item => {
				return {
					goodsId: item.id,
					skuId: item.nowSkuData.id,
					buyNum: 1
				};
			});
			const params = {
				sourceType: 1, //组合套餐固定传1
				comBinId: this.group_id, //组合套餐id
				lists: lists
			};
			this.goPage('/pageT/order/createOrder?params=' + JSON.stringify(params));
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-ul {
	padding: 0 36rpx;
	background-color: #ffffff;

	.goods-li {
		padding: 30rpx 0;
		border-bottom: 1px solid #f5f5f5;

		&:last-child {
			border-bottom: 0 none;
		}

		.goods-img {
			padding-right: 20rpx;
			position: relative;
			image {
				display: block;
				width: 210rpx;
				height: 210rpx;
				border-radius: 10rpx;
			}
			.sale-end {
				position: absolute;
				width: 210rpx;
				height: 210rpx;
				border-radius: 10upx;
				display: block;
				left: 0;
				top: 0;
				z-index: 1;
				text-align: center;
				line-height: 210rpx;
				background-color: rgba($color: #000000, $alpha: 0.3);
				.ibonfont {
					font-size: 120rpx;
					color: #ffffff;
				}
			}
		}

		.goods-info {
			width: 444rpx;

			.goods-sku {
				margin-top: 12rpx;
				line-height: 46rpx;
				padding-left: 10rpx;
				padding-right: 46rpx;
				font-size: 24rpx;
				color: #999999;
				background-color: #fafafa;
				border-radius: 8rpx;
				position: relative;
				display: inline-block;

				.iboncollpse {
					font-size: 24rpx;
					color: #999999;
					position: absolute;
					right: 10rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.num-view {
				font-size: 24rpx;
				color: #999999;
				padding-top: 30rpx;

				.goods-num {
					.ibonguanbi1 {
						font-size: 16rpx;
						color: #999999;
						width: 38rpx;
						display: inline-block;
					}
				}
			}
		}
	}
}

.sku-sel-pop {
	padding: 30rpx;
	padding-top: 50rpx;
	position: relative;

	.ibonguanbi1 {
		color: #999999;
		font-size: 26rpx;
		position: absolute;
		top: 20rpx;
		right: 24rpx;
		display: inline-block;
		width: 50rpx;
	}

	.goods-view {
		.goods-img {
			image {
				display: block;
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}

		.goods-info {
			width: 450rpx;
			padding-top: 10rpx;

			.goods-stock {
				font-size: 24rpx;
				color: #999999;
				padding: 10rpx 0;
			}

			.goods-price {
				font-size: 24rpx;
			}
		}
	}

	.sku-ul {
		padding-top: 30rpx;

		.sku-li {
			padding-bottom: 20rpx;

			.sku-name {
				line-height: 70rpx;
			}

			.sku-val-ul {
				.sku-val-li {
					display: inline-block;
					line-height: 60rpx;
					min-width: 80rpx;
					font-size: 26rpx;
					border: 1px solid #eeedf2;
					margin-right: 20rpx;
					border-radius: 6rpx;
					text-align: center;

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}

	.confirm-btn {
		width: 680rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #ffffff;
		margin: 30rpx auto 0;
	}
}

.bottom-view {
	background-color: #ffffff;
	padding: 20rpx 0;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 95;
	width: 100%;

	.price-main {
		width: 490rpx;
		text-align: right;

		.desc {
			color: #999999;
			font-size: 24rpx;
		}
	}

	.confirm-btn {
		height: 74upx;
		line-height: 74upx;
		color: #ffffff;
		background-color: #f63434;
		width: 206upx;
		text-align: center;
		border-radius: 10upx;
		margin-right: 20rpx;
	}
}
</style>