game/src/pages/index.wpy

<style lang="less">
  @import "../style/index.wxss";
</style>
<template>
  <view class="container">
    <view class="top-view">
      <view class="userinfo">
        <image class="userinfo-avatar" src="{{avatar}}"/>
        <view class="userinfo-nickname">{{ nickname }}</view>
      </view>
    </view>
    <recentGame :gameList.sync="recent_game_list" @gameCellTap.user="gameTap"></recentGame>
    <view class="list-title">
      <view class="left"><i class="icon-bookmark"></i> 热门游戏</view>
      <view class="right" @tap="toSearch"><i class="icon-search"></i> 搜索</view>
    </view>
    <repeat for="{{records}}" item="item" >
      <recordCell :item="item" @gameCellTap.user="gameTap"/>
    </repeat>
    <zanLoadmore :loading.sync="loading" :nodata.sync="noData" :nomore.sync="noMore" nodata_str="暂无数据"></zanLoadmore>
    <toast/>
  </view>
</template>

<script>
  import wepy from 'wepy';
  import Toast from 'wepy-com-toast';
  import http from '../utils/http';
  import base from '../mixins/base';
  import tips from '../mixins/tips';
  import recordCell from '../components/game-cell';
  import recentGame from '../components/recent-game';
  import zanLoadmore from '../components/zan-loadmore';
  import jcEvent from '../common/jc-event';

  export default class Index extends wepy.page {
    mixins = [base, tips];
    config = {
      navigationBarTitleText: '游戏大厅',
      enablePullDownRefresh: true
    };
    components = {
      toast: Toast,
      recordCell: recordCell,
      recentGame: recentGame,
      zanLoadmore: zanLoadmore
    };

    data = {
      nickname: '加载中',
      avatar: '',
      records: [],
      recent_game_list: [],
      all_count: 0,
      current: 0,
      loading: false,
      noData: true,
      noMore: false
    };

    methods = {
      gameTap(gid, e) {
        wepy.navigateTo({
          url: '/pages/gameInfo?id=' + gid
        })
      },
      toSearch() {
        wepy.navigateTo({
          url: '/pages/search'
        })
      }
    };

    onPullDownRefresh() {
      this.initPageParam();
      this.getRecords();
    }

    onReachBottom() {
      if (this.current < this.all_count) {
        this.loading = true;
        this.$apply();
        let self = this;
        setTimeout(() => {
          self.getRecords();
        }, 200);
      }
    }

    async onLoad(options) {
      let userInfo = this.$parent.getUserInfo();
      console.log(userInfo);
      if (userInfo) {
        this.nickname = userInfo.nickName;
        this.avatar = userInfo.avatarUrl;
        this.$apply();
      }
      if (this.$parent.checkAuthorize()) {
        wepy.navigateTo({
          url: '/pages/login'
        })
      }
      if (!this.$parent.checkClientLogin()) {
        this.getAllData();
      } else {
        jcEvent.on('login-finished', this, data => {
          console.log('catch login-finished event');
          this.getAllData()
        });
      }
      jcEvent.on('update-recent-games', this, data => {
        console.log('catch update-recent-games event');
        this.getRecendGames()
      });
    }
    getAllData() {
      this.getRecords();
      this.getRecendGames();
    }
    onUnload() {
      jcEvent.remove('login-finished', this);
      jcEvent.remove('update-recent-games', this);
    }
    onShow() {
      let userInfo = this.$parent.getUserInfo();
      console.log(userInfo);
      if (userInfo) {
        this.nickname = userInfo.nickName;
        this.avatar = userInfo.avatarUrl;
        this.$apply();
      }
    }
    initPageParam() {
      this.all_count = 999;
      this.current = 0;
      this.records = [];
    }
    async getRecendGames() {
      try {
        let res = await http.post('/api/emulated/recent_games');
        this.recent_game_list = res.records;
        this.$apply();
      } catch (err) {
        console.log('error get recent games');
      }
    }
    async getRecords() {
      let self = this;
      try {
        let res = await http.post(`/api/emulated/games`, {start: self.current});
        wepy.stopPullDownRefresh();
        if (res.errcode === 0) {
          if (res.count > 0) {
            self.all_count = res.count;
          }
          self.current += 10;
          for (let obj of res.records) {
            self.records.push(obj);
          }
          self.loading = false;
          self.noMore = (self.records.length >= self.all_count);
          self.noData = (self.records.length === 0);
          self.$apply();
        } else {
          console.log('get game data error');
          self.loading = false
        }
      } catch (error) {
        console.log(error);
        self.loading = false
      }
      this.$apply();
      this.noData = false;
      this.noMore = true;
    }
  }
</script>