首页增加推荐栏位的展示

src/components/recent-game.wpy

@@ -32,14 +32,27 @@
     background-color:#EFEFF4;
     margin-bottom: 20rpx;
   }
+  .title-divider {
+    margin-left: 8px;
+    margin-right: 8px;
+  }
+  .selected {
+    color: green;
+  }
 </style>
 <template>
   <view>
-    <view class="comp-title"><i class="icon-bookmark"></i> {{title}}</view>
+    <view class="comp-title">
+      <i class="icon-bookmark"></i>
+      <repeat for="{{titleList}}" item="titleStr" index="index">
+        <text class="{{idx === index ? 'selected': ''}}" @tap="selectTitle({{index}})">{{titleStr}}</text>
+        <text class="title-divider {{titleStr? '' : 'hidden'}} {{index === titleList.length - 1 ? 'hidden' : ''}}">|</text>
+      </repeat>
+    </view>
     <view class="recent-game">
       <scroll-view scroll-x="true" class="recent-game-list ">
       <repeat for="{{gameList}}" item="game">
-        <view class="one-game" @tap="gameTap({{game.gid}})">
+        <view class="one-game" @tap="gameTap({{game}})">
           <image src="{{game.icon}}" mode="aspectFill"></image>
         </view>
       </repeat>
