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

<template>
	<view class="flex-common-css iPhone-bottom">
		<Nav :title="shop_name" :bgckgroundBox='"transparent"' leftIconColor="#333" titleColor="#333"></Nav>
		<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 class="flex-shrink0 ml-16" type="bars" size="22"></uni-icons>
		</view>
		<swiper @change="change" :current="isActive" class="swiper-content scroll-view-css">
			<swiper-item class="swiperitem-content scroll-view-css" v-for="(item,index) in swiper_data" :key="index">
				<scroll-view :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>
			</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: []
			};
		},
		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)
			})
		},
		methods: {
			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()
			},
			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.sift_data.forEach((v, k) => {
							this.groupInfo(v.id)
						})
					}
				})
			},
			groupInfo(goodsId) {
				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)
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.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>