增加顶部横条提示

src/components/one-invite-btn.wpy

@@ -77,6 +77,16 @@
     align-items: center;
     justify-content: center;
     white-space: pre-line;
+    text-align:center;
+  }
+  button::after{ border: none;}
+  .gray {
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    filter: grayscale(100%);
+    filter: gray;
   }
 </style>
 <template>
@@ -97,7 +107,7 @@
         <image src="{{bottomBtnImg}}"></image>
         <text>{{btnObj.btnTitle}}</text>
     </button>
-    <view class="bottom-btn {{ btnObj.status === 0 ? 'hidden' : ''}}" @tap="inviteBtnClick">
+    <view class="bottom-btn {{ btnObj.status === 0 ? 'hidden' : ''}} {{btnObj.status === 2 ? 'gray': ''}}" @tap="inviteBtnClick">
       <image src="{{bottomBtnActive}}"></image>
       <text>{{btnObj.btnTitle}}</text>
     </view>
@@ -126,7 +136,9 @@
 
     methods = {
       inviteBtnClick () {
-        this.$emit('inviteBtnClick', this.index)
+        if (this.btnObj.status === 1) {
+          this.$emit('inviteBtnClick', this.index)
+        }
       }
     };
   }

src/components/zan-toptips.wpy

@@ -10,14 +10,12 @@
   line-height: 2.3;
   font-size: 14px;
   text-align: center;
-  color: #FFF;
-  background-color: #E64340;
   z-index: 110;
 }
 
 </style>
 <template>
-  <view animation="{{animationData}}" class="zan-toptips"> {{ topTips.content }} </view>
+  <view animation="{{animationData}}" class="zan-toptips {{subClass}}"> {{ topTips.content }} </view>
 </template>
 <script>
 import wepy from 'wepy'
@@ -26,11 +24,14 @@ export default class zanToptips extends wepy.component {
   props = {}
   data = {
     topTips: {},
-    animationData: {}
+    animationData: {},
+    subClass: 'zan-btn--info',
   }
   methods = {
-    showZanTopTips({ content = '', options = {} }, event) {
+    //type: warn, info, danger or error, primary
+    showZanTopTips({ content = '', type = 'info', options = {} }, event) {
       console.log('showZanTopTips', content, options)
+      this.subClass= 'zan-btn--' + type;
       let topTips = this.topTips || {}
       // 如果已经有一个计时器在了，就清理掉先
       if (topTips.timer) {
@@ -82,7 +83,7 @@ export default class zanToptips extends wepy.component {
         timer
       }
       toggle()
-    }
+    },
   }
 }
 </script>

src/pages/index.wpy

@@ -38,6 +38,7 @@
     <zanLoadmore :loading.sync="loading" :nodata.sync="noData" :nomore.sync="noMore" nodata_str="暂无数据"></zanLoadmore>
     <toast/>
     <inviteView :config.sync="inviteViewCfg" :btnList.sync="inviteBtns" @inviteBtnClick.user="inviteBtnClick" @needHideMe.user="hideInviteView"></inviteView>
+    <zanToptips/>
   </view>
 </template>
 
@@ -49,6 +50,7 @@
   import recentGame from '../components/recent-game';
   import zanLoadmore from '../components/zan-loadmore';
   import inviteView from '../components/invite-view';
+  import zanToptips from '../components/zan-toptips'
   import jcEvent from '../common/jc-event';
   import image from '../common/images';
   import global from '../common/global';
@@ -69,7 +71,8 @@
       recentGame: recentGame,
       myGame: recentGame,
       zanLoadmore: zanLoadmore,
-      inviteView: inviteView
+      inviteView: inviteView,
+      zanToptips: zanToptips
     };
 
     data = {
@@ -114,8 +117,10 @@
       },
       async showInviteView() {
         let userList = [];
+        let gameList = [];
         try {
           userList = await this.$parent.getShareDetail();
+          gameList = await this.myAchieveGames();
         } catch (err) {
           console.log('error get invite user list');
         }
@@ -131,6 +136,11 @@
             status = 1;
             contentTxt = '点击领取游戏'
           }
+          // if (i < gameList.length) {
+          //   status = 2;
+          //   contentTxt = '已领取';
+          //   btnTitle = '已领取'
+          // }
           this.inviteBtns.push({
             index: indexList[i],
             btnTitle: btnTitle,
@@ -148,6 +158,7 @@
       },
       inviteBtnClick(index) {
         console.log(`invite btn clicked: ${index}`);
+        this.getRandomGame();
       }
     };
     onPullDownRefresh() {
@@ -274,6 +285,9 @@
       this.current = 0;
       this.records = [];
     }
+    showTopTips(msg, type = 'info') {
+      this.$invoke('zanToptips', 'showZanTopTips', { content: msg, type: type})
+    }
     async getRecendGames() {
       try {
         let res = await http.post('/api/emulated/recent_games');
@@ -284,6 +298,21 @@
         console.log('error get recent games');
       }
     }
+    async getRandomGame() {
+      let self = this;
+      try {
+        let res = await http.post('/api/emulated/give_me_game');
+        console.log(res.record);
+        self.showTopTips('获取游戏成功');
+      } catch (err) {
+        console.log('error get recent games');
+        self.showTopTips('获取游戏失败', 'error');
+      }
+    }
+    async myAchieveGames() {
+      let res = await http.post('/api/emulated/my_achieve_game');
+      return res.records;
+    }
     async getMyGames() {
       try {
         let res = await http.post('/api/emulated/my_games');

src/style/zanui/btn.wxss

@@ -29,6 +29,13 @@
   border-color: #0a0;
 }
 
+.zan-btn--info {
+  color: #fff;
+  background-color: #3598dc;
+  border-color: #3598dc;
+}
+
+
 .zan-btn--warn {
   color: #fff;
   background-color: #f85;
@@ -41,6 +48,12 @@
   border-color: #e33;
 }
 
+.zan-btn--error {
+  color: #fff;
+  background-color: #f44;
+  border-color: #e33;
+}
+
 /* size */
 .zan-btn--small {
   display: inline-block;