wx-miniapp/src/pages/HuiShengHuo/ActivityList/index.vue

<template>
  <view class="page JingCaiHuoDong flex-v">

    <!-- Nav -->
    <view class="NavContainer">
      <scroll-view scroll-x="true">
        <view class="NavX">
          <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/jingcaihuodong.png"></image>
          <view v-for="(item, index) in HuoDongNavList" :key="index" :class="{'active': CurrentNavId - 0 === item.Id - 0}" @tap="CutNav(item)">{{item.Name}}</view>
        </view>
      </scroll-view>
    </view>

    <!-- 列表 -->
    <view class="flex-item">
      <ScrollY :IsRefreshing="IsRefreshing" @Refresh="Refresh" @ScrollBottom="ScrollBottom">

        <view class="ActivityList">
          <view class="List">
            <view class="Item" v-for="(item, index) in PageList" :key="index">
              <navigator class="Img" :url="`./ActivityDetail/index?id=${item.activityId}`" hover-class="other-navigator-hover">
                <image mode="aspectFill" class="centerLabel" :src="item.thumb"></image>
              </navigator>
              <view class="Info">
                <text>{{item.name}}</text>
                <view class="flex-h">
                  <text class="flex-item">参与截止时间：{{ToolClass.DateFormat(new Date(item.enrollEnd).getTime())}}</text>
                  <navigator :url="`./ActivityDetail/index?id=${item.activityId}`" hover-class="other-navigator-hover" class="Btn" v-if="item.isEnroll">立即报名</navigator>
                  <navigator :url="`./ActivityDetail/index?id=${item.activityId}`" hover-class="other-navigator-hover" class="Btn" v-if="item.isVote">立即投票</navigator>
                  <view v-if="new Date(item.endDate).getTime() <= Date.now()">已结束</view>
                </view>
              </view>
            </view>
            <view style="width: 100%; height: 10px;"></view>
          </view>
        </view>

      </ScrollY>
    </view>
  </view>
</template>

<script>
import ScrollY from '../../../components/ScrollY/index'
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapIndexState, mapActions: mapIndexActions, mapMutations: mapIndexMutations } = createNamespacedHelpers('index')
const { mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
export default {
  name: 'JingCaiHuoDong',
  data () {
    return {
      PageData: {
        pageNum: 1,
        pageSize: 15
      },
      PageList: [],
      HuoDongNavList: [
        { Name: '暖场活动', Id: '1' },
        { Name: '六点半学堂', Id: '2' },
        { Name: '夜跑行动', Id: '3' },
        { Name: '美好出游季', Id: '4' },
        { Name: '旧衣飞行', Id: '5' },
        { Name: '丽园助农', Id: '6' }
      ],
      CurrentNavId: 1,
      HasNextPage: true,
      IsRefreshing: false,
      DataLock: false
    }
  },
  computed: {
    ...mapIndexState({
      ActivityList: x => x.ActivityList // 活动列表
    })
  },
  components: {
    ScrollY
  },
  created () {
    let _that = this
    wx.login({
      success (res) {
        _that.MainSignIn({ queryData: { code: res.code } }).then((res) => { // 获取用户信息
          _that.EditUserInfo({ name: 'PersonId', value: res.data.data.person.personId })
          _that.EditUserInfo({ name: 'OpenId', value: res.data.data.person.openId })
          _that.EditUserInfo({ name: 'SessionKey', value: res.data.data.extraInfo.sessionKey })
          if (res.data.data.person.phone !== undefined && res.data.data.person.phone !== null) {
            _that.EditUserInfo({ name: 'Phone', value: res.data.data.person.phone })
          }
          _that.Init()
        })
      }
    })
  },
  methods: {
    ...mapUserActions([
      'MainSignIn' // 获取用户信息
    ]),
    ...mapUserMutations([
      'EditUserInfo' // 编辑用户信息
    ]),
    ...mapIndexActions([
      'GetActivityList' // 获取活动列表
    ]),
    ...mapIndexMutations([
      'EmptyActivityList' // 清空活动列表
    ]),
    Init () { // 初始化
      this.PageData.pageNum = 1
      this.HasNextPage = true
      this.PageList = []
      this.EmptyActivityList() // 清空活动列表
      this.ToGetPageList() // 获取列表
    },
    LinkTo (url) { // 跳转页面
      wx.navigateTo({ url })
    },
    CutNav (item) { // 切换导航
      if (this.DataLock) return
      this.DataLock = true
      this.EmptyActivityList() // 清空活动列表
      this.CurrentNavId = item.Id
      setTimeout(() => {
        this.Init() // 初始化
      }, 300)
    },
    ScrollBottom () { // 上拉加载
      if (this.DataLock || !this.HasNextPage) return
      this.DataLock = true
      this.PageData.pageNum += 1
      this.ToGetPageList() // 获取列表
    },
    ToGetPageList () { // 获取列表
      this.GetActivityList({ queryData: { ...this.PageData, typeId: this.CurrentNavId } }).then((res) => { // 获取活动列表
        this.PageList = [...this.ActivityList]
        this.HasNextPage = res.data.data.current < res.data.data.pages
        this.DataLock = false
        this.IsRefreshing = false
      }).catch(() => {
        this.DataLock = false
        this.IsRefreshing = false
      })
    },
    Refresh (e) { // 页面下拉刷新
      if (this.DataLock) return
      this.DataLock = true
      this.IsRefreshing = true
      setTimeout(() => {
        this.Init() // 初始化
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
@import "page.scss";
</style>