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 && exhibitorList.length >0" 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-if="tabActive === 2 && exhibitList.length >0" 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-if="tabActive === 3 && newsList.length >0" class="search-result-list exhibit-list">
            <template v-for="(item, index) in newsList">
              <news-item :item="item" :key="'news' + index" type="exhibitor"/>
            </template>
          </view>
          <view v-if="tabActive === 4 && activityList.length >0" 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-if="tabActive === 5 && mettingList.length >0" class="search-result-list exhibit-list">
            <template v-for="(item, index) in mettingList">
              <activity-item :item="item" :key="'meeting' + index" platform="meeting"
                             @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) {
    this.searchKeyword = options.query
    this.onClickSearch()
  },
  created() {
    this.getGlobalPollShow()
  },
  mounted() {

  },
  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() { // 全局搜索
      this.tabActive = 0
      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);
          }
          if (this.tabs.length > 0) {
            this.tabActive = this.tabs[0].value
          }
        }
      })
    },
    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.productronicachina.com.cn/resources/common/up/0000001002/20250221/67b829f60c212.png'
      }
    }
  }
}
</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>