zh_order_food_xcx/pages-buy/group-shop.vue

<template>
	<view class="flex-common-css iPhone-bottom box-border-box group-shop-box">
		<Nav :leftShow='false' :customNav='true' :bgckgroundBox='scrollTopNum>30?"#fff":"transparent"' class="nav-box">
			<template>
				<view slot="custom" class="align-items-center">
					<view class="nav-left-box text-align-center" v-show="scrollTopNum<30" @click="leftClick">
						<uni-icons color="#fff" type="left" size="15"></uni-icons>
					</view>
					<uni-icons @click="leftClick" 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>
		<image :src="shopInfo.shop_logo" mode="scaleToFill" class="nav-img"
			:class="scrollTopNum>30?'nav-img-false':'nav-img-true'"></image>
		<scroll-view :scroll-y="true" class="scroll-view-box" @scroll='scroll' @scrolltolower="scrolltolower">
			<view class="shop-box p-24 box-border-box">
				<view class="bgc-f top-box box-border-box b-rad-20 mb-24">
					<view class="display-flex p-b-20 b-b-eee mb-30">
						<image :src="shopInfo.shop_logo" mode="aspectFill" class="shop_logo mr-24"></image>
						<view class="flex-1 flex-direction">
							<view class="display-flex flex-justify-space mb-30">
								<view class="fs-38 fw-b fc-0 letter-spacing-6 ">
									{{shopInfo.shop_name || ''}}
								</view>
								<image src="/pages-buy/static/dh.png" mode="" class="dh-img flex-shrink0"
									@click="phoneBut(shopInfo.shop_phone)"></image>
							</view>
							<view class="align-items-center">
								<view class="align-items-center flex-shrink0 fg-class">
									<image class="dw-class mr-6" src="@/static/img/index/dw.png" mode=""></image>
									<view class="fs-24 fc-0">
										距离{{shopInfo.distance}}Km
									</view>
								</view>
								<view class="fs-24">
									营业时间：{{timeData}}
								</view>
							</view>
						</view>
					</view>
					<view class="mb-30">
						<!-- 						<view class="align-items-center mb-30">
							<view class="fs-24">
								营业时间：
							</view>
							<view class="fs-24 time-item" v-for="(item,index) in shopInfo.business_hours">
								{{item[0]+'-'+item[1]}}
							</view>
						</view> -->
						<view class="align-items-center flex-justify-space">
							<view class="fs-24 fc-a mr-8">
								{{shopInfo.city_name || ''}} {{shopInfo.address || ''}}
							</view>
							<image src="/pages-buy/static/fz.png" mode="" class="fz-icon"
								@click="copy(shopInfo.city_name+shopInfo.address)"></image>
						</view>
					</view>
					<scroll-view class="uni-margin-wrap mb-18" scroll-x="true" v-if="shopInfo.shop_album.length>0">
						<image v-for="(item,index) in shopInfo.shop_album" :src="item" mode="aspectFill"
							class="swiper-img mr-10" @click="lookImg(shopInfo.shop_album,index)"></image>
					</scroll-view>
				</view>

				<view class="list-box bgc-f b-rad-16 box-border-box">
					<image src="/pages-buy/static/bg.png" mode="" class="list-box-bg"></image>
					<view class="align-items-center mb-40">
						<view class="tg-box">
							<view class=" fs-38 fw-b fc-0 z-2">
								团购
							</view>
							<view class="title-hr"></view>
						</view>
						<view class="fc-F75820 fs-38 fw-b mr-20">
							推荐
						</view>
						<view class="fs-24 fc-a">
							限时团购尽情抢购!
						</view>
					</view>
					<view v-if="shopList.length == 0" class="scroll-view-css">
						<EnBlank :customSrc='true'>
							<template v-slot:blankImg>
								<image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
							</template>
						</EnBlank>
					</view>
					<view class="item-box align-items-flex-start z-2" v-for="(item,index) in shopList" :key="index"
						@click="goToUrl(item)">
						<view class="shop-img-box mr-24">
							<image :src="item.cover_img" mode="aspectFill" class="shop-img flex-shrink0"></image>
							<view class="zk-box fs-20 fc-f text-align-center">
								{{toFixedOne(item.price,item.line_price)}}折
							</view>
						</view>
						<view class="flex-1">
							<view class="fs-28 fw-b fc-0 text-overflow-ellipsis w-390 mb-22">
								{{item.title}}
							</view>
							<view class="align-items-center flex-justify-space">
								<view class="">
									<view class="align-items-center mb-24">
										<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>
									</view>
									<view class="align-items-flex-end">
										<view class="fs-30 fw-600 fc-F93435 mr-8 flex-shrink0">
											<span class="fs-24 fc-F93435 fw-b">￥</span>
											{{item.price}}
										</view>
										<view class="fc-a fs-24 flex-shrink0 line-price">
											￥{{item.line_price}}
										</view>
									</view>
								</view>
								<view class="qg-box flex-direction align-items-center" @click.stop="goTOPay(item)">
									<view class="align-items-center mb-8">
										<image src="/pages-buy/static/qg.png" mode="" class="sd-img mr-6"></image>
										<view class="fs-28 fc-f fw-b">
											抢购
										</view>
									</view>
									<view class="fs-20 fc-f">
										销量 {{item.sales}}+
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="align-items-center flex-justify-center">
				<view class="bottom-hr"></view>
				<view class="fs-24 fc-a plr-12">
					我也是有底线的
				</view>
				<view class="bottom-hr"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	import {
		groupShopInfo,
		groupList
	} from '@/api/group.js'
	import tools from '@/service/tools';
	export default {
		components: {
			EnBlank
		},
		data() {
			return {
				scrollTopNum: 0, //当前滚动条高度
				fromData: {
					operate_id: '',
					lat: '',
					lon: '',
					shop_id: ''
				},
				shopInfo: {
					shop_album: []
				},
				timeData: '',
				array: '',
				shopList: []
			};
		},
		onLoad(data) {
			if (data) {
				this.fromData.shop_id = data.shop_id
				this.groupShopInfo()
				this.groupList()
			}
		},
		mounted() {},
		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);
			},
			copy(value) {
				uni.setClipboardData({
					data: value,
					success() {
						tools.success('复制成功')
					},
					fail() {
						tools.error("复制失败")
					}
				})
			},
			lookImg(list, index) {
				tools.lookBigImg(index, list)
			},
			phoneBut(phone) {
				uni.makePhoneCall({
					phoneNumber: phone, // 电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function() {
						console.log('拨打电话失败');
					}
				});
			},
			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>
	.fg-class {
		padding-right: 15rpx;
		margin-right: 15rpx;
		border-right: .5rpx solid #DEDEDE;
	}

	.time-item {
		margin-right: 15rpx;
		padding-right: 15rpx;
		border-right: .5rpx solid #EEEEEE;
	}

	.time-item:last-child {
		margin-right: 0;
		padding: 0;
		border-right: none;
	}

	.qg-box {
		width: 130rpx;
		height: 80rpx;
		background: linear-gradient(-90deg, #FF7D2D, #F54F1D);
		box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(246, 83, 30, 0.32);
		border-radius: 20rpx;
		padding-top: 14rpx;
	}

	.tg-box {
		position: relative;
	}

	.title-hr {
		width: 72rpx;
		height: 10rpx;
		border-radius: 5rpx;
		background: linear-gradient(to right, #F75820, #FEEEE8);
		position: absolute;
		bottom: 2rpx;
		left: 0;
		z-index: 1;
	}

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

	.list-box {
		padding: 36rpx 25rpx 0;
		position: relative;
	}

	.list-box-bg {
		width: 633rpx;
		height: 189rpx;
		position: absolute;
		right: 0;
		top: 0;
	}

	.dw-class {
		width: 16rpx;
		height: 17rpx;
	}

	.dh-img {
		width: 48rpx;
		height: 48rpx;
	}

	.top-box {
		padding: 33rpx 20rpx 15rpx;
	}

	.group-shop-box {
		position: relative;
		background: transparent;
	}

	.fz-icon {
		width: 20rpx;
		height: 20rpx;
	}

	.shop_logo {
		width: 140rpx;
		height: 140rpx;
		border-radius: 20rpx;
	}

	.item-box {
		padding-bottom: 39rpx;
		border-bottom: .5rpx solid #EDEEF2;
		margin-bottom: 39rpx;
	}

	.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-390 {
		width: 390rpx;
	}

	.shop-img-box {
		width: 220rpx;
		height: 150rpx;
		border-radius: 10rpx;
		position: relative;
	}

	.shop-img {
		width: 220rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.zk-box {
		width: 70rpx;
		height: 28rpx;
		line-height: 28rpx;
		background: linear-gradient(-90deg, #FF7D2D, #F54F1D);
		position: absolute;
		left: -3rpx;
		top: -4rpx;
		border-radius: 20rpx 0 20rpx 0;
	}

	.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: 422rpx;
		position: fixed;
		left: 0;
		top: 0;
		border-radius: 0 0 200rpx 200rpx;
		transition: all 0.3s ease-in-out;
	}

	.nav-img-true {
		opacity: 1;
	}

	.nav-img-false {
		opacity: 0;
	}

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

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

	.swiper-img {
		width: 33.4%;
		height: 190rpx;
		display: inline-block;
	}

	.swiper-img:first-child {
		border-radius: 20rpx 0 0 20rpx;
	}

	.swiper-img:last-child {
		border-radius: 0 20rpx 20rpx 0;
	}

	.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;
	}

	.sd-img {
		width: 15rpx;
		height: 28rpx;
	}

	.bottom-hr {
		width: 61rpx;
		height: 1rpx;
		background: #D4D4D4;
	}
</style>