zh_order_food_xcx/pages-takeout/new-specs-info.vue

<template>
	<view class="flex-common-css iPhone-bottom box-border-box bgc-f">
		<newNav :leftShow="false" :textType='false' class="z-4" @navHeight='navHeight'>
			<view slot="leftContent" class="align-items-center nav-left-box pl-32 box-border-box">
				<view class="nav-left box-border-box b-rad-32 align-items-center flex-justify-space">
					<uni-icons type="left" size="25" :color="leftIconColor" @click="goBack"></uni-icons>
					<view class="align-items-center">
						<view class="hr mr-16"></view>
						<image class="fx-icon" src="/static/img/order-food/fx.png" mode=""></image>
					</view>
				</view>
			</view>
		</newNav>
		<image class="goods-img" src="/pages-buy/static/fl-bg.png" mode="aspectFill"></image>
		<view class="image-box" :style="{height: `calc(41vh - ${newNavHeight}rpx)`}"></view>
		<view class="goods-name-box">
			<view class="goods-name b-rad-24-24-0-0 p-32-32-0 box-border-box bgc-f">
				<view class="fs-36 fw-600 fc-3">
					红烧牛肉面红烧牛111面11牛肉面牛肉面牛肉 红烧牛肉面红烧牛111面11牛肉面牛
				</view>
				<view class="pt-20 fs-28 fc-6">
					商品描述商品描述商品描述
				</view>
			</view>
		</view>
		<view class="scroll-view-css plr-32 box-border-box">
			<view class="b-t-eee ptb-30">
				<view class="mb-16" v-for="(item,i) in specsData" :key="i">
					<view class="fs-28 fc-7 mb-16">
						{{item.sku_name}}
					</view>
					<view class="align-items-center flex-wrap-wrap w-add-16">
						<view
							class="specs-item b-rad-12 align-items-center flex-justify-evenly mr-16 mb-16 plr-12 box-border-box"
							:class="spec_key.indexOf(info.spec_id)>=0?'s-item bgc-FAE9E9 b-FF3333':'n-item bgc-F5F5F5'"
							v-for="(info,index_two) in item.spec_list" :key="index_two" @click="selectSpec(item,info)">
							<view class="count-box b-rad-50 bgc-FE6B2C fs-22 fc-f text-align-center"
								v-if="item.affect_quantity === 1 && info.spec_num > 0">
								{{info.spec_num}}
							</view>
							<image v-if="spec_key.indexOf(info.spec_id)>=0 && info.spec_num > 0"
								class="set-num-img mr-30" src="@/static/img/order-food/reduce-img.png"
								@click.stop="setNum(item,info,0)" mode="">
							</image>
							<view class="align-items-center info-text">
								<view class="" :class="spec_key.indexOf(info.spec_id)>=0?'fc-FF3333':'fc-0'">
									{{info.spec_name}}
								</view>
								<view class="" :class="spec_key.indexOf(info.spec_id)>=0?'fc-FF3333':'fc-0'"
									v-if="info.spec_price && item.affect_quantity != 0">
									￥{{info.spec_price}}
								</view>
							</view>
							<image v-if="spec_key.indexOf(info.spec_id)>=0 && info.spec_num > 0"
								class="set-num-img ml-30" src="@/static/img/order-food/add-img.png"
								@click.stop="setNum(item,info,1)" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bot-box box-border-box">
			<view class="align-items-center flex-justify-space mb-20">
				<view class="">
					<view class="align-items-baseline">
						<view class="fs-32 fc-3 fw-600 mr-4">
							￥
						</view>
						<view class="fs-48 fc-3 fw-600">
							{{total_price.toFixed(2)}}
						</view>
					</view>
					<view class="fs-24 fc-9">
						{{spec_text}}
					</view>
				</view>
				<view class="align-items-center">
					<image class="cz-img" src="@/static/img/order-food/reduce-img.png" mode=""
						@click="changeGoodsNum(0)"></image>
					<view class="plr-16 fs-32 fc-3 fw-400">
						{{postData.number}}
					</view>
					<image class="cz-img" src="@/static/img/order-food/add-img.png" mode="" @click="changeGoodsNum(1)">
					</image>
				</view>
			</view>
			<view class="but-box text-align-center fs-32 fc-f fw-600 b-rad-200" @click="addShoppingCart">
				加入购物车
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsGoodsSpec
	} from "@/api/goods.js"
	export default {
		components: {},
		data() {
			return {
				infoData: {},
				newNavHeight: '',
				specsData: [{
					sku_name: '口味',
					sku_id: 8,
					sku_type: 1, //1:单选, 2:多选
					affect_quantity: 0, //是否影响购物车数量: 0-不影响, 1-影响
					spec_list: [{
						spec_name: '不辣',
						spec_price: 8,
						spec_id: 0
					}, {
						spec_name: '微辣',
						spec_price: 8,
						spec_id: 1
					}, {
						spec_name: '中辣',
						spec_price: 8,
						spec_id: 2
					}, {
						spec_name: '特辣',
						spec_price: 8,
						spec_id: 3
					}]
				},{
					sku_name: '粗细',
					sku_id: 10,
					sku_type: 1, //1:单选, 2:多选
					affect_quantity: 0, //是否影响购物车数量: 0-不影响, 1-影响
					spec_list: [{
						spec_name: '特细',
						spec_price: 0,
						spec_id: 11
					}, {
						spec_name: '细',
						spec_price: 0,
						spec_id: 12
					}, {
						spec_name: '粗',
						spec_price: 0,
						spec_id: 13
					}, {
						spec_name: '韭叶',
						spec_price: 0,
						spec_id: 14
					}]
				}
				, {
					sku_name: '小料',
					sku_type: 2,
					sku_id: 9,
					affect_quantity: 1, //是否影响购物车数量: 0-不影响, 1-影响
					spec_list: [{
						spec_name: '煎蛋',
						spec_price: 3,
						spec_id: 4
					}, {
						spec_name: '酱牛肉',
						spec_price: 8,
						spec_id: 5
					}, {
						spec_name: '卤蛋',
						spec_price: 2,
						spec_id: 6
					}, {
						spec_name: '卤鸡腿',
						spec_price: 2,
						spec_id: 7
					}]
				}],
				spec_key: [],
				total_price: 0,
				spec_text: '请选择规格',
				postData: {
					shop_id: '',
					goods_id: '',
					category_id: '',
					goods_spec: [],
					number: 1
				}
			}
		},
		watch: {
			// 监听相关数据变化，自动计算总价和拼接规格文字
			'postData.goods_spec': {
				handler() {
					this.updatePriceAndText();
				},
				deep: true
			},
			'postData.number': {
				handler() {
					this.updatePriceAndText();
				}
			}
		},
		onLoad(data) {
			this.addSpecNum()
		},
		mounted() {},
		methods: {
			// 添加商品数量
			changeGoodsNum(type) {
				if (type === 0) {
					// 减少数量
					if (this.postData.number > 1) {
						this.postData.number--;
					}
				} else {
					// 增加数量
					this.postData.number++;
				}
			},
			// 更新总价和规格文字
			updatePriceAndText() {
				let basePrice = 0; // 假设商品基础价格，可以从接口获取
				let specPrice = 0;
				let specArray = [];

				// 遍历所有规格组
				this.specsData.forEach(group => {
					group.spec_list.forEach(spec => {
						// 检查规格是否被选中
						if (this.spec_key.includes(spec.spec_id)) {
							// 获取规格数量
							let specNum = group.affect_quantity === 1 ? spec.spec_num : 1;

							// 累加价格
							specPrice += spec.spec_price * specNum;

							// 构建规格文字
							let specName = spec.spec_name;
							if (group.sku_type === 2 && specNum > 1) {
								// 多选且数量大于1，显示 ×数量
								specName += `×${specNum}`;
							}
							specArray.push(specName);
						}
					});
				});
				// 计算总价：基础价格 + 规格价格 × 商品数量
				this.total_price = (basePrice + specPrice) * this.postData.number;
				// 拼接规格文字
				if (specArray.length > 0) {
					this.spec_text = specArray.join('、');
				} else {
					this.spec_text = '请选择规格';
				}
				// this.$forceUpdate();
			},
			addShoppingCart() {
				console.log(this.postData, "提交数据");
			},
			setNum(item, info, type) {
				if (type === 0) {
					info.spec_num -= 1;
					if (info.spec_num <= 0) {
						const infoKey = this.spec_key.indexOf(info.spec_id)
						if (infoKey != -1) {
							this.spec_key.splice(infoKey, 1)
							this.postData.goods_spec.splice(infoKey, 1)
						}
					}
				} else {
					info.spec_num += 1;
				}
				const targetSpec = this.postData.goods_spec.find(e => e.id === info.spec_id);
				if (targetSpec) {
					targetSpec.number = info.spec_num;
				}
				this.$forceUpdate();
			},
			addSpecNum() {
				this.specsData.forEach((v, k) => {
					if (v.affect_quantity === 1) {
						v.spec_list.forEach(spec => {
							spec.spec_num = 0;
						});
					} else {
						this.addSpec(v.spec_list[0])
					}
				})
			},
			getGoodsGoodsSpec() {
				getGoodsGoodsSpec({
					goods_id: '5354'
				}).then((res) => {
					if (res.code * 1 === 1) {
						console.log(res);
					}
				})
			},
			navHeight(e) {
				this.newNavHeight = e
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			selectSpec(item, info) {
				let specKey = this.spec_key.indexOf(info.spec_id)
				if (item.sku_type === 1) {
					//单选
					item.spec_list.forEach((e, i) => {
						let infoKey = this.spec_key.indexOf(e.spec_id)
						if (infoKey >= 0) {
							this.spec_key.splice(infoKey, 1)
							this.postData.goods_spec.splice(infoKey, 1)
						}
					})
					this.addSpec(info)

				} else {
					//多选
					if (specKey < 0) {
						if (info.spec_num === 0) {
							info.spec_num += 1
							this.addSpec(info)
						}
					}
				}
			},
			addSpec(info) {
				this.spec_key.push(info.spec_id);
				this.postData.goods_spec.push({
					id: info.spec_id,
					number: info.spec_num || 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-left-box {
		width: 100%;
		height: 100%;
	}

	.nav-left {
		width: 174rpx;
		height: 100%;
		background: rgba(255, 255, 255, 0.45);
		border: 1rpx solid #E3E6EB;
		padding: 0 20rpx 0 14rpx;
	}

	.goods-img {
		width: 100%;
		height: 41vh;
		position: absolute;
		top: 0;
		left: 0;
	}

	.fx-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.hr {
		width: 1rpx;
		height: 36rpx;
		background: #e7e7e7;
	}

	.goods-name-box {
		position: relative;
	}

	.goods-name {
		width: 100%;
		position: relative;
		top: -32rpx;
		left: 0;
	}

	.bot-box {
		padding: 20rpx 32rpx 12rpx;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
	}

	.cz-img {
		width: 44rpx;
		height: 44rpx;
	}

	.but-box {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		background: linear-gradient(270deg, #FF3333 0%, #FE6122 100%);
	}

	.specs-item {
		position: relative;
		min-width: 218rpx;
		height: 72rpx;
	}

	.w-add-16 {
		width: calc(100% + 22rpx);
	}

	.item-box {
		position: relative;
	}

	.count-box {
		width: 28rpx;
		height: 28rpx;
		line-height: 28rpx;
		position: absolute;
		right: -8rpx;
		top: -8rpx;
	}

	.set-num-img {
		width: 44rpx;
		height: 44rpx;
	}
</style>