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

<template>
	<view class="specs">
		<!-- 规格 -->
		<uni-popup ref="specShow" background-color="#fff" type="bottom" :is-mask-click="false">
			<view class="popup">
				<view class="close">
					<text @click="toClose" class="iconfont icon-shanchu"></text>
				</view>
				<!-- 				<view class="info_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="specsInfo.file&&specsInfo.file.length>0?specsInfo.file[0].url:info.goods.file[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 info.specs" :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="info_3" v-else-if="popupShow=='2'">
							<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="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="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>
												<view class="add">
													<button size="mini" @tap="toSetMarket(item)">加入购物车</button>
												</view>
											</view>
										</view>
									</view>
								</scroll-view>
							</view>
						</view> -->
	</view>
	</uni-popup>
	<!-- 		<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>
							</view>
							<view class="name">
								<text>{{item.name}}</text>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			goodsInfo: {
				type: Object,
			},
			goodsColect: {
				type: Boolean
			}
		},
		data() {
			return {
				// 图片
				fileList: [],
				// 活动
				acttagsList: [],
			};
		},
		methods: {
			toGoodscolect() {
				const that = this;
				that.$emit('toGoodscolect')
			}
		},
		watch: {
			goodsInfo: {
				deep: true,
				immediate: true,
				handler(val) {
					if (val && val.file.length > 0) this.$set(this, `fileList`, val.file)
					if (val && val.act_tags.length > 0) this.$set(this, `acttagsList`, val.act_tags)
				}
			}
		},
	}
</script>

<style lang="scss">
	.banner {
		.banner_1 {

			border-bottom: 0.5vw solid var(--f9Color);

			swiper {
				height: 44vh !important;
			}

			.list {
				border-radius: 5px;

				.image {
					width: 100%;
					height: 100%;
					border-radius: 5px;
					background-color: #fff;
				}
			}

			.goodsColect {
				position: fixed;
				top: 2vw;
				right: 3vw;
				z-index: 99;
				background-color: #858585;
				border-radius: 90px;

				text {
					font-size: 30px;
				}
			}

			.acttags {
				position: absolute;
				top: 1vw;
				left: 1vw;
				width: 97%;

				text {
					display: inline-block;
					background-color: #ff0000;
					color: #fff;
					border-radius: 1vw;
					padding: 0.5vw;
					font-size: 12px;

					margin: 0 1vw 0 0;
				}
			}
		}
	}
</style>