1

pagesHome/order/components/specs_1.vue

@@ -2,95 +2,155 @@
 	<view class="specs">
 		<!-- 规格 -->
 		<view class="specs_1" v-if="popupShow=='1'">
-			111
-		</view>
-		<view class="specs_2" v-else-if="popupShow=='2'">
-			222
-		</view>
-		<view class="specs_3" v-else>
-			333
-		</view>
-	</view>
-	<!-- 			<view class="info_3" v-else-if="popupShow=='2'">
+			<view class="info_1">
 				<scroll-view scroll-y="true" class="scroll-view">
-					<view class="list" v-for="(item,index) in info.act" :key="index">
-						<view class="list_1" @tap="toAct(item)">
-							<view class="title_1">
+					<view class="list-scroll-view">
+						<view class="one">
+							<view class="one_1">
 								<view class="l">
-									<text>{{item.tag||'暂无'}}</text>{{item.act_time.title}}
+									<image class="image"
+										:src="specfileList.length>0?specfileList[0].url:goodsfileList[0].url"
+										mode="aspectFill" @tap="diaView"></image>
 								</view>
 								<view class="r">
-									<text class="iconfont icon-jiantouyou"></text>
+									<view class="money">
+										<text v-if="specsInfo.leader_price"
+											class="money_2"><text>团长价¥</text>{{specsInfo.leader_price}}</text>
+										<text v-if="specsInfo.price"
+											class="money_1"><text>特价¥</text>{{specsInfo.price}}</text>
+										<text v-if="!specsInfo.price&&!specsInfo.leader_price"
+											class="money_1"><text>¥</text>{{specsInfo.sell_money}}</text>
+										<text class="money_1"><text>¥</text>{{specsInfo.flow_money}}</text>
+									</view>
+									<view class="other_1">
+										<text>已选：</text>
+										<text>{{specsInfo.name}}</text>
+									</view>
+									<view class="other_1">
+										<text>运费：</text>
+										<text>{{specsInfo.freight===0?'包邮':specsInfo.freight+'元'}}</text>
+									</view>
 								</view>
 							</view>
-							<view class="title_2">
-								<view class="text" v-if="item.type=='5'||item.type=='6'">{{item.text}}</view>
-								<view class="time">{{item.config.time_start}}-{{item.config.time_end}}</view>
-							</view>
-							<view class="title_2" v-if="item.type=='2'">
-								<view class="specList" v-for="(tag,indexx) in item.list" :key="indexx">
-									<view class="name">规格:{{tag.spec_name}}</view>
-									<view class="giftList" v-for="(tags,indexs) in tag.gift" :key="indexs"
-										@tap.stop="tags.type=='0' && getDetail(tags)">
-										<view class="left">
-											<view class="goods">{{tags.goods_name}}{{tags.spec_name}}</view>
-											<view class="goods">{{tags.desc}}</view>
-											<view class="num">×{{tags.num}}</view>
-										</view>
-										<view class="right"><text class="iconfont icon-jiantouyou"></text>
-										</view>
+							<view class="one_2">
+								<view class="one_2_1">
+									规格
+								</view>
+								<view class="one_2_2">
+									<view
+										:class="['list',is_specs!=index&&item.num>0?'list':is_specs!=index&&item.num<=0?'huilist':is_specs==index&&item.num>0?'redlist':is_specs==index&&item.num<=0?'huiilist':'list']"
+										v-for="(item,index) in specsList" :key="index" @tap="toSpecs(item)">
+										<text>{{item.name}}</text>
 									</view>
 								</view>
 							</view>
+							<view class="one_3">
+								<view class="one_3_1">
+									<text>数量</text>
+								</view>
+								<view class="one_3_1">
+									<uni-number-box v-model="buy_num" @change="toCount" :min="1" :max="specsInfo.num">
+									</uni-number-box>
+								</view>
+								<view class="one_3_1">
+									<text>库存{{specsInfo.num||0}}</text><text class="limit"
+										v-if="specsInfo.limit_num">({{specsInfo.buy_name||'暂无'}}{{specsInfo.limit_num||0}}个)</text>
+								</view>
+							</view>
 						</view>
 					</view>
 				</scroll-view>
 			</view>
