jurong_circle_front_app/pages/home/mallSearch.vue

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