mp_exhibitor_miniprog/pages/exhibitor/exhibit.vue

<template>
	<view class="exhibit-index exhibitor-index">
		<nav-bar title="展品信息" @init="onInitNavbar"></nav-bar>
		<u-scroll-view>
			<view class="main-container">
				<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)" /> 
					</view>
					<view>
						<view class="exhibitor-filter-label">产品类别</view>
						<u-dropdown-select ref="select2" v-model="categoryId" placeholder="选择产品类别" :options="categories" @dropdown="onSelectDropdown(2)" /> 
					</view>
					<view>
						<view class="exhibitor-filter-label">应用领域</view>
						<u-dropdown-select  ref="select3" v-model="categoryId" placeholder="选择应用领域" :options="categories" @dropdown="onSelectDropdown(3)" /> 
					</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="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" @share="onShare" />
					</template>	
				</view>
			</view>
		</u-scroll-view>
		<u-share-action-sheet :show.sync="showShare" :show-info="shareInfo" />
	</view>
</template>

<script>
	import NavBar from '@/components/layout/nav-bar'
	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 ExhibitItem from '@/pages/exhibitor/components/exhibit-item.vue'
	
	export default {
		options: {
			// styleIsolation: 'shared'
		},
		components: {
			NavBar,
			UScrollView,
			USearch,
			UDropdownSelect,
			UShareActionSheet,
			ExhibitItem
		},
		computed: {
		},
		data() {
			return {
				categoryId: undefined,
				scrollviewHeight: 0,
				searchKeyword: '',
				exhibitList: [{ favourited: true }, { liked: true }, { voted: true }, {} ],
				shareInfo: null,
				showShare: false,
				categories: [{
					label: '表面贴装',
					value: 1,
					children: [{
						label: '表面贴装技术',
						value: 11
					}, {
						label: 'PCB焊接和连接技术',
						value: 12
					}, {
						label: '测试测量和质量保证',
						value: 13
					}, {
						label: '电子组装自动化',
						value: 14
					}, {
						label: '生产物流和物流技术',
						value: 15
					}, {
						label: '清洗技术',
						value: 16
					}]
				}, {
					label: '线束加工',
					value: 2
				}, {
					label: '工厂自动化',
					value: 3
				}, {
					label: '点胶注胶',
					value: 4
				}, {
					label: '电子制造服务',
					value: 5
				}, {
					label: '未来服务',
					value: 6
				}]
			}
		},
		created() {
			this.loadFontFace('Poppins')
		},
		methods: {
			onShare(e) {
				this.shareInfo = e.detail
				this.showShare = true
			},
			onShareAppMessage: function (res) {
				if (res.from === 'button') {
					if (this.shareInfo) {
						return this.shareInfo
					}
				}
				this.shareInfo = null
				this.showShare = false
				return {
					title: '慕尼黑上海电子生产设备展',
					path: '/pages/index/index',
					imageUrl: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da5a7dd374.png?x-oss-process=image/resize,w_600,h_600,limit_0,m_pad'
				}
			},
			onSelectDropdown(index) {
				['select1', 'select2', 'select3'].forEach(v => {
					if (v !== 'select' + index) {
						this.$refs[v].hideDropdown()
					}
				})
			},
			onClickExhibit(item) {
				this.navigateTo('/pages/exhibitor/exhibit-detail')
			},
			onSearch() {
				this.navigateTo('/pages/index/search?query=' + this.searchKeyword)
			}
		}
	}
</script>

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