mp_exhibitor_miniprog/pages/exhibitor/index.vue

<template>
  <page-layout class="exhibitor-index">
    <nav-bar title="展商信息" @init="onInitNavbar"></nav-bar>
    <u-scroll-view :tabbar-conflict="true">
      <view class="main-container">
        <view class="search-box">
          <view class="search-title item-title">
            搜索
          </view>
          <u-search v-model="searchKeyword" placeholder="搜索关键词" @search="onSearch"/>
        </view>
        <view class="select-box">
          <view class="select-head">
            <view class="select-title item-title">
              筛选
            </view>
            <view class="select-search-btn" @click="searchExhibitorsList()">搜索</view>
          </view>
          <view class="select-body">
            <view class="select-list">
              <view class="select-module">
                <view class="select-input" @click="()=>{activeName1 = !activeName1;activeName2=false;activeName3=false;}">展馆号</view>
                <view class="select-option-module" :class="{'active': activeName1}">
                  <u-scroll-view :tabbar-conflict="true">
                  <u-select title="展馆号" v-model="searchHall" :data="halls" uId="dropdown1"
                            @change-event="()=>{exhibitorsParams.page=1; searchExhibitorsList()}" :special="true"></u-select>
                  </u-scroll-view>
                </view>
              </view>
              <view class="select-module">
                <view class="select-input" @click="()=>{activeName2 = !activeName2;activeName1=false;activeName3=false;}">展品分类</view>
                <view class="select-option-module second-module" :class="{'active': activeName2}">
                  <u-scroll-view :tabbar-conflict="true">
                    <u-select title="展品分类" v-model="searchCategoryId" :data="categories" uId="dropdown2"
                              :children="true"
                              @change-event="()=>{exhibitorsParams.page=1; searchExhibitorsList()}"></u-select>
                  </u-scroll-view>
                </view>
              </view>
              <view class="select-module">
                <view class="select-input" @click="()=>{activeName3 = !activeName3;activeName1=false;activeName2=false;}">应用领域</view>
                <view class="select-option-module third-module" :class="{'active': activeName3}">
                  <u-scroll-view :tabbar-conflict="true">
                    <u-select title="应用领域" v-model="searchApplicationAreas" :data="applicationAreass"
                              uId="dropdown3"
                              @change-event="()=>{exhibitorsParams.page=1; searchExhibitorsList()}"></u-select>
                  </u-scroll-view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="ad-space" v-if="adInfo && adInfo.ad_file" @tap="navigateToAdLink(adInfo.ad_link)">
          <image :src="adInfo.ad_file" mode="widthFix"/>
        </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" :pollShow="pollShow.exhibitors_poll_show"
                            @share="onShare" @updateItemValue="updateItemValue()"/>
          </template>
        </view>
        <u-pagination :page="exhibitorsParams.page" :pageSize="exhibitorsParams.page_size" :total="total" @page-change="handlePageChange()"
                      v-if="total>0"></u-pagination>
        <disclaimer-text></disclaimer-text>
      </view>
    </u-scroll-view>
    <float-button></float-button>
  </page-layout>
</template>

<script>
import NavBar from '@/components/layout/nav-bar'
import USelect from '@/components/common/u-select/index.vue'
import UScrollView from '@/components/common/u-scroll-view'
import USearch from '@/components/common/u-search'
import UPagination from '@/components/common/u-pagination/index.vue'
import UDropdownSelect from '@/components/common/u-dropdown-select'
import ExhibitorItem from '@/pages/exhibitor/components/exhibitor-item.vue'
import floatButton from "@/components/layout/float-button"

import {
  exhibitorsList,
  productCategoryList,
  exhibitorsHallList,
  applicationAreasList,
  globalPollShow
} from '@/api/exhibitor'
import {
  getAdInfo
} from '@/api'
import DisclaimerText from '@/components/disclaimer-text/index.vue'
import PageLayout from "@/components/layout/page-layout";
import vanCollapse from '@/wxcomponents/vant/collapse/index'
import vanCollapseItem from '@/wxcomponents/vant/collapse-item/index'
import dropdownItem from '@/wxcomponents/vant/dropdown-item/index'
import dropdownMenu from '@/wxcomponents/vant/dropdown-menu/index'
import {getToken} from "@/utils/auth";

