zh_order_food_xcx/pages-buy/group-goods-info.vue

<template>
	<view class="flex-common-css iPhone-bottom box-border-box">
		<Nav :title="shop_name" :bgckgroundBox='"transparent"' leftIconColor="#333" titleColor="#333"></Nav>
		<uni-popup ref="popup" type="top" border-radius="0 0 10px 10px">
			<view class="pop-box bgc-f" :style="[{'padding-top': popTop + 'px'}]">
				<view class="p-24 box-border-box">
					<view class="fs-32 fc-3 mb-20">
						全部团购
					</view>
					<view class="align-items-center flex-wrap-wrap">
						<view class="w-50 p-24 box-border-box text-overflow-ellipsis-one"
							v-for="(item,index) in sift_data" :key="index" :class="{'active':isActive==index}"
							@click="popChenked(index)">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="sift-box p-12-24 box-border-box align-items-center">
			<scroll-view scroll-x="true" scroll-with-animation :scroll-left="scrollLeft" class="flex-1 tab-scroll">
				<view class="max-w-200 text-overflow-ellipsis-one tab-scroll_item fs-28"
					v-for="(item,index) in sift_data" :key="index" :class="{'active':isActive==index}"
					@click="chenked(index)">
					{{item.title}}
				</view>
			</scroll-view>
			<uni-icons @click="openPop" class="flex-shrink0 ml-16" type="bars" size="22"></uni-icons>
		</view>
		<swiper @change="change" :current="isActive" class="swiper-content common-view-css">
			<swiper-item class="swiperitem-content w-h-100" v-for="(item,index) in swiper_data" :key="index">
				<view class="w-h-100 flex-direction">
					<scroll-view v-if="item!==''" :scroll-y="true" class="scroll-view-css p-12-24 box-border-box">
						<view class="item-goods-box b-rad-20 bgc-f p-24 box-border-box mb-32">
							<view class="fs-36 fw-600 fc-3 letter-spacing-3 mb-18">
								{{item.title}}
							</view>
							<view class="p-b-20 mb-20 b-b-F9F9F9">
								<swiper class="swiper-goods">
									<swiper-item class="swiper-item-goods" v-for="(goods_item, goods_index) in item.image"
										:key="goods_index">
										<image class="goods-img" :src="goods_item" mode="aspectFill"></image>
									</swiper-item>
								</swiper>
							</view>
							<view class="align-items-flex-start mb-16"
								v-show="item.is_quota != 0 && item.restricted_num != 1">
								<view class="mr-18 fs-26">
									限制
								</view>
								<view class="align-items-center">
									<view class="mr-8 fs-26" v-show="item.is_quota === 1">
										每人限购{{item.quota_num}}张,
									</view>
									<view class="fs-26" v-show="item.restricted === 2">
										每张卷限{{item.restricted_num}}人使用
									</view>
									<view class="fs-26" v-show="item.restricted === 3">
										每桌限用{{item.restricted_num}}张
									</view>
								</view>
							</view>
							<view class="align-items-flex-start mb-16">
								<view class="mr-18 fs-26">
									须知
								</view>
								<view class="fs-26" v-show="item.usable_time == 1">
									24小时可用
								</view>
								<view class="" v-show="item.usable_time == 2">
									{{item.timeData}}
								</view>
							</view>
							<view class="align-items-flex-start">
								<view class="mr-18 fs-26">
									保障
								</view>
								<view class="">
									随时退，过期自动退
								</view>
							</view>
						</view>
						<view class="fs-34 fc-3 mb-18">
							团购详情
						</view>
						<view class="item-goods-box b-rad-20 bgc-f p-24 box-border-box mb-32">
							<view class="item-info" v-for="(item_item,item_index) in item.item" :key="item_index">
								<view class="align-items-center mb-10">
									<view class="d"></view>
									<view class="fs-32">
										{{item_item.name}}
									</view>
								</view>
								<view class="align-items-center flex-justify-space goods-info"
									v-for="(goods_item,goods_index) in item_item.goods" :key="goods_index">
									<view class="">
										{{goods_item.name}}
									</view>
									<view class="">
										{{goods_item.number}}{{goods_item.unit}}
									</view>
								</view>
							</view>
							<view class="item-info">
								<view class="align-items-center mb-10">
									<view class="d"></view>
									<view class="fs-32">
										备注
									</view>
								</view>
								<view class="fs-24">
									温馨提示：套餐用餐前请提前验券
								</view>
							</view>
						</view>
						<view class="fs-34 fc-3 mb-18">
							购买须知
						</view>
						<view class="item-goods-box b-rad-20 bgc-f p-24 box-border-box mb-32">
							<view class="mb-10 fs-30 fw-600 fc-3">
								有效期
							</view>
							<view class="b-b-F9F9F9 pb-10 mb-10" v-if="item.time_type === 1">
								{{item.start_time}} 至 {{item.end_time}}
							</view>
							<view class="b-b-F9F9F9 pb-10 mb-10" v-else>
								购买后{{item.valid_day}}天
							</view>
							<view class="mb-10 fs-30 fw-600 fc-3">
								使用时间
							</view>
							<view class="b-b-F9F9F9 pb-10 mb-10">
								{{item.usable_time == 1?'24小时可用':item.timeData}}
							</view>
							<view class="mb-10 fs-30 fw-600 fc-3">
								使用规则
							</view>
							<view class="align-items-center mb-10"
								v-for="(use_message_item,use_message_index) in item.use_message" :key="use_message_index">
								<view class="d"></view>
								<view class="">
									{{use_message_item.notice}}
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="but-box p-24 box-border-box bgc-f">
						<view class="but bgc-3 align-items-center flex-justify-space plr-24 box-border-box">
							<view class="fc-f fs-32">
								折后 <text class="fc-f fs-34">￥</text>{{item.price}}
							</view>
							<view class="but-right fc-f fs-32 bgc-41ABF5" @click="goToUrl">
								立即团购
							</view>
						</view>
					</view>
				</view>

			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import {
		groupInfo,
		groupIndexGoods
	} from '@/api/group.js'
	export default {
		components: {},
		data() {
			return {
				shop_id: '',
				goods_id: '',
				shop_name: '',
				sift_data: [],
				sift_id: 0,
				currentindex: 0,
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				isActive: 0,
				swiper_data: [],
				goodsList: [],
				popTop: 0
			};
		},
		onLoad(data) {
			if (data) {
				this.shop_id = data.shop_id
				this.goods_id = data.goods_id
				this.shop_name = data.shop_name
				// this.groupInfo()
				this.groupIndexGoods()
			}
			// console.log(data);
		},
		watch: {
			// swiper与上面选项卡联动
			currentindex(newval) {
				this.isActive = newval;
				this.scrollLeft = 0;
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				console.log(newval);
				if (newval === 0) {
					this.scrollLeft = this.sift_data[newval].left - 60
				} else {
					this.scrollLeft = (this.sift_data[newval].left - ((this.sift_data[(newval - 1)].width) / 2)) - 60
				}
				// for (let i = 0; i < newval - 1; i++) {
				// 	this.scrollLeft += (this.sift_data[i].width + (this.sift_data[i].left))
				console.log(this.scrollLeft);
				// };
			},
		},
		mounted() {
			this.$nextTick(() => {
				setTimeout(() => {
					this.getScrollW()
				}, 500)
				uni.getSystemInfo({
					success: (e) => {
						let statusBarH = e.statusBarHeight + 10
						let custom = 0;
						custom = wx.getMenuButtonBoundingClientRect()
						let customBarH = custom.height;
						this.popTop = statusBarH + customBarH;
					}
				})
			})
		},
		methods: {
			goToUrl() {
				uni.navigateTo({
					url: '/pages-buy/group-pay?shop_id=' + this.sift_data[this.isActive].shop_id + '&goods_id=' + this.sift_data[this.isActive].id
				});
			},
			openPop() {
				this.$refs.popup.open()
			},
			setTimeData(timeData) {
				let time = ''
				let array = ''
				timeData.forEach((v, k) => {
					v.forEach((i, j) => {
						let timeTwo = ''
						if (j == 0 || j == 3) {
							timeTwo = i + '-'
						} else {
							timeTwo = i
						}
						array = array + timeTwo
					})
					if (timeData.length === k + 1) {
						time = time + array + '可用'
					} else {
						time = time + array + '可用' + ','
					}
					array = ''
				})
				console.log(time);
				return time
			},
			change(e) {
				const {
					current
				} = e.detail;
				console.log(current);
				this.currentindex = current;
			},
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-scroll').boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度
					this.contentScrollW = data.width
					// console.log(data, '00000000000000');
				}).exec();
				query.selectAll('.tab-scroll_item').boundingClientRect(data => {
					let dataLen = data.length;
					// console.log(data, '11111111111111111111');
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.sift_data[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.sift_data[i].width = data[i].width
						// console.log(this.sift_data);
					}
				}).exec()
			},
			popChenked(index) {
				this.chenked(index)
				this.$refs.popup.close()
			},
			chenked(index) {
				this.isActive = index;
				this.scrollLeft = 0;
				console.log(this.scrollLeft);
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.sift_data[i].width
					console.log(this.scrollLeft);
				};
			},
			groupIndexGoods() {
				groupIndexGoods({
					goods_id: this.goods_id,
					shop_id: this.shop_id
				}).then((res) => {
					if (res.code === 1) {
						this.sift_data = res.data
						this.swiper_data = []
						this.processGroupInfo(0);
					}
				})
			},
			processGroupInfo(index) {
				if (index < this.sift_data.length) {
					const v = this.sift_data[index];
					this.groupInfo(v.id).then(() => {
						this.processGroupInfo(index + 1);
					});
				}
			},
			groupInfo(goodsId) {
				return new Promise((resolve) => {
					groupInfo({
						id: goodsId,
						shop_id: this.shop_id
					}).then((res) => {
						if (res.code === 1) {
							if (res.data.usable_time === 2) {
								res.data.timeData = this.setTimeData(res.data.usable_time_arr)
							}
							this.swiper_data.push(res.data);
						}
						resolve();
					});
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.w-h-100 {
		width: 100%;
		height: 100%;
	}
	.overflow-auto {
		overflow: auto;
	}

	.but-box {
		width: 100%;
	}

	.but {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 200rpx;
		position: relative;
	}
	.but-right{
		position: absolute;
		right: 0;
		top: 0;
		width: 30%;
		height: 90rpx;
		line-height: 90rpx;
		padding: 0 24rpx 0 0;
		box-sizing: border-box;
		border-radius: 0 200rpx 200rpx 0;
		text-align: center;
	}
	.w-50 {
		width: 50%;
	}

	.pop-box {
		width: 100%;
		max-height: 40vh;
		overflow: auto;
		border-radius: 0 0 20rpx 20rpx;
	}

	.d {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background: #ccc;
		margin-right: 20rpx;
	}

	.swiper-goods {
		width: 100%;
		height: 470rpx;
		border-radius: 20rpx;
	}

	.swiper-item-goods {
		display: block;
		height: 470rpx;
		border-radius: 20rpx;
	}

	.goods-img {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.active {
		position: relative;
		color: #57CAFF;
		font-weight: 600;
	}

	.tab-scroll {
		width: calc(100% - 62rpx);
		white-space: nowrap;
	}

	.box-b {
		width: 100%;
		height: 100vh;
		background: orangered;
	}

	.max-w-200 {
		max-width: 310rpx;
		// min-width: 200rpx;
		text-align: center;
		margin-right: 60rpx;
		display: inline-block;
	}

	.max-w-200:last-child {
		margin-right: 0;
	}

	.goods-info {
		margin-bottom: 10rpx;
	}

	.goods-info:last-child {
		padding-bottom: 10rpx;
		margin-bottom: 10rpx;
		border-bottom: 1rpx solid #F9F9F9;
	}
</style>