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" 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>
		</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">
			
		</view>
	</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:{
			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
					}
				}
			},
		},
	}
</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);
			background-color: #ccc;
		}
		
		
		.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);
			}
		}
		.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;
				}
			}
		}
		
		
	}
</style>