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

<template>
  <view class="page HuiShengHuo">
    <ScrollY :IsRefreshing="IsRefreshing" @Refresh="Refresh">

      <!-- banner -->
      <view class="Banner">
        <view>
          <BannerSwiper></BannerSwiper>
        </view>
      </view>

      <!-- 活动照片墙 -->
      <view class="PhotoList">
        <view class="flex-h">
          <view class="flex-item">
            <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/huodongzhaopianqiang.png"></image>
          </view>
          <navigator url="./PhotoList/index" hover-class="other-navigator-hover" class="More">更多 <text class="iconfont iconjiantouright"></text></navigator>
        </view>
        <view class="ListContainer">
          <scroll-view scroll-x="true">
            <view class="List">
              <view v-for="(item, index) in 10" :key="index">
                <view></view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>

      <!-- 精彩活动 -->
      <view class="ActivityList">
        <view class="flex-h">
          <view class="flex-item">
            <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/jingcaihuodong.png"></image>
          </view>
          <navigator url="./ActivityList/index" hover-class="other-navigator-hover" class="More">更多 <text class="iconfont iconjiantouright"></text></navigator>
        </view>
        <view class="List">
          <view class="Item" v-for="(item, index) in 20" :key="index">
            <view class="Img"></view>
            <view class="Info">
              <text>活动名称</text>
              <view class="flex-h">
                <text class="flex-item">参与截止时间：2020-08-20 16:00</text>
                <navigator url="./ActivityList/ActivityDetail/index" hover-class="other-navigator-hover" class="Btn">立即报名</navigator>
                <navigator url="./ActivityList/ActivityDetail/index" hover-class="other-navigator-hover" class="Btn">立即投票</navigator>
                <view>已结束</view>
              </view>
            </view>
          </view>
        </view>
      </view>

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

<script>
import ScrollY from '../../components/ScrollY/index'
import BannerSwiper from '../../components/BannerSwiper/index'
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
export default {
  name: 'HuiShengHuo',
  data () {
    return {
      IsRefreshing: false,
      DataLock: false
    }
  },
  computed: {
    ...mapUserState({
      UserPlaylist: x => x.UserPlaylist
    })
  },
  components: {
    ScrollY,
    BannerSwiper
  },
  created () {
    this.Init()
  },
  methods: {
    ...mapUserActions([
      'GetUserPlaylist'
    ]),
    Init () {
      // this.GetUserPlaylist({ queryData: { accountId: 5, pageNum: 1, pageSize: 1000 } }).then((res) => {
      //   console.log(this.UserPlaylist)
      // })
    },
    LinkTo (url) {
      wx.navigateTo({ url })
    },
    Refresh (e) {
      if (this.DataLock) return
      this.DataLock = true
      this.IsRefreshing = true
      setTimeout(() => {
        this.IsRefreshing = false
        this.DataLock = false
      }, 1000)
    }
  }
}
</script>

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