zh_order_food_xcx/pages-takeout/takeout.vue

<template>
	<view class="takeout-index iPhone-bottom flex-common-css box-border-box">
		<view class="bg-index"></view>
		
		<view class="">
			<Nav :leftShow='false' :customNav='true' :bgckgroundBox='bgckgroundBox'>
				<template>
					<view slot="custom" class="">
						<view class="align-items-center mb-28 s-input-f">
							<uni-icons 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">
									<uni-icons type="search" size="22" color="#999"></uni-icons>
								</view>
								<input v-model="search" type="text" placeholder="请输入商家或者商品名称">
							</view>
						</view>
					</view>
				</template>
			</Nav>
		</view>
		
		<scroll-view scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower" @scroll="scrollFun">
			<view class="">
				<view class="s-input box-border-box plr-24">
					<view class="input-icon">
						<uni-icons type="search" size="22" color="#999"></uni-icons>
					</view>
					<input v-model="search" type="text" placeholder="请输入商家或者商品名称">
				</view>
				
				<view class="box-border-box plr-24">
					<view class="shop-box mb-32 box-border-box p-16">
						<image class="shop-box-bg" src="@/static/img/takeout/bg.png" mode="scaleToFill"></image>
						
						<swiper class="swiper-tj" :circular='false' 
						indicator-active-color='#FF7F00' indicator-color='#FDC583'
						:indicator-dots="false" 
						:autoplay="true" :interval="3000" :duration="300">
							<swiper-item v-for="(item,i) in 4" :key="i">
								<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">
										<view class="align-items-center mb-8">
											<view class="right-box-title fs-32 fw-600 text-overflow-ellipsis-one">蜜雪冰城（重工页店）122332323232323232323232</view>
											<image class="right-box-title-img" src="@/static/img/toRight.png" mode=""></image>
										</view>
										<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">855人购买</view>
										</view>
										<view class="align-items-center flex-wrap-wrap">
											<view class="quan-list display-flex mr-12 mb-12" v-for="(item,i) in 3" :key="i">
												<view class="quan-list-1 fs-24 fc-f">券</view>
												<view class="quan-list-2 fs-24 fc-FB3D03">10元</view>
											</view>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				
				<view class="box-border-box plr-24 nav-type-box-f" :class="isScroll?'nav-bg':''">
					<view class="nav-type-box" >
						<view class="nav-type-list">
							<image src="@/static/img/takeout/all.png" mode=""></image>
							<view class="fs-24 fw-400 text-align-center">全部</view>
						</view>
						<view class="nav-type-list" v-for="(item,i) in navList" :key="i">
							<image :src="item.img" mode=""></image>
							<view class="fs-24 fw-400">{{item.name}}</view>
						</view>
					</view>
				</view>
				
				
				
				<view class="box-border-box plr-24 mt-24">
					<view class="goos-list-box box-border-box p-24 display-flex" v-for="(item,i) in 10">
						<image class="left-img" src="@/static/img/my/bg.png" mode="scaleToFill"></image>
						<view class="flex-1">
							<view class="align-items-center mb-8">
								<view class="right-box-title fs-32 fw-600 text-overflow-ellipsis-one">蜜雪冰城（重工页店）122332323232323232323232</view>
								<image class="right-box-title-img" src="@/static/img/toRight.png" mode=""></image>
							</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 class="align-items-center flex-wrap-wrap">
								<view class="quan-list display-flex mr-12 mb-12" v-for="(item,i) in 3" :key="i">
									<view class="quan-list-1 fs-24 fc-f">券</view>
									<view class="quan-list-2 fs-24 fc-FB3D03">10元</view>
								</view>
							</view>
							<view class="goods-items-list display-flex">
								<view class="goods-items-list-box" v-for="(info,i) in 10">
									<image class="mb-12" src="@/static/img/my/bg.png" mode=""></image>
									<view class="mb-8 fw-600 text-overflow-ellipsis-one fs-26">AAAAAAAAAAAAAA</view>
									<view class="">
										<span class="fs-24 fc-FB3D03">￥</span>
										<span class="fs-32 fc-FB3D03 fw-b">3.99</span>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				search:'',
				isScroll:false,
				navList:[{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
				{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
				{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
				{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
				{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
				{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
				{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
				{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
				{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},],
			}
		},
		onShow() {
			
		},
		methods:{
			scrollFun(e){
				if(e.target.scrollTop>50){
					this.isScroll = true;
				}else{
					this.isScroll = false;
				}
			},
			scrolltolower(){
				console.log('触底');
			},
			
		},
	}
</script>

<style scoped lang="scss">
	.takeout-index{
		position: relative;
		
		.s-input-f{
			position: relative;
			.s-input-c{
				position: absolute;
				top: -16rpx;
				left: 50rpx;
			}
		}
		
		.bg-index{
			width: 100%;
			height: 272rpx;
			position: absolute;
			top: 0;
			left: 0;
			background-image: linear-gradient(#E0F6FB,#F5F4F9);
			z-index: -1;
		}
		
		.w-100100{
			width: 100%;
		}
		.w-454{
			width: 454rpx;
		}
		
		.s-input{
			margin-bottom: 24rpx;
			height: 72rpx;
			box-sizing: border-box;
			position: relative;
			
			.s-left{
				left: 24rpx !important;
			}
			
			.input-icon{
				position: absolute;
				left: 44rpx;
				top: 16rpx;
			}
			input{
				font-size: 32rpx;
				width: 100%;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 200rpx;
				box-sizing: border-box;
				padding: 0 20rpx 0 78rpx;
				border: 1rpx solid #41ABF5;
			}
		}
		.shop-box{
			width: 100%;
			height: 242rpx;
			position: relative;
			
			.shop-box-bg{
				width: 100%;
				height: 242rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}
			.swiper-tj{
				width: 100%;
				height: 172rpx;
				border-radius: 20rpx;
				.swiper-item{
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
					background-color: #fff;
					box-sizing: border-box;
					padding: 16rpx;
					.left-img{
						width: 140rpx;
						height: 140rpx;
						border-radius: 14rpx
					}
					.right-box{
						
					}
				}
			}
		}
		
		.nav-bg{
			background-image: linear-gradient(#F0F4FA,#FFFFFF);
			padding: 24rpx !important;
		}
		.nav-type-box-f{
			position: sticky;
			top: 0;
			left: 0;
			
			.nav-type-box{
				width: 100%;
				height: 120rpx;
				display: flex;
				overflow: scroll;
				.nav-type-list{
					height: 120rpx;
					width: 96rpx !important;
					text-align: center;
					margin-right: 44rpx;
					image{
						display: block;
						width: 80rpx;
						height: 80rpx;
						margin: 0 8rpx 12rpx 8rpx;
					}
				}
			}
		}
		
		
		.goos-list-box{
			width: 100%;
			min-height: 428rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51,51,51,0.1);
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.goods-items-list{
				width: 530rpx;
				overflow-y: scroll;
				.goods-items-list-box{
					width: 140rpx;
					margin-right: 16rpx;
					image{
						width: 140rpx;
						height: 140rpx;
						border-radius: 12rpx
					}
				}
			}
			
		}
		
		.left-img{
			width: 100rpx;
			height: 100rpx;
			border-radius: 12rpx;
			margin-right: 16rpx;
		}
		.img-x{
			width: 24rpx;
			height: 24rpx;
		}
		.right-box-title{
			width: 438rpx;
		}
		.right-box-title-img{
			width: 32rpx;
			height: 32rpx;
			margin-left: auto;
		}
		.quan-list{
			.quan-list-1{
				width: 32rpx;
				height: 34rpx;
				background: #FB3D03;
				border-radius: 5rpx 0rpx 0rpx 5rpx;
				text-align: center;
			}
			.quan-list-2{
				box-sizing: border-box;
				padding: 0 2rpx;
				height: 34rpx;
				border-radius: 0 5rpx 5rpx 0;
				border: 1rpx solid #FB3D03;
				text-align: center;
			}
		}
	}
</style>