增加vuex保存用户的收藏信息

package-lock.json

@@ -15756,7 +15756,7 @@
       "dependencies": {
         "vue-class-component": {
           "version": "7.2.6",
-          "resolved": "https://registry.npmmirror.com/vue-class-component/download/vue-class-component-7.2.6.tgz",
+          "resolved": "https://registry.npm.taobao.org/vue-class-component/download/vue-class-component-7.2.6.tgz",
           "integrity": "sha1-hHHgN7jkdi9aRkaG4Z5a/HCFAuQ="
         }
       }
@@ -15789,6 +15789,11 @@
       "resolved": "https://registry.nlark.com/vuex/download/vuex-3.6.2.tgz",
       "integrity": "sha1-I2vAhqhww655lG8QfxbeWdWJXnE="
     },
+    "vuex-module-decorators": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/vuex-module-decorators/download/vuex-module-decorators-2.0.0.tgz",
+      "integrity": "sha512-awfjlJR9PlX2tDNzRk5fUnksO4TC5Z93Q3ZycvROCiLId7MZ1GdY4sHpEvPqm02UZ8jF+BkuyN5ezghOAk3zeQ=="
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/w3c-hr-time/download/w3c-hr-time-1.0.2.tgz",

package.json

@@ -68,7 +68,8 @@
     "vue": "^2.6.11",
     "vue-class-component": "^6.3.2",
     "vue-property-decorator": "^8.5.1",
