比赛详情页自动显示底部 & 我的页面新增一栏 & 打卡记录页文字和状态

src/views/HaveJoinedGame.vue

 <template>
+  <div class="have-joined-game-page-scroll">
     <div class="have-joined-game-page">
       <Title class="page-title" @goback="goback" show_back="true" v-if="currentPage()==='HaveJoinedGame'"></Title>
       <div class="game-rule-container" @click="goOtherPage('Rule')">
@@ -18,8 +19,6 @@
         <div class="target-people-text">已有{{total_signup}}人参赛</div>
       </div>
       <div class="hr"></div>
-    <!--        <div style="height: 2.68rem;">v-if="showSwiper" -->
-
       <swiper :options="swiperOption" ref="mySwiper" class="game-scroll-container" v-show="showSwiper">
         <swiper-slide v-for="(item,index) in record_list" :key="index">
           <div class="game-scroll-item">
@@ -44,7 +43,7 @@
               <template v-else>
                 <div class="item-progress" :style="'width: '+item.rate/100*2.46+'rem;'" v-if="index ==0 || (index > 0 && record_list[index-1].status != 3)"></div>
                 <div class="item-num">
-                <!--                                //已淘汰 1-->
+                  <!-- 已淘汰 1-->
                   <!-- 0: 未开始  1:比赛中  2:已结束  3:已淘汰-->
                   <span v-if="item.is_complete == 2">未达标({{item.step_num}}步)</span>
                   <span v-else-if="item.status == 3 && item.is_complete != 2">已失去比赛资格</span>
@@ -59,7 +58,6 @@
         </swiper-slide>
         <div class="swiper-pagination" slot="pagination" style="opacity: 0"></div>
       </swiper>
-    <!--        </div>-->
       <div class="func-btn green-btn" @click="inviteFriend" v-if="record_list.length&&record_list[0].status === 0">邀请好友来参赛</div>
       <div class="func-btn" @click="goOtherPage('GoXCX')" v-else>提交今日步数</div>
       <div class="next-func-btn" v-if="next_signup" @click="joinNextGame()">报名下一期</div>
@@ -116,6 +114,7 @@
       </div>
       <ShareModal v-on:close="closeShareModal" v-if="showShareModal"></ShareModal>
     </div>
+  </div>
 </template>
 
 <script>
@@ -175,15 +174,7 @@ export default {
       this.userHavePaidGame = true;
     }
   },
-  computed: {
-    swiper() {
-      return this.$refs.mySwiper.swiper;
-    }
-  },
   mounted() {
-    setTimeout(() => {
-      this.swiper.slideTo(this.current_day, 1200, false);
-    }, 800);
     if (window["userData"]) {
       this.userData = window["userData"];
     } else {
@@ -194,6 +185,17 @@ export default {
       }
     }
   },
