game/src/pages/search.wpy

<style lang="less">
  @import "../style/index.wxss";
  @import "../style/search.less";
</style>
<template>
  <view class="container">
    <view class="top-action-bar">
      <view class="weui-search-bar">
        <view class="weui-search-bar__form">
          <view class="weui-search-bar__box">
            <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
            <input type="text" class="weui-search-bar__input" confirm-type="search" placeholder="输入游戏名" value="{{inputVal}}" focus="{{inputShowed}}" bindconfirm="endInput" />
            <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
              <icon type="clear" size="14"></icon>
            </view>
          </view>
          <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
            <icon class="weui-icon-search" type="search" size="14"></icon>
            <view class="weui-search-bar__text">输入游戏名</view>
          </label>
        </view>
        <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
      </view>
      <view class="filter-bar">
        <view class="search-btn">
          <picker @change="languageChange" value="{{language}}" range="{{languageArr}}">
            {{language}} <i class="icon-love"></i>
          </picker>
        </view>
        <view class="search-btn">
          <picker @change="typeChange" value="{{type}}" range="{{typeArr}}">
            {{typeName}} <i class="icon-love"></i>
          </picker>
        </view>
      </view>
    </view>
    <repeat for="{{records}}" item="item" >
      <recordCell :item="item" @gameCellTap.user="gameTap" :showAll.sync = 'showAll'/>
    </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 g from '../common/global';
  import jcEvent from '../common/jc-event';

  export default class SearchPage extends wepy.page {
    mixins = [base, tips];
    config = {
      navigationBarTitleText: '搜索',
      enablePullDownRefresh: true
    };
    components = {
      toast: Toast,
      recordCell: recordCell,
      recentGame: recentGame,
      zanLoadmore: zanLoadmore
    };

    data = {
      records: [],
      all_count: 0,
      current: 0,
      loading: false,
      noData: true,
      noMore: false,
      inputShowed: false,
      inputVal: '',
      language: '所有语言',
      type: 0,
      languageArr: ['所有语言', '中文', '简体中文', '繁体中文', '英文', '日文', '多国语言', '德文', '法文', '欧洲', '其他'],
      typeArr: g.gameTypes,
      typeName: '所有类型',
      showAll: false
    };

    methods = {
      showInput () {
        this.inputShowed = true;
      },
      hideInput () {
        this.inputVal = '';
        this.inputShowed = false;
      },
      clearInput () {
        this.inputVal = '';
      },
      endInput (e) {
        this.inputVal = e.detail.value;
        this.initPageParam();
        this.getRecords();
      },
      languageChange(e) {
        this.language = this.languageArr[e.detail.value];
        this.initPageParam();
        this.getRecords();
      },
      typeChange(e) {
        this.type = e.detail.value;
        this.typeName = this.typeArr[this.type];
        this.initPageParam();
        this.getRecords();
      },
      gameTap(gid, e) {
        wepy.navigateTo({
          url: '/pages/gameInfo?id=' + gid
        })
      },
    };

    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) {
      this.getRecords();
      this.typeArr.unshift('所有类型')
      let self = this;
      jcEvent.on(jcEvent.events.UPDATE_GAME_STATUS, this, data => {
        for(let g of self.records) {
          if (g.gid == data.gid) {
            g.owned = true;
            break;
          }
        }
        self.$apply();
      });
    }
    onShow() {
      let cfg = wepy.getStorageSync('cfg');
      this.showAll = !cfg ? false : !cfg.hide_main;
    }
    initPageParam() {
      this.all_count = 999;
      this.current = 0;
      this.records = [];
    }

    async getRecords() {
      let self = this;
      try {
        let data = {start: self.current};
        if (this.inputVal) {
          data.keyStr = this.inputVal;
        }
        if (this.language !== '所有语言') {
          data.language = this.language;
        }
        if (this.type > 0) {
          data.type = this.type;
        }
        let res = await http.post(`/api/emulated/games`, data);
        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;
    }
    onUnload() {
      jcEvent.remove(jcEvent.events.UPDATE_GAME_STATUS, this);
    }
  }
</script>