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-show="shopType === 1"></Menu>
		</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">20元起送</view>
			</view>
		</view>
		
		<uni-popup ref="popupBuy" type="bottom">
			<view class="buy-card">
				<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">
					
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Menu from './shop-mod/menu.vue';
	
	import tools from "@/service/tools";
	export default {
		components:{Menu},
		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()
			},
		},
	}
</script>

<style scoped lang="scss">
	.shop-index{
		position: relative;
		.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;
				}
			}
		}
		
		
		.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;
			
			}
		}
		
	}
</style>