增加关注公众号弹窗

src/components/axios/api.js

@@ -434,6 +434,16 @@ export function daka_info(){
   })
 }
 
+//检查用户是否关注过公众号，是否需要弹窗
+export function select_follow(){
+  return fetch({
+      url: api.select_follow,
+      method: 'GET',
+      params: {
+      }
+  })
+}
+
 
 //有新接口的时候像上面那样再来一次
 // //修改昵称接口

src/components/axios/url.js

@@ -77,4 +77,6 @@ export default {
     pop_up_windows: `${api}/api/v1/pop_up_windows`,
     //首页第一项立即报名
     daka_info: `${api}/api/v1/daka_info`,
+    //检查用户是否关注过公众号，是否需要弹窗
+    select_follow: `${api}/api/v1/select_follow`,
 }
\ No newline at end of file

src/views/SignUp.vue

@@ -10,9 +10,7 @@
       <img class="corner-marker" src="../images/SignUp/home_tag_zmz.png" v-if="item.status===1">
       <img class="corner-marker" src="../images/SignUp/home_tag_yjs.png" v-if="item.status===2">
       <div class="card-title">{{item.action}}期耐力赛</div>
-      <div
-        class="card-time"
-      >{{item.already_join===1?'已参赛':'未参赛'}} {{item.period_start}} - {{item.period_end}}</div>
+      <div class="card-time">{{item.already_join===1?'已参赛':'未参赛'}} {{item.period_start}} - {{item.period_end}}</div>
       <div class="card-info">
         <div class="info-item" v-if="item.status===0||item.status===2">
           <div class="item-title">达标人数</div>
@@ -28,33 +26,29 @@
         </div>
       </div>
       <!--      0 比赛中  1 未开始  2 已结束-->
-      <div
-        class="card-btn"
-        v-if="item.status===1&&item.already_join===0"
-        data-item="item"
-        @click="goOtherPage('PartakeChallenge')"
-      >
+      <div class="card-btn" v-if="item.status===1&&item.already_join===0" data-item="item" @click="goOtherPage('PartakeChallenge')">
         <div class="btn-title">参与挑战</div>
       </div>
-      <div
-        class="card-btn"
-        v-if="item.status===1&&item.already_join===1"
-        data-item="item"
-        @click="goWhereDetail(item)"
-      >已报名</div>
-      <div
-        class="statusnormal"
-        v-if="item.status===2 || item.status===0 || item.status===3"
-        @click="goWhereDetail(item)"
-      >
+      <div class="card-btn" v-if="item.status===1&&item.already_join===1" data-item="item" @click="goWhereDetail(item)">已报名</div>
+      <div class="statusnormal" v-if="item.status===2 || item.status===0 || item.status===3" @click="goWhereDetail(item)">
         {{(item.status===2 || item.status===0)
         ? (item.status===0&&item.already_join===1) ? '立即打卡': '查看详情' : '已淘汰'}}
-        <img
-          src="../images/SignUp/detail_bg.png"
-          alt=""
-        >
+        <img src="../images/SignUp/detail_bg.png" alt="">
       </div>
     </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>
 
@@ -63,7 +57,14 @@ import NoticeBonus from "@/components/NoticeBonus.vue";
 import Free from "@/components/Free.vue";
 import Modal from "@/components/Modal.vue";
 import PayFailModal from "@/components/PayFailModal.vue";
-import { dakaPay, track, userCards, daka_index } from "@/components/axios/api";
+import {
+  dakaPay,
+  track,
+  userCards,
+  daka_index,
+  select_follow
+} from "@/components/axios/api";
+import { constants } from "crypto";
 
 export default {
   name: "SignUp",
@@ -83,15 +84,22 @@ export default {
       current_date: {},
       isShowPayFail: false,
       isFollow: false,
-
       gameList: [],
+      followInfo: {
+      },
+      needFollow: false
     };
   },
   created() {
     this.getPageData();
+    this.getFollowInfo();
   },
   methods: {
     goOtherPage(pageName) {
+      if(!this.followInfo.follow){
+        this.needFollow = true
+        return 
+      } 
       console.log("pageName", pageName);
       this.$router.push({ name: pageName });
     },
@@ -115,13 +123,21 @@ export default {
             }
           });
         } else {
-          console.log('item',item)
+          console.log("item", item);
           // 未报名
           sessionStorage.setItem("ChallengeDetailData", JSON.stringify(item));
           this.$router.push({ name: "ChallengeDetail" });
         }
       }
     },
+    getFollowInfo() {
+      select_follow().then(res => {
+        console.log(res);
+        if (res.code == 0) {
+          this.followInfo = res.data
+        }
+      });
+    },
     getPageData() {
       daka_index().then(res => {
         if (res.code === 0) {
@@ -247,7 +263,10 @@ export default {
           );
         }
       });
-    }
+    },
+    closePopup() {
+      this.needFollow = false;
+    },
   }
 };
 </script>
@@ -412,4 +431,83 @@ 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;
+      bottom: -1.08rem;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+}
 </style>