zh_order_food_xcx/pages-buy/group-shop.vue

<template>
	<view class="flex-common-css iPhone-bottom">
		<Nav :leftShow='false' :customNav='true' :bgckgroundBox='scrollTopNum>30?"#fff":"transparent"' class="nav-box">
			<template>
				<view slot="custom" class="align-items-center" @click="leftClick">
					<view class="nav-left-box text-align-center" v-show="scrollTopNum<30">
						<uni-icons color="#fff" type="left" size="15"></uni-icons>
					</view>
					<uni-icons class="mr-30" color="#000" type="left" size="15" v-show="scrollTopNum>30"></uni-icons>
					<view class="fs-34 fw-600 fc-3" v-show="scrollTopNum>30">
						团购商家
					</view>
				</view>
			</template>
		</Nav>
		<scroll-view :scroll-y="true" class="scroll-view-box" @scroll='scroll' @scrolltolower="scrolltolower">
			<image :src="shopInfo.shop_logo" mode="scaleToFill" class="nav-img"></image>
			<view class="shop-box p-24 box-border-box">
				<view class="fs-38 fw-600 fc-3 letter-spacing-6 mb-18">
					{{shopInfo.shop_name || ''}}
				</view>
				<view class="align-items-center flex-justify-space p-b-20 b-b-F9F9F9 mb-18">
					<view class="">
						营业时间：{{timeData}}
					</view>
					<image src="@/static/img/takeout/info-phone.png" mode="" class="phone"></image>
				</view>
				<view class="uni-margin-wrap mb-18">
					<swiper class="swiper" :circular='true' :autoplay="true" :interval="3000" :duration="500">
						<swiper-item>
							<view class="swiper-item bgc-B3DDFB">A</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item bgc-3">B</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item fc-65420c">C</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="p-b-20 b-b-F9F9F9 mb-18">
					<view class="fs-26 fc-3 mb-10">
						{{shopInfo.city_name || ''}} {{shopInfo.address || ''}}
					</view>
					<view class="align-items-center">
						<image class="dw mr-4" src="@/static/img/my/wz-two.png" mode=""></image>
						<view class="fs-24 fc-9">
							距离{{shopInfo.distance ||  ''}}Km
						</view>
					</view>
				</view>
				<view class="align-items-center mb-18">
					<view class="hr mr-8"></view>
					<view class="fs-32 fw-600 fc-3 letter-spacing-6">
						团购
					</view>
				</view>
				<view class="list-box bgc-f b-rad-16 p-24 box-border-box">
					<view class="item-box align-items-flex-start" v-for="(item,index) in shopList" :key="index"
						@click="goToUrl(item)">
						<image :src="item.cover_img" mode="aspectFit" class="shop-img mr-16 flex-shrink0"></image>
						<view class="flex-1">
							<view class="align-items-center mb-10">
								<view class="fs-32 fs-32 flex-1 mr-16 text-overflow-ellipsis-one w-380">
									{{item.title}}
								</view>
								<uni-icons type="right" size="16"></uni-icons>
							</view>
							<view class="align-items-center mb-18">
								<view class="align-items-center mr-12" v-show="item.usable_time === 1">
									<view class="fc-9">
										24小时可用
									</view>
									<view class="d-calss bgc-9 ml-10"></view>
								</view>
								<view class="align-items-center mr-12">
									<view class="fc-9">
										{{item.pre_book === 1?'免预约':'需预约'}}
									</view>
									<view class="d-calss bgc-9 ml-10"></view>
								</view>
								<view class="fc-9" v-show="item.is_quota == 1">
									限购{{item.quota_num}}份
								</view>
							</view>
							<view class="align-items-center flex-justify-space">
								<view class="align-items-center">
									<view class="fs-30 fw-600 fc-ff3939 mr-8 flex-shrink0">
										<span class="fs-24 fc-ff3939">￥</span>
										{{item.price}}
									</view>
									<view class="mr-8 fs-20 fc-ff3939 discount-box flex-shrink0">
										6.3折
									</view>
									<view class="mr-8 fc-9 fs-24 flex-shrink0 line-price">
										￥{{item.line_price}}
									</view>
								</view>
								<view class="">
									<view class="fs-26 fc-9 mb-8 text-align-right">
										销量 {{item.sales}}+
									</view>
									<view class="item-but fc-f fs-32" @click.stop="goTOPay(item)">
										抢购
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		groupShopInfo,
		groupList
	} from '@/api/group.js'
	import tools from '@/service/tools';
	export default {
		components: {},
		data() {
			return {
				scrollTopNum: 0, //当前滚动条高度
				fromData: {
					operate_id: '',
					lat: '',
					lon: '',
					shop_id: ''
				},
				shopInfo: {},
				timeData: '',
				array: '',
				shopList: []
			};
		},
		onLoad(data) {
			if (data) {
				this.fromData.shop_id = data.shop_id
				this.groupShopInfo()
				this.groupList()
			}
		},
		mounted() {},
		methods: {
			goTOPay(item) {
				uni.navigateTo({
					url: '/pages-buy/group-pay?shop_id=' + item.shop_id + '&goods_id=' + item.id
				});
			},
			goToUrl(item) {
				uni.navigateTo({
					url: '/pages-buy/group-goods-info?shop_id=' + item.shop_id + '&goods_id=' + item.id +
						'&shop_name=' + this.shopInfo.shop_name
				});
			},
			leftClick() {
				tools.leftClick()
			},
			scroll(e) {
				this.scrollTopNum = e.detail.scrollTop
			},
			scrolltolower() {
				console.log('触底');
			},
			groupList() {
				groupList({
					shop_id: this.fromData.shop_id
				}).then((res) => {
					if (res.code === 1) {
						this.shopList = res.data
					}
				})
			},
			groupShopInfo(fromData) {
				this.fromData.operate_id = uni.getStorageSync('operate_id');
				this.fromData.lon = uni.getStorageSync('lon');
				this.fromData.lat = uni.getStorageSync('lat');
				groupShopInfo(this.fromData).then((res) => {
					if (res.code === 1) {
						this.shopInfo = res.data
						res.data.business_hours.forEach((v, k) => {
							// let time =
							v.forEach((i, j) => {
								let time = ''
								if (j == 0 || j == 3) {
									time = i + '-'
								} else {
									time = i
								}
								this.array = this.array + time
							})
							if (res.data.business_hours.length === k + 1) {
								this.timeData = this.timeData + this.array
							} else {
								this.timeData = this.timeData + this.array + ','
							}
							this.array = ''
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.item-box {
		margin-bottom: 20rpx;
	}

	.item-box:last-child {
		margin-bottom: 0;
	}

	.item-but {
		background: #57CAFF;
		border-radius: 40rpx;
		padding: 15rpx 30rpx;
		box-sizing: border-box;
	}

	.line-price {
		text-decoration: line-through;
	}

	.discount-box {
		padding: 0rpx 6rpx;
		border: 1rpx solid #ff3939;
		border-radius: 6rpx;
		box-sizing: border-box;
	}

	.d-calss {
		width: 5rpx;
		height: 5rpx;
		border-radius: 50%;
	}

	.w-380 {
		width: 380rpx;
	}

	.shop-img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 15rpx;
	}

	.hr {
		width: 5rpx;
		height: 32rpx;
		border-radius: 10rpx;
		background: #333;
	}

	.dw {
		width: 20rpx;
		height: 20rpx;
	}

	.phone {
		width: 35rpx;
		height: 35rpx;
	}

	.scroll-view-box {
		width: 100%;
		height: 100vh;
		position: fixed;
		overflow: auto;
	}

	.nav-box {
		transition: all 0.3s ease-in-out;
	}

	.nav-img {
		width: 100%;
		height: 200rpx;
	}

	.uni-margin-wrap {
		width: 100%;
		border-radius: 20rpx;
		// position: absolute;
		// left: 0;
		// top: 0;
	}

	.swiper {
		height: 200rpx;
		border-radius: 20rpx;
	}

	.swiper-item {
		display: block;
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
		border-radius: 20rpx;
	}

	.nav-left-box {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: #9A9A9A;
		border-radius: 18rpx;
	}

	.shop-box {
		width: 100%;
		// height: 100vh;
		position: relative;
		top: -10rpx;
		border-radius: 15rpx 15rpx 0 0;
		background: #F6F6F6;
	}
</style>