-			<view class="info_4" v-else>
-				<view class="info_4">
-					<scroll-view scroll-y="true" class="scroll-view">
-						<view class="list-scroll-view">
-							<view class="list" v-for="(item,index) in info.sets" :key="index">
-								<view class="name"><text class="set">套装</text>{{item.name}}</view>
-								<view class="set">
-									<view class="set_1" v-for="(tag,indexx) in item.set" :key="indexx"
-										@tap="toDeatil(tag)">
-										<image class="image" :src="tag.file&&tag.file.length>0?tag.file[0].url:''"
-											mode="aspectFit">
-										</image>
-										<view class="goods textOver">{{tag.goods_name}}</view>
-										<view class="spec textOver">{{tag.spec_name}}</view>
-									</view>
-								</view>
-								<view class="bottom">
-									<view class="money">
-										共{{item.goods_total||0}}件，套装价：<text>￥{{item.sell_money||0}}</text>
+			<view class="info_2">
+				<view :class="[specsInfo.can_group=='0'?'btns':'btn']" v-if="btn_type=='0'">
+					<button :disabled="is_zero" :class="[is_zero?'btncolor':'']" @tap="toMarket">加入购物车</button>
+				</view>
+				<view :class="[specsInfo.can_group=='0'?'btns':'btn']" v-if="btn_type=='1'">
+					<button :disabled="is_zero" :class="[is_zero?'btncolor':'']" @tap="toBuy">立即购买</button>
+				</view>
+				<view :class="[specsInfo.can_group=='0'?'btns':'btn']" v-if="specsInfo.can_group=='0'">
+					<button :disabled="is_zero" :class="[is_zero?'btncolor':'']" @tap="toGroup">我要开团</button>
+				</view>
+			</view>
+		</view>
+		<view class="specs_2" v-else-if="popupShow=='2'">
+			<scroll-view scroll-y="true" class="scroll-view">
+				<view class="list" v-for="(item,index) in actList" :key="index">
+					<view class="list_1" @tap="toAct(item)">
+						<view class="title_1">
+							<view class="l">
+								<text>{{item.tag||'暂无'}}</text>{{item.act_time.title}}
+							</view>
+							<view class="r">
+								<text class="iconfont icon-jiantouyou"></text>
+							</view>
+						</view>
+						<view class="title_2">
+							<view class="text" v-if="item.type=='5'||item.type=='6'">{{item.text}}</view>
+							<view class="time">{{item.config.time_start}}-{{item.config.time_end}}</view>
+						</view>
+						<view class="title_2" v-if="item.type=='2'">
+							<view class="specList" v-for="(tag,indexx) in item.list" :key="indexx">
+								<view class="name">规格:{{tag.spec_name}}</view>
+								<view class="giftList" v-for="(tags,indexs) in tag.gift" :key="indexs"
+									@tap.stop="tags.type=='0' && getDetail(tags)">
+									<view class="left">
+										<view class="goods">{{tags.goods_name}}{{tags.spec_name}}</view>
+										<view class="goods">{{tags.desc}}</view>
+										<view class="num">×{{tags.num}}</view>
 									</view>
-									<view class="add">
-										<button size="mini" @tap="toSetMarket(item)">加入购物车</button>
+									<view class="right"><text class="iconfont icon-jiantouyou"></text>
 									</view>
 								</view>
 							</view>
 						</view>
-					</scroll-view>
+					</view>
 				</view>
-			</view> -->
-	<!-- <view class="dialog" v-if="dialog.show==true" @tap="dialogClose">
-				<view class="dialog_1" v-if="dialog.type=='1'">
-					<swiper class="swiper" circular @change="diaSpecs" :current="is_specs">
-						<swiper-item class="list" v-for="(item,index) in info.specs" :key="index">
-							<view class="list_1">
-								<image class="image"
-									:src="item.file&&item.file.length>0?item.file[0].url:info.goods.file[0].url"
-									mode="aspectFit"></image>
+			</scroll-view>
+		</view>
+		<view class="specs_3" v-else>
+			<scroll-view scroll-y="true" class="scroll-view">
+				<view class="list-scroll-view">
+					<view class="list" v-for="(item,index) in setList" :key="index">
+						<view class="name"><text class="set">套装</text>{{item.name}}</view>
+						<view class="set">
+							<view class="set_1" v-for="(tag,indexx) in item.set" :key="indexx" @tap="toDeatil(tag)">
+								<image class="image" :src="tag.file&&tag.file.length>0?tag.file[0].url:''"
+									mode="aspectFit">
+								</image>
+								<view class="goods textOver">{{tag.goods_name}}</view>
+								<view class="spec textOver">{{tag.spec_name}}</view>
+							</view>
+						</view>
+						<view class="bottom">
+							<view class="money">
+								共{{item.goods_total||0}}件，套装价：<text>￥{{item.sell_money||0}}</text>
 							</view>
