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">
			<EnBlank :customSrc='true' v-if="list<= 0">
				<template v-slot:blankImg>
					<image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
				</template>
			</EnBlank>

			<view class="" v-else>
				<view class="goos-list-box box-border-box" v-for="(item,i) in list" :key='i' @click="toShop(item)">
					<view class="display-flex p-b-20 mb-26 b-b-EFF2F5">
						<view class="left-img-box mr-24">
							<image class="left-img" :src="item.shop_logo" mode="aspectFill"></image>
							<view class="status-box fc-f" v-if="item.status != 1">
								休息中
							</view>
						</view>
						<view class="flex-1">
							<view class="align-items-center mb-8">
								<view class="right-box-title fs-28 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-8" src="@/static/img/my/wdpj.png" mode=""></image>
								<view class="fs-24 fw-600 fc-FF7F00 mr-12">{{item.shop_score}}</view>
								<view class="fc-0 fs-24 mr-12">预计{{item.delivery_time}}分钟 |</view>
								<view class="fc-0 fs-24 mr-12">{{item.shop_sales}}人购买</view>
							</view>
							<view class="align-items-center flex-wrap-wrap">
								<view class="quan-list b-F5541E box-border-box bgc-f align-items-center b-rad-5 mr-10"
									v-for="(info1,index1) in item.coupon" :key="index1">
									<image class="quan-list-1" src="@/static/img/index/q.png" mode=""></image>
									<view class="quan-list-2 fs-24 fc-F5531E">{{info1.money}}元</view>
								</view>
							</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">
							<view v-show="info2.label === 3" class="label-box text-align-center bgc-F5811E fs-24 fc-f">
								推荐</view>
							<view v-show="info2.label === 2" class="label-box text-align-center bgc-FF5555 fs-24 fc-f">
								新品</view>
							<view v-show="info2.label === 1" class="label-box text-align-center bgc-48D3C5 fs-24 fc-f">
								折扣</view>
							<view v-show="info2.label === 4" class="label-box text-align-center bgc-4db8ff fs-24 fc-f">
								招牌</view>
							<image class="mb-18" :src="info2.goods_image" mode="aspectFill"></image>
							<view class="mb-12 fw-600 text-overflow-ellipsis-one fs-24">{{info2.goods_name}}
							</view>
							<view class="">
								<span class="fs-24 fc-FD5D05 fw-b">￥</span>
								<span class="fs-32 fc-FD5D05 fw-b">{{info2.price}}</span>
							</view>
						</view>
					</view>
				</view>
				<view class="pt-40 flex-direction align-items-center" v-if="list.length === total">
					<view class="fs-32 fc-0 fw-b">
						小主都到这里了
					</view>
					<view class="fs-32 fc-0 fw-b mb-26">
						还没有找到满意的店铺吗？
					</view>
					<view class="fs-24 fc-0 mb-32">
						可以提交你意见与反馈哟。我们一定尽快努力达成！
					</view>
					<view class="list-but align-items-center flex-justify-center bgc-5CC2FF" @click="goFeedback">
						<view class="fs-28 fc-f mr-10">
							去提交
						</view>
						<view class="sj-fff"></view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	import {
		getSearch
	} from '@/api/goods.js';
	import {
		shopInfo
	} from "@/api/shop.js"
	import tools from "@/service/tools";
	export default {
		components: {
			EnBlank
		},
		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: {
			goFeedback() {
				// 问题反馈
				uni.navigateTo({
					url: '/pages-my/feedback'
				})
			},
			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) {
				const operate_id = uni.getStorageSync('operate_id')
				shopInfo({
					operate_id: operate_id,
					shop_id: item.shop_id
				}).then((res) => {
					if (res.code == 1) {
						uni.navigateTo({
							url: '/pages-takeout/shop?shop_id=' + item.shop_id
						})
					} else {
						tools.error(res.msg)
					}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.list-but {
		width: 140rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 24rpx;
	}

	.sj-fff {
		width: 0;
		height: 0;
		border-top: 8rpx solid transparent;
		border-right: 8rpx solid transparent;
		border-left: 8rpx solid #fff;
		border-bottom: 8rpx solid transparent;
	}

	.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;
			padding: 28rpx 30rpx 35rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
			border-radius: 20rpx;
			margin-bottom: 20rpx;


			.goods-items-list {
				width: 100%;
				overflow-y: scroll;

				.goods-items-list-box {
					width: 33.3%;
					margin-right: 13rpx;
					position: relative;

					.label-box {
						position: absolute;
						left: 0;
						top: 0;
						width: 66rpx;
						height: 31rpx;
						line-height: 31rpx;
						border-radius: 10rpx 2rpx 10rpx 2rpx;
					}

					image {
						width: 201rpx;
						height: 200rpx;
						border-radius: 10rpx
					}
				}
			}

			.left-img-box {
				width: 120rpx;
				height: 120rpx;
				position: relative;

				.left-img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 12rpx;
				}

				.status-box {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					padding: 4rpx 0;
					text-align: center;
					background: rgba(0, 0, 0, 0.5);
					font-size: 17rpx;
					border-radius: 0 0 12rpx 12rpx;
				}
			}

			.img-x {
				width: 16rpx;
				height: 16rpx;
			}

			.right-box-title {
				width: 438rpx;
			}

			.right-box-title-img {
				width: 32rpx;
				height: 32rpx;
				margin-left: auto;
			}

			.quan-list {
				min-width: 88rpx;
				height: 28rpx;
				line-height: 28rpx;

				.quan-list-1 {
					width: 38rpx;
					height: 28rpx;
				}
			}
		}
	}
</style>