mp_exhibitor_miniprog/pages/index/search.vue

<template>
	<view class="search-index">
		<nav-bar title="搜索" @init="onInitNavbar"></nav-bar>
		<u-scroll-view>
			<view class="main-container">
				<u-search v-model="searchKeyword" placeholder="搜索展商 / 展品名称 / 会议" @search="onClickSearch"/>
				<view class="search-result-text">搜索结果</view>
				<template v-if="isEmpty">
					<van-empty description="暂无数据" />
				</template>
				<template v-else>
					<u-tabs :active.sync="tabActive" :tabs="tabs" tab-style="default" @change="tabChange"/>
					<view v-if="tabActive === 1" class="search-result-list exhibit-list">
						<template v-for="(item, index) in exhibitorList">
							<exhibitor-item :item="item" :key="index" />
							<exhibitor-item :item="item" :key="index" />
							<exhibitor-item :item="item" :key="index" />
							<exhibitor-item :item="item" :key="index" />
							<exhibitor-item :item="item" :key="index" />
							<exhibitor-item :item="item" :key="index" />
							<exhibitor-item :item="item" :key="index" />
							<exhibitor-item :item="item" :key="index" />
						</template>
					</view>
					<view v-else-if="tabActive === 2" class="search-result-list exhibit-list">
						<template v-for="(item, index) in exhibitList">
							<exhibit-item :item="item" :key="index" />
						</template>
					</view>
					<view v-else-if="tabActive === 3" class="search-result-list exhibit-list">
						<template v-for="(item, index) in newsList">
							<news-item :item="item" :key="index" />
						</template>
					</view>
					<view v-else-if="tabActive === 4" class="search-result-list exhibit-list">
						<template v-for="(item, index) in activityList">
							<activity-item :item="item" :key="index" />
						</template>
					</view>
					<view v-else-if="tabActive === 5" class="search-result-list exhibit-list">
						<template v-for="(item, index) in activityList">
							<activity-item :item="item" :key="index" />
						</template>
					</view>
				</template>
				<disclaimer-text></disclaimer-text>
			</view>
		</u-scroll-view>
	</view>
</template>

<script>
	import NavBar from '@/components/layout/nav-bar'
	import UTabs from '@/components/common/u-tabs'
	import UScrollView from '@/components/common/u-scroll-view'
	import USearch from '@/components/common/u-search'
	import ExhibitItem from '@/pages/exhibitor/components/exhibit-item.vue'
	import ExhibitorItem from '@/pages/exhibitor/components/exhibitor-item.vue'
	import NewsItem from '@/pages/news/components/news-item.vue'
	import ActivityItem from '@/pages/activity/components/activity-item.vue'
	import DisclaimerText from '@/components/disclaimer-text/index.vue'
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			NavBar,
			UScrollView,
			UTabs,
			USearch,
			ExhibitItem,
			ExhibitorItem,
			NewsItem,
			ActivityItem,
			DisclaimerText
		},
		data() {
			return {
				searchKeyword: '',
				tabActive: 1,
				isEmpty: false,
				tabs: [{
					label: '展商',
					value: 1
				}, {
					label: '展品',
					value: 2
				}, {
					label: '展商新闻',
					value: 3
				}, {
					label: '展商活动',
					value: 4
				}, {
					label: '同期活动',
					value: 5
				}],
				exhibitorList: [{ favourited: true }, { liked: true }, { voted: true }, {}],
				exhibitList: [{ favourited: true }, { liked: true }, { voted: true }],
				newsList: [{}, {}, {}, {}],
				activityList: [{ favourited: true }, {}, {}, {}, {}]
			}
		},
		onLoad(options) {
			console.log('options')
			console.log(options.query)
			this.searchKeyword = options.query
		},
		created() {},
		methods: {
			tabChange() {

			},
			onClickSearch() {

			}
		}
	}
</script>

<style lang="scss">
	.search-result-text{
		margin: 33rpx 0;
		display: block;
		font-size: $fontSize3;
		color: #000000;
	}
	.search-result-list{
		display: grid;
		grid-template-columns: 1fr;
		grid-row-gap: 28rpx;
		margin-top: 32rpx;
	}
</style>