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"' leftColor="#fff" titleColor="#fff"></Nav>
		<image src="https://sjz-school.oss-cn-chengdu.aliyuncs.com/webImages/bg-2.png" mode="" class="bg-img"></image>
		<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" v-for="(item,index) in sift_data"
					:key="index" @click="chenked(index)">
					<view class="text-overflow-ellipsis-one fs-28 fc-f mb-16">
						{{item.title}}
					</view>
					<view v-if="isActive==index" class="title-hr bgc-f"></view>
				</view>
			</scroll-view>
			<!-- <uni-icons @click="openPop" class="flex-shrink0 ml-16 z-2" 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">
						<swiper class="swiper-goods mb-30">
							<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 class="item-goods-box b-rad-20 bgc-f p-24 box-border-box mb-32">
							<view class="align-items-center flex-justify-space mb-30">
								<view class="fs-32 fw-b fc-0 letter-spacing-3">
									{{item.title}}
								</view>
								<view class="xl-box">
									<image src="/pages-buy/static/xl.png" mode="" class="xl-img"></image>
									<view class="fc-F7663A fs-24 text-align-center z-2">
										已拼{{item.sales}}+
									</view>
								</view>
							</view>
							<view class="align-items-center flex-justify-space mb-60 fg-box">
								<view class="by-box"></view>
								<view class="fg-hr"></view>
								<view class="by-box-two"></view>
							</view>
							<view class="align-items-flex-start mb-16" v-show="item.is_quota == 1">
								<view class="mr-24 fs-28 fw-b fc-0">
									使用限制
								</view>
								<view class="align-items-center">
									<view class="mr-8 fs-28 fc-0">
										每人限购{{item.quota_num}}张,
									</view>
								</view>
							</view>
							<view class="align-items-flex-start mb-16">
								<view class="mr-24 fs-28 fw-b fc-0">
									使用限制
								</view>
								<view class="align-items-center">
									<view class="fs-28 fc-0" v-show="item.restricted === 1">
										不限用
									</view>
									<view class="fs-28 fc-0" v-show="item.restricted === 2">
										每张卷限{{item.restricted_num}}人使用
									</view>
									<view class="fs-28 fc-0" v-show="item.restricted === 3">
										每桌限用{{item.restricted_num}}张
									</view>
								</view>
							</view>
							<view class="align-items-flex-start mb-16">
								<view class="mr-24 fs-28 fw-b fc-0">
									消费须知
								</view>
								<view class="fs-28 fc-0" v-show="item.usable_time == 1">
									24小时可用
								</view>
								<view class="fs-28 fc-0" v-show="item.usable_time == 2">
									{{item.timeData}}
								</view>
							</view>
							<view class="align-items-flex-start">
								<view class="mr-24 fs-28 fw-b fc-0">
									服务保障
								</view>
								<view class="fs-28 fc-0">
									随时退，过期自动退
								</view>
							</view>
						</view>
						<view class="align-items-center flex-justify-center mb-32">
							<view class="tm-hr"></view>
							<view class="fs-28 fc-0 plr-12">
								团购详情
							</view>
							<view class="tm-hr"></view>
						</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-28 fw-b">
										{{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">
									<div class="align-items-center">
										<view class="d d-c"></view>
										<view class="fs-24">
											{{goods_item.name}}
										</view>
									</div>
									<view class="align-items-center">
										<view class="fc-a mr-18 fs-24">
											({{goods_item.number}}{{goods_item.unit}})
										</view>
										<view class="w-100 text-align-right fs-24">
											￥{{goods_item.price}}
										</view>
									</view>
								</view>
							</view>
							<view class="item-info">
								<view class="align-items-center mb-10">
									<view class="d"></view>
									<view class="fs-28 fw-b">
										备注
									</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-38-20-24 box-border-box mb-32">
							<view class="align-items-center pb-36 mb-24 b-b-EAEAEC">
								<image src="/pages-buy/static/gmxz.png" mode="" class="gmxz-img mr-10"></image>
								<view class="fs-28 fc-F7663A">
									购买须知
								</view>
							</view>
							<view class="align-items-center mb-24">
								<view class="d"></view>
								<view class="fs-28 fw-600 fc-3">
									有效期
								</view>
							</view>
							<view class="align-items-center mb-40">
								<view class="d d-c"></view>
								<view class="fs-24" v-if="item.time_type === 1">
									{{item.start_time}} 至 {{item.end_time}}
								</view>
								<view class="fs-24" v-else>
									购买后{{item.valid_day}}天
								</view>
							</view>
							<view class="align-items-center mb-24">
								<view class="d"></view>
								<view class="fs-28 fw-600 fc-3">
									使用时间
								</view>
							</view>
							<view class="align-items-center mb-40">
								<view class="d d-c"></view>
								<view class="fs-24">
									{{item.usable_time == 1?'24小时可用':item.timeData}}
								</view>
							</view>
							<view class="align-items-center mb-24">
								<view class="d"></view>
								<view class="fs-28 fw-600 fc-3">
									使用规则
								</view>
							</view>
							<view class="align-items-center mb-30"
								v-for="(use_message_item,use_message_index) in item.use_message"
								:key="use_message_index">
								<view class="d d-c"></view>
								<image src="/pages-buy/static/right.png" mode="" class="right-icon"></image>
								<view class="fs-24">
									{{use_message_item.notice}}
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="but-box box-border-box">
						<view class="but align-items-center flex-justify-space">
							<view class="align-items-baseline pl-42 box-border-box">
								<view class="fs-24 fc-f">
									折后 ￥
								</view>
								<view class="fs-40 fc-f fw-b mr-12">
									{{item.price}}
								</view>
								<view class="zk-box text-align-center">
									<image src="/pages-buy/static/zk.png" mode="" class="zk-img"></image>
									<view class="fs-24 fc-F7663A z-2">
										{{toFixedOne(item.price,item.line_price)}}折
									</view>
								</view>
							</view>
							<view class="ljtg-box text-align-center" @click="goToUrl">
								<image src="/pages-buy/static/ljtg.png" mode="" class="ljtg-bg"></image>
								<view class="fc-F6531E fs-32 fw-b z-2">
									立即团购
								</view>
							</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: {
			toFixedOne(price, line_price) {
				let num = (Number(price) / Number(line_price) * 10).toFixed(1)
				// 转换为字符串，以便进行操作
				var numStr = num.toString();
				// 检查是否有小数部分
				if (numStr.indexOf('.') !== -1) {
					// 有小数部分，则移除多余的零
					numStr = numStr.replace(/0+$/, '').replace(/\.$/, '');
				}
				// 返回处理后的数字或整数
				return parseFloat(numStr);
			},
			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 + (this.sift_data[i].width / 2)
					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>
	.ljtg-box {
		width: 247rpx;
		height: 100rpx;
		line-height: 100rpx;
		position: relative;
	}

	.ljtg-bg {
		position: absolute;
		right: 0;
		top: 0;
		width: 247rpx;
		height: 100rpx;
	}

	.zk-box {
		width: 83rpx;
		height: 32rpx;
		line-height: 32rpx;
		position: relative;
	}

	.zk-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 83rpx;
		height: 32rpx;
	}

	.gmxz-img {
		width: 27rpx;
		height: 27rpx;
	}

	.fg-box {
		position: relative;
	}

	.by-box {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		background: #F5F5F5;
		position: absolute;
		left: -48rpx;
		top: 0;
	}

	.fg-hr {
		width: 100%;
		height: 1rpx;
		background: #EAEAEC;
		position: relative;
		top: 24rpx;
	}

	.by-box-two {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		background: #F5F5F5;
		position: absolute;
		right: -48rpx;
		top: 0;
	}

	.tm-hr {
		width: 55rpx;
		height: 1rpx;
		background: #000;
	}

	.xl-box {
		width: 126rpx;
		height: 60rpx;
		position: absolute;
		right: -3rpx;
		top: 16rpx;
		padding-top: 12rpx;
	}

	.xl-img {
		width: 126rpx;
		height: 60rpx;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
	}

	.item-goods-box {
		position: relative;
	}

	.title-hr {
		width: 48rpx;
		height: 6rpx;
		border-radius: 10rpx;
		position: relative;
		left: calc(50% - 24rpx);
		// position: absolute;
		// left: 0;
		bottom: 0;
	}

	.bg-img {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 427rpx;
	}

	.w-100 {
		min-width: 100rpx;
	}

	.w-h-100 {
		width: 100%;
		height: 100%;
	}

	.overflow-auto {
		overflow: auto;
	}

	.but-box {
		padding: 0 30rpx 0;
		width: 100%;
	}

	.but {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50rpx;
		position: relative;
		background: linear-gradient(-90deg, #FF7D2D, #F54F1D);
		box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(246, 83, 30, 0.32);
	}

	.w-50 {
		width: 50%;
	}

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

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

	.d-c {
		background: transparent;
	}

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

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

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

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

	.tab-scroll {
		width: 100%;
		// width: calc(100% - 62rpx);
		white-space: nowrap;
		position: relative;
		z-index: 2;
	}

	.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: 30rpx;
		margin-bottom: 30rpx;
		border-bottom: 1rpx solid #EAEAEC;
	}

	.z-2 {
		position: relative;
		z-index: 2;
	}

	.right-icon {
		width: 6rpx;
		height: 10rpx;
		margin-right: 10rpx;
	}
</style>