mp_exhibitor_miniprog/pages/index/search.vue

<template>
  <page-layout class="search-index">
    <nav-bar title="搜索" @init="onInitNavbar"></nav-bar>
    <u-scroll-view :tabbar-conflict="false" @scroll-near-lower="onScrollToLower">
      <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" :pollShow="pollShow.exhibitors_poll_show" @share="onShare()" @updateItemValue="updateItemValue()"/>
            </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" :pollShow="pollShow.product_poll_show" @share="onShare()" @updateItemValue="updateItemValue()"/>
            </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" type="exhibitor" />
            </template>
          </view>
          <view v-else-if="tabActive === 4" class="search-result-list exhibit-list">
            <template v-for="(item, index) in activityList">
              <activity-item type="exhibitor" :item="item" :key="index" @updateItemValue="updateItemValue()"/>
            </template>
          </view>
          <view v-else-if="tabActive === 5" class="search-result-list exhibit-list">
            <template v-for="(item, index) in mettingList">
              <activity-item :item="item" :key="index" platform="metting" @updateItemValue="updateItemValue()"/>
            </template>
          </view>
        </template>
        <disclaimer-text></disclaimer-text>
      </view>
    </u-scroll-view>
    <u-share-action-sheet :show.sync="showShare" :show-info="shareInfo" />
  </page-layout>
