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

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

      <view class="PageContainer">

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

        <!-- 明星业主 -->
        <view class="StarOwnerList">
          <view class="flex-h">
            <view class="flex-item">
              <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/mingxingyezhu.png"></image>
            </view>
            <navigator url="./StarOwner/index" hover-class="other-navigator-hover" class="More">更多 <text class="iconfont iconjiantouright"></text></navigator>
          </view>
          <view class="ListContainer" v-if="PageStarList.length">
            <scroll-view scroll-x="true">
              <view class="List">
                <navigator v-for="(item, index) in PageStarList" :key="index" :url="`../HuiShengHuo/ActivityList/ActivityDetail/index?id=${item.activityId}`" hover-class="other-navigator-hover" class="Item">
                  <view class="Img">
                    <view class="MainItemImg">
                      <image mode="aspectFill" :src="item.thumb"></image>
                    </view>
                  </view>
                  <text class="Info">{{item.name}}</text>
                </navigator>
              </view>
              <view style="width: 100%; height: 20px;"></view>
            </scroll-view>
          </view>
        </view>

        <!-- 正能量事迹 -->
        <view class="StoryList">
          <view class="flex-h">
            <view class="flex-item">
              <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/zhengnengliangshiji.png"></image>
            </view>
            <navigator url="./EnergyStory/index" hover-class="other-navigator-hover" class="More">更多 <text class="iconfont iconjiantouright"></text></navigator>
          </view>
          <view class="List" v-if="PageStoryList.length">
            <navigator v-for="(item, index) in PageStoryList" :key="index" :url="`../HuiShengHuo/ActivityList/ActivityDetail/index?id=${item.activityId}`" hover-class="other-navigator-hover" class="Item flex-h">
              <view class="flex-item">
                <text>{{item.name}}</text>
                <text>{{item.address}}</text>
                <text>{{ToolClass.DateFormat(new Date(item.startDate).getTime())}}</text>
              </view>
              <view class="Img">
                <view>
                  <view class="MainItemImg">
                    <image mode="aspectFill" :src="item.thumb"></image>
                  </view>
                </view>
              </view>
            </navigator>
          </view>
        </view>

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

      </view>

    </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: 'HuiAiXin',
  data () {
    return {
      PageStarList: [],
      PageStoryList: [],
      RequestNum: 0,
      IsRefreshing: false,
      DataLock: false
    }
  },
  computed: {
    ...mapIndexState({
      HuiAiXinBanner: x => x.HuiAiXinBanner, // 荟爱心banner
      MingXingYeZhuList: x => x.MingXingYeZhuList, // 明星业主列表
      ZhengNengLiangShiJiList: x => x.ZhengNengLiangShiJiList // 正能量事迹列表
    })
  },
  components: {
    ScrollY,
    BannerSwiper,
    GetUserIcon
  },
  created () {
    this.$authed(() => {
      this.Init()
    })
  },
  methods: {
    ...mapUserActions([
      'MainSignIn' // 获取用户信息
    ]),
    ...mapUserMutations([
      'EditUserInfo' // 编辑用户信息
    ]),
    ...mapIndexActions([
      'GetHuiAiXinBanner', // 获取荟爱心banner
      'GetMingXingYeZhuList', // 获取明星业主列表
      'GetZhengNengLiangShiJiList' // 获取正能量事迹列表
    ]),
    ...mapIndexMutations([
      'EmptyHuiAiXinBanner', // 清空荟爱心banner
      'EmptyMingXingYeZhuList', // 清空明星业主列表
      'EmptyZhengNengLiangShiJiList' // 清空正能量事迹列表
    ]),
    Init () {
      this.RequestNum = 0
      this.EmptyHuiAiXinBanner() // 清空荟爱心banner
      this.EmptyMingXingYeZhuList() // 清空明星业主列表
      this.EmptyZhengNengLiangShiJiList() // 清空正能量事迹列表
      this.PageStarList = []
      this.PageStoryList = []
      this.GetHuiAiXinBanner({ queryData: { pageNum: 1, pageSize: 10, position: 'love' } }).then(() => { // 获取荟爱心banner
        this.CheckRequestNum(3) // 判断请求接口个数
      }).catch(() => {
        this.CheckRequestNum(3) // 判断请求接口个数
      })
      this.GetMingXingYeZhuList({ queryData: { pageNum: 1, pageSize: 10, typeId: 5 } }).then(() => { // 获取明星业主列表
        this.PageStarList = [...this.MingXingYeZhuList]
        this.CheckRequestNum(3) // 判断请求接口个数
      }).catch(() => {
        this.CheckRequestNum(3) // 判断请求接口个数
      })
      this.GetZhengNengLiangShiJiList({ queryData: { pageNum: 1, pageSize: 10, typeId: 6 } }).then(() => { // 获取正能量事迹列表
        this.PageStoryList = [...this.ZhengNengLiangShiJiList]
        this.CheckRequestNum(3) // 判断请求接口个数
      }).catch(() => {
        this.CheckRequestNum(3) // 判断请求接口个数
      })
    },
    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>