rebatedine-mini/src/pages/classification.vue

<template>
  <view class="class-main">
    <network-error />
    <u-sticky :enable="enable"
              offset-top="0"
              h5-nav-height="0"
              @fixed="stickyFixed"
              @unfixed="unStickyFixed">
      <view class="class-tabs">
        <u-tabs is-scroll
                :list="list"
                name="category_name"
                :current="currentTab"
                height="72"
                font-size="28"
                active-color="#111111"
                inactive-color="#111111"
                :gutter="32"
                :bar-style="{
            bottom: '8rpx',
            marginLeft: '-8rpx',
            width: '56rpx',
            height: '10rpx',
            borderRadius: 0,
            backgroundColor: '#FD5B36',
            boxShadow: '0px 1px 1px 0px rgba(255, 102, 50, 0.3)'
          }"
                :active-item-style="{
            fontSize: '32rpx'
          }"
                @change="changeTab">
        </u-tabs>
      </view>
    </u-sticky>
    <block v-if="isLocation && activityList.length !== 0">
      <view class="activity-list"
            :style="{marginTop: `${activityListMT}rpx`}">
        <view class="activity-card u-border-bottom"
              v-for="(item, index) in activityList"
              :key="index">
          <activity-card :value="item"
                          @sign-up="toActivityDetail"
                          @click-ybm="toActivityDetail"
                          @click-yqg="toActivityDetail">
          </activity-card>
        </view>
        <view class="touch-bottom u-font-22 line-32 u-text-center">{{isLoadMore ? '加载中...' : '到底了～'}}</view>
      </view>
    </block>
    <block v-if="!isLocation && activityList.length === 0">
      <view class="def-content">
        <def-content type="1"></def-content>
      </view>
    </block>
    <block v-if="!isLocation">
      <view class="def-content">
        <def-content type="2"></def-content>
      </view>
    </block>
  </view>
</template>

<script>
import defContent from '@/components/defContent'
import activityCard from '@/components/activityCard'
import { getActivityCategoryList, getActivityList } from '@/api/activityApi.js'
export default {
  components: { defContent, activityCard },
  data () {
    return {
      isLocation: false,
      enable: true,
      currentTab: 0,
      activityListMT: 16,
      list: [],
      isLoadMore: false,
      searchForm: {
        page_no: 1,
        page_size: 10,
        category_id: 0
      },
      activityList: [],
      total: -1
    }
  },
  computed: {
    cateId () {
      return this.$store.state.cateId
    }
  },
  async onShow () {
    await this.getCategoryData()
    if (this.cateId) {
      this.currentTab = this.list.findIndex(item => {
        return item.id === this.cateId * 1
      })
    } else {
      this.currentTab = 0
    }
    this.searchForm.page_no = 1
    this.total = -1
    this.activityList = []
    this.getActivityData()
    this.enable = true
    this.$store.commit('changeCateId', '')
  },
  onHide () {
    this.enable = true
  },
  onPullDownRefresh () {
    this.searchForm.page_no = 1
    this.total = -1
    this.activityList = []
    this.getActivityData()
  },
  onReachBottom () {
    if (this.isLoadMore) {
      this.searchForm.page_no += 1
      this.getActivityData()
    }
  },
  methods: {
    // 获取用户经纬度
    getLocation () {
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: 'gcj02',
          success: (res) => {
            this.isLocation = true
            resolve(res)
          },
          fail: () => {
            this.isLocation = false
            resolve(false)
          }
        })
      })
    },
    // 获取分类标签
    async getCategoryData () {
      const { code, data } = await getActivityCategoryList()
      if (code === 200) {
        this.list = data
      }
    },
    // 获取活动列表
    async getActivityData () {
      const location = await this.getLocation()
      if (!location) { return }
      const params = {
        lng: location.longitude,
        lat: location.latitude,
        page_no: this.searchForm.page_no,
        page_size: this.searchForm.page_size,
        category_id: this.searchForm.category_id
      }
      const { code, data } = await getActivityList(params)
      if (code === 200) {
        if (this.total === -1) {
          this.activityList = data.rows
        } else {
          this.activityList = this.activityList.concat(data.rows)
        }
        this.total = data.total_count
        this.isLoadMore = this.total !== this.activityList.length
      }
      uni.stopPullDownRefresh()
    },
    changeTab (index) {
      this.currentTab = index
      this.searchForm.category_id = this.list[index].id
      this.searchForm.page_no = 1
      this.total = -1
      this.activityList = []
      this.getActivityData()
    },
    toActivityDetail (e) {
      uni.navigateTo({
        url: `/pagesSub/activity/activityDetail?id=${e.id}`
      })
    },
    stickyFixed () {
      this.activityListMT = 64
    },
    unStickyFixed () {
      this.activityListMT = 16
    }
  }
}
</script>

<style lang="scss" scoped>
.class-main {
  .class-tabs {
    width: 100%;
    padding: 0;
    background-color: #fff;
  }
  .no-location,
  .activity-list {
    padding: 0 28px;
    min-height: 100vh;
    background-color: #fff;
    .activity-card {
      padding: 32px 0;
    }
    .touch-bottom {
      padding: 30px 0;
      color: #babbbc;
    }
  }
  .back-color {
    height: 16px;
    background-color: #fff;
  }
  .def-content {
    padding-top: 252px;
  }
}
</style>

<style >
.class-tabs >>> .u-tab-item {
  z-index: 10;
}
</style>