export default {

  options: {
    styleIsolation: 'shared'
  },
  onShow(val) {
    console.log('onBackPress',val)
  },
  components: {
    PageLayout,
    NavBar,
    USearch,
    UScrollView,
    UDropdownSelect,
    ExhibitorItem,
    DisclaimerText,
    UPagination,
    USelect,
    floatButton,
    vanCollapse,
    vanCollapseItem,
    dropdownItem,
    dropdownMenu
  },
  data() {
    return {
      activeName1: false,
      activeName2: false,
      activeName3: false,
      searchCategoryId: '',
      searchHall: '',
      searchApplicationAreas: '',
      searchKeyword: '',
      exhibitorsParams: {
        page: 1,
        page_size: 20,
        keyword: '',
        country: '',
        hall_id: '',
        product_cate_id: '',
        application_areas_id: ''
      },
      exhibitorList: [],
      exhibitorListLoading: false,
      exhibitorListLastPage: 1,
      categories: [],
      halls: [],
      applicationAreass: [],
      pollShow: {
        exhibitors_poll_show: 0,
        product_poll_show: 0
      },
      total: 0,
      baseUrl: this.$store.getters.baseApi,
      adInfo: {
        ad_file: ''
      },
    }
  },
  created() {
    this.getProductCategoryList()
    this.getExhibitorsHallList()
    this.getApplicationAreasList()
    this.getGlobalPollShow()
    this.getAdData()
    this.getExhibitorsList()
    uni.$on('refreshData', (val) => {
      if (val === 'exhibitor') {
        this.getProductCategoryList()
        this.getExhibitorsHallList()
        this.getApplicationAreasList()
        this.getGlobalPollShow()
        this.getAdData()
        this.getExhibitorsList()
      }
    })
  },
  methods: {
    onShare(e) {
      this.$emit('share',e)
    },
    onChange(event) {
      this.activeName = event
    },
    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.showLoading()
      let hall_ids = ''
      let product_cate_ids = ''
      let application_areas_ids = ''
      if (this.searchHall.length === 0) {
        hall_ids = 'hall='
      } else {
        for (let i = 0; i < this.searchHall.length; i++) {
          if (i === this.searchHall.length - 1) {
            hall_ids = hall_ids + 'hall[]=' + this.searchHall[i]
          } else {
            hall_ids = hall_ids + 'hall[]=' + this.searchHall[i] + '&'
          }
        }
      }
      if (this.searchCategoryId.length === 0) {
        product_cate_ids = 'product_cate_id='
      } else {
        for (let i = 0; i < this.searchCategoryId.length; i++) {
          if (i === this.searchCategoryId.length - 1) {
            product_cate_ids = product_cate_ids + 'product_cate_id[]=' + this.searchCategoryId[i]
          } else {
            product_cate_ids = product_cate_ids + 'product_cate_id[]=' + this.searchCategoryId[i] + '&'
          }
        }
      }
      if (this.searchApplicationAreas.length === 0) {
        application_areas_ids = 'application_areas_id='
      } else {
        for (let i = 0; i < this.searchApplicationAreas.length; i++) {
          if (i === this.searchApplicationAreas.length - 1) {
            application_areas_ids = application_areas_ids + 'application_areas_id[]=' + this.searchApplicationAreas[i]
          } else {
            application_areas_ids = application_areas_ids + 'application_areas_id[]=' + this.searchApplicationAreas[
                i] + '&'
          }
        }
      }
      let url = this.baseUrl + '/api/exhibitors/list?page='+this.exhibitorsParams.page+'&page_size='+this.exhibitorsParams.page_size+'&keyword=&country=&' + hall_ids + '&' +
          product_cate_ids + '&' + application_areas_ids
      uni.request({
        url: url,
        method: 'GET',
        header: {
          'token': getToken()
        },
        success: (res) => {
          // 处理返回的数据
          this.exhibitorList = res.data.data
          this.total = res.data.total
          this.exhibitorListLastPage = res.data.last_page
          this.hideLoading()
        },
        fail: (err) => {
          console.error('请求失败', err);
        }
      });
    },
    getExhibitorsList() {
      this.showLoading()
      exhibitorsList(this.exhibitorsParams).then(res => {
        if (res.data.data) {
          this.exhibitorList = res.data.data
          this.total = res.data.total
          this.exhibitorListLastPage = res.data.last_page
        } else {
          this.showToast('系统繁忙，稍候再试')
        }
        this.exhibitorListLoading = false
        this.hideLoading()

      })
    },
    // onScrollToLower(e) {
    // 	if (this.exhibitorListLastPage === this.exhibitorsParams.page) {
    // 		return
    // 	}
    // 	if (this.exhibitorListLoading === true) {
    // 		return
    // 	}
    // 	this.exhibitorListLoading = true
    // 	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)
    },
    getGlobalPollShow() {
      globalPollShow().then(res => {
        this.pollShow = res.data
      })
    },
    updateItemValue(e) {
      this.exhibitorList.forEach((item) => {
        if (item.id === e.id) {
          item[e.key] = e.value
        }
      })
    },
    handlePageChange(page) {
      this.exhibitorsParams.page = page
      this.searchExhibitorsList()
    },
    navigateToAdLink(href) {
      this.navigateTo(href)
    },
    getAdData() {
      getAdInfo({
        number: "ExhibitorListTop001"
      }).then(res => {
        this.adInfo = res.data[0]
      })
    }
  }
}
</script>

<style lang="scss">

</style>