no message

pages-takeout/shop-mod/menu.vue

@@ -0,0 +1,186 @@
+<template>
+	<view class="menu-box flex-justify-space">
+		<scroll-view scroll-y="true" class="menu-box-left" :scroll-into-view="idMark" :scroll-with-animation='true'>
+			<view class="menu-type-list-f">
+				<view class="menu-type-list fs-28 fc-6 text-align-center" v-for="(item,i) in typeList" :key="i" @click="selectType(item)"
+				:class="type ===  item.type?'bgc-BCEAFF':''"  :id="'scroll'+ item.type">
+					{{item.name}}
+					<view class="menu-type-num fc-f" v-show="item.num > 0">{{item.num > 99?'99+':item.num}}</view>
+				</view>
+			</view>
+			
+		</scroll-view>
+		
+		<scroll-view scroll-y="true" :scroll-with-animation='true' :scroll-into-view="idMark" @scroll="menuScroll">
+			<view class="menu-box-right">
+				<view class="menu-box-only" v-for="(item,i) in menuList" :key="i" :id="'scroll'+ item.type">
+					<view class="mb-18 fs-24">{{item.name}}</view>
+					<view class="menu-list" v-for="(info,k) in item.list" :key="k">
+						{{info.name}}
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	
+	export default {
+		name:'menu-box',
+		data(){
+			return{
+				idMark:'',//滚动自适应参数
+				
+				type:1,//分类标识
+				typeList:[],
+				
+				menuList:[
+					{	
+						name:'分类1',
+						type:1,
+						list:[
+							{name:1,},{name:2,},{name:3,},{name:4,},
+						]
+					},
+					{
+						name:'分类2',
+						type:2,
+						list:[
+							{name:1,},{name:2,},{name:3,},{name:4,},
+						]
+					},
+					{
+						name:'分类3',
+						type:3,
+						list:[
+							{name:1,},{name:2,},{name:3,},{name:4,},
+						]
+					},
+					{
+						name:'分类4',
+						type:4,
+						list:[
+							{name:1,},{name:2,},{name:3,},{name:4,},
+						]
+					},
+					{
+						name:'分类5',
+						type:5,
+						list:[
+							{name:1,},{name:2,},{name:3,},{name:4,},
+						]
+					},
+				],
+			}
+		},
+		mounted() {
+			this.getTypeList();
+		},
+		methods:{
+			getTypeList(){
+				this.typeList = [
+					{
+						"category_id": 1,
+						"name": "爆品推荐爆爆品推荐爆爆品推荐爆",
+						"type": 1,
+					},
+					{
+						"category_id": 2,
+						"name": "必点口味必点口味必点口味必点口味必点口味",
+						"type": 2
+					},
+					{
+						"category_id": 3,
+						"name": "爆品推荐爆爆品推荐爆爆品推荐爆",
+						"type": 3,
+					},
+					{
+						"category_id": 4,
+						"name": "必点口味必点口味必点口味必点口味必点口味",
+						"type": 4
+					},
+					{
+						"category_id": 5,
+						"name": "必点口味必点口味必点口味必点口味必点口味",
+						"type": 5
+					},
+				]
+				this.type = this.typeList[0].type;
+				this.idMark = 'scroll'+ this.type;
+				this.typeList.forEach((v)=>{
+					v.num = 0
+				})
+			},
+			
+			selectType(item){
+				if(this.type != item.type){
+					this.type = item.type;
+					this.idMark = 'scroll'+ item.type
+				}
+			},
+			
+			menuScroll(){
+				let _this = this;
+				let query = uni.createSelectorQuery().in(this);
+				query.selectAll(".menu-box-only").boundingClientRect(data=>{
+					data.forEach((v)=>{
+						if(v.top < 297&&v.top>0){
+							_this.idMark = v.id;
+							let arr = v.id.split('scroll');
+							_this.type = Number(arr[1]);
+						}
+					})
+				}).exec();
+			},
+		},
+	}
+</script>
+
+<style scoped lang="scss">
+		.menu-box{
+			height: 100%;
+			.menu-box-left{
+				width: 176rpx;
+				height: 100%;
+				background-color: #F7F8FA;
+				border-radius: 0rpx 20rpx 0 0rpx;
+				.menu-type-list-f{
+					width: 176rpx;
+					height: 100%;
+					.menu-type-list{
+						width: 176rpx;
+						min-height: 10rpx;
+						box-sizing: border-box;
+						padding: 14rpx 32rpx;
+						position: relative;
+						.menu-type-num{
+							position: absolute;
+							top: 2rpx;
+							right: 8rpx;
+							padding: 0 6rpx;
+							min-width: 20rpx;
+							height: 32rpx;
+							text-align: center;
+							line-height: 32rpx;
+							background: #FB3D03;
+							border-radius: 50%;
+						}
+					}
+				}
+			}
+			
+			.menu-box-right{
+				flex: 1;
+				height: 100%;
+				box-sizing: border-box;
+				padding: 0 16rpx;
+				.menu-list{
+					width: 100%;
+					height: 200rpx;
+					margin-bottom: 40rpx;
+					background-color: skyblue;
+				}
+			}
+		}
+</style>