-							<view class="name">
-								<text>{{item.name}}</text>
+							<view class="add">
+								<button size="mini" @tap="toSetMarket(item)">加入购物车</button>
 							</view>
-						</swiper-item>
-					</swiper>
+						</view>
+					</view>
 				</view>
-			</view> -->
+			</scroll-view>
+		</view>
+		<view class="dialog" v-if="dialog.show==true" @tap="dialogClose">
+			<view class="dialog_1" v-if="dialog.type=='1'">
+				<swiper class="swiper" circular @change="diaSpecs" :current="is_specs">
+					<swiper-item class="list" v-for="(item,index) in specsList" :key="index">
+						<view class="list_1">
+							<image class="image"
+								:src="item.file&&item.file.length>0?item.file[0].url:info.goods.file[0].url"
+								mode="aspectFit"></image>
+						</view>
+						<view class="name">
+							<text>{{item.name}}</text>
+						</view>
+					</swiper-item>
+				</swiper>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
@@ -99,6 +159,9 @@
 			goodsInfo: {
 				type: Object,
 			},
+			info: {
+				type: Object,
+			},
 			specsInfo: {
 				type: Object,
 			},
@@ -111,6 +174,15 @@
 			is_specs: {
 				type: Number
 			},
+			buy_num: {
+				type: Number
+			},
+			is_zero: {
+				type: Boolean
+			},
+			dialog: {
+				type: Object,
+			},
 		},
 		data() {
 			return {
@@ -118,6 +190,9 @@
 				goodsfileList: [],
 				// 规格图片
 				specfileList: [],
+				actList: [],
+				setList: [],
+				specsList: [],
 			};
 		},
 		methods: {
@@ -127,7 +202,7 @@
 			},
 			toSpecs(item) {
 				const that = this;
-				that.$emit('diaView', item)
+				that.$emit('toSpecs', item)
 			},
 			toCount() {
 				const that = this;
@@ -157,20 +232,37 @@
 				const that = this;
 				that.$emit('toSetMarket', item)
 			},
+			dialogClose() {
+				const that = this;
+				that.$emit('dialogClose')
+			},
+			diaSpecs() {
+				const that = this;
+				that.$emit('diaSpecs')
+			},
 		},
 		watch: {
 			specsInfo: {
 				deep: true,
 				immediate: true,
 				handler(val) {
-					if (val && val.file.length > 0) this.$set(this, `specfileList`, val.file)
+					if (val && val?.file.length > 0) this.$set(this, `specfileList`, val?.file)
 				}
 			},
 			goodsInfo: {
 				deep: true,
 				immediate: true,
 				handler(val) {
-					if (val && val.file.length > 0) this.$set(this, `goodsfileList`, val.file)
+					if (val && val?.file.length > 0) this.$set(this, `goodsfileList`, val?.file)
+				}
+			},
+			info: {
+				deep: true,
+				immediate: true,
+				handler(val) {
+					if (val && val?.act.length > 0) this.$set(this, `actList`, val?.act)
+					if (val && val?.sets.length > 0) this.$set(this, `setList`, val?.sets)
+					if (val && val?.specs.length > 0) this.$set(this, `specsList`, val?.specs)
 				}
 			}
 		},
@@ -354,6 +446,190 @@
 					color: #858585;
 				}
 			}
