zh_order_food_xcx/pages/index/search-list.vue

<template>
	<view class="seacrh-record-index iPhone-bottom flex-common-css box-border-box">
		<view class="seacrh-bg"></view>
		<Nav title='搜索' bgckgroundBox='transparent'></Nav>
		
		<view class="s-input">
			<view class="input-icon">
				<uni-icons type="search" size="18" color="#999"></uni-icons>
			</view>
			<input v-model="fromData.search" type="text" placeholder="店铺名称或者商品名称">
			<view class="input-buttom fs-28 fc-f fw-500" @click="search()">搜索</view>
		</view>
		

		
		<scroll-view scroll-y="true" class="scroll-view-css seacrh-info box-border-box p-24" @scrolltolower="scrolltolower">
			<view class="goos-list-box box-border-box p-24 display-flex" v-for="(item,i) in list" :key="i" @click="toShop(item)">
				<image class="left-img" :src="item.shop_logo" mode="aspectFill"></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="(info1,index1) in item.coupon" :key="index1">
							<view class="quan-list-1 fs-24 fc-f">券</view>
							<view class="quan-list-2 fs-24 fc-FB3D03">{{info1.money}}元</view>
						</view>
					</view>
					<view class="goods-items-list display-flex">
						<view class="goods-items-list-box" v-for="(info2,index2) in item.goods" :key="index2">
							<image class="mb-12" :src="info2.goods_image" mode="aspectFill"></image>
							<view class="mb-8 fw-600 text-overflow-ellipsis-one fs-26">{{info2.goods_name}}</view>
							<view class="">
								<span class="fs-24 fc-FB3D03">￥</span>
								<span class="fs-32 fc-FB3D03 fw-b">{{info2.price}}</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {getSearch} from '@/api/goods.js';
	export default {
		data(){
			return{
				fromData:{
					search:'',
					operate_id:'',
					page:1,
				},
				list:[],
				total:0,
				
			}
		},
		onLoad(e) {
			this.fromData.operate_id = uni.getStorageSync('operate_id');
			this.fromData.search = e.search
			this.fromData.page = 1;
			this.list = [];
			this.getList()
		},
		methods:{
			search(){
				this.fromData.page = 1;
				this.list = [];
				this.getList();
			},
			getList(){
				getSearch(this.fromData).then((res)=>{
					if(res.code === 1){
						this.list = [...this.list,...res.data.items];
						this.total = res.data.total;
					}
				})
			},
			scrolltolower(){
				if(this.list.length < this.total){
					this.fromData.page += 1;
					this.getList();
				}
			},
			toShop(item){
				uni.navigateTo({
					url:'/pages-takeout/shop?shop_id=' + item.shop_id
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.seacrh-record-index{
		position: relative;
		
		
		
		.seacrh-bg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 376rpx;
			filter: blur(80rpx);
			background-image: linear-gradient(to right, #C9F7FC,#F9F6E0,#F6F5F3);
			z-index: -1;
		}
		.s-input{
			margin-top: 24rpx;
			width: 100%;
			height: 72rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			position: relative;
			.input-icon{
				position: absolute;
				left: 48rpx;
				top: 20rpx;
			}
			input{
				font-size: 32rpx;
				width: 100%;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 200rpx;
				box-sizing: border-box;
				padding: 0 126rpx 0 78rpx;
			}
			.input-buttom{
				width: 120rpx;
				height: 60rpx;
				background: linear-gradient( 90deg, #57CAFF 0%, #41ABF5 100%);
				border-radius: 200rpx;
				text-align: center;
				line-height: 60rpx;
				position: absolute;
				right: 30rpx;
				top: 6rpx;
			}
		}
		.seacrh-info{
			margin-top: 20rpx;
			// border-radius: 24rpx 24rpx 0rpx 0rpx;
		}
		
		
		.goos-list-box{
			width: 100%;
			min-height: 100rpx;
			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>