pages-takeout/shop.vue

@@ -0,0 +1,171 @@
+<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>

pages-takeout/takeout.vue

@@ -7,7 +7,7 @@
 				<template>
 					<view slot="custom" class="">
 						<view class="align-items-center mb-28 s-input-f">
-							<uni-icons type="left" size="20"></uni-icons>
+							<uni-icons @click="toBack()" type="left" size="20"></uni-icons>
 							<view v-if="!isScroll" class="fs-40 ml-10 fw-600">外卖</view>
 							<view v-else class="s-input s-input-c" :class="isScroll?'w-454':'w-100100'">
 								<view class="input-icon s-left">
@@ -36,9 +36,9 @@
 						
 						<swiper class="swiper-tj" :circular='false' 
 						indicator-active-color='#FF7F00' indicator-color='#FDC583'
-						:indicator-dots="false" 
+						:indicator-dots="false" :current='BanenerCurrent' @change="onSwiperChange"
 						:autoplay="true" :interval="3000" :duration="300">
-							<swiper-item v-for="(item,i) in 4" :key="i">
+							<swiper-item v-for="(item,i) in 4" :key="i" @click="toShop(item)">
 								<view class="swiper-item display-flex">
 									<image class="left-img" src="@/static/img/my/bg.png" mode="scaleToFill"></image>
 									<view class="right-box flex-1">
@@ -49,7 +49,7 @@
 										<view class="align-items-center mb-12">
 											<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">| 预计{{BanenerCurrent}}分钟 |</view>
 											<view class="fc-6 fs-24 mr-12">855人购买</view>
 										</view>
 										<view class="align-items-center flex-wrap-wrap">
@@ -62,6 +62,9 @@
 								</view>
 							</swiper-item>
 						</swiper>
+						<view class="align-items-center dot-f">
+							<view :class="BanenerCurrent === i?'dot-box-s':'dot-box'" v-for="(item,i) in 4" :key="i"></view>
+						</view>
 					</view>
 				</view>
 				
@@ -120,9 +123,12 @@
 </template>
 
 <script>
+	import tools from "@/service/tools";
 	export default {
 		data(){
 			return{
+				bgckgroundBox:'transparent',
+				BanenerCurrent:0,
 				search:'',
 				isScroll:false,
 				navList:[{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
@@ -140,6 +146,12 @@
 			
 		},
 		methods:{
+			toBack(){
+				tools.leftClick()
+			},
+			onSwiperChange(e){
+				this.BanenerCurrent = e.detail.current;
+			},
 			scrollFun(e){
 				if(e.target.scrollTop>50){
 					this.isScroll = true;
@@ -150,7 +162,11 @@
 			scrolltolower(){
 				console.log('触底');
 			},
-			
+			toShop(item){
+				uni.navigateTo({
+					url:'/pages-takeout/shop'
+				})
+			},
 		},
 	}
 </script>
@@ -245,6 +261,25 @@
 					}
 				}
 			}
+			.dot-f{
+				margin: 20rpx auto;
+				justify-content: center;
+				.dot-box{
+					width: 8rpx;
+					height: 6rpx;
+					background: #FEC683;
+					border-radius: 200rpx;
+					margin: 0 6rpx;
+				}
+				.dot-box-s{
+					width: 16rpx;
+					height: 6rpx;
+					background: #FF7F00;
+					border-radius: 200rpx;
+					margin: 0 6rpx;
+				}
+			}
+			
 		}
 		
 		.nav-bg{

pages.json

@@ -86,6 +86,12 @@
 					"style": {
 						"navigationBarTitleText": "外卖"
 					}
+				},
+				{
+					"path": "shop",
+					"style": {
+						"navigationBarTitleText": "店铺"
+					}
 				}
 			]
 		},