@@ -53,14 +66,24 @@
   export default class recentGameComp extends wepy.component {
     props = {
       gameList: [],
-      title: String
+      titleList: [],
+      idx: {type: Number, default: -1}
     }
     data = {
 
     }
     methods = {
-      gameTap (url, e) {
-        this.$emit('gameCellTap', url)
+      gameTap (game, e) {
+        if (game.type) {
+          this.$emit('recommendTap', game.link);
+        } else {
+          this.$emit('gameTap', game.gid);
+        }
+      },
+      selectTitle(idx) {
+        if (this.titleList.length > 1) {
+          this.$emit('selectTitle', idx);
+        }
       }
     }
   }

src/pages/index.wpy

@@ -10,7 +10,7 @@
     <view class="top-view">
       <view class="userinfo">
         <view class="userinfo-user">
-          <image class="userinfo-avatar" src="{{avatar}}"/>
+          <image class="userinfo-avatar" src="{{avatar}}"></image>
           <view class="userinfo-nickname">{{ nickname }}</view>
           <view class="vip-view {{showAll? '' : 'hidden'}}">
             <image src="{{vipImg}}"></image>
@@ -31,8 +31,11 @@
         <view class="userinfo-score {{showAll? '' : 'hidden'}}">金币: {{score}}</view>
       </view>
     </view>
-    <myGame class="{{(showAll && showMyGame && !vip)? '' : 'hidden'}}" :gameList.sync="my_game_list" title="我的游戏" @gameCellTap.user="gameTap"></myGame>
-    <recentGame class="{{(showAll && showRecent)? '' : 'hidden'}}" :gameList.sync="recent_game_list" title="最近在玩" @gameCellTap.user="gameTap"></recentGame>
+    <myGame class="{{(showAll && showMyGame)? '' : 'hidden'}}" :idx.sync="recentCurrent" :titleList.sync="myGameTitles"
+            :gameList.sync="myGameRecords" @recommendTap.user="recommendTap"
+            @gameTap.user="gameTap" @selectTitle.user="barListTitleChange"></myGame>
+    <recommendGame class="{{(showAll && showRecommend)? '' : 'hidden'}}" :gameList.sync="recommendGames"
+                :titleList.sync = "recommendTitles" @gameTap.user="gameTap" @recommendTap.user="recommendTap"></recommendGame>
     <view class="list-title">
       <view class="left"><i class="icon-bookmark"></i> 热门游戏</view>
       <view class="right" @tap="toSearch"><i class="icon-search"></i> 搜索</view>
@@ -73,7 +76,7 @@
     components = {
       toast: Toast,
       recordCell: recordCell,
-      recentGame: recentGame,
+      recommendGame: recentGame,
       myGame: recentGame,
       zanLoadmore: zanLoadmore,
       inviteView: inviteView,
@@ -93,8 +96,10 @@
       noData: true,
       noMore: false,
       showAll: false,
-      showRecent: false,
       showMyGame: false,
+      myGameRecords: [],
+      recommendGames: [],
+      showRecommend: false,
       vip: false,
       expire_str: '',
       vipImg: image.vip_s,
@@ -106,7 +111,10 @@
       inviteBtns: [],
       inviteViewCfg: {
         hide: true
-      }
+      },
+      myGameTitles: [],
+      recommendTitles: [],
+      recentCurrent: -1,
     };
 
     methods = {
@@ -138,6 +146,20 @@
       },
       vipBtnTap() {
         this.$parent.log('buy_vip_btn', {});
+      },
+      barListTitleChange(idx) {
+        this.recentCurrent = idx;
+        if (idx  === 1) {
+          this.myGameRecords = this.recent_game_list;
+        } else {
+          this.myGameRecords = this.my_game_list;
+        }
+        this.$apply();
+      },
+      recommendTap(url) {
+        wepy.navigateTo({
+          url: '/pages/game?link=' + encodeURIComponent(url) + '&gid=0&category=ad'
+        });
       }
     };
     onPullDownRefresh() {
@@ -157,6 +179,9 @@
     }
 
     async onLoad(options) {
+      this.myGameTitles = [];
+      this.recommendTitles = ['推荐'];
+      this.$apply();
       this.$parent.log('index_onload', options);
       let self = this;
       wepy.showShareMenu({
@@ -173,7 +198,7 @@
         });
       }
       jcEvent.on(jcEvent.events.UPDATE_RECENT_GAMES, this, data => {
-        this.getRecendGames()
+        this.getRecentGames()
       });
       jcEvent.on(jcEvent.events.UPDATE_GAME_STATUS, this, data => {
         for(let g of self.records) {
@@ -232,9 +257,10 @@
     }
     getAllData() {
       this.getRecords();
-      this.getRecendGames();
+      this.getRecentGames();
       this.getUserInfo();
       this.getMyGames();
+      this.getRecommendGames();
     }
     onUnload() {
       jcEvent.remove(jcEvent.events.LOGIN_FINISHED, this);
@@ -273,19 +299,49 @@
       this.current = 0;
       this.records = [];
     }
+    prepareTopGameBar() {
+      if (this.my_game_list.length > 0 && !this.vip && this.recent_game_list.length > 0) {
+        this.myGameRecords = this.my_game_list;
+        this.showMyGame = true;
+        this.myGameTitles = ['我的游戏', '最近在玩'];
+      } else if ((this.my_game_list.length === 0 || this.vip) && this.recent_game_list.length > 0) {
+        this.myGameRecords = this.recent_game_list;
+        this.showMyGame = true;
+        this.myGameTitles = ['最近在玩'];
+      } else if (this.my_game_list.length > 0 && !this.vip && this.recent_game_list.length === 0){
+        this.myGameRecords = this.my_game_list;
+        this.showMyGame = true;
+        this.myGameTitles = ['我的游戏'];
+      } else {
+        this.showMyGame = false;
+      }
+      if (this.myGameTitles.length > 1) {
+        this.recentCurrent = 0;
+      }
+    }
     showTopTips(msg, type = 'error') {
       this.$invoke('zanToptips', 'showZanTopTips', { content: msg, type: type})
     }
-    async getRecendGames() {
+    async getRecentGames() {
       try {
         let res = await http.post('/api/emulated/recent_games');
         this.recent_game_list = res.records;
-        this.showRecent = this.recent_game_list.length > 0;
+        this.prepareTopGameBar();
         this.$apply();
       } catch (err) {
         console.log('error get recent games');
       }
     }
+    async getRecommendGames() {
+      try {
+        let res = await http.post('/api/emulated/recommend_game');
+        this.recommendGames = res.records;
+        this.showRecommend = this.recommendGames.length > 0;
+        this.$apply();
+      } catch (err) {
+        console.log('error get recommend games');
+      }
+    }
     async getRandomGame() {
       let self = this;
       try {
@@ -314,7 +370,7 @@
       try {
         let res = await http.post('/api/emulated/my_games');
         this.my_game_list = res.records;
-        this.showMyGame = this.my_game_list.length > 0;
+        this.prepareTopGameBar();
         this.$apply();
         wepy.setStorageSync('game_count', this.my_game_list.length);
       } catch (err) {

src/style/index.wxss

@@ -67,7 +67,7 @@ page {
 }
 .userinfo-score {
   margin-right: 10rpx;
-  font-size:18px;
+  font-size:12px;
   color: #aaa;
 }
 .vip-view{