</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 UShareActionSheet from '@/components/common/u-share-action-sheet'
	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 { globalSearch, mettingList, exhibitorsList, exhibitorsProductList, exhibitorsNewsList, exhibitorsBoothActivityList, globalPollShow } from '@/api/exhibitor'
	import DisclaimerText from '@/components/disclaimer-text/index.vue'
  import PageLayout from "@/components/layout/page-layout";
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
      PageLayout,
			NavBar,
			UScrollView,
			UTabs,
			USearch,
			ExhibitItem,
			ExhibitorItem,
			NewsItem,
			ActivityItem,
			DisclaimerText,
			UShareActionSheet
		},
		data() {
			return {
				searchKeyword: '',
				tabActive: 1,
				isEmpty: false,
				defaultTabs: [{
					label: '展商',
					value: 1
				}, {
					label: '展品',
					value: 2
				}, {
					label: '展商新闻',
					value: 3
				}, {
					label: '展商活动',
					value: 4
				}, {
					label: '同期活动',
					value: 5
				}],
				tabs: [],
				exhibitorList: [],
				exhibitorListLoading: false,
				exhibitorListLastPage: 1,
				exhibitorListParams: {
					page: 1,
					page_size: 10,
					keyword: ''
				},
				exhibitList: [],
				exhibitListLoading: false,
				exhibitListLastPage: 1,
				exhibitListParams: {
					page: 1,
					page_size: 10,
					keyword: ''
				},
				newsList: [],
				newsListLoading: false,
				newsListLastPage: 1,
				newsListParams: {
					page: 1,
					page_size: 10,
					keyword: ''
				},
				activityList: [],
				activityListLoading: false,
				activityListLastPage: 1,
				activityListParams: {
					page: 1,
					page_size: 10,
					keyword: ''
				},
				mettingList: [],
				mettingListLoading: false,
				mettingListLastPage: 1,
				mettingListParams: {
					page: 1,
					page_size: 10,
					keyword: ''
				},
				listParams: {
					page: 1,
					page_size: 10,
					keyword: ''
				},
				pollShow: {
					exhibitors_poll_show: 0,
					product_poll_show: 0
				},
				showShare: false,
				shareInfo: null,
			}
		},
		onLoad(options) {
			console.log('options')
			console.log(options.query)
			this.searchKeyword = options.query
			this.onClickSearch()
		},
		created() {
			this.getGlobalPollShow()
		},
		methods: {
			tabChange() {

			},
			onClickSearch() {

				this.listParams.page = 1
				this.listParams.keyword = this.searchKeyword
				this.exhibitorListParams = {...this.listParams}
				this.exhibitListParams = {...this.listParams}
				this.newsListParams = {...this.listParams}
				this.activityListParams = {...this.listParams}
				this.mettingListParams = {...this.listParams}
				this.tabs = [...this.defaultTabs]
				this.getGlobalSearch()
				this.getMettingList()
			},
			getGlobalSearch() { // 全局搜索
				globalSearch(this.listParams).then(res => {
					if (res.code === 0) {
						this.exhibitorList = res.data.exhibitors_list.data ?? []
						this.exhibitorListLastPage = res.data.exhibitors_list.last_page ?? 1
						this.exhibitList = res.data.product_list.data ?? []
						this.exhibitListLastPage = res.data.product_list.last_page ?? 0
						this.newsList = res.data.news_list.data ?? []
						this.newsListLastPage = res.data.news_list.last_page ?? 0
						this.activityList = res.data.booth_activity_list.data ?? []
						this.activityListLastPage = res.data.booth_activity_list.last_page ?? 0
						if (this.exhibitorList.length === 0) {
							this.tabs = this.tabs.filter(item => item.value !== 1);
						}
						if (this.exhibitList.length === 0) {
							this.tabs = this.tabs.filter(item => item.value !== 2);
						}
						if (this.newsList.length === 0) {
							this.tabs = this.tabs.filter(item => item.value !== 3);
						}
						if (this.activityList.length === 0) {
							this.tabs = this.tabs.filter(item => item.value !== 4);
						}
					}
				})
			},
			getExhibitorsList() { // 展商
				this.exhibitorListLoading = true
				exhibitorsList(this.exhibitorListParams).then(res => {
					if (res.data.data) {
						if (this.exhibitorListParams.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
				})
			},
			getExhibitList() { // 展品
				this.exhibitListLoading = true
				exhibitorsProductList(this.exhibitListParams).then(res => {
					if (res.data.data) {
						if (this.exhibitListParams.page > 1) {
							this.exhibitList = [...this.exhibitList, ...res.data.data]
						} else {
							this.exhibitList = res.data.data
							this.exhibitListLastPage = res.data.last_page
						}
					} else {
						this.showToast('系统繁忙，稍候再试')
					}
					this.exhibitListLoading = false
				})
			},
			getExhibitorsNewsList() { // 展商新闻
				this.newsListLoading = true
				exhibitorsNewsList(this.newsListParams).then(res => {
					if (res.data.data) {
						if (this.newsListParams.page > 1) {
							this.newsList = [...this.newsList, ...res.data.data]
						} else {
							this.newsList = res.data.data
							this.newsListLastPage = res.data.last_page
						}
					} else {
						this.showToast('系统繁忙，稍候再试')
					}
					this.newsListLoading = false
				})
			},
			getActivityList() { // 展台活动
				this.activityListLoading = true
				exhibitorsBoothActivityList(this.activityListParams).then(res => {
					if (res.data.data) {
						if (this.activityListParams.page > 1) {
							this.activityList = [...this.activityList, ...res.data.data]
						} else {
							this.activityList = res.data.data
							this.activityListLastPage = res.data.last_page
						}
					} else {
						this.showToast('系统繁忙，稍候再试')
					}
					this.activityListLoading = false
				})
			},
			getMettingList() { // 同期活动
				this.mettingListLoading = true
				mettingList(this.mettingListParams).then(res => {
					if (res.data.data) {
						if (this.mettingListParams.page > 1) {
							this.mettingList = [...this.mettingList, ...res.data.data]
						} else {
							this.mettingList = res.data.data
							this.mettingListLastPage = res.data.last_page
						}
						if (this.mettingListParams.page === 1 && this.mettingList.length === 0) {
							this.tabs = this.tabs.filter(item => item.value !== 5);
						}
					} else {
						this.showToast('系统繁忙，稍候再试')
					}
					this.mettingListLoading = false
				})
			},
			onScrollToLower(e) {
				if (this.tabActive === 1) {
					if (this.exhibitorListLastPage === this.exhibitorListParams.page) return
					if (this.exhibitorListLoading === true) return
					this.exhibitorListLoading = true
					this.exhibitorListParams.page = this.exhibitorListParams.page+1
					this.getExhibitorsList()
				} else if (this.tabActive === 2) {
					if (this.exhibitListLastPage === this.exhibitListParams.page) return
					if (this.exhibitListLoading === true) return
					this.exhibitListLoading = true
					this.exhibitListParams.page = this.exhibitListParams.page+1
					this.getExhibitList()
				} else if (this.tabActive === 3) {
					if (this.newsListLastPage === this.newsListParams.page) return
					if (this.newsListLoading === true) return
					this.newsListLoading = true
					this.newsListParams.page = this.newsListParams.page+1
					this.getExhibitorsNewsList()
				} else if (this.tabActive === 4) {
					if (this.activityListLastPage === this.activityListParams.page) return
					if (this.activityListLoading === true) return
					this.activityListLoading = true
					this.activityListParams.page = this.activityListParams.page+1
					this.getActivityList()
				} else if (this.tabActive === 5) {
					if (this.mettingListLastPage === this.mettingListParams.page) return
					if (this.mettingListLoading === true) return
					this.mettingListLoading = true
					this.mettingListParams.page = this.mettingListParams.page+1
					this.getMettingList()
				}
			},
			updateItemValue(e) {
				if (this.tabActive === 1) {
					this.exhibitorList.forEach((item) => {
						if (item.id === e.id) {
							item[e.key] = e.value
						}
					})
				} else if (this.tabActive === 2) {
					this.exhibitList.forEach((item) => {
						if (item.id === e.id) {
							item[e.key] = e.value
						}
					})
				} else if (this.tabActive === 4) {
					this.activityList.forEach((item) => {
						if (item.id === e.id) {
							item[e.key] = e.value
						}
					})
				} else if (this.tabActive === 5) {
					this.mettingList.forEach((item) => {
						if (item.id === e.id) {
							item[e.key] = e.value
						}
					})
				}
			},
			getGlobalPollShow() {
				globalPollShow().then(res => {
					this.pollShow = res.data
				})
			},
			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'
				}
			}
		}
	}
</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>