From 0e2dbdb9db8c87d34bc2e0d1ba58bdeb8a9e17b1 Mon Sep 17 00:00:00 2001
From: Sun_sun <469361609@qq.com>
Date: Thu, 23 Oct 2025 13:49:19 +0800
Subject: [PATCH] =?UTF-8?q?2025-10-23=20=E5=95=86=E5=93=81=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/home/index.vue        |  20 ++-
 pages/home/mallCategory.vue |   8 +-
 pages/home/mallSearch.vue   | 256 +++++++++++++++++++++++++++++++++++-
 static/icon/view-change.png | Bin 0 -> 260 bytes
 4 files changed, 277 insertions(+), 7 deletions(-)
 create mode 100644 static/icon/view-change.png

diff --git a/pages/home/index.vue b/pages/home/index.vue
index 391375d..1c21c6b 100644
--- a/pages/home/index.vue
+++ b/pages/home/index.vue
@@ -5,7 +5,7 @@
 			refresher-enabled="true" @refresherrefresh="reflash">
 			<view class="header-search">
 				<u-search :action-style="searchBtn" shape="square" bg-color="#CADBFF" placeholder="输入商品名称或商品种类"
-					v-model="keyword"></u-search>
+					v-model="keyword" @search="handleSearch" @custom="handleSearch"></u-search>
 			</view>
 
 			<view class="menu-list">
@@ -139,6 +139,7 @@
 		</scroll-view>
 	</view>
 	<Tabbar id="tabbarId"></Tabbar>
+	<u-toast ref="msgToast" duration="6000" />
 </template>
 <script setup lang="ts">
 	import {
@@ -146,6 +147,9 @@
 	} from 'vue';
 	import { mallAPI } from '../../api/mall';
 	import { getImageUrl } from '../../util/common';
+	
+	const msgToast = ref()
+	
 	const instance = getCurrentInstance();
 
 	const height = ref(0)
@@ -170,6 +174,20 @@
 		boxShadow: '0px 4px 4px 0px #FFFFFF40 inset',
 	}
 	const iconWidth = "65%"
