point-app/pagesHome/order/components/specs_1.vue

<template>
	<view class="specs">
		<!-- 规格 -->
		<view class="specs_1" v-if="popupShow=='1'">
			<view class="info_1">
				<scroll-view scroll-y="true" class="scroll-view">
					<view class="list-scroll-view">
						<view class="one">
							<view class="one_1">
								<view class="l">
									<image class="image"
										:src="specfileList.length>0?specfileList[0].url:goodsfileList[0].url"
										mode="aspectFill" @tap="diaView"></image>
								</view>
								<view class="r">
									<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="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_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="right"><text class="iconfont icon-jiantouyou"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</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="add">
								<button size="mini" @tap="toSetMarket(item)">加入购物车</button>
							</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>
	export default {
		props: {
			goodsInfo: {
				type: Object,
			},
			info: {
				type: Object,
			},
			specsInfo: {
				type: Object,
			},
			btn_type: {
				type: String
			},
			popupShow: {
				type: String
			},
			is_specs: {
				type: Number
			},
			buy_num: {
				type: Number
			},
			is_zero: {
				type: Boolean
			},
			dialog: {
				type: Object,
			},
		},
		data() {
			return {
				// 商品图片
				goodsfileList: [],
				// 规格图片
				specfileList: [],
				actList: [],
				setList: [],
				specsList: [],
			};
		},
		methods: {
			diaView() {
				const that = this;
				that.$emit('diaView')
			},
			toSpecs(item) {
				const that = this;
				that.$emit('toSpecs', item)
			},
			toCount() {
				const that = this;
				that.$emit('toCount')
			},
			toMarket() {
				const that = this;
				that.$emit('toMarket')
			},
			toBuy() {
				const that = this;
				that.$emit('toBuy')
			},
			toGroup() {
				const that = this;
				that.$emit('toGroup')
			},
			toAct(item) {
				const that = this;
				that.$emit('toAct', item)
			},
			getDetail(item) {
				const that = this;
				that.$emit('getDetail', item)
			},
			toSetMarket(item) {
				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)
				}
			},
			goodsInfo: {
				deep: true,
				immediate: true,
				handler(val) {
					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)
				}
			}
		},
	}
</script>

<style lang="scss">
	.specs {
		.specs_1 {
			position: relative;
			display: flex;
			flex-direction: column;
			height: 54vh;

			.info_1 {
				position: relative;
				flex-grow: 1;

				.one {
					padding: 2vw;

					.one_1 {
						display: flex;
						margin: 0 0 2vw 0;
						padding: 0 0 2vw 0;
						border-bottom: 0.5vw solid var(--f9Color);

						.l {
							width: 25vw;
							height: 25vw;

							.image {
								width: 100%;
								height: 100%;
								border-radius: 5px;
							}
						}

						.r {
							width: 70vw;
							padding: 0 0 0 2vw;

							.money {

								margin: 0 0 2vw 0;

								.money_2 {
									color: #23B67A;
									font-size: 20px;
									padding: 0 1vw 0 0;
									font-weight: bold;

									text {
										font-size: 14px;
									}
								}

								.money_1 {
									font-size: 20px;
									color: #ff0000;
									padding: 0 2vw 0 0;

									text {
										font-size: 14px;
									}
								}

								.money_1:last-child {
									font-size: 16px;
									color: #858585;
									text-decoration: line-through;

								}
							}

							.other_1 {
								font-size: 15px;
								color: #858585;

								text:last-child {
									color: #000000;
								}
							}
						}
					}

					.one_2 {
						margin: 0 0 2vw 0;
						border-bottom: 0.5vw solid var(--f9Color);

						.one_2_1 {
							font-size: 14px;
							margin: 0 0 2vw 0;
						}

						.one_2_2 {
							display: flex;
							flex-wrap: wrap;

							.list {
								background-color: #F5F5F5;
								margin: 0 2vw 2vw 0;
								padding: 0.5vw 1vw;
								border-radius: 5px;

								text {
									font-size: 14px;
									color: #000;
								}
							}

							.huilist {
								background-color: #DCDCDC;

								text {
									color: #858585;
								}
							}

							.redlist {
								background-color: #ff0000;

								text {
									color: #ffffff;
								}
							}

							.huiilist {
								background-color: #808080;

								text {
									color: #cccccc;
								}
							}
						}
					}

					.one_3 {
						display: flex;

						.one_3_1 {
							margin: 0 2vw 0 0;

							text {
								font-size: 14px;
								color: #858585;
							}

							.limit {
								color: #ff0000;
								padding: 0 0 0 2vw;
							}
						}
					}
				}
			}

			.info_2 {
				display: flex;
				text-align: center;
				justify-content: space-between;

				.btns {
					width: 50vw;
				}

				.btn {
					width: 100vw;
				}

				button {
					width: 100%;
					border-radius: 0;
					background-color: var(--fFB1Color);
					color: #fff;
					border: 1px solid #f1f1f1;
				}

				.btncolor {
					background: #f1f1f1;
					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>