mp_exhibitor_miniprog/pages/exhibitor/index.vue

<template>
	<view class="exhibitor-index">
		<nav-bar title="展商信息" @init="onInitNavbar"></nav-bar>
		<u-scroll-view :tabbar-conflict="true" @scroll-near-lower="onScrollToLower">
			<view class="main-container">
				<view>{{ categoryId }}</view>
				<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>
				<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" mode="aspectFill"/>
				</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" @share="(e) => $emit('share', e)" />
					</template>	
				</view>
			</view>
		</u-scroll-view>
	</view>
</template>

<script>
	import NavBar from '@/components/layout/nav-bar'
	import UScrollView from '@/components/common/u-scroll-view'
	import USearch from '@/components/common/u-search'
	import UDropdownSelect from '@/components/common/u-dropdown-select'
	import ExhibitorItem from '@/pages/exhibitor/components/exhibitor-item.vue'
	import { exhibitorsList, productCategoryList, exhibitorsHallList, applicationAreasList } from '@/api/exhibitor'
	
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			NavBar,
			USearch,
			UScrollView,
			UDropdownSelect,
			ExhibitorItem
		},
		data() {
			return {
				searchCategoryId: '',
				searchHall: '',
				searchApplicationAreas: '',
				searchKeyword: '',
				exhibitorsParams: {
					page: 1,
					page_size: 10,
					keyword: '',
					country: '',
					hall: '',
					product_cate_id: '',
					application_areas_id: ''
				},
				exhibitorList: [],
				exhibitorListLoading: false,
				exhibitorListLastPage: 1,
				categories: [],
				halls: [],
				applicationAreass: []
			}
		},
		created() {
			this.loadFontFace('Poppins')
			this.getProductCategoryList()
			this.getExhibitorsHallList()
			this.getApplicationAreasList()
			this.getExhibitorsList()
		},
		methods: {
			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.exhibitorsParams.application_areas_id = this.searchApplicationAreas || ''
				this.exhibitorsParams.product_cate_id = this.searchCategoryId || ''
				this.exhibitorsParams.hall = this.searchHall || ''
				this.exhibitorsParams.page = 1
				this.getExhibitorsList()
			},
			getExhibitorsList() {
				if (this.exhibitorListLoading === true) {
					return
				}
				this.exhibitorListLoading = true
				exhibitorsList(this.exhibitorsParams).then(res => {
					if (res.data.data) {
						if (this.exhibitorsParams.page > 1) {
							this.exhibitorList = [...this.exhibitorList, ...res.data.data]
						} else {
							this.exhibitorList = res.data.data
							this.exhibitorListLastPage = res.data.last_page
						}
					} else {
						this.showToast('系统繁忙，稍候再试')
					}
					this.exhibitorListLoading = false
				})
			},
			onScrollToLower(e) {
				if (this.exhibitorListLastPage === this.exhibitorsParams.page) {
					return
				}
				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)
			}
		}
	}
</script>

<style lang="scss">
</style>