+	
+	const handleSearch = () => {
+		if (!keyword.value) {
+			msgToast.value.show({
+				title: '请输入搜索词',
+				type: 'warning'
+			})
+			return
+		}
+		uni.navigateTo({
+			url: '/pages/home/mallSearch?search=' + keyword.value
+		})
+		keyword.value = ''
+	}
 
 	const handleCategory = () => {
 		uni.navigateTo({
diff --git a/pages/home/mallCategory.vue b/pages/home/mallCategory.vue
index 671d362..40b03f6 100644
--- a/pages/home/mallCategory.vue
+++ b/pages/home/mallCategory.vue
@@ -15,7 +15,7 @@
 					</view>
 				</view>
 				<view class="menu-level2" v-if="categoryList[currentCate]?.relative.length!=0">
-					<view class="menu-item" v-for="item in categoryList[currentCate]?.relative">
+					<view class="menu-item" v-for="item in categoryList[currentCate]?.relative" @click="handleSearchCategory(item)">
 						<u-image v-if="item.img" :fade="false" :src="getImageUrl(item.img)" :width="iconWidth"
 							mode="widthFix"></u-image>
 						<view class="menu-text">
@@ -116,6 +116,12 @@
 	const handleChangeCategory = (index) => {
 		currentCate.value = index
 	}
+	
+	const handleSearchCategory = (item) => {
+		 uni.navigateTo({
+		 	url: '/pages/home/mallSearch?cate=' + item.name
+		 })
+	}
 
 	const params = ref({
 		keyword: '',
diff --git a/pages/home/mallSearch.vue b/pages/home/mallSearch.vue
index 5655d3e..cfd9b4e 100644
--- a/pages/home/mallSearch.vue
+++ b/pages/home/mallSearch.vue
@@ -1,15 +1,261 @@
 <template>
 	<view class="search-container">
-		
+		<u-navbar id="navBar" title="" :background="{ background: '#E4ECFF' }">
+			<view class="slot-wrap">
+				<u-search :show-action="false" placeholder="输入商品名称或商品种类" v-model="params.search" bgColor="#CADBFF"
+					@search="handleSearch"></u-search>
+			</view>
+			<template v-slot:right>
+				<u-icon class="more-dot-fill" name="more-dot-fill"></u-icon>
+			</template>
+		</u-navbar>
+
+		<view class="filter" id="filterFixed">
+			<view class="sort-menu">
+				<u-tabs :show-bar="false" :list="sortList" :is-scroll="false" v-model="currentSort"
+					@change="changeSort"></u-tabs>
+			</view>
+			<view class="icon" @click="viewType=!viewType">
+				<image style="width: 100%;height: 100%;" src="/static/icon/view-change.png" mode=""></image>
+			</view>
+		</view>
+
+		<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'" class="scroll-view" @scrolltolower="loadData">
+			<view :class="viewType?'mall-list':'mall-list2'">
+				<view class="mall-item" v-for="item in mallList" @click="handleCheck(item)">
+					<view class="item-img">
+						<u-lazy-load style="width: 100%;height: 100%;" img-mode="widthFix"
+							:image="getImageUrl(item.image)" threshold="-450" border-radius="10"></u-lazy-load>
+					</view>
+					<view class="item-info">
+						<view>{{item.name}}</view>
+						<view>积分：{{item.points_price}}</view>
+						<view>融豆：{{item.rongdou_price}}</view>
+					</view>
+				</view>
+			</view>
+			<u-loadmore margin-top="20" :status="loadStatus"></u-loadmore>
+			<view class="box-div"></view>
+		</scroll-view>
 	</view>
+
+	<u-toast ref="msgToast" duration="6000" />
 </template>
 
 <script setup>
-	
+	import {
+		ref,
+		computed,
+		getCurrentInstance,
+		onMounted,
+		reactive
+	} from 'vue';
+	import {
+		getImageUrl
+	} from '../../util/common.js'
+	import {
+		mallAPI
+	} from '../../api/mall';
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
+
+	const msgToast = ref()
+
+	const instance = getCurrentInstance();
+	const scrollHeight = ref(0)
+	const loadHeight = () => {
+		uni.getSystemInfo({
+			success(res) {
+				let screenHeight = res.screenHeight
+				uni.createSelectorQuery().in(instance.proxy).select("#navBar").boundingClientRect((data) => {
+					scrollHeight.value = screenHeight - data.height
+				}).exec()
+				uni.createSelectorQuery().in(instance.proxy).select("#filterFixed").boundingClientRect((
+					data) => {
+					scrollHeight.value = scrollHeight.value - data.height
+				}).exec()
+			}
+		})
+	}
+
+	const viewType = ref(true)
+
+	const params = ref({
+		page: 1,
+		limit: 10,
+		category: '',
+		search: '',
+		sort: ''
+	})
+
+	const handleSearch = () => {
+		params.value.page = 1
+		loadStatus.value = 'loadmore'
+		mallList.value = []
+		loadData()
+	}
+
+	const sortList = reactive([{
+		name: '默认'
+	}, {
+		name: '价格高到低'
+	}, {
+		name: '价格低到高',
+	}, {
+		name: '销量',
+	}])
+	const currentSort = ref(0)
+
+	const changeSort = (val) => {
+		// sort：price_desc价格升序，price_asc价格降序，sales_desc销量升序
+		console.log(val);
+		switch (val) {
+			case 0:
+				params.value.sort = ''
+				break
+			case 1:
+				params.value.sort = 'price_desc'
+				break
+			case 2:
+				params.value.sort = 'price_asc'
+				break
+			case 2:
+				params.value.sort = 'sales_desc'
+				break
+		}
+
+		params.value.page = 1
+		loadStatus.value = 'loadmore'
+		mallList.value = []
+		loadData()
+	}
+
+	const handleCheck = (item) => {
+		uni.navigateTo({
+			url: '/pages/home/mallDetail?id=' + item.id
+		})
+	}
+
+	const mallList = ref([])
+	const loadStatus = ref('loadmore') // nomore
+	const maxPage = ref(1)
+
+	const loadData = () => {
+		if (loadStatus.value == 'nomore') return
+		mallAPI.getMallList(params.value).then((res) => {
+			mallList.value = mallList.value.concat(res.data.products)
+			maxPage.value = res.data.pagination.pages
+			params.value.page++
+			if (maxPage.value < params.value.page) {
+				loadStatus.value = 'nomore'
+			}
+		})
+	}
+
+	onLoad((val) => {
+		params.value.category = val.cate || ''
+		params.value.search = val.search || ''
+	})
+
+	onMounted(() => {
+		loadHeight()
+		loadData()
+	})
 </script>
 
 <style scoped lang="scss">
-	.search-container{
-		
+	.search-container {
+		width: 100%;
+		height: 100%;
+		background: var(--Color, #E4ECFF);
+
+		.more-dot-fill {
+			width: 48rpx;
+			height: 48rpx;
+			margin-right: 24rpx;
+		}
+
+		.filter {
+			display: flex;
+			background: #fff;
+			align-items: center;
+			padding-right: 20rpx;
+
+			.sort-menu {
+				flex: 1;
+			}
+
+			.icon {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 24rpx;
+				height: 24rpx;
+			}
+		}
+
+		.scroll-view {
+
+			.mall-list {
+				display: flex;
+				flex-wrap: wrap;
+
+				.mall-item {
+					width: 100%;
+					display: flex;
+					background: #F5F8FF;
+					margin: 8rpx 0;
+					padding: 20rpx;
+
+
+					.item-img {
+						width: 220rpx;
+						height: 220rpx;
+						margin-right: 66rpx;
+					}
+
+					.item-info {
+						flex: 1;
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+					}
+				}
+			}
+
+			.mall-list2 {
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
+				padding: 0 20rpx;
+
+				.mall-item {
+					width: 47%;
+					display: flex;
+					background: #F5F8FF;
+					margin: 8rpx 4rpx;
+					padding: 20rpx;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+
+					.item-img {
+						width: 100%;
+					}
+
+					.item-info {
+						flex: 1;
+						display: flex;
+						flex-direction: column;
+						justify-content: flex-start;
+					}
+				}
+			}
+
+			.box-div {
+				padding: 10rpx 0rpx;
+			}
+		}
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/static/icon/view-change.png b/static/icon/view-change.png
new file mode 100644
index 0000000000000000000000000000000000000000..76aec75e05674cf6cb0de2ac9e9dd7422dbebd1d
GIT binary patch
literal 260
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9E$svykh8Km+7D9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~z5f2OC4V@L(#+bND*Z3+Ud>1});<R89IdwV2R
zeTDQDuj_Ny<OPTe%;szon<~k|TBo34Bj0DmzjkZu_kE5><lh(z1g@R(>H*u4#a4#m
z|IY0c%bV2M=(FY84)q6If4?#8d3W7bT!KSRt^11i(#oEHwW538@m`QHX506&Xwr?{
z@rq{pM;~|`@U`$<?D%MNg4bmRP2a;yOn5(4%sO}an&<r;tt|pTM>2T2`njxgN@xNA
DlrLWq

literal 0
HcmV?d00001