zh_order_food_xcx/pages-takeout/shop.vue

<template>
	<view class="shop-index iPhone-bottom flex-common-css box-border-box">
		<image class="bg-img" :src="shopsInfo.shop_logo" mode="aspectFill"></image>

		<view class="nav-box">
			<Nav :leftShow='false' :customNav='true' bgckgroundBox='transparent'>
				<template>
					<view slot="custom" class="">
						<image class="nav-img" @click="toBack()" src="@/static/img/takeout/bg-back.png"
							mode="scaleToFill"></image>
					</view>
				</template>
			</Nav>
		</view>

		<view class="head-box bgc-f box-border-box plr-24" :style="{height:domHeigjt + 'rpx'}">
			<view id="shopInfoBox" class="shop-info-box bgc-f box-border-box p-24">
				<view class="info-box-top flex-justify-space">
					<view class="box-top-left">
						<view class="top-left-1 fs-40 fw-600 text-overflow-ellipsis-one">{{shopsInfo.shop_name}}
						</view>
						<view class="align-items-center mb-8">
							<image class="img-x mr-12" src="@/static/img/my/wdpj.png" mode=""></image>
							<view class="fs-26 fw-600 fc-FF7F00 mr-12">{{shopsInfo.shop_score}}分</view>
							<view class="fc-6 fs-24 mr-12">| 预计{{shopsInfo.delivery_time}}分钟 |</view>
							<view class="fc-6 fs-24 mr-12">{{shopsInfo.shop_sales}}人购买</view>
						</view>
					</view>
					<image class="box-top-right" :src="shopsInfo.shop_logo" mode="scaleToFill"></image>
				</view>
				<view class="fs-24 fw-400 fc-9 mb-20 text-overflow-ellipsis-one">
					公告：{{shopsInfo.notice}}
				</view>
				<view class="flex-wrap-wrap">
					<view class="info-box-quan-list" v-for="(item,i) in couponData" :key="i" @click="openCoupon">
						<image src="@/static/img/takeout/quan-bg.png" mode=""></image>
						<view class="quan-list-1 fw-b fs-32 fc-f">
							<span class="fw-b fs-20 fc-f">￥</span>{{item.money}}
						</view>
						<view class="quan-list-2 fw-400 fs-24 fc-f">领</view>
					</view>
				</view>
			</view>
		</view>

		<view class="head-box-1 bgc-f box-border-box plr-24">
			<view class="align-items-center shop-type-list">
				<view class="shop-item fs-32" @click="seletShopType(item)"
					:class="shopType === item.id?'s-item':'n-item'" v-for="(item,i) in shopTypeList" :key="i">
					{{item.name}}
					<!-- <view v-if="item.id == 2" class="pj-num" :class="shopType === item.id?'s-item':'n-item'">999+</view> -->
				</view>
				<view class="shop-item-bs" :style="{left:shopTypeBsLeft+'rpx'}"></view>
			</view>
		</view>


		<view class="common-view-css bgc-f" style="overflow: hidden;">
			<Menu style="height: 100%;" v-if="shopType === 1"></Menu>
			<Evaluate style="height: 100%;" :shopId='shop_id' :shopScore='shopsInfo.shop_score' v-else-if="shopType === 2"></Evaluate>
			<ShopInfo style="height: 100%;" :shopId='shop_id' v-else-if="shopType === 3"></ShopInfo>
		</view>

		<view class="shop-buttom-money box-border-box" @click="openBuyCrad()">
			<view class="shop-buttom-money-1 flex-justify-space align-items-center">
				<image src="@/static/img/takeout/buy-icon.png" mode="scaleToFill"></image>
				<view class="shop-buttom-num fs-24 fc-f text-align-center">3</view>
				<view class="">
					<view class="">
						<span class="fw-600 fs-24 fc-f">￥</span>
						<span class="fw-600 fs-44 fc-f">19.26</span>
					</view>
					<!-- <view class="fs-24 fc-ADADAD">免配送</view> -->
					<view class="fs-24 fc-ff3939">配送费￥10</view>
				</view>
				<view class="fs-32 fw-600 fc-f mr-30">20元起送</view>
				<!-- <view class="shop-buttom-money-2 text-align-center fc-f fs-32 fw-600">去结算</view> -->
			</view>
		</view>

		<uni-popup ref="popupBuy" type="bottom">
			<view class="buy-card flex-index-css">
				<view class="buy-card-top box-border-box plr-32 flex-justify-space align-items-center">
					<view class="">
						<span class="fs-32 fc-3 mr-12">已选商品</span>
						<span class="fs-32 fc-9">(打包费<span class="fs-32 fc-FB3D03">8元</span>)</span>
					</view>
					<view class="fs-28 fw-400 fc-9 align-items-center">
						<view class="">
							<uni-icons type="trash" size="18" color="#999"></uni-icons>
						</view>
						<view class="fs-28 fw-400 fc-9">清空</view>
					</view>
				</view>
				<view class="scroll-view-css box-border-box p-32">
					<view class="buy-card-item display-flex" v-for="(item,i) in 5" :key="i">
						<image src="@/static/img/my/bg.png" mode="scaleToFill"></image>
						<view class="flex-1">
							<view class="w-514 text-overflow-ellipsis-one fs-34 fw-600 mb-12">
								[畅销款]奥尔1良烤肉牛油拌饭拌饭[畅销款]奥尔1良烤肉牛油拌饭拌饭</view>
							<view class="w-514 text-overflow-ellipsis-one fs-24 fw-400 fc-9 mb-18">不辣，加辣</view>

							<view class="flex-justify-space">
								<view class="">
									<span class="fs-24 fc-FB3D03 fw-400">￥</span>
									<span class="fs-40 fc-FB3D03 fw-b">3.99</span>
								</view>
								<view class="display-flex align-items-center">
									<view class="right-only-right-red fw-500 text-align-center fs-36 fc-f">-</view>
									<view class="right-only-right-2 text-align-center fs-28 fw-400">1</view>
									<view class="right-only-right-add fw-500 text-align-center fs-36 fc-f">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="shop-buttom-money box-border-box" @click="createOrder()">
					<view class="shop-buttom-money-1 flex-justify-space align-items-center">
						<image src="@/static/img/takeout/buy-icon.png" mode="scaleToFill"></image>
						<view class="shop-buttom-num fs-24 fc-f text-align-center">3</view>
						<view class="">
							<view class="">
								<span class="fw-600 fs-24 fc-f">￥</span>
								<span class="fw-600 fs-44 fc-f">19.26</span>
							</view>
							<!-- <view class="fs-24 fc-ADADAD">免配送</view> -->
							<view class="fs-24 fc-ff3939">配送费￥10</view>
						</view>
						<!-- <view class="fs-32 fw-600 fc-f mr-30">20元起送</view> -->
						<view class="shop-buttom-money-2 text-align-center fs-32 fc-f fw-600" @click="toConfirmOrder()">
							去结算</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popupCoupon" type="bottom">
			<view class="pop-coupon box-border-box p-24">
				<view class="text-align-center fs-36 fw-600 box-title mb-32">
					本店优惠券
					<uni-icons @click="closeCoupon" class="box-close" type="closeempty" size="20"></uni-icons>
				</view>
				<view class="scroll-view-css">
					<view class="item-box display-flex mb-20" v-for="(item,index) in 10" :key="index">
						<view class="item-right flex-direction flex-justify-center flex-1 bgc-f">
							<view class="fs-28 mb-12 ticket-name text-overflow-ellipsis fc-3 fw-600">
								优惠券名称优惠券名称优惠券名称优惠券名称优
							</view>
							<view class="fs-24 fc-6">
								有效时间：2024.05.08-2024.05.24
							</view>
						</view>
						<view class="item-hr"></view>
						<view class="item-left flex-direction align-items-center flex-justify-center bgc-FCE7E2">
							<view class="align-items-center">
								<view class="fs-30 fw-600 fc-FB3D03">￥</view>
								<view class="fs-48 fw-600 fc-FB3D03">10</view>
							</view>
							<view class="fs-24 mb-18 fc-6">
								满90元可用
							</view>
							<view class="but-box fs-28 fc-f">
								立即领取
							</view>
							<view class="ball"></view>
							<view class="ball-two"></view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Menu from './shop-mod/menu.vue';
	import Evaluate from './shop-mod/evaluate.vue';
	import ShopInfo from './shop-mod/info.vue';
	import tools from "@/service/tools";
	import {
		shopInfo,
		shopCoupon
	} from "@/api/shop.js"
	export default {
		components: {
			Menu,
			Evaluate,
			ShopInfo
		},
		data() {
			return {
				domHeigjt: 224,
				shopTypeList: [{
					name: "点菜",
					id: 1
				}, {
					name: "评价",
					id: 2
				}, {
					name: "店铺",
					id: 3
				}, ],
				shopType: 1, //组件类型
				shopTypeBsLeft: 12,
				shop_id: '',
				shopsInfo: {},
				couponData: [] // 可领优惠卷
			}
		},
		onLoad(e) {
			if (e) {
				this.shop_id = e.shop_id
				this.shopInfo()
			}
		},
		mounted() {
			this.getDomH();
			this.shopCoupon()
		},
		methods: {
			toBack() {
				tools.leftClick()
			},
			getDomH() {
				let info = uni.createSelectorQuery().select('#shopInfoBox');
				info.boundingClientRect((data) => {
					this.domHeigjt = data.height * 2 - 34
				}).exec()
			},

			scrolltolower() {
				console.log('触底');
			},
			seletShopType(item) {
				if (this.shopType != item.id) {
					this.shopType = item.id;
					if (this.shopType == 1) {
						this.shopTypeBsLeft = 12
					} else if (this.shopType == 2) {
						this.shopTypeBsLeft = 166
					} else {
						this.shopTypeBsLeft = 160 * 2
					}
				}
			},
			openBuyCrad() {
				this.$refs.popupBuy.open()
			},
			createOrder() {

			},

			openCoupon() {
				this.$refs.popupCoupon.open()
			},
			closeCoupon() {
				this.$refs.popupCoupon.close()
			},
			toConfirmOrder() {
				uni.navigateTo({
					url: '/pages-takeout/confirm-order'
				})
			},
			shopInfo() {
				const operate_id = uni.getStorageSync('operate_id')
				shopInfo({
					operate_id: operate_id,
					shop_id: this.shop_id
				}).then((res) => {
					if (res.code == 1) {
						this.shopsInfo = res.data
					}
				})
			},
			shopCoupon() {
				const operate_id = uni.getStorageSync('operate_id')
				shopCoupon({
					operate_id: operate_id,
					shop_id: this.shop_id
				}).then((res) => {
					if (res.code == 1) {
						this.couponData = res.data
					}
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.pop-coupon {
		width: 100%;
		height: 42vh;
		background-color: #F5F4F9;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding-top: 32rpx !important;
		display: flex;
		flex-direction: column;

		.box-title {
			position: relative;

			.box-close {
				position: absolute;
				right: 22rpx;
			}
		}

		.item-right {
			padding: 24rpx;
			box-sizing: border-box;
			border-radius: 20rpx 0 0 20rpx;
			position: relative;
		}

		.item-hr {
			width: 0px;
			height: auto;
			border-right: 1rpx dashed #FB7850;
		}

		.item-hr-two {
			width: 0px;
			height: auto;
			border-right: 1rpx dashed #999;
		}

		.item-left {
			width: 200rpx;
			height: auto;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			position: relative;
			border-radius: 0 20rpx 20rpx 0;
		}

		.but-box {
			width: 152rpx;
			height: 52rpx;
			line-height: 52rpx;
			text-align: center;
			background: linear-gradient(225deg, #FB3D03 0%, #FF6901 100%);
			border-radius: 200rpx;
		}

		.ball {
			width: 24rpx;
			height: 24rpx;
			border-radius: 50%;
			position: absolute;
			top: -12rpx;
			left: -12rpx;
			background: #F5F5F5;
			z-index: 2;
		}

		.ball-two {
			width: 24rpx;
			height: 24rpx;
			border-radius: 50%;
			position: absolute;
			background: #F5F5F5;
			z-index: 10;
			bottom: -12rpx;
			left: -12rpx;
		}
	}


	.shop-index {
		position: relative;

		.right-only-right-red {
			width: 44rpx;
			height: 44rpx;
			line-height: 40rpx;
			border-radius: 12rpx;
			border: 1rpx solid #41ABF5;
			color: #41ABF5;
		}

		.right-only-right-add {
			width: 44rpx;
			height: 44rpx;
			line-height: 40rpx;
			background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
			border-radius: 12rpx;
		}

		.right-only-right-2 {
			min-width: 50rpx;
		}

		.w-514 {
			width: 514rpx;
		}

		.bg-img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 280rpx;
			z-index: -1;
		}

		.nav-box {
			margin-bottom: 110rpx;

			.nav-img {
				width: 56rpx;
				height: 56rpx;
			}
		}

		.shop-buttom-money {
			width: 100%;
			height: 140rpx;
			background: rgba(255, 255, 255, 0.8);
			padding: 20rpx 24rpx;

			.shop-buttom-money-1 {
				width: 100%;
				height: 100%;
				background: #333333;
				border-radius: 200rpx;
				box-sizing: border-box;
				padding-left: 136rpx;
				// padding-right: 32rpx;
				position: relative;

				image {
					position: absolute;
					bottom: 0;
					left: 8rpx;
					width: 128rpx;
					height: 128rpx;
				}

				.shop-buttom-num {
					width: 32rpx;
					height: 32rpx;
					line-height: 32rpx;
					background: #FB3D03;
					border-radius: 50%;
					position: absolute;
					top: 36rpx;
					left: 82rpx;
				}

				.shop-buttom-money-2 {
					width: 200rpx;
					height: 100rpx;
					line-height: 100rpx;
					background: #41ABF5;
					border-radius: 0rpx 200rpx 200rpx 0rpx;
				}
			}
		}


		.head-box {
			width: 100%;
			position: relative;

			.shop-info-box {
				position: absolute;
				top: -50rpx;
				left: 24rpx;
				width: 702rpx;
				min-height: 258rpx;
				border-radius: 20rpx;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);

				.info-box-top {
					.box-top-left {
						.top-left-1 {
							width: 480rpx;
							margin-bottom: 8rpx;
						}

						.img-x {
							width: 24rpx;
							height: 24rpx;
						}
					}

					.box-top-right {
						width: 100rpx;
						height: 100rpx;
						border-radius: 12rpx;
					}
				}

				.info-box-quan-list {
					width: 164rpx;
					height: 48rpx;
					margin: 0 8rpx 8rpx 0;
					position: relative;

					image {
						width: 164rpx;
						height: 48rpx;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
					}

					.quan-list-1 {
						position: absolute;
						top: 3rpx;
						left: 8rpx;
						z-index: 2;
					}

					.quan-list-2 {
						position: absolute;
						top: 8rpx;
						right: 22rpx;
						z-index: 2;
					}
				}
			}
		}

		.head-box-1 {
			width: 100%;
			height: 88rpx;
			border-bottom: 1rpx solid #eee;

			.shop-type-list {
				height: 88rpx;
				position: relative;

				.shop-item-bs {
					position: absolute;
					bottom: 0;
					width: 40rpx;
					height: 6rpx;
					border-radius: 20rpx;
					background-color: #41ABF5;
					transition: left 0.5s;
				}

				.shop-item {
					margin-right: 90rpx;
					position: relative;

					.pj-num {
						position: absolute;
						right: -80rpx;
						top: 0;
						text-align: left;
						width: 80rpx;
					}
				}

				.s-item {
					font-weight: 600;
					color: 333;
				}

				.n-item {
					font-weight: 400;
					color: #999;
				}
			}
		}

		.buy-card {
			height: 828rpx;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0rpx 0rpx;

			.buy-card-top {
				width: 100%;
				height: 92rpx;
				background: #FCF5DB;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
			}

			.buy-card-item {
				width: 100%;
				height: 176rpx;
				margin-bottom: 32rpx;

				image {
					width: 152rpx;
					height: 152rpx;
					border-radius: 12rpx;
					margin-right: 20rpx;
				}
			}
		}

	}
</style>