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 @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">
									<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 class="fs-28 fc-f index-search-box-buttom">搜索</view>
				</view>
				<!-- 			<view class="p-24 box-border-box">
					<view class="index-search-box box-border-box align-items-center">
						<uni-icons type="search" size="22" color="#999"></uni-icons>
						<view class="fs-28 fc-9 ml-10">搜索店铺名称或者商品名称</view>
						<view class="fs-28 fc-f index-search-box-buttom">搜索</view>
					</view>
				</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" :current='BanenerCurrent'
							@change="onSwiperChange" :autoplay="true" :interval="3000" :duration="300">
							<swiper-item v-for="(item,i) in topShopData" :key="i" @click="toShop(item)">
								<view class="swiper-item display-flex">
									<image class="left-img" :src="item.shop_logo" 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">
												{{item.shop_name}}</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">{{item.shop_score}}分</view>
											<view class="fc-6 fs-24 mr-12">| 预计{{item.delivery_time}}分钟 |</view>
											<view class="fc-6 fs-24 mr-12">{{item.shop_sales}}人购买</view>
										</view>
										<view class="align-items-center flex-wrap-wrap">
											<view class="quan-list display-flex mr-12 mb-12" v-for="(itemCoupon,iCoupon) in item.coupon"
												:key="i">
												<view class="quan-list-1 fs-24 fc-f">券</view>
												<view class="quan-list-2 fs-24 fc-FB3D03">{{itemCoupon.money}}元</view>
											</view>
										</view>
									</view>
								</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 topShopData" :key="i">
							</view>
						</view>
					</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" @click="clickClass(0)">
							<image src="@/static/img/takeout/all.png" mode=""></image>
							<view :class="category_id == 0?'fc-41ABF5':''" class="fs-24 fw-400 text-align-center">全部
							</view>
						</view>
						<view class="nav-type-list" v-for="(item,i) in navList" :key="i" @click="clickClass(item.id)">
							<image :src="item.img" mode=""></image>
							<view class="fs-24 fw-400" :class="category_id == item.id?'fc-41ABF5':''">{{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 listData">
						<image class="left-img" :src="item.shop_logo" 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">
									{{item.shop_name}}
								</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">{{item.shop_score}}分</view>
								<view class="fc-6 fs-24 mr-12">| 预计{{item.delivery_time}}分钟 |</view>
								<view class="fc-6 fs-24 mr-12">{{item.shop_sales}}人购买</view>
							</view>
							<view class="align-items-center flex-wrap-wrap">
								<view class="quan-list display-flex mr-12 mb-12"
									v-for="(itemCoupon,iCoupon) in item.coupon" :key="i">
									<view class="quan-list-1 fs-24 fc-f">券</view>
									<view class="quan-list-2 fs-24 fc-FB3D03">{{itemCoupon.money}}元</view>
								</view>
							</view>

							<view class="goods-items-list display-flex view-nowrap">
								<view class="goods-items-list-box" v-for="(info,iGoods) in item.goods">
									<image class="mb-12" :src="info.goods_image" mode=""></image>
									<view class="mb-8 fw-600 text-overflow-ellipsis-one fs-26">{{info.goods_name}}
									</view>
									<view class="">
										<span class="fs-24 fc-FB3D03">￥</span>
										<span class="fs-32 fc-FB3D03 fw-b">{{info.price}}</span>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		shopTop
	} from "@/api/shop.js"
	import {
		getGoodsList
	} from "@/api/goods.js"
	import {
		getTakeaway
	} from "@/api/category.js"
	import tools from "@/service/tools";
	export default {
		data() {
			return {
				bgckgroundBox: 'transparent',
				BanenerCurrent: 0,
				search: '',
				category_id: 0,
				isScroll: false,
				topShopData: [],
				page: 1,
				listData: [],
				navList: []
			}
		},
		onShow() {

		},
		mounted() {
			this.shopTop()
			this.getGoodsList()
			this.getTakeaway()
		},
		methods: {
			clickClass(id) {
				if (this.category_id == id) {
					return
				}
				this.category_id = id
				this.listData = []
				this.getGoodsList()
			},
			toBack() {
				tools.leftClick()
			},
			onSwiperChange(e) {
				this.BanenerCurrent = e.detail.current;
			},
			scrollFun(e) {
				if (e.target.scrollTop > 50) {
					this.isScroll = true;
				} else {
					this.isScroll = false;
				}
			},
			scrolltolower() {
				console.log('触底');
			},
			toShop(item) {
				uni.navigateTo({
					url: `/pages-takeout/shop?shop_id=` + item.shop_id
				})
			},
			shopTop() {
				const operate_id = uni.getStorageSync('operate_id')
				shopTop({
					operate_id: operate_id
				}).then((res) => {
					if (res.code == 1) {
						this.topShopData = res.data
					}
				})
			},
			getGoodsList() {
				const operate_id = uni.getStorageSync('operate_id')
				getGoodsList({
					operate_id: operate_id,
					category_id: this.category_id,
					search: this.search,
					page: this.page
				}).then((res) => {
					if (res.code == 1) {
						if (res.data.items.length > 0) {
							this.listData.push(...res.data.items)
						}
					}
				})
			},
			getTakeaway() {
				getTakeaway().then((res) => {
					if (res.code == 1) {
						this.navList = res.data
					}
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.index-search-box-buttom {
		width: 120rpx;
		height: 60rpx;
		position: absolute;
		right: 30rpx;
		top: 6rpx;
		background: linear-gradient(90deg, #57CAFF 0%, #41ABF5 100%);
		border-radius: 200rpx;
		margin-left: auto;
		line-height: 60rpx;
		text-align: center;
	}

	.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 {}
				}
			}

			.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 {
			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;
			}
		}
	}

	.index-search-box {
		width: 100%;
		height: 72rpx;
		padding: 0 6rpx 0 24rpx;
		border-radius: 200rpx;
		border: 2rpx solid #4FB3EF;

		.index-search-box-buttom {
			width: 120rpx;
			height: 60rpx;
			background: linear-gradient(90deg, #57CAFF 0%, #41ABF5 100%);
			border-radius: 200rpx;
			margin-left: auto;
			line-height: 60rpx;
			text-align: center;
		}
	}
</style>