增加游戏点赞和收藏功能

src/App.vue

@@ -1,17 +1,25 @@
 <script lang="ts">
     import Vue from 'vue';
+    import { IGameInfo } from '@/modules/gameinfo'
     require('api/request');
     let sdkManage = require('./jcfw/SDKManage');
 
+    declare module 'vue/types/vue' {
+      interface Vue {
+        $isResolve: () => void
+      }
+    }
+
     export default Vue.extend({
         mpType: 'app',
         async onLaunch(options: any) {
           console.log('App Launch ', options)
           console.log('platform: ', uni.getSystemInfoSync())
-          //#ifdef MP-WEIXIN
+          //#ifdef H5 || MP-WEIXIN
           await sdkManage.init(options);
           await sdkManage.login();
           // #endif
+          this.$isResolve()
         },
         onShow() {
             console.log('App Show')

src/api/game.ts

@@ -1,17 +1,5 @@
+const GHOST_BASE = 'https://ghost.kingsome.cn/api'
 
-export const searchGames = (params: any) => {
-  return new Promise((resolve, reject) => {
-    uni.request({
-      url: 'request/games',
-      success: (res) => {
-        resolve && resolve(res.data);
-      },
-      fail: (err) => {
-        reject && reject(err)
-      }
-    });
-  })
-}
 
 export const checkWord = (params: any) => {
   return new Promise((resolve, reject) => {
@@ -30,7 +18,7 @@ export const checkWord = (params: any) => {
 export const getArticle = (aid: string) => {
   return new Promise((resolve, reject) => {
     uni.request({
-      url: `https://ghost.kingsome.cn/api/emulated/article`,
+      url: `${GHOST_BASE}/api/emulated/article`,
       method: 'POST',
       data: {id: aid},
       success: (res) => {
@@ -42,5 +30,90 @@ export const getArticle = (aid: string) => {
     });
   })
 }
+/**获取多个游戏的点赞信息*/
+export const getZanList = (games: string[]) => {
+  return new Promise((resolve, reject) => {
+    uni.request({
+      url: `${GHOST_BASE}/svr/zan/info`,
+      method: 'POST',
+      data: {games},
+      success: (res: any) => {
+        const data = res.data
+        if (data.errcode) {
+          reject && reject(data.errmsg)
+          return
+        }
+        resolve && resolve(data.record);
+      },
+      fail: (err) => {
+        reject && reject(err)
+      }
+    });
+  })
+}
+/**更新单个游戏的点赞信息*/
+export const updateZanInfo = (game: string, act: number) => {
+  return new Promise((resolve, reject) => {
+    uni.request({
+      url: `${GHOST_BASE}/svr/zan/update`,
+      method: 'POST',
+      data: {game, act},
+      success: (res: any) => {
+        const data = res.data
+        if (data.errcode) {
+          reject && reject(data.errmsg)
+          return
+        }
+        resolve && resolve(data.record);
+      },
+      fail: (err) => {
+        reject && reject(err)
+      }
+    });
+  })
+}
+
+/**获取收藏列表*/
+export const getCollectList = (games: string[]) => {
+  return new Promise((resolve, reject) => {
+    uni.request({
+      url: `${GHOST_BASE}/svr/collect/list`,
+      method: 'POST',
+      data: {},
+      success: (res: any) => {
+        const data = res.data
+        if (data.errcode) {
+          reject && reject(data.errmsg)
+          return
+        }
+        resolve && resolve(data.record);
+      },
+      fail: (err) => {
+        reject && reject(err)
+      }
+    });
+  })
+}
+/**更新单个游戏的点赞信息*/
+export const updateCollectInfo = (game: string, act: number) => {
+  return new Promise((resolve, reject) => {
+    uni.request({
+      url: `${GHOST_BASE}/svr/collect/update`,
+      method: 'POST',
+      data: {game, act},
+      success: (res: any) => {
+        const data = res.data
+        if (data.errcode) {
+          reject && reject(data.errmsg)
+          return
+        }
+        resolve && resolve(data.record);
+      },
+      fail: (err) => {
+        reject && reject(err)
+      }
+    });
+  })
+}
 
 

src/api/game_data.ts

@@ -0,0 +1,15 @@
+const DATA_BASE = ''
+
+export const searchGames = (params: any) => {
+  return new Promise((resolve, reject) => {
+    uni.request({
+      url: `${DATA_BASE}/request/games`,
+      success: (res) => {
+        resolve && resolve(res.data);
+      },
+      fail: (err) => {
+        reject && reject(err)
+      }
+    });
+  })
+}

src/api/request.ts

@@ -1,4 +1,5 @@
 const host_base = 'https://dirty.kingsome.cn'
+const sdkManage = require('../jcfw/SDKManage');
 
 uni.addInterceptor('request', {
   invoke(args) {
@@ -12,10 +13,13 @@ uni.addInterceptor('request', {
         }
       }
     }
+    if (args.data) {
+      if (sdkManage.hasLogin) {
+        args.data['accountId'] = sdkManage.account_id
+      }
+    }
   },
   success(args) {
-    // 请求成功后，修改code值为1
-    args.data.code = 1
   },
   fail(err) {
     console.log('interceptor-fail',err)

src/components/BigImgCell/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <uni-card mode="style" @click="onClick(gData.gameId)">
+  <uni-card mode="style" >
     <template v-slot:cover>
       <view class="custom-cover" @click="onClick(gData.gameId)">
         <image class="cover-image" mode="aspectFill" :src="gData.banner">
@@ -12,13 +12,13 @@
         </view>
       </view>
     </template>
-    <view class="tag-row">
+    <view class="tag-row" @click="onClick(gData.gameId)">
         <view class="demo-uni-col dark tag-list">
           <uni-tag text="标签" class="game-tag" inverted="true" type="warning"></uni-tag>
           <uni-tag text="标签" class="game-tag" inverted="true" type="warning"></uni-tag>
         </view>
     </view>
-    <view class="demo-uni-row price-row">
+    <view class="demo-uni-row price-row" @click="onClick(gData.gameId)">
         <view class="">
           <text class="price price-new">$200.0</text>
           <text class="price price-raw">$200.0</text>
@@ -29,17 +29,17 @@
         </view>
     </view>
     <view slot="actions" class="card-actions">
-      <view class="card-actions-item" @click="actionsClick('分享')">
+      <button class="card-actions-item share-btn" :id="gData.gameId" open-type="share">
         <uni-icons type="pyq" size="18" color="#999"></uni-icons>
         <text class="card-actions-item-text">分享</text>
-      </view>
-      <view class="card-actions-item" @click="actionsClick('点赞')">
-        <uni-icons type="heart" size="18" color="#999"></uni-icons>
+      </button>
+      <view class="card-actions-item" @click="zanClick">
+        <uni-icons type="hand-up" size="18" color="#999"></uni-icons>
         <text class="card-actions-item-text">点赞</text>
       </view>
-      <view class="card-actions-item" @click="actionsClick('评论')">
-        <uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
-        <text class="card-actions-item-text">评论</text>
+      <view class="card-actions-item" @click="collectClick">
+        <uni-icons type="heart" size="18" color="#999"></uni-icons>
+        <text class="card-actions-item-text">收藏</text>
       </view>
     </view>
   </uni-card>
@@ -59,8 +59,11 @@ declare module 'vue/types/vue' {
   props: ['gData'],
 })
 export default class extends Vue{
-  actionsClick(s: string) {
-    console.log(s)
+  zanClick() {
+    this.$emit('zanClicked', this.gData)
+  }
+  collectClick() {
+    this.$emit('collectClicked', this.gData)
   }
   onClick(s: string) {
     console.log('on click: ', s)
@@ -178,4 +181,17 @@ uni-tag {
 .game-tag text {
   padding: 2px 5px!important;
 }
+.share-btn {
+  box-sizing: unset;
+  text-align: left;
+  border-radius: 0;
+  background-color: white!important;
+  margin: 0;
+}
+
+.share-btn::after{
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+}
 </style>

src/jcfw/SDKManage.js

@@ -7,7 +7,12 @@ let SDKManage = function() {
   this.gameId = 8007;
   this.hasLogin = false;
   this.vision = '1.0.0';
+  //#ifdef MP-WEIXIN
   this.channelId = 6001;
+  // #endif
+  //#ifdef H5
+  this.channelId = 6000;
+  // #endif
   this.shareAchieveId = global.shareAchieveId;
   this.mpCode = '';
   this.init = async function(launchObj) {

src/main.ts

@@ -3,4 +3,8 @@ import App from './App.vue'
 
 Vue.config.productionTip = false
 
+Vue.prototype.$onLaunched = new Promise(resolve => {
+  Vue.prototype.$isResolve = resolve
+})
+
 new App().$mount()

src/modules/gameinfo.ts

@@ -11,4 +11,7 @@ export interface IGameInfo{
   priceCountry?: string,
   discountLeftTime?: string,
   cutOff?: number
+
+  collect: boolean
+  zan: boolean
 }

src/pages/index/index.vue

@@ -5,7 +5,12 @@
     </view>
     <uni-list>
       <uni-list-item v-for="item in games" >
-        <big-img-cell :g-data="item" v-on:cellClicked = 'onClick'></big-img-cell>
+        <big-img-cell
+            :g-data="item"
+            @cellClicked = 'onClick'
+            @zanClicked = 'onZanGame'
+            @collectClicked = 'onCollectGame'
+        ></big-img-cell>
       </uni-list-item>
     </uni-list>
   </view>
@@ -15,6 +20,7 @@
 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'
 
 @Component({
   name: 'Index',
@@ -26,9 +32,10 @@ import { IGameInfo } from '@/modules/gameinfo'
 export default class extends Vue{
 
   private games: IGameInfo[] = []
+  $onLaunched: any
 
-  onLoad() {
-    console.log(uni.getSystemInfoSync().statusBarHeight)
+  async onLoad() {
+    await this.$onLaunched;
     for (let i = 0; i < 10; i++) {
       this.games.push({
         gameId: i + '',
@@ -37,7 +44,22 @@ export default class extends Vue{
         ename: 'test game ' + i
       })
     }
-
+  }
+  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({
@@ -51,6 +73,31 @@ export default class extends Vue{
       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)
+      console.log(res)
+    } 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)
+      console.log(res)
+    } catch (err) {
+
+    }
+  }
+
+  private async fetchZanInfo() {
+    await getZanList(['6500'])
+  }
+
 
 }
 </script>