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-center mr-16 mb-16 plr-12 box-border-box"
							:class="postData.goods_spec_id.indexOf(info.spec_id)>=0?'s-item fc-FF3333 bgc-FAE9E9 b-FF3333':'n-item bgc-F5F5F5 fc-0'"
							v-for="(info,index_two) in item.spec_list" :key="index_two" @click="selectSpec(info,i)">
							<view class="align-items-center">
								<view class="count-box b-rad-50 bgc-FE6B2C fs-22 fc-f text-align-center"
									v-if="item.affect_quantity === 1">
									0
								</view>
								<view class="align-items-center">
									<view class="">
										{{info.spec_name}}
									</view>
									<view class="" v-if="info.spec_price">
										￥{{info.spec_price}}
									</view>
								</view>
							</view>
						</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">
							80.9
						</view>
					</view>
					<view class="fs-24 fc-9">
						不辣、煎蛋
					</view>
				</view>
				<view class="align-items-center">
					<image class="cz-img" src="@/static/img/order-food/reduce-img.png" mode=""></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=""></image>
				</view>
			</view>
			<view class="but-box text-align-center fs-32 fc-f fw-600 b-rad-200">
				加入购物车
			</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_id: 0
					}, {
						spec_name: '微辣',
						spec_id: 1
					}, {
						spec_name: '微辣',
						spec_id: 2
					}, {
						spec_name: '微辣',
						spec_id: 3
					}]
				}, {
					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: [],
				postData: {
					shop_id: '',
					goods_id: '',
					category_id: '',
					goods_spec_id: '',
					number: 1
				}
			}
		},
		onLoad(data) {},
		mounted() {
			this.addSpecNum()
		},
		methods: {
			addSpecNum() {
				this.specsData.forEach((v, k) => {
					if (v.affect_quantity === 1) {
						v.spec_list.forEach(spec => {
							// 添加数量字段，默认为0
							spec.spec_num = 0;
							// 或者如果你想要存储选中状态：
							// spec.quantity = 0;
							// spec.selected = false; // 对于多选规格
						});
					}
				})
				setTimeout(() => {
					console.log(this.specsData, '111111');
				}, 1000)
			},
			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(info, groupKey) {

			},
		}
	}
</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;
	}
</style>