switchcat/src/pages/index/index.vue

<template>
  <view class="container">
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
    <uni-list>
      <uni-list-item v-for="item in games" :key="item.gameId">
        <big-img-cell
            :g-data="item"
            @cellClicked = 'onClick'
            @zanClicked = 'onZanGame'
            @collectClicked = 'onCollectGame'
        ></big-img-cell>
      </uni-list-item>
    </uni-list>
    <uni-load-more :status="more" :contentText="moreCfg" @clickLoadMore="loadMore"></uni-load-more>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import BigImgCell from '@/components/BigImgCell/index.vue'
import { IGameInfo } from '@/modules/gameinfo'
import { getCollectList, getZanList, updateCollectInfo, updateZanInfo } from '@/api/game'
import { searchGames } from '@/api/game_data'
import { UserModule } from '@/store/modules/user'

@Component({
  name: 'Index',
  components: {
    BigImgCell
  }
})

export default class extends Vue{

  private games: IGameInfo[] = []
  private more = 'more'
  private moreCfg = {contentdown: "点击加载更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}
  private zanData: any = {}
  $onLaunched: any

  async onLoad() {
    await this.$onLaunched;
    await this.fetchGames()
    await this.fetchCollectInfo()
  }
  onShareAppMessage(res: any) {
    if (res.from === 'button') {// 来自页面内分享按钮
      console.log(res.target)
    }
    return {
      title: '自定义分享标题',
      path: '/pages/test/test?id=123'
    }
  }
  onShareTimeline() {
    return {
      title: '自定义分享标题',
      query: '/pages/test/test?id=123',
      imageUrl: ''
    }
  }
  onClick(e: any) {
    uni.navigateTo({
      url: '/pages/info/index?gameId='+e,
      animationType: 'pop-in',
      animationDuration: 200})
  }
  actionsClick(text: string) {
    uni.showToast({
      title: text,
      icon: 'none'
    })
  }
  async onZanGame(data: IGameInfo) {
    console.log(`on zan game: ${data.gameId}`)
    const act = data.zan ? 0 : 1
    try {
      const res = await updateZanInfo(data.gameId, act)
      let index = this.games.findIndex(o => o.gameId === data.gameId)
      this.games[index].zan = !this.games[index].zan
      Vue.set(this.games, index, this.games[index]);
      console.log('update zan stat success: ', this.games[index].zan)
    } catch (err) {
      console.log(err)
    }
  }
  async onCollectGame(data: IGameInfo) {
    console.log(`on collect game: ${data.gameId}`)
    const act = data.collect ? 0 : 1
    try {
      const res = await updateCollectInfo(data.gameId, act)
      let index = this.games.findIndex(o => o.gameId === data.gameId)
      this.games[index].collect = !this.games[index].collect
      Vue.set(this.games, index, this.games[index]);
      // this.$forceUpdate()
      if (this.games[index].collect) {
        UserModule.add_collect(data.gameId)
      } else {
        UserModule.remove_collect(data.gameId)
      }
      console.log('update collect stat success: ', this.games[index].collect)
    } catch (err) {
      console.log(err)
    }
  }
  private async fetchCollectInfo() {
    const datas: any = await getCollectList()
    UserModule.update_collect(datas)
    for (let game of this.games) {
      game.collect = UserModule.collectSet.has(game.gameId)
    }
    // console.log(datas)
  }
  private async fetchZanInfo(games: string[]) {
    let data = await getZanList(games)
    Object.assign(this.zanData, data)
    for (let game of this.games) {
      game.zan = !!this.zanData[game.gameId]?.did
    }
    this.$forceUpdate()
  }
  private async loadMore(e: any) {
    if (this.more === 'more') {
      this.more = 'loading'
      await this.fetchGames(this.games.length)
    }
    console.log(e)
  }
  private async fetchGames(start: number = 0) {
    let res: any = await searchGames({cutoff: 1, skip: start})
    if (res.length === 0) {
      this.more = 'noMore'
      return
    }
    let ids = []
    for (let data of res) {
      data.gameId = data.oldGameId + ''
      data.tags = []
      data.collect = UserModule.collectSet.has(data.gameId)
      if (data.chinese) {
        let arr = data.chinese.split(';')
        arr.forEach((o: string) => data.tags.push({name: o, type: 'error'}))
      }
      if (data.isLowest) data.tags.push({name: '史低', type: 'success', fill: true})
      this.games.push(data)
      ids.push(data.gameId)
    }
    if (ids.length) {
      await this.fetchZanInfo(ids)
    }
    this.more = 'more'
  }

}
</script>

<style>
big-img-cell {
  width: 100%;
}
.uni-list-item-box {
  padding: 0!important;
}
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}


</style>