三期规格选择

pages/goodsDetail/index.vue

@@ -16,17 +16,24 @@
 					</button>
 				</view>
 				<!-- 商品主要信息 -->
-				<view class="head-info">
+				<view class="head-info lf-p-b-30">
 					<view class="lf-font-40">{{ goods_detail.name }}</view>
-					<view class="lf-row-between lf-font-24 lf-m-t-30 lf-p-b-20">
-						<view class="lf-flex price">
-							<lf-price :price="goods_detail.specs[0].selling_price"></lf-price>
-							<view class="lf-m-l-20">¥{{ goods_detail.specs[0].original_price }}</view>
-							<view v-if="goods_detail.specs[0].cost">{{ goods_detail.specs[0].cost }}</view>
+					<view v-for="(item,index) of goods_detail.specs" v-if="index == chooseTag">
+						<view class="lf-row-between lf-font-24 lf-m-t-30 lf-p-b-20">
+							<view class="lf-flex price">
+								<lf-price :price="item.selling_price"></lf-price>
+								<view class="lf-m-l-20">¥{{ item.original_price }}</view>
+								<view v-if="item.cost">{{ item.cost }}</view>
+							</view>
+							<view class="lf-font-24 lf-text-right">
+								<view class="lf-color-gray">{{ item.sold_stock_text }}</view>
+								<view class="lf-color-primary" v-if="item.stock && item.stock < 100">{{ item.stock_text }}</view>
+							</view>
 						</view>
-						<view class="lf-font-24 lf-text-right">
-							<view class="lf-color-gray">{{ goods_detail.specs[0].sold_stock_text }}</view>
-							<view class="lf-color-primary" v-if="goods_detail.specs[0].stock && goods_detail.specs[0].stock < 100">{{ goods_detail.specs[0].stock_text }}</view>
+					</view>
+					<view class="flex">
+						<view v-for="(item,i) of goods_detail.specs">
+							<view class="lf-tag lf-m-r-20" :class="chooseTag==i?'bg-orange':''" @click="getChooseTag(i)">{{item.name}}</view>
 						</view>
 					</view>
 					<view class="label-box" v-if="goods_detail.tags && goods_detail.tags.length">
@@ -142,7 +149,8 @@
 				backgroundImg: '',
 				goodShare: '',
 				s_id: '',
-				userInfo: {}
+				userInfo: {},
+				chooseTag: 0,//选择的规格
 			}
 		},
 		computed: {
@@ -160,6 +168,9 @@
 			this.getGoodsDetail();
 		},
 		methods: {
+			getChooseTag(i) {
+				this.chooseTag = i
+			},
 			getBackground() {
 				let _this = this
 				return new Promise((resolve, reject) => {
@@ -243,7 +254,7 @@
 					that.$http(that.API.API_WXBILL, {
 						scene: token,
 						page: 'pages/route/index',
-						width: '2800'
+						width: '28'
 					}).then(res => {
 						that.wxCode = res.data.base_url
 						if (that.wxCode) {
@@ -534,6 +545,14 @@
 	}
 </style>
 <style lang="scss" scoped="scoped">
+	.lf-tag {
+		border-radius: 30rpx;
+		width: max-content;
+		padding: 10rpx 20rpx;
+		background-color: #F5F5F5;
+		color: #222222;
+		font-size: 28rpx;
+	}
 	.bill-position {
 		position: absolute;
 		top: 0;