+  updated() {
+    // 显示页面最底部
+    this.$nextTick(function(){
+      document.getElementsByClassName('have-joined-game-page-scroll')[0].scrollTop = document.body.scrollHeight;
+    })
+  },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiper.swiper;
+    }
+  },
   methods: {
     joinNextGame() {
       this.$router.push({
@@ -242,6 +244,9 @@ export default {
           this.record_list = pageData.record_list;
           this.current_day = pageData.current_day - 1;
           this.showSwiper = true;
+          setTimeout(() => {
+            this.swiper.slideTo(this.current_day, 1200, false);
+          }, 800);
         }
       });
     },
@@ -382,8 +387,11 @@ export default {
   height: 2.68rem;
 }
 
-.have-joined-game-page {
-  // width: 100%;
+.have-joined-game-page-scroll {
+  height: 100vh;
+  overflow-y: scroll;
+  .have-joined-game-page {
+    width: 100%;
     min-height: 100vh;
     background-color: rgb(70, 88, 149);
     background-image: url(../images/SignUp/sy_beijing.png);
@@ -393,54 +401,45 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
-  overflow: hidden;
     position: relative;
-  padding-bottom: 50px;
+    padding-bottom: .3rem;
+    box-sizing: border-box;
+    .page-title {
+      width: 100%;
+      position: fixed;
+      left: 0;
+      top: 0;
+      z-index: 2;
+    }
     .game-rule-container {
       display: flex;
       align-items: center;
-    position: absolute;
-    top: 0.3rem;
+      position: fixed;
+      top: 0.34rem;
       right: 0.22rem;
       font-size: 0.26rem;
       line-height: 1;
       color: #465895;
-
+      z-index: 3;
       img {
         width: 0.3rem;
         height: 0.3rem;
         margin-right: 0.1rem;
       }
-
-    .page-title {
-      width: 100%;
-      position: fixed;
-      left: 0;
-      top: 0;
-    }
     }
-
     .game-bonus-container {
       width: 6.4rem;
       padding: 0.3rem 0;
       box-sizing: border-box;
       background: url("../images/SignUp/shadow-bg.png") no-repeat center center;
       background-size: contain;
-    /*background: linear-gradient(*/
-    /*  90deg,*/
-    /*  rgba(255, 255, 255, 0),*/
-    /*  #1a285a,*/
-    /*  rgba(255, 255, 255, 0)*/
-    /*);*/
       margin-top: 2.38rem;
-
       .bonus-title {
         font-size: 0.3rem;
         line-height: 1;
         color: #fff;
         text-align: center;
       }
-
       .bonus-amount {
         font-size: 0.64rem;
         line-height: 0.8;
@@ -649,6 +648,7 @@ export default {
       text-align: center;
       margin-top: 0.3rem;
     }
+  }
 }
 
 .game-status-popup {

src/views/Record.vue

@@ -9,7 +9,7 @@
       </div>
       <div class="other-info-container">
         <div class="other-info-item">
-          <div class="title">参赛期数</div>
+          <div class="title">完赛期数</div>
           <div class="content">{{recordTotal.total}}</div>
         </div>
         <div class="other-info-item">
@@ -31,7 +31,7 @@
             <div class="item-content-point">{{item.money | moneyFormatter}}</div>
           </div>
           <div class="detail-item">
-            <div class="item-title">{{(item.at_present===1||item.at_present===3)?'结算步数':'当前步数'}}</div>
+            <div class="item-title">{{(item.at_present===0||item.at_present===1)?'结算步数':'当前步数'}}</div>
             <div class="item-content">{{item.steps || 0}}</div>
           </div>
           <div class="detail-item">
@@ -39,10 +39,11 @@
             <div class="item-content">{{item.daka_count || 0}}</div>
           </div>
         </div>
-        <img class="corner-marker" src="../images/Record/status0.png" v-if="item.at_present === 2">
+        <!-- at_present => 0: 已淘汰  1:已结束  2:比赛中  3:未开始-->
+        <img class="corner-marker" src="../images/Record/status0.png" v-if="item.at_present === 0">
         <img class="corner-marker" src="../images/Record/status1.png" v-else-if="item.at_present === 1">
-        <img class="corner-marker" src="../images/Record/status2.png" v-else-if="item.at_present === 3">
-        <img class="corner-marker" src="../images/Record/status3.png" v-else-if="item.at_present === 0">
+        <img class="corner-marker" src="../images/Record/status2.png" v-else-if="item.at_present === 2">
+        <img class="corner-marker" src="../images/Record/status3.png" v-else-if="item.at_present === 3">
       </div>
       <div class="no-more-list">没有更多数据啦~</div>
     </div>

src/views/Rule.vue

@@ -35,7 +35,6 @@ export default {
   data() {
     return {};
   },
-  mounted() {},
   methods: {
     goback() {
       history.go(-1);

src/views/UserCenter.vue

@@ -79,31 +79,36 @@
         userData: {},
         btnList: [
           {
-            icon: require("../assets/ic_my_wallet.png"),
+            icon: require("../images/UserCenter/ic_my_wallet.png"),
             text: "钱包",
             money: "0",
             router: "Wallet"
           },
           {
-            icon: require("../assets/ic_my_record.png"),
+            icon: require("../images/UserCenter/ic_my_record.png"),
             text: "我的打卡记录",
             router: "Record"
           },
           {
-            icon: require("../assets/ic_my_que.png"),
+            icon: require("../images/UserCenter/ic_my_que.png"),
             text: "常见问题",
             router: "Question"
           },
           {
-            icon: require("../assets/ic_my_connect.png"),
+            icon: require("../images/UserCenter/ic_my_connect.png"),
             text: "联系我们",
             isKefu: 1
           },
           {
-            icon: require("../assets/ic_my_code.png"),
+            icon: require("../images/UserCenter/ic_my_code.png"),
             text: "关注公众号",
             isKefu: 2
           },
+          {
+            icon: require("../images/UserCenter/ic_my_daka.png"),
+            text: "提交今日步数",
+            router: "GoXCX"
+          },
         ]
       }
     },