caimei-authentic-www/mixins/clubList.js

import { mapGetters } from 'vuex'
import { geolocation } from '@/utils/map-utils'
import { drawLogo, debounce } from '@/utils'

export default {
  data() {
    return {
      isRequest: false, // 是否发起请求
      finished: true, // 列表加载是否完毕（加载完了所有数据）
      loadingMore: false, // 是否正在加载
      listQuery: {
        authUserId: '',
        lngAndLat: '',
        authParty: '',
        provinceId: '',
        cityId: '',
        townId: '',
        pageNum: 1,
        pageSize: 12,
      },
      list: [], // 机构列表
      starList: [], // 明星机构列表
      total: 0, // 机构数量
    }
  },
  computed: {
    ...mapGetters(['authUserId', 'routePrefix']),
  },
  created() {
    const cacheData = this.$getStorage(this.routePrefix, 'club_list_data')
    if (cacheData) {
      this.initFromCache(cacheData)
      this.$removeStorage(this.routePrefix, 'club_list_data')
    } else {
      this.init()
    }
    this.fetchStarClubList()
  },
  beforeDestroy() {
    this.$toast.clear()
  },
  methods: {
    // 绘制logo的方法
    drawLogo,

    // 页面初始化
    async init() {
      this.listQuery.authUserId = this.authUserId
      this.$toast.loading({
        message: '正在获取您附近的机构...',
        duration: 0,
      })
      try {
        const resLocation = await geolocation()
        this.listQuery.lngAndLat = `${resLocation.position.lng},${resLocation.position.lat}`
      } catch (error) {
        this.$toast('获取定位信息失败')
      } finally {
        this.filterClubList()
      }
    },

    // 搜索机构列表
    filterClubList() {
      this.listQuery.pageNum = 1
      this.list = []
      this.loadingMore = true
      this.isRequest = true
      this.fetchClubList()
    },

    // 获取机构列表
    fetchClubList: debounce(async function () {
      try {
        const res = await this.$http.api.getAuthClubList(this.listQuery)
        this.list = [...this.list, ...res.data.list]
        this.finished = !res.data.hasNextPage
        this.listQuery.pageNum++
        this.total = res.data.total
      } catch (error) {
        console.log('机构获取失败')
      } finally {
        this.$toast.clear()
        this.loadingMore = false
        this.isRequest = false
      }
    }, 500),

    // 获取明星机构列表
    async fetchStarClubList() {
      try {
        const res = await this.$http.api.getAuthClubStarList({
          authUserId: this.authUserId,
        })
        this.starList = res.data.slice(0, 2)
      } catch (error) {
        console.log(error)
      }
    },

    // 查看机构详情
    toDetail(item) {
      // 缓存数据
      this.$setStorage(this.routePrefix, 'club_list_data', this.$data, {
        expiredTime: 5 * 60 * 1000,
      })
      this.$setStorage(this.routePrefix, 'clubInfo', item)
      const url = `${this.routePrefix}/approve/club/detail?id=${item.authId}`
      this.$router.push(url)
    },

    // 格式化地址
    formatAddress(a1, a2) {
      let resutl = ''
      if (a1) resutl += a1
      if (a2) resutl += a2
      return resutl || '暂无'
    },

    // 格式化距离
    formatDistance(value) {
      return value > 1 ? value + 'km' : value * 1000 + 'm'
    },
  },
}