立即报名添加公众号关注引导

src/main.js

@@ -5,8 +5,8 @@ import store from './store'
 import axios from 'axios'
 import wx from 'weixin-js-sdk'
 import api from "@/components/axios/api"
-// import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
-// let vConsole = new VConsole() // 初始化
+import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
+let vConsole = new VConsole() // 初始化
 
 
 Vue.config.productionTip = false

src/views/PartakeChallenge.vue

@@ -7,7 +7,7 @@
       <div class="game-choose-section">
         <div class="choose-title">每日达标</div>
         <div class="choose-content">
-          <div v-for="(item, index) in partakeStepList" :class="['choose-option', index===partakeStepIndex?'check':'']" @click="chooseAttribute('partakeStepIndex', index)">{{item.step}}</div>
+          <div v-for="(item, index) in partakeStepList" :class="['choose-option', index===partakeStepIndex?'check':'']" @click="chooseAttribute('partakeStepIndex', index)">{{item.step}}步</div>
         </div>
       </div>
       <div class="game-choose-section">
@@ -19,7 +19,7 @@
       <div class="game-choose-section">
         <div class="choose-title">每日契约金</div>
         <div class="choose-content">
-          <div v-for="(item, index) in partakeMoneyList" :class="['choose-option', index===partakeMoneyIndex?'check':'']" @click="chooseAttribute('partakeMoneyIndex', index)">{{item.money}}天</div>
+          <div v-for="(item, index) in partakeMoneyList" :class="['choose-option', index===partakeMoneyIndex?'check':'']" @click="chooseAttribute('partakeMoneyIndex', index)">{{item.money}}元</div>
         </div>
       </div>
       <div class="game-total-fee-container">
@@ -76,6 +76,19 @@
     <div class="modal" v-if="modalShown">
       <Modal v-on:close="closeModal" v-on:confirmModal="confirmModal" v-bind:title="modalTitle" v-bind:desc="modalDesc" :option="modalOption"></Modal>
     </div>
+    <!-- 没有关注公众号弹窗 -->
+    <div class="game-status-popup" v-if="needFollow">
+      <div class="game-status-container">
+        <div class="status-date">请关注公众号报名</div>
+        <img :src="followInfo.img_url" alt="" class="img_code">
+        <div class="follow-tip">
+          <p>由于在公众号内才能获取运动数据</p>
+          <p>请长按上方二维码关注公众号后报名</p>
+        </div>
+        <img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()">
+      </div>
+    </div>
+    <img :src="followInfo.img_url" alt="" style="display: none"> 
   </div>
 </template>
 
@@ -112,10 +125,16 @@ export default {
       preMinMoney: 0,
       preMaxMoney: 0,
       startTimeStamp: 0,
+      followInfo: {},
+      needFollow: false
     };
   },
   created() {
     this.getPageData();
+    let followInfo = sessionStorage.getItem('followInfo')
+    if(followInfo){
+      this.followInfo = JSON.parse(followInfo)
+    }
   },
   methods: {
     // 加载页面数据
@@ -172,6 +191,10 @@ export default {
     },
     // 立即报名
     payToSign() {
+      if(!this.followInfo.follow){
+        this.needFollow = true
+        return 
+      } 
       if (!this.argeement) {
         return this.showModal("温馨提示", "请先同意协议");
       }
@@ -246,7 +269,10 @@ export default {
         return "0.00";
       }
     }
-  }
+  },
+  closePopup() {
+      this.needFollow = false;
+  },
 };
 </script>
 
@@ -450,4 +476,82 @@ export default {
     }
   }
 }
+.game-status-popup {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 998;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .game-status-container {
+    position: relative;
+    width: 6.4rem;
+    height: 7.08rem;
+    background: url(../images/SignUp/follow_modal.png) no-repeat center center;
+    background-size: cover;
+    border-radius: 0.08rem;
+    padding-bottom: 0.4rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    .img_code{
+      position: absolute;
+      top:2.62rem;
+      width: 2.2rem;
+      height: 2.2rem;
+    }
+    .follow-tip{
+      position: absolute;
+      bottom: .7rem;
+      font-size: .3rem;
+      font-weight: bold;
+      line-height: .46rem;
+      text-align: center;
+    }
+    .status-icon {
+      width: 5.08rem;
+      height: 2.58rem;
+      margin-top: -1.29rem;
+    }
+    .join-success-banner {
+      width: 5.44rem;
+      height: 3.18rem;
+      margin-top: 0.3rem;
+    }
+    .status-date {
+      font-size: 0.36rem;
+      line-height: 1;
+      color: #fff;
+      font-weight: bold;
+      text-align: center;
+      margin-top: 0.7rem;
+    }
+    .status-money {
+      width: 5.04rem;
+      height: 2.84rem;
+      background-image: url(../images/HaveJoinedGame/pop_gxdb_board.png);
+      background-size: 100%;
+      margin-top: 0.42rem;
+    }
+    .green-btn {
+      background: #1fdbb1;
+    }
+    .yellow-btn {
+      background: #fabd21;
+    }
+    .close-btn {
+      width: 0.58rem;
+      height: 0.58rem;
+      position: absolute;
+      top: -.88rem;
+      right: 0
+    }
+  }
+}
 </style>

src/views/SignUp.vue

@@ -135,6 +135,7 @@ export default {
         console.log(res);
         if (res.code == 0) {
           this.followInfo = res.data
+          sessionStorage.setItem('followInfo',JSON.stringify(res.data))
         }
       });
     },