components/common/u-select/index.vue

@@ -0,0 +1,249 @@
+<template>
+	<view class="u-select-container">
+		<view class="u-select-box">
+			<view class="lable-icon-box" @click="changeStatus()">
+				<view class="lable" :class="{'active': selectedList.length>0}">
+					{{title}}
+				</view>
+				<i class="iconfont icon-Down"></i>
+			</view>
+			<view class="dropdown-box" :style="{ height: height + 'px' }" v-if="children === false">
+				<checkbox-group @change="handleItemChange" :id="uId" v-if="title === '展馆号'">
+					<label class="custom-checkbox" v-for="(item, index) in dataList" :key="index">
+						<checkbox :class="{ 'open': selectedList.includes(String(item.label)) }" :value="item.label">
+							{{item.label}}
+						</checkbox>
+					</label>
+				</checkbox-group>
+				<checkbox-group @change="handleItemChange" :id="uId" v-else>
+					<label class="custom-checkbox" v-for="(item, index) in dataList" :key="index">
+						<checkbox :class="{ 'open': selectedList.includes(String(item.value)) }" :value="item.value">
+							{{item.label}}
+						</checkbox>
+					</label>
+				</checkbox-group>
+			</view>
+			<view class="dropdown-box" :style="{ height: height + 'px' }" v-else>
+				<checkbox-group @change="handleItemChange" :id="uId">
+					<view class="dropdown-item" v-for="(item, index) in dataList" :key="index">
+						<template>
+							<view class="child-lable-icon-box" @click="changeChildStatus(index)">
+								<view class="child-lable">
+									{{item.label}}
+								</view>
+								<i class="iconfont icon-DownSmall"></i>
+							</view>
+							<view class="child-box" :style="{ height: item.height + 'px' }">
+								<view class="inner-box" :id="'child' + index">
+									<label class="child-custom-checkbox" v-for="(childItem, index) in item.children" :key="index">
+										<checkbox :class="{ 'open': selectedList.includes(String(childItem.value)) }"
+											:value="childItem.value">
+											{{childItem.label}}
+										</checkbox>
+									</label>
+								</view>
+							</view>
+						</template>
+					</view>
+				</checkbox-group>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		nextTick
+	} from '../../../wxcomponents/vant/common/utils'
+	export default {
+		components: {},
+		props: {
+			title: {
+				type: String,
+				default: '展馆号'
+			},
+			data: {
+				type: Array,
+				default: []
+			},
+			children: {
+				type: Boolean,
+				default: false
+			},
+			uId: {
+				type: String,
+				default: 'dropdown'
+			},
+			value: {
+				type: [String, Number],
+				default: []
+			}
+		},
+		watch: {
+			data(value) {
+				this.dataList = value
+				this.initChildHeight()
+			},
+			value(value) {
+				this.selectedList = value
+			},
+			selectedList(val) {
+				this.$emit('input', val)
+			}
+		},
+		data() {
+			return {
+				dataList: [],
+				selectedList: [],
+				height: 0,
+			}
+		},
+		created() {},
+		mounted() {
+			this.selectedList = this.value
+		},
+		methods: {
+			initChildHeight() {
+				if (this.children) {
+					for (let i = 0; i < this.dataList.length; i++) {
+						this.$set(this.dataList[i], 'height', 0)
+					}
+				}
+			},
+			handleItemChange(e) {
+				this.selectedList = e.detail.value
+				this.$emit('input', this.selectedList)
+				this.$emit('change-event', this.selectedList);
+			},
+			getOutHeight() {
+				this.$nextTick(() => {
+					const query = uni.createSelectorQuery().in(this)
+					let id = "#" + this.uId
+					query.select(id).boundingClientRect(data => {
+						if (data) {
+							this.height = data.height
+						}
+					}).exec()
+				})
+			},
+			changeStatus() {
+				if (this.height === 0) {
+					this.getOutHeight()
+				} else {
+					this.height = 0
+				}
+			},
+			changeChildStatus(index) {
+				let id = '#child' + index
+				if (this.dataList[index].height === 0) {
+					const query = uni.createSelectorQuery().in(this)
+					query.select(id).boundingClientRect(data => {
+						if (data) {
+							this.$set(this.dataList[index], 'height', data.height)
+							this.getOutHeight()
+						}
+					}).exec()
+				} else {
+					this.$set(this.dataList[index], 'height', 0)
+					this.getOutHeight()
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-select-container {
+		.u-select-box {
+			background-color: #FFFFFF;
+			border-radius: 13rpx;
+			border: 3rpx solid #B3B3B3;
+			overflow: hidden;
+
+			.lable-icon-box {
+				display: flex;
+				justify-content: space-between;
+				grid-gap: 20rpx;
+				align-items: center;
+				padding: 18rpx 25rpx;
+
+				.lable {
+					font-size: 20rpx;
+					color: #B3B3B3;
+
+					&.active {
+						color: #E57519;
+					}
+				}
+
+				.iconfont {
+					font-size: 24rpx;
+					color: #333333;
+				}
+			}
+
+			.dropdown-box {
+				// transition: height .2s ease;
+
+				.dropdown-item {
+					border-bottom: 1px solid #e3e9f1;
+					overflow: hidden;
+
+					&:nth-last-child(1) {
+						border-bottom: unset;
+					}
+
+					// .child-box {
+					// 	transition: height .2s ease;
+					// }
+
+					.child-lable-icon-box {
+						display: flex;
+						grid-gap: 20rpx;
+						align-items: center;
+						padding: 18rpx 25rpx;
+
+						.child-lable {
+							font-size: 20rpx;
+							color: #333333;
+						}
+
+						.iconfont {
+							color: #333333;
+						}
+					}
+
+					.child-custom-checkbox {
+						checkbox {
+							padding: 20rpx 25rpx;
+							font-size: 24rpx;
+							display: flex;
+							align-items: center;
+						}
+					}
+				}
+
+				checkbox-group {
+					display: flex;
+					flex-direction: column;
+
+					.custom-checkbox {
+						checkbox {
+							padding: 20rpx 25rpx;
+							border-bottom: 1px solid #e3e9f1;
+							font-size: 24rpx;
+							display: flex;
+							align-items: center;
+						}
+
+						&:nth-last-child(1) {
+							checkbox {
+								border-bottom: unset;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/exhibitor/exhibit.vue

@@ -1,9 +1,9 @@
 <template>
 	<view class="exhibit-index exhibitor-index">
 		<nav-bar title="展品信息" @init="onInitNavbar"></nav-bar>
-		<u-scroll-view @scroll-near-lower="onScrollToLower">
+		<u-scroll-view>
 			<view class="main-container">
-				<view class="exhibitor-filter">
+				<!-- <view class="exhibitor-filter">
 					<view>
 						<view class="exhibitor-filter-label">展馆号</view>
 						<u-dropdown-select ref="select1" v-model="categoryId" placeholder="选择展馆号" :options="categories" @dropdown="onSelectDropdown(1)" @change="searchList()"/>
@@ -16,17 +16,34 @@
 						<view class="exhibitor-filter-label">应用领域</view>
 						<u-dropdown-select  ref="select3" v-model="searchApplicationAreas" placeholder="选择应用领域" :options="applicationAreass" @dropdown="onSelectDropdown(3)" @change="searchList()"/>
 					</view>
-				</view>
+				</view> -->
 				<u-search v-model="searchKeyword" placeholder="搜索展商 / 展品名称 / 会议" @search="onSearch" />
+				<view class="select-box">
+					<view class="select-title item-title">
+						筛选
+					</view>
+					<view class="select-list">
+						<u-select title="展品分类" v-model="searchCategoryId" :data="categories" uId="exhibit-dropdown" :children="true"
+							@change-event="searchList()"></u-select>
+						<u-select title="应用领域" v-model="searchApplicationAreas" :data="applicationAreass" uId="exhibit-dropdown2"
+							@change-event="searchList()"></u-select>
+					</view>
+					<view class="select-search-btn" @click="searchList()">搜索</view>
+				</view>
 				<view class="ad-space">
-					<image src="https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da70a6c76a.png?x-oss-process=image/resize,w_200" mode="aspectFill"/>
+					<image
+						src="https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da70a6c76a.png?x-oss-process=image/resize,w_200"
+						mode="aspectFill" />
 				</view>
 				<van-empty v-if="exhibitList.length === 0" description="暂无数据" />
 				<view v-else class="exhibit-list exhibitor-list">
 					<template v-for="(item, index) in exhibitList">
-						<exhibit-item :item="item" :key="index" :pollShow="pollShow.product_poll_show" @share="onShare" @updateItemValue="updateItemValue()" />
+						<exhibit-item :item="item" :key="index" :pollShow="pollShow.product_poll_show" @share="onShare"
+							@updateItemValue="updateItemValue()" />
 					</template>
 				</view>
+				<u-pagination :pageSize="exhibitParams.page_size" :total="total"
+					@page-change="handlePageChange()"></u-pagination>
 				<disclaimer-text></disclaimer-text>
 			</view>
 		</u-scroll-view>
@@ -36,12 +53,19 @@
 
 <script>
 	import NavBar from '@/components/layout/nav-bar'
+	import USelect from '@/components/common/u-select/index.vue'
 	import UScrollView from '@/components/common/u-scroll-view'
 	import UShareActionSheet from '@/components/common/u-share-action-sheet'
 	import USearch from '@/components/common/u-search'
 	import UDropdownSelect from '@/components/common/u-dropdown-select'
+	import UPagination from '@/components/common/u-pagination/index.vue'
 	import ExhibitItem from '@/pages/exhibitor/components/exhibit-item.vue'
-	import { exhibitorsProductList, productCategoryList, applicationAreasList, globalPollShow } from '@/api/exhibitor'
+	import {
+		exhibitorsProductList,
+		productCategoryList,
+		applicationAreasList,
+		globalPollShow
+	} from '@/api/exhibitor'
 	import DisclaimerText from '@/components/disclaimer-text/index.vue'
 
 	export default {
@@ -55,10 +79,11 @@
 			UDropdownSelect,
 			UShareActionSheet,
 			ExhibitItem,
-			DisclaimerText
-		},
-		computed: {
+			DisclaimerText,
+			USelect,
+			UPagination
 		},
+		computed: {},
 		data() {
 			return {
 				searchCategoryId: '',
@@ -82,7 +107,9 @@
 				pollShow: {
 					exhibitors_poll_show: 0,
 					product_poll_show: 0
-				}
+				},
+				total: 0,
+				baseUrl: 'https://mp-test-onlinecatelogue.matchexpo.cn'
 			}
 		},
 		created() {
@@ -93,6 +120,16 @@
 			this.getGlobalPollShow()
 		},
 		methods: {
+			handlePageChange(page) {
+				this.exhibitParams.page = page
+				exhibitorsProductList(this.exhibitParams).then(res => {
+					if (res.data.data) {
+						this.exhibitList = res.data.data
+					} else {
+						this.showToast('系统繁忙，稍候再试')
+					}
+				})
+			},
 			getApplicationAreasList() {
 				applicationAreasList().then(res => {
 					let areas = []
@@ -126,42 +163,79 @@
 				})
 			},
 			searchList() {
-				this.exhibitParams.application_areas_id = this.searchApplicationAreas || ''
-				this.exhibitParams.product_cate_id = this.searchCategoryId || ''
-				this.exhibitParams.page = 1
-				this.getList()
+				// this.exhibitParams.application_areas_id = this.searchApplicationAreas || ''
+				// this.exhibitParams.product_cate_id = this.searchCategoryId || ''
+				// this.exhibitParams.page = 1
+				// this.getList()
+				let product_cate_ids = ''
+				let application_areas_ids = ''
+				if (this.searchCategoryId.length === 0) {
+					product_cate_ids = 'product_cate_id='
+				} else {
+					for (let i = 0; i < this.searchCategoryId.length; i++) {
+						if (i === this.searchCategoryId.length - 1) {
+							product_cate_ids = product_cate_ids + 'product_cate_id[]=' + this.searchCategoryId[i]
+						} else {
+							product_cate_ids = product_cate_ids + 'product_cate_id[]=' + this.searchCategoryId[i] + '&'
+						}
+					}
+				}
+				if (this.searchApplicationAreas.length === 0) {
+					application_areas_ids = 'application_areas_id='
+				} else {
+					for (let i = 0; i < this.searchApplicationAreas.length; i++) {
+						if (i === this.searchApplicationAreas.length - 1) {
+							application_areas_ids = application_areas_ids + 'application_areas_id[]=' + this.searchApplicationAreas[i]
+						} else {
+							application_areas_ids = application_areas_ids + 'application_areas_id[]=' + this.searchApplicationAreas[
+								i] + '&'
+						}
+					}
+				}
+				let url = this.baseUrl + '/api/exhibitors/product/list?page=1&page_size=10&keyword=&' + product_cate_ids + '&' +
+					application_areas_ids
+				uni.request({
+					url: url,
+					method: 'GET',
+					success: (res) => {
+						// 处理返回的数据
+						this.exhibitList = res.data.data
+						this.total = res.data.total
+						this.exhibitListLastPage = res.data.last_page
+					},
+					fail: (err) => {
+						console.error('请求失败', err);
+					}
+				});
 			},
 			getList() {
 				exhibitorsProductList(this.exhibitParams).then(res => {
 					if (res.data.data) {
-						if (this.exhibitParams.page > 1) {
-							this.exhibitList = [...this.exhibitList, ...res.data.data]
-						} else {
-							this.exhibitList = res.data.data
-							this.exhibitListLastPage = res.data.last_page
-						}
+						this.exhibitList = res.data.data
+						this.total = res.data.total
+						this.exhibitListLastPage = res.data.last_page
 					} else {
 						this.showToast('系统繁忙，稍候再试')
 					}
 					this.exhibitListLoading = false
 				})
 			},
-			onScrollToLower(e) {
-				if (this.exhibitListLastPage === this.exhibitParams.page) {
-					return
-				}
-				if (this.exhibitListLoading === true) {
-					return
-				}
-				this.exhibitListLoading = true
-				this.exhibitParams.page = this.exhibitParams.page+1
-				this.getList()
-			},
+			// onScrollToLower(e) {
+			// 	if (this.exhibitListLastPage === this.exhibitParams.page) {
+			// 		return
+			// 	}
+			// 	if (this.exhibitListLoading === true) {
+			// 		return
+			// 	}
+			// 	this.exhibitListLoading = true
+			// 	this.exhibitParams.page = this.exhibitParams.page+1
+			// 	this.getList()
+			// },
 			onShare(e) {
 				this.shareInfo = e.detail
 				this.showShare = true
 			},
-			onShareAppMessage: function (res) {
+			onShareAppMessage: function(res) {
 				if (res.from === 'button') {
 					if (this.shareInfo) {
 						return this.shareInfo
@@ -206,5 +280,66 @@
 </script>
 
 <style lang="scss">
-</style>
+	checkbox {
+		.wx-checkbox-input {
+			width: 20rpx;
+			height: 20rpx;
+
+			&.wx-checkbox-input-checked {
+				background-color: #E57519;
+
+				&::before {
+					content: '';
+				}
+			}
+		}
+
+		&.open {
+			color: #E57519;
+			background-color: #FDF4EB;
+		}
+	}
+
+	.select-box {
+		display: flex;
+		flex-direction: column;
+		background-color: #FFFFFF;
+		border-radius: 21rpx;
+		border: 2rpx dashed #94A3B8;
+		padding: 34rpx 30rpx 54rpx 30rpx;
+		margin-bottom: 42rpx;
 
+		.select-title {
+			margin-bottom: 30rpx;
+		}
+
+		.select-list {
+			display: flex;
+			flex-direction: column;
+			grid-gap: 30rpx;
+			margin-bottom: 30rpx;
+		}
+
+		.select-search-btn {
+			padding: 18rpx 25rpx;
+			border: 1rpx solid #E57519;
+			background-color: #E57519;
+			font-size: 20rpx;
+			width: 100%;
+			color: #FFFFFF;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			border-radius: 13rpx;
+			grid-gap: 20rpx;
+			font-weight: bold;
+
+			&::before {
+				content: '\e86f';
+				font-size: 24rpx;
+				font-family: iconfont;
+				font-weight: bold;
+			}
+		}
+	}
+</style>

pages/exhibitor/index.vue

@@ -3,7 +3,7 @@
 		<nav-bar title="展商信息" @init="onInitNavbar"></nav-bar>
 		<u-scroll-view :tabbar-conflict="true">
 			<view class="main-container">
-				<view class="exhibitor-filter">
+				<!-- <view class="exhibitor-filter">
 					<view>
 						<view class="exhibitor-filter-label">展馆号</view>
 						<u-dropdown-select ref="select1" v-model="searchHall" placeholder="选择展馆号" :options="halls"
@@ -19,8 +19,27 @@
 						<u-dropdown-select ref="select3" v-model="searchApplicationAreas" placeholder="选择应用领域"
 							:options="applicationAreass" @dropdown="onSelectDropdown(3)" @change="searchExhibitorsList()" />
 					</view>
+				</view> -->
+				<view class="search-box">
+					<view class="search-title item-title">
+						搜索
+					</view>
+					<u-search v-model="searchKeyword" placeholder="搜索展商 / 展品名称 / 会议" @search="onSearch" />
+				</view>
+				<view class="select-box">
+					<view class="select-title item-title">
+						筛选
+					</view>
+					<view class="select-list">
+						<u-select title="展馆号" v-model="searchHall" :data="halls" uId="dropdown1"
+							@change-event="searchExhibitorsList()"></u-select>
+						<u-select title="展品分类" v-model="searchCategoryId" :data="categories" uId="dropdown2" :children="true"
+							@change-event="searchExhibitorsList()"></u-select>
+						<u-select title="应用领域" v-model="searchApplicationAreas" :data="applicationAreass" uId="dropdown3"
+							@change-event="searchExhibitorsList()"></u-select>
+					</view>
+					<view class="select-search-btn" @click="searchExhibitorsList()">搜索</view>
 				</view>
-				<u-search v-model="searchKeyword" placeholder="搜索展商 / 展品名称 / 会议" @search="onSearch" />
 				<view class="ad-space">
 					<image
 						src="https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da70a6c76a.png?x-oss-process=image/resize,w_200"
@@ -33,7 +52,8 @@
 							@share="(e) => $emit('share', e)" @updateItemValue="updateItemValue()" />
 					</template>
 				</view>
-				<u-pagination :pageSize="exhibitorsParams.page_size" :total="total" @page-change="handlePageChange()"></u-pagination>
+				<u-pagination :pageSize="exhibitorsParams.page_size" :total="total"
+					@page-change="handlePageChange()"></u-pagination>
 				<disclaimer-text></disclaimer-text>
 			</view>
 		</u-scroll-view>
@@ -44,6 +64,7 @@
 
 <script>
 	import NavBar from '@/components/layout/nav-bar'
+	import USelect from '@/components/common/u-select/index.vue'
 	import UScrollView from '@/components/common/u-scroll-view'
 	import USearch from '@/components/common/u-search'
 	import UPagination from '@/components/common/u-pagination/index.vue'
@@ -71,9 +92,9 @@
 			UDropdownSelect,
 			ExhibitorItem,
 			DisclaimerText,
-			UPagination,
-      floatButton
-		},
+			UPagination，
+			USelect,
+			floatButton
 		data() {
 			return {
 				searchCategoryId: '',
@@ -99,7 +120,8 @@
 					exhibitors_poll_show: 0,
 					product_poll_show: 0
 				},
-				total: 0
+				total: 0,
+				baseUrl: 'https://mp-test-onlinecatelogue.matchexpo.cn'
 			}
 		},
 		created() {
@@ -156,11 +178,57 @@
 				})
 			},
 			searchExhibitorsList() {
-				this.exhibitorsParams.application_areas_id = this.searchApplicationAreas || ''
-				this.exhibitorsParams.product_cate_id = this.searchCategoryId || ''
-				this.exhibitorsParams.hall_id = this.searchHall || ''
-				this.exhibitorsParams.page = 1
-				this.getExhibitorsList()
+				let hall_ids = ''
+				let product_cate_ids = ''
+				let application_areas_ids = ''
+				if (this.searchHall.length === 0) {
+					hall_ids = 'hall='
+				} else {
+					for (let i = 0; i < this.searchHall.length; i++) {
+						if (i === this.searchHall.length - 1) {
+							hall_ids = hall_ids + 'hall[]=' + this.searchHall[i]
+						} else {
+							hall_ids = hall_ids + 'hall[]=' + this.searchHall[i] + '&'
+						}
+					}
+				}
+				if (this.searchCategoryId.length === 0) {
+					product_cate_ids = 'product_cate_id='
+				} else {
+					for (let i = 0; i < this.searchCategoryId.length; i++) {
+						if (i === this.searchCategoryId.length - 1) {
+							product_cate_ids = product_cate_ids + 'product_cate_id[]=' + this.searchCategoryId[i]
+						} else {
+							product_cate_ids = product_cate_ids + 'product_cate_id[]=' + this.searchCategoryId[i] + '&'
+						}
+					}
+				}
+				if (this.searchApplicationAreas.length === 0) {
+					application_areas_ids = 'application_areas_id='
+				} else {
+					for (let i = 0; i < this.searchApplicationAreas.length; i++) {
+						if (i === this.searchApplicationAreas.length - 1) {
+							application_areas_ids = application_areas_ids + 'application_areas_id[]=' + this.searchApplicationAreas[i]
+						} else {
+							application_areas_ids = application_areas_ids + 'application_areas_id[]=' + this.searchApplicationAreas[
+								i] + '&'
+						}
+					}
+				}
+				let url = this.baseUrl + '/api/exhibitors/list?page=1&page_size=20&keyword=&country=&' + hall_ids + '&' + product_cate_ids + '&' + application_areas_ids
+				uni.request({
+					url: url,
+					method: 'GET',
+					success: (res) => {
+						// 处理返回的数据
+						this.exhibitorList = res.data.data
+						this.total = res.data.total
+						this.exhibitorListLastPage = res.data.last_page
+					},
+					fail: (err) => {
+						console.error('请求失败', err);
+					}
+				});
 			},
 			getExhibitorsList() {
 				exhibitorsList(this.exhibitorsParams).then(res => {
@@ -223,4 +291,76 @@
 </script>
 
 <style lang="scss">
-</style>
+checkbox {
+		.wx-checkbox-input {
+			width: 20rpx;
+			height: 20rpx;
+
+			&.wx-checkbox-input-checked {
+				background-color: #E57519;
+
+				&::before {
+					content: '';
+				}
+			}
+		}
+
+		&.open {
+			color: #E57519;
+			background-color: #FDF4EB;
+		}
+	}
+
+	.exhibitor-index {
+		.item-title {
+			font-size: 24rpx;
+			font-weight: bold;
+
+			&.select-title {
+				color: #E57519;
+			}
+		}
+
+		.select-box {
+			display: flex;
+			flex-direction: column;
+			background-color: #FFFFFF;
+			border-radius: 21rpx;
+			border: 2rpx dashed #94A3B8;
+			padding: 34rpx 30rpx 54rpx 30rpx;
+			margin-bottom: 42rpx;
+
+			.select-title {
+				margin-bottom: 30rpx;
+			}
+
+			.select-list {
+				display: flex;
+				flex-direction: column;
+				grid-gap: 30rpx;
+				margin-bottom: 30rpx;
+			}
+
+			.select-search-btn {
+				padding: 18rpx 25rpx;
+				border: 1rpx solid #E57519;
+				background-color: #E57519;
+				font-size: 20rpx;
+				width: 100%;
+				color: #FFFFFF;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				border-radius: 13rpx;
+				grid-gap: 20rpx;
+				font-weight: bold;
+
+				&::before {
+					content: '\e86f';
+					font-size: 24rpx;
+					font-family: iconfont;
+					font-weight: bold;
+				}
+			}
+		}
+	}