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="@/static/img/my/lqzx-bg.png" mode="scaleToFill"></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">猪油拌猪油拌饭猪油拌猪油拌饭猪油拌饭猪油拌（回兴店）</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">4.5分</view>
							<view class="fc-6 fs-24 mr-12">| 预计38分钟 |</view>
							<view class="fc-6 fs-24 mr-12">855人购买</view>
						</view>
					</view>
					<image class="box-top-right" src="@/static/img/my/bg.png" mode="scaleToFill"></image>
				</view>
				<view class="fs-24 fw-400 fc-9 mb-20">
					公告：公告内容公告内容公告内容公告内容公告内11容公公告内容公告内容公告内容公告内容公告内公告内容公告内容公告内容公告内容公告内
				</view>
				<view class="flex-wrap-wrap">
					<view class="info-box-quan-list" v-for="(item,i) in 4" :key="i">
						<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>10</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%;" v-else-if="shopType === 2"></Evaluate>
			<ShopInfo style="height: 100%;" 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">去结算</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";
	export default {
		components:{Menu,Evaluate,ShopInfo},
		data(){
			return{
				domHeigjt:224,
				shopTypeList:[{name:"点菜",id:1},{name:"评价",id:2},{name:"店铺",id:3},],
				shopType:1,//组件类型
				shopTypeBsLeft:12,
			}
		},
		onLoad(e) {
			
		},
		mounted() {
			this.getDomH();
		},
		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(){
				
			},
		},
	}
</script>

<style scoped lang="scss">
	.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: 124rpx;
					height: 48rpx;
					margin: 0 8rpx 8rpx 0;
					position: relative;
					image{
						width: 124rpx;
						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: 12rpx;
						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;
				}
				.n-item{
					font-weight: 400;
					color: #666666;
				}
			}
		}
		.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>