2025-10-23

商品搜索

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({

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: '',

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>