zhongtuanLitterButler/packageA/search/index.vue

<template>
	<s-layout title="搜索结果" :bgStyle="{ color: '#ffffff' }">
		<!-- <view>搜索页面</view> -->
		<view class="container">
			<view class="top">
				<!-- 顶部-地址&搜索 -->
				<view class="locTop">
					<view class="locTop-right">
						<uni-section style="border-radius: 192rpx;padding: 0;" type="line">
							<uni-search-bar v-model="listQuery.keywords" @confirm="search"
								style="border-radius: 192rpx;" radius="23" placeholder="搜索您需要的信息" bgColor="#EEEEEE"
								clearButton="none" cancelButton="none" />
						</uni-section>
						<!-- @confirm="search" -->
					</view>
				</view>
			</view>

			<!-- tabs页签 
			<view class="tabs-box">
				<su-tabs :list="tabMaps" @change="onChange" :scrollable="false" :current="currentTab"></su-tabs>
			</view>-->

			<scroll-view @scrolltolower="onScrolltolower" :refresher-enabled="true" :refresher-triggered="homrS"
				@refresherrefresh="onS" scroll-y="true" class="flex align-items" :show-scrollbar="false"
				style="height: 1250rpx;box-sizing: border-box;">

				<!-- 原料商城 -->
				<view class="goodsBox">
					<view class="goodsList">
						<view class="list-item" v-for="(item,index) in mallList" :key="index" @click="toDetail(item)">
							<image style="width: 330rpx;height: 330rpx;border-radius: 18rpx 18rpx 0 0;"
								:src="item.full_image" mode="">
							</image>
							<view class="item-text">
								<view class="fs30 c3 goodsTitle" style="margin: 0 auto;width: 300rpx;">{{item.title}}
								</view>
								<view class="cons-third">
									<view class="title3">{{item.createtime}}</view>
									<!-- <view style="display: flex;">
										<image style="width: 24rpx;height: 24rpx;"
											src="https://mall.jiangxiaoxian.hschool.com.cn/eye.png">
										</image>
										<view class="title3" style="margin-left: 10rpx;">{{item.views}}</view>
									</view> -->
								</view>
							</view>

						</view>
					</view>

				</view>

				<!-- 无数据展示 -->
				<view class="flex flex-column justify-center align-items" style="margin-top: 230rpx;"
					v-if="mallList.length == 0">
					<image src="https://mall.jiangxiaoxian.hschool.com.cn/noneList.png" mode=""
						style="width: 520rpx;height: 259rpx;">
					</image>
					<view v-if="listQuery.keywords == ''" style="margin-top: 30rpx;font-size: 28rpx;color: #323232;">
						请输入要搜索的内容</view>
					<view v-else style="margin-top: 30rpx;font-size: 28rpx;color: #323232;">暂无相关数据</view>
				</view>
			</scroll-view>



		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import _ from 'lodash';

	onLoad((options) => {
		// if(options.tab) {
		// 	console.log('options',options.tab);
		// 	currentTab.value = options.tab
		// }
	})

	// const
	const tabMaps = [];
	const currentTab = ref(0)
	const mallList = ref([])
	const mallCount = ref(0)
	const homrS = ref(false)
	const loadStatus = ref('')
	const listQuery = ref({
		keywords: null,
		add_type: null,
		type: null,
		my: null,
		page: 1,
		list_rows: 10,
		mallPage: 1,
		limit: 10,
		cate_ids: '',
		province: null,
		city: null,
		district: null,
		status: null,
		recommend: null,
		collect: null,
		order: null,
		nearby: null,
		latitude: null,
		longitude: '',
		area: null,
	})

	function search(e) {
		console.log('搜索e', e.value);
		console.log('搜索keywords', listQuery.value.keywords);
		if (listQuery.value.keywords == '') {
			mallList.value = [];
			// getGoods();
		} else {
			mallList.value = [];
			getGoods();
		}

	}

	//商品
	function getGoods() {
		console.log('商品', listQuery.value.keywords);
		// const listQuery =
		sheep.$api.goods.list({
			page: listQuery.value.mallPage,
			list_rows: listQuery.value.list_rows,
			keyword: listQuery.value.keywords,
		}).then((res) => {
			if (res.code == 1) {
				console.log('商品搜素列表:', res.data);
				mallList.value = [...mallList.value, ...res.data.data]
				mallCount.value = res.data.total
			}
		})
	}

	//加载更多
	function onScrolltolower() {
		if (mallList.value.length < mallCount.value) {
			listQuery.value.mallPage += 1;
			getGoods();
		}
	}
	//下拉刷新
	function onS() {
		homrS.value = true;
		// listQuery.value.keywords = '';
		uni.showLoading({
			title: '加载中...'
		});
		resetLists();
		setTimeout(() => {
			homrS.value = false;
			uni.hideLoading();
			uni.stopPullDownRefresh();
		}, 2000)
	}
	// 重置列表
	function resetLists() {
		if (listQuery.value.keywords == '') {
			listQuery.value.mallPage = 1;
			mallList.value = [];
			// loadStatus.value = "loading";
			// getGoods();
		} else {
			listQuery.value.mallPage = 1;
			mallList.value = [];
			loadStatus.value = "loading";
			getGoods();
		}

	}

	//页面跳转
	function toDetail(item) {
		// @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
		uni.navigateTo({
			url: '/pages/goods/index?id=' + item.id
		})
	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
	}

	.align-start {
		align-items: flex-start;
	}

	.justify-center {
		justify-content: center;
	}

	.align-items {
		align-items: center;
	}

	.flex-column {
		flex-flow: column;
	}


	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}

	.title2 {
		color: #3d3d3d;
		font-size: 32rpx;
		font-weight: 800;
		line-height: 48rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.title3 {
		font-size: 20rpx;
		font-weight: 400;
		color: #999999;
		line-height: 22rpx;
	}

	.container {

		.top {
			height: 70rpx;
			background-size: 100%;
			padding: 30rpx;
			display: grid;

			.locTop {
				width: 100%;
				height: 70rpx;
				display: flex;

				.locTop-right {
					width: 690rpx;
					height: 70rpx;

				}
			}


		}


		.recommend-box {
			padding: 0rpx 30rpx;

			.rrecommList {
				// margin-top: 30rpx;

				.reListItem {
					background-color: #ffffff;
					width: 640rpx;
					height: 190rpx;
					padding: 30rpx;
					display: flex;
					margin-top: 20rpx;
					justify-content: flex-start;
					align-items: center;
					border-radius: 18rpx;

					.listItem-images {
						display: grid;
						justify-content: flex-start;

						.iamges-mainImg {
							width: 190rpx;
							height: 190rpx;
							position: relative;
							right: 0rpx;
							bottom: 18rpx;
							z-index: 1;
							border-radius: 12rpx;

						}
					}

					.listItem-contents {
						margin-left: 20rpx;

						.score-box {
							display: flex;

							.cate {
								display: flex;
								justify-content: flex-start;
								align-items: center;

								.cate-e {

									.status-tag {
										padding: 5rpx 15rpx;
										border-radius: 5rpx;
										font-size: 22rpx;
										font-weight: 400;
										line-height: 22rpx;
										background-color: rgba(247, 97, 0, 0.2);

										// opacity: 0.2;
										color: #F76100;
										//flex-shrink: 0
									}
								}
							}



						}



						.cons-third {
							margin-top: 20rpx;
							width: 430rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
					}
				}

			}

		}


		.exChangeBox {
			width: 690rpx;
			margin: 0 auto;

			.couponsList {
				width: 100%;
				// padding: 0 30rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-gap: 20rpx;
				box-sizing: border-box;
				margin-top: 30rpx;


				.list-item {
					width: 330rpx;
					border-radius: 18rpx;
					box-shadow: 4rpx 4rpx 4rpx 4rpx rgba(153, 153, 153, 0.1);
					background-color: #ffffff;

					.item-text {
						padding: 0rpx 20rpx 0rpx 20rpx;
						// height: 120rpx;
						position: relative;
						bottom: 30rpx;
						// text-align: center;

						.classTitle {
							height: 80rpx;
							width: 300rpx;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.cons-third {
							margin-top: 20rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
						}

					}
				}

			}

		}

		.goodsBox {
			width: 690rpx;
			margin: 0 auto;

			.goodsList {
				width: 100%;
				// padding: 0 30rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-gap: 20rpx;
				box-sizing: border-box;
				margin-top: 30rpx;


				.list-item {
					width: 330rpx;
					border-radius: 18rpx;
					box-shadow: 4rpx 4rpx 4rpx 4rpx rgba(153, 153, 153, 0.1);
					background-color: #ffffff;

					.item-text {
						padding: 20rpx;
						min-height: 100rpx;
						position: relative;
						bottom: 0rpx;
						// text-align: center;

						.goodsTitle {
							min-height: 60rpx;
							width: 300rpx;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.cons-third {
							margin-top: 20rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
						}




					}
				}

			}

		}

	}
</style>