mp_exhibitor_miniprog/pages/user/favorites.vue

<template>
  <page-layout class="user-favorites user-like">
    <nav-bar title="我的收藏" @init="onInitNavbar"></nav-bar>
    <u-scroll-view>
      <view class="user-favorites-tabs-wrapper user-like-tabs-wrapper">
        <view class="user-favorites-tabs user-like-tabs">
          <u-tabs :active.sync="tabActive" :tabs="tabs" @change="tabChange"/>
        </view>
      </view>
      <view class="main-container">
        <view class="user-favorites-list user-like-list" v-if="!loading">
          <template v-for="(item, index) in favoritesList">
            <template v-if="tabActive === 'exhibitor'">
              <exhibitor-item :item="item" :footer-hidden="true" :key="index"/>
            </template>
            <template v-else-if="tabActive === 'exhibit'">
              <exhibit-item :item="item" :footer-hidden="true" :key="index"/>
            </template>
            <template v-else-if="tabActive === 'activity'">
              <activity-item :item="item" :favorites-hidden="true" :key="index"/>
            </template>
          </template>
        </view>
      </view>
    </u-scroll-view>
  </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 ExhibitItem from '@/pages/exhibitor/components/exhibit-item.vue'
import ExhibitorItem from '@/pages/exhibitor/components/exhibitor-item.vue'
import ActivityItem from '@/pages/activity/components/activity-item.vue'
import {
  getExhibitorCollectList,
  getExhibitCollectList,
  getActivityCollectList
} from '@/api/user'
import PageLayout from "@/components/layout/page-layout";

export default {
  options: {
    styleIsolation: 'shared'
  },
  components: {
    PageLayout,
    NavBar,
    UTabs,
    UScrollView,
    ExhibitItem,
    ExhibitorItem,
    ActivityItem
  },
  computed: {},
  data() {
    return {
      tabActive: 'exhibitor',
      loading: false,
      tabs: [{
        label: '展商',
        value: 'exhibitor'
      }, {
        label: '展品',
        value: 'exhibit'
      }, {
        label: '同期活动',
        value: 'activity'
      }],
      favoritesList: [],
    }
  },
  created() {
    this.checkAuth('/pages/user/favorites')
    this.loadFontFace('Poppins')
    this.getExhibitorCollectInfo()
  },
  onShow() {
  },
  methods: {
    tabChange(e) {
      this.tabActive = e.detail.value
      if (this.tabActive === 'exhibitor') {
        this.getExhibitorCollectInfo()
      } else if (this.tabActive === 'exhibit') {
        this.getExhibitCollectInfo()
      } else {
        this.getActivityCollectInfo()
      }
    },
    getExhibitorCollectInfo() {
      this.loading = true
      getExhibitorCollectList().then(res => {
        this.favoritesList = res.data.data
        this.loading = false
      })
    },
    getExhibitCollectInfo() {
      this.loading = true
      getExhibitCollectList().then(res => {
        this.favoritesList = res.data.data
        this.loading = false
      })
    },
    getActivityCollectInfo() {
      this.loading = true
      getActivityCollectList().then(res => {
        this.favoritesList = res.data.data
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss">
@import "@/static/style/pages/user-like.scss";
</style>