mp_exhibitor_miniprog/pages/exhibitor/index.vue

<template>
	<page-layout class="exhibitor-index">
		<nav-bar title="展商信息" @init="onInitNavbar"></nav-bar>
		<u-scroll-view :tabbar-conflict="true">
			<view class="main-container">
				<!-- <view class="exhibitor-filter">
          <view>
            <view class="exhibitor-filter-label">展馆号</view>
            <u-dropdown-select ref="select1" v-model="searchHall" placeholder="选择展馆号" :options="halls"
              @dropdown="onSelectDropdown(1)" @change="searchExhibitorsList()" />
          </view>
          <view>
            <view class="exhibitor-filter-label">产品类别</view>
            <u-dropdown-select ref="select2" v-model="searchCategoryId" placeholder="选择产品类别" :options="categories"
              @dropdown="onSelectDropdown(2)" @change="searchExhibitorsList()" />
          </view>
          <view>
            <view class="exhibitor-filter-label">应用领域</view>
            <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">
						<van-collapse :value="activeName" @change="onChange">
							<van-collapse-item class="first-title" title="展馆号" name="展馆号">
								<!--                <view v-for="(item, index) in halls" :key="index">
                  {{item.label}}
                </view>-->
								<u-select title="展馆号" v-model="searchHall" :data="halls" uId="dropdown1"
									@change-event="searchExhibitorsList()" :special="true"></u-select>
							</van-collapse-item>
							<van-collapse-item class="first-title" title="展品分类" name="展品分类">
								<!--                <view v-for="(item, index) in categories" :key="index">
                  {{item.label}}
                </view>-->
								<u-select title="展品分类" v-model="searchCategoryId" :data="categories" uId="dropdown2" :children="true"
									@change-event="searchExhibitorsList()"></u-select>
							</van-collapse-item>
							<van-collapse-item class="first-title" title="应用领域" name="应用领域">
								<!--                <view v-for="(item, index) in applicationAreass" :key="index">
                  {{item.label}}
                </view>-->
								<u-select title="应用领域" v-model="searchApplicationAreas" :data="applicationAreass" uId="dropdown3"
									@change-event="searchExhibitorsList()"></u-select>
							</van-collapse-item>
						</van-collapse>
					</view>
					<view class="select-search-btn" @click="searchExhibitorsList()">搜索</view>
				</view>
				<view class="ad-space" @tap="navigateToAdLink(adInfo.ad_link)">
					<image :src="adInfo.ad_file" mode="widthFix" />
				</view>
				<van-empty v-if="exhibitorList.length === 0" description="暂无数据" />
				<view v-else class="exhibitor-list">
					<template v-for="(item, index) in exhibitorList">
						<exhibitor-item :item="item" :key="index" :pollShow="pollShow.exhibitors_poll_show"
							@share="(e) => $emit('share', e)" @updateItemValue="updateItemValue()" />
					</template>
				</view>
				<u-pagination :pageSize="exhibitorsParams.page_size" :total="total" @page-change="handlePageChange()"
					v-if="total>0"></u-pagination>
				<disclaimer-text></disclaimer-text>
			</view>
		</u-scroll-view>
		<float-button></float-button>
	</page-layout>
</template>

