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

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

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

      <!-- 一荐倾心计划 -->
      <navigator url="./Recommed/index" hover-class="other-navigator-hover" class="YiJianQingXin">
        <image mode="widthFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/yijianqingxin.png"></image>
      </navigator>

      <!-- 业主资讯 -->
      <view class="NewsList">
        <view class="flex-h">
          <view class="flex-item">
            <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/yezhuzixun.png"></image>
          </view>
          <navigator url="./OwnersNews/index" hover-class="other-navigator-hover" class="More">更多 <text class="iconfont iconjiantouright"></text></navigator>
        </view>
        <view class="List" v-if="PageList.length">
          <navigator v-for="(item, index) in PageList" class="flex-h" :key="index" :url="`./OwnersNews/NewsDetail/index?id=${item.newsId}`" hover-class="other-navigator-hover">
            <view class="Num"><text>{{index + 1}}</text></view>
            <view class="flex-item">
              <text>{{item.title}}</text>
              <text></text>
            </view>
          </navigator>
        </view>
      </view>

      <!-- 授权头像获取弹窗 -->
      <GetUserIcon></GetUserIcon>

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

<script>
import GetUserIcon from '../../components/GetUserIcon/index'
import ScrollY from '../../components/ScrollY/index'
import BannerSwiper from '../../components/BannerSwiper/index'
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapIndexState, mapActions: mapIndexActions, mapMutations: mapIndexMutations } = createNamespacedHelpers('index')
const { mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
export default {
  name: 'HuiQuanYi',
  data () {
    return {
      PageList: [],
      RequestNum: 0,
      IsRefreshing: false,
      DataLock: false
    }
  },
  computed: {
    ...mapIndexState({
      QuanYiBanner: x => x.QuanYiBanner, // 荟权益banner
      YeZhuZiXunList: x => x.YeZhuZiXunList // 业主资讯列表
    })
  },
  components: {
    ScrollY,
    BannerSwiper,
    GetUserIcon
  },
  created () {
    this.$authed(() => {
      this.Init()
    })
  },
  methods: {
    ...mapUserActions([
      'MainSignIn' // 获取用户信息
    ]),
    ...mapUserMutations([
      'EditUserInfo' // 编辑用户信息
    ]),
    ...mapIndexActions([
      'GetHuiQuanYiBanner', // 获取荟权益banner
      'GetYeZhuZiXunList' // 获取业主资讯列表
    ]),
    ...mapIndexMutations([
      'EmptyQuanYiBanner', // 清空荟权益banner
      'EmptyYeZhuZiXunList' // 清空业主资讯列表
    ]),
    Init () {
      this.RequestNum = 0
      this.PageList = []
      this.EmptyQuanYiBanner() // 清空荟权益banner
      this.EmptyYeZhuZiXunList() // 清空业主资讯列表
      this.GetHuiQuanYiBanner({ queryData: { pageNum: 1, pageSize: 10, position: 'rights' } }).then(() => { // 获取荟权益banner
        this.CheckRequestNum(2) // 判断请求接口个数
      }).catch(() => {
        this.CheckRequestNum(2) // 判断请求接口个数
      })
      this.GetYeZhuZiXunList({ queryData: { pageNum: 1, pageSize: 10 } }).then(() => { // 获取业主资讯列表
        this.PageList = [...this.YeZhuZiXunList]
        this.CheckRequestNum(2) // 判断请求接口个数
      }).catch(() => {
        this.CheckRequestNum(2) // 判断请求接口个数
      })
    },
    CheckRequestNum (num) { // 判断请求接口个数
      this.RequestNum += 1
      if (this.RequestNum >= num) {
        this.IsRefreshing = false
        this.DataLock = 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>