+
+		}
+
+		.specs_2 {
+			position: relative;
+			flex-grow: 1;
+
+			.list {
+				margin: 0 2vw 2vw 2vw;
+				border-radius: 10px;
+				background-color: #FFF8DC;
+
+				.list_1 {
+					padding: 2vw;
+					font-size: 14px;
+
+					.title_1 {
+						display: flex;
+						justify-content: space-between;
+						margin: 1vw 0;
+
+						.l {
+							text {
+								margin: 0 1vw 0 0;
+								font-size: 12px;
+								border-radius: 5px;
+								border: 0.5px solid var(--fFB1Color);
+								color: var(--fFB1Color);
+							}
+						}
+
+					}
+
+					.title_2 {
+						.specList {
+							.name {
+								margin: 0 0 1vw 0;
+							}
+
+							.giftList {
+								display: flex;
+								justify-content: space-between;
+								align-items: center;
+								margin: 0 0 1vw 0;
+								border: 0.5px solid var(--f9Color);
+								border-radius: 10px;
+
+								.left {
+									width: 85vw;
+								}
+							}
+						}
+
+						.text {
+							color: var(--fFB1Color);
+						}
+					}
+				}
+			}
+		}
+
+		.specs_3 {
+			position: relative;
+			flex-grow: 1;
+
+			.list {
+				margin: 0 2vw 2vw 2vw;
+				border-radius: 10px;
+				background-color: var(--f9Color);
+
+				.name {
+					display: flex;
+					padding: 2vw;
+					font-size: 14px;
+
+					.set {
+						margin: 0 1vw 0 0;
+						font-size: 12px;
+						border-radius: 5px;
+						padding: 0 1vw;
+						color: #ffffff;
+						background-color: #FF6347;
+						border: 1px solid #FFA500;
+					}
+				}
+
+				.set {
+					display: flex;
+					justify-content: space-around;
+					flex-wrap: wrap;
+					margin: 0 2vw;
+					padding: 2vw;
+					background-color: #fff;
+					border-radius: 5px;
+
+					.set_1 {
+						width: 25vw;
+						text-align: center;
+						font-size: 14px;
+
+						.spec {
+							font-size: 12px;
+							color: #858585;
+						}
+
+						.image {
+							width: 20vw;
+							height: 20vw;
+							border-radius: 5px;
+							background-color: #fff;
+						}
+					}
+				}
+
+				.bottom {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					padding: 2vw;
+
+					.money {
+						font-size: 12px;
+
+						text {
+							color: #ff0000;
+						}
+					}
+
+					.add {
+						button {
+							background-color: #ff0000;
+							color: #ffffff;
+							border-radius: 5vw;
+						}
+					}
+				}
+			}
+		}
+
+		.dialog {
+			position: fixed;
+			width: 100vw;
+			height: 100vh;
+			background-color: #000000;
+			z-index: 99999;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+
+			swiper {
+				height: 60vh;
+			}
+
+			.list {
+				.list_1 {
+					padding: 2vw;
+					margin: 0 0 5vw 0;
+
+					.image {
+						width: 100%;
+						height: 40vh;
+					}
+				}
+
+				.name {
+					text-align: center;
+					margin: 0 10vw;
+					background-color: #6666669f;
+					border-radius: 25px;
+					padding: 2vw;
+
+					text {
+						color: #fff;
+						font-size: 15px;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						-webkit-line-clamp: 2;
+						word-break: break-all;
+						display: -webkit-box;
+						-webkit-box-orient: vertical;
+					}
+				}
+
+			}
 		}
 	}
 </style>

pagesHome/order/detail.vue

@@ -142,9 +142,10 @@
 				<view class="close">
 					<text @click="toClose" class="iconfont icon-shanchu"></text>
 				</view>
-				<specs_1 :goodsInfo="info.goods" :specsInfo="specsInfo" :btn_type="btn_type" :popupShow="popupShow"
-					:is_specs="is_specs" @diaView="diaView" @toSpecs="toSpecs" @toCount="toCount" @toMarket="toMarket"
-					@toBuy="toBuy" @toGroup="toGroup">
+				<specs_1 :info="info" :goodsInfo="info.goods" :specsInfo="specsInfo" :btn_type="btn_type"
+					:dialog="dialog" :is_zero="is_zero" :buy_num="buy_num" :popupShow="popupShow" :is_specs="is_specs"
+					@diaView="diaView" @toSpecs="toSpecs" @toCount="toCount" @toMarket="toMarket" @toBuy="toBuy"
+					@toGroup="toGroup" @dialogClose="dialogClose" @diaSpecs="diaSpecs">
 				</specs_1>
 			</view>
 		</uni-popup>
@@ -156,7 +157,8 @@
 	import specs_1 from './components/specs_1.vue';
 	export default {
 		components: {
-			banner
+			banner,
+			specs_1,
 		},
 		data() {
 			return {
@@ -627,6 +629,26 @@
 					that.toPath(obj)
 				}
 			},
+			// 关闭弹框
+			dialogClose() {
+				const that = this;
+				that.$set(that, `dialog`, {
+					show: false,
+					type: '1'
+				})
+			},
+			// 弹框选择规格
+			diaSpecs(e) {
+				const that = this;
+				let specs = that.info.specs;
+				let index = e.detail.current;
+				let data = specs[index];
+				that.$set(that, `is_specs`, index);
+				that.$set(that, `specsInfo`, data);
+				that.$set(that, `buy_num`, 1);
+				if (data.num <= 0) that.$set(that, `is_zero`, true)
+				else that.$set(that, `is_zero`, false)
+			},
 			// 加入购物车,立即购买
 			toNavright(e) {
 				const that = this;