-    "vuex": "^3.2.0"
+    "vuex": "^3.2.0",
+    "vuex-module-decorators": "^2.0.0"
   },
   "devDependencies": {
     "@babel/plugin-syntax-typescript": "^7.2.0",

src/api/game.ts

@@ -43,7 +43,7 @@ export const getZanList = (games: string[]) => {
           reject && reject(data.errmsg)
           return
         }
-        resolve && resolve(data.record);
+        resolve && resolve(data.data);
       },
       fail: (err) => {
         reject && reject(err)
@@ -64,7 +64,7 @@ export const updateZanInfo = (game: string, act: number) => {
           reject && reject(data.errmsg)
           return
         }
-        resolve && resolve(data.record);
+        resolve && resolve(data.data);
       },
       fail: (err) => {
         reject && reject(err)
@@ -74,7 +74,7 @@ export const updateZanInfo = (game: string, act: number) => {
 }
 
 /**获取收藏列表*/
-export const getCollectList = (games: string[]) => {
+export const getCollectList = () => {
   return new Promise((resolve, reject) => {
     uni.request({
       url: `${GHOST_BASE}/svr/collect/list`,
@@ -86,7 +86,7 @@ export const getCollectList = (games: string[]) => {
           reject && reject(data.errmsg)
           return
         }
-        resolve && resolve(data.record);
+        resolve && resolve(data.data);
       },
       fail: (err) => {
         reject && reject(err)
@@ -107,7 +107,7 @@ export const updateCollectInfo = (game: string, act: number) => {
           reject && reject(data.errmsg)
           return
         }
-        resolve && resolve(data.record);
+        resolve && resolve(data.data);
       },
       fail: (err) => {
         reject && reject(err)

src/api/request.ts

@@ -22,9 +22,9 @@ uni.addInterceptor('request', {
   success(args) {
   },
   fail(err) {
-    console.log('interceptor-fail',err)
+    // console.log('interceptor-fail',err)
   },
   complete(res) {
-    console.log('interceptor-complete',res)
+    // console.log('interceptor-complete',res)
   }
 })

src/components/BigImgCell/index.vue

@@ -15,7 +15,7 @@
     </template>
     <view v-if="gData.tags.length > 0" class="tag-row" @click="onClick(gData.gameId)">
         <view class="demo-uni-col dark tag-list">
-          <uni-tag v-for="tag in gData.tags" :text="tag.name" class="game-tag" :inverted="!tag.fill" :type="tag.type"></uni-tag>
+          <uni-tag v-for="tag in gData.tags" :text="tag.name" :key="tag.name" class="game-tag" :inverted="!tag.fill" :type="tag.type"></uni-tag>
         </view>
     </view>
     <view class="demo-uni-row price-row" @click="onClick(gData.gameId)">
@@ -34,18 +34,20 @@
         <text class="card-actions-item-text">分享</text>
       </button>
       <view class="card-actions-item" @click="zanClick">
-        <uni-icons type="hand-up" size="18" color="#999"></uni-icons>
+        <uni-icons v-if="!zan" type="hand-up" size="18" color="#999"></uni-icons>
+        <uni-icons v-if="zan" type="hand-up-filled" size="18" color="#18bc37"></uni-icons>
         <text class="card-actions-item-text">点赞</text>
       </view>
       <view class="card-actions-item" @click="collectClick">
-        <uni-icons type="heart" size="18" color="#999"></uni-icons>
+        <uni-icons v-if="!collect" type="heart" size="18" color="#999"></uni-icons>
+        <uni-icons v-if="collect" type="heart-filled" size="18" color="#18bc37"></uni-icons>
         <text class="card-actions-item-text">收藏</text>
       </view>
     </view>
   </uni-card>
 </template>
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue, Watch } from 'vue-property-decorator'
 import { IGameInfo } from '@/modules/gameinfo'
 
 declare module 'vue/types/vue' {
@@ -59,6 +61,8 @@ declare module 'vue/types/vue' {
   props: ['gData'],
 })
 export default class extends Vue{
+  private collect = false
+  private zan = false
   zanClick() {
     this.$emit('zanClicked', this.gData)
   }
@@ -69,6 +73,16 @@ export default class extends Vue{
     console.log('on click: ', s)
     this.$emit("cellClicked", s)
   }
+  @Watch('gData.collect')
+  private collectStatChange() {
+    this.collect = !!this.gData?.collect
+    console.log('collect stat change: ', this.collect)
+  }
+
+  @Watch('gData.zan')
+  private zanStatChange() {
+    this.zan = !!this.gData?.zan
+  }
 }
 </script>
 <style>

src/pages/index/index.vue

@@ -4,7 +4,7 @@
       <!-- 这里是状态栏 -->
     </view>
     <uni-list>
-      <uni-list-item v-for="item in games" >
+      <uni-list-item v-for="item in games" :key="item.gameId">
         <big-img-cell
             :g-data="item"
             @cellClicked = 'onClick'
@@ -21,8 +21,9 @@
 import { Component, Vue } from 'vue-property-decorator'
 import BigImgCell from '@/components/BigImgCell/index.vue'
 import { IGameInfo } from '@/modules/gameinfo'
-import { getZanList, updateCollectInfo, updateZanInfo } from '@/api/game'
+import { getCollectList, getZanList, updateCollectInfo, updateZanInfo } from '@/api/game'
 import { searchGames } from '@/api/game_data'
+import { UserModule } from '@/store/modules/user'
 
 @Component({
   name: 'Index',
@@ -36,11 +37,13 @@ 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') {// 来自页面内分享按钮
@@ -75,7 +78,10 @@ export default class extends Vue{
     const act = data.zan ? 0 : 1
     try {
       const res = await updateZanInfo(data.gameId, act)
-      console.log(res)
+      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)
     }
@@ -85,14 +91,35 @@ export default class extends Vue{
     const act = data.collect ? 0 : 1
     try {
       const res = await updateCollectInfo(data.gameId, act)
-      console.log(res)
+      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() {
-  private async fetchZanInfo() {
+    const datas: any = await getCollectList()
-    await getZanList(['6500'])
+    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') {
@@ -107,15 +134,21 @@ export default class extends Vue{
       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'
   }

src/pages/info/index.vue

@@ -10,7 +10,7 @@
       <uni-title type ="h1" :title="name"></uni-title>
       <uni-title type="h2"  :title="subName"></uni-title>
       <view class="tag-list">
-        <uni-tag v-for="tag in tagList" class="game-tag" :text="tag" inverted="true" type="error"></uni-tag>
+        <uni-tag v-for="tag in tagList" class="game-tag" :key="tag" :text="tag" inverted="true" type="error"></uni-tag>
       </view>
       <view class="info-content">
         <text>
@@ -21,7 +21,7 @@
     <view class="price-list" v-if="priceList.length > 0">
       <view class="price-title">低价排名</view>
       <uni-list>
-        <uni-list-item v-for="item in priceList" >
+        <uni-list-item v-for="item in priceList" :key="item.gameId" >
           <price-cell :data="item"></price-cell>
         </uni-list-item>
         <uni-list-item>
@@ -199,7 +199,7 @@ dlc-cell {
   position: absolute;
   left: 0;
   top: 0;
-  width: 150%;
+  width: 100%;
   height: 100%;
   filter: blur(50px);
   opacity: 0.2;

src/store/index.ts

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import { IUserState } from '@/store/modules/user'
+
+Vue.use(Vuex)
+
+export interface IRootState {
+  user: IUserState
+}
+
+export default new Vuex.Store<IRootState>({})

src/store/modules/user.ts

@@ -0,0 +1,47 @@
+import {
+  Action,
+  getModule,
+  Module,
+  Mutation,
+  VuexModule
+} from 'vuex-module-decorators'
+import store from '@/store'
+
+export interface IUserState {
+  token: string
+  name: string
+  avatar: string
+  sex?: string
+  collectSet: Set<string>
+}
+
+@Module({ dynamic: true, store, name: 'user' })
+class User extends VuexModule implements IUserState {
+  public avatar: string = ''
+  public name: string =''
+  public sex: string = ''
+  public token: string = ''
+  public collectSet = new Set<string>()
+
+  @Mutation
+  public SET_TOKEN(token: string) {
+    this.token = token
+  }
+  @Action
+  public add_collect(gameId: string) {
+    this.collectSet.add(gameId)
+  }
+  @Action
+  public remove_collect(gameId: string) {
+    this.collectSet.delete(gameId)
+  }
+
+  @Action
+  public update_collect(games: string[]) {
+    games.forEach(this.collectSet.add, this.collectSet)
+  }
+
+
+}
+
+export const UserModule = getModule(User)