<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'
	import UDropdownSelect from '@/components/common/u-dropdown-select'
	import ExhibitorItem from '@/pages/exhibitor/components/exhibitor-item.vue'
	import floatButton from "@/components/layout/float-button"
	import {
		exhibitorsList,
		productCategoryList,
		exhibitorsHallList,
		applicationAreasList,
		globalPollShow
	} from '@/api/exhibitor'
	import {
		getAdInfo
	} from '@/api'
	import DisclaimerText from '@/components/disclaimer-text/index.vue'
	import PageLayout from "@/components/layout/page-layout";
	import vanCollapse from '@/wxcomponents/vant/collapse/index'
	import vanCollapseItem from '@/wxcomponents/vant/collapse-item/index'
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			PageLayout,
			NavBar,
			USearch,
			UScrollView,
			UDropdownSelect,
			ExhibitorItem,
			DisclaimerText,
			UPagination,
			USelect,
			floatButton,
			vanCollapse,
			vanCollapseItem
		},
		data() {
			return {
				activeName: '',
				searchCategoryId: '',
				searchHall: '',
				searchApplicationAreas: '',
				searchKeyword: '',
				exhibitorsParams: {
					page: 1,
					page_size: 20,
					keyword: '',
					country: '',
					hall_id: '',
					product_cate_id: '',
					application_areas_id: ''
				},
				exhibitorList: [],
				exhibitorListLoading: false,
				exhibitorListLastPage: 1,
				categories: [],
				halls: [],
				applicationAreass: [],
				pollShow: {
					exhibitors_poll_show: 0,
					product_poll_show: 0
				},
				total: 0,
				baseUrl: 'https://mp-test-onlinecatelogue.matchexpo.cn',
				adInfo: {
					ad_file: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da70a6c76a.png?x-oss-process=image/resize,w_200'
				}
			}
		},
		created() {
			this.loadFontFace('Poppins')
			this.getProductCategoryList()
			this.getExhibitorsHallList()
			this.getApplicationAreasList()
			this.getExhibitorsList()
			this.getGlobalPollShow()
			this.getAdData()
		},
		methods: {
			onChange(event) {
				this.activeName = event
			},
			getApplicationAreasList() {
				applicationAreasList().then(res => {
					let areas = []
					res.data.forEach(item => {
						areas.push({
							label: item.name,
							value: item.id,
						})
					})
					this.applicationAreass = areas
				})
			},
			getExhibitorsHallList() {
				exhibitorsHallList().then(res => {
					let halls = []
					res.data.forEach(item => {
						halls.push({
							label: item.name,
							value: item.id,
						})
					})
					this.halls = halls
				})
			},
			getProductCategoryList() {
				productCategoryList().then(res => {
					let cate = []
					res.data.forEach(item => {
						let child = []
						item.children.forEach(itemC => {
							child.push({
								label: itemC.name,
								value: itemC.id
							})
						})
						cate.push({
							label: item.name,
							value: item.id,
							children: child
						})
					})
					this.categories = cate
				})
			},
			searchExhibitorsList() {
				this.showLoading()
				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
						this.hideLoading()
					},
					fail: (err) => {
						console.error('请求失败', err);
					}
				});
			},
			getExhibitorsList() {
				this.showLoading()
				exhibitorsList(this.exhibitorsParams).then(res => {
					if (res.data.data) {
						this.exhibitorList = res.data.data
						this.total = res.data.total
						this.exhibitorListLastPage = res.data.last_page
					} else {
						this.showToast('系统繁忙，稍候再试')
					}
					this.exhibitorListLoading = false
					this.hideLoading()

				})
			},
			// onScrollToLower(e) {
			// 	if (this.exhibitorListLastPage === this.exhibitorsParams.page) {
			// 		return
			// 	}
			// 	if (this.exhibitorListLoading === true) {
			// 		return
			// 	}
			// 	this.exhibitorListLoading = true
			// 	this.exhibitorsParams.page = this.exhibitorsParams.page + 1
			// 	this.getExhibitorsList()
			// },
			onSelectDropdown(index) {
				['select1', 'select2', 'select3'].forEach(v => {
					if (v !== 'select' + index) {
						this.$refs[v].hideDropdown()
					}
				})
			},
			onSearch() {
				this.navigateTo('/pages/index/search?query=' + this.searchKeyword)
			},
			getGlobalPollShow() {
				globalPollShow().then(res => {
					this.pollShow = res.data
				})
			},
			updateItemValue(e) {
				this.exhibitorList.forEach((item) => {
					if (item.id === e.id) {
						item[e.key] = e.value
					}
				})
			},
			handlePageChange(page) {
				this.exhibitorsParams.page = page
				exhibitorsList(this.exhibitorsParams).then(res => {
					if (res.data.data) {
						this.exhibitorList = res.data.data
					} else {
						this.showToast('系统繁忙，稍候再试')
					}
					this.exhibitorListLoading = false
				})
			},
			navigateToAdLink(href) {
				this.navigateTo(href)
			},
			getAdData() {
				getAdInfo({
					number: "ExhibitorListTop001"
				}).then(res => {
					this.adInfo = res.data[0]
				})
			}
		}
	}
</script>

<style lang="scss">
	checkbox {
		color: #333333;

		.wx-checkbox-input {
			width: 26rpx;
			height: 26rpx;

			&.wx-checkbox-input-checked {
				background-color: #E57519;

				&::before {
					content: '';
				}
			}
		}

		&.open {
			color: #E57519;
			background-color: #FDF4EB;
		}
	}

	.exhibitor-index {
		.item-title {
			font-size: $fontSize4;
			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 {
				margin-bottom: 30rpx;

				.van-collapse {
					display: flex;
					flex-direction: column;
					grid-gap: 30rpx;

					.first-title {
						&>.van-collapse-item {
							border-radius: 14rpx;
							border: 2rpx solid #B3B3B3;
							overflow: hidden;

							.van-collapse-item__content {
								padding: unset;
							}

							van-collapse {
								.van-collapse-item {
									border-bottom: 2rpx solid #e3e9f1;
									
									.van-cell {
										grid-gap: 16rpx;
										width: 100%;
										.van-cell__title {
											flex: unset;
											width: fit-content;
										}
										
										.van-cell__right-icon-wrap {
											font-size: $fontSize0;
											
											.van-icon-arrow {
												color: #333333;
												&::before {
													content: '\e819';
													font-family: iconfont;
												}
											}
										}
									}

									.van-collapse-item__wrapper {
											.custom-checkbox {
												checkbox {
													border: unset;
												}
											}
									}
								}

								&:nth-last-child(1) {
									.van-collapse-item {
										border: unset;
									}
								}
							}
						}

						.van-cell {
							padding: 16rpx 20rpx;

							&::after {
								border-bottom: unset;
							}
						}
					}
				}

				.van-hairline--top-bottom {
					&::after {
						border: unset;
					}
				}
			}

			.select-search-btn {
				padding: 18rpx 25rpx;
				border: 1rpx solid #E57519;
				background-color: #E57519;
				font-size: $fontSize3;
				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: $fontSize3;
					font-family: iconfont;
					font-weight: bold;
				}
			}
		}
	}
</style>