封装明细排行页底部按钮组件

pages/hospital-ranking/index.less

@@ -159,25 +159,5 @@
         }
       }
     }
-    .footer-btn {
-      width: 100%;
-      height: 40px;
-      padding: 5px 0;
-      box-shadow:0px -1px 0px 0px rgba(237,237,237,1);
-      position: fixed;
-      bottom: 0;
-      .btn {
-        width: 345px;
-        height: 40px;
-        margin: 0 auto;
-        line-height: 40px;
-        text-align: center;
-        background: linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
-        border-radius: 20px;
-        color: #FFFFFF;
-        font-weight: 700;
-        font-size: 15px;
-      }
-    }
   }
 }
\ No newline at end of file

pages/hospital-ranking/index.vue

@@ -74,19 +74,22 @@
           <p class="num">{{itemD.score}}</p>
         </div>
       </div>
-      <div class="footer-btn">
-        <div class="btn">助力机构 创造佳绩</div>
-      </div>
+      <footer-button
+        :btnText="btnText"
+        :btnType="btnType">
+      </footer-button>
     </div>
   </section>
 </template>
 
 <script>
-  import RankingHeader from '@/components/ranking-header'
+  import RankingHeader from '@/components/ranking-header';
+  import FooterButton from '@/components/footer-button';
   export default {
     name: 'hospital-ranking',
     components: {
-      RankingHeader
+      RankingHeader,
+      FooterButton
     },
     data() {
       return {
@@ -100,7 +103,9 @@
         },
         activeBtnType: true, //true机构，false人员
         hospitalRanking: {},
-        contributionRanking: {}
+        contributionRanking: {},
+        btnText: '助力机构 创造佳绩',
+        btnType: true
       };
     },
     computed: {

pages/invite-details/index.less

@@ -238,26 +238,5 @@
         width: 300px;
       }
     }
-    .footer-btn {
-      width: 100%;
-      height: 40px;
-      padding: 5px 0;
-      box-shadow:0px -1px 0px 0px rgba(237,237,237,1);
-      position: fixed;
-      bottom: 0;
-      background: #fff;
-      .btn {
-        width: 345px;
-        height: 40px;
-        margin: 0 auto;
-        line-height: 40px;
-        text-align: center;
-        background: linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
-        border-radius: 20px;
-        color: #FFFFFF;
-        font-weight: 700;
-        font-size: 15px;
-      }
-    }
   }
 }
\ No newline at end of file

pages/invite-details/index.vue

@@ -50,8 +50,8 @@
             <p class="active-line" v-if="recordType==2"></p>
           </div>
         </div>
-        <div class="record-list">
-          <p class="sum" v-if="recordTotal">共{{recordTotal}}人</p>
+        <div class="record-list" v-if="inviteList.length">
+          <p class="sum">共{{recordTotal}}人</p>
           <div class="loadMore" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy"
                infinite-scroll-distance="10">
             <div class="record-item" v-if="inviteList.length" v-for="item in inviteList">
@@ -80,22 +80,24 @@
           <p v-if="recordType==1">提醒您的医生好友领取课程您将获得奖励哦！</p>
           <p v-if="recordType==2" class="text-get">提醒您的医生好友领取课程后登录云鹊医APP您将再获得奖励哦！</p>
         </div>
-        <div class="footer-btn">
-          <div class="btn">去邀请</div>
-        </div>
+        <footer-button
+          :btnText="btnText"
+          :btnType="btnType">
+        </footer-button>
       </div>
     </div>
   </section>
 </template>
 
 <script>
-
-  import NormalHeader from '@/components/normal-header'
-  import { getOneInviteDetails,getTwoInviteDetails } from '@/service/detailsAndRanking'
+  import NormalHeader from '@/components/normal-header';
+  import FooterButton from '@/components/footer-button';
+  import { getOneInviteDetails,getTwoInviteDetails } from '@/service/detailsAndRanking';
   export default {
     name: "index",
     components: {
-      NormalHeader
+      NormalHeader,
+      FooterButton,
     },
     data() {
       return {
@@ -110,6 +112,8 @@
         pageNo: 0,
         pageSize: 10,
         noMore: false,//分页参数--end
+        btnText: '去邀请',
+        btnType: true
       };
     },
     mounted() {

pages/person-detail/index.vue

@@ -57,7 +57,7 @@
       <div class="no-data" v-if="!personDetails.length">
         <img src="~/assets/img/icon-nodata.png" alt="">
         <p>暂无记录,您还没有参加活动</p>
-        <div class="button">立即参加</div>
+        <div class="button" @click="goInActivity">立即参加</div>
       </div>
     </div>
   </section>
@@ -92,6 +92,9 @@
       this.getPersonDetails();
     },
     methods: {
+      goInActivity() {
+        this.$router.push('/in-activity')
+      },
       detailTaskIcon(taskName) {
         if(taskName == '打卡') {
           return require('../../assets/img/person-detail/icon-invite.png')

pages/person-ranking/index.less

@@ -130,25 +130,5 @@
         }
       }
     }
-    .footer-btn {
-      width: 100%;
-      height: 40px;
-      padding: 5px 0;
-      box-shadow:0px -1px 0px 0px rgba(237,237,237,1);
-      position: fixed;
-      bottom: 0;
-      .btn {
-        width: 345px;
-        height: 40px;
-        margin: 0 auto;
-        line-height: 40px;
-        text-align: center;
-        background: linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
-        border-radius: 20px;
-        color: #FFFFFF;
-        font-weight: 700;
-        font-size: 15px;
-      }
-    }
   }
 }
\ No newline at end of file

pages/person-ranking/index.vue

@@ -46,19 +46,22 @@
           <p class="num">{{item.score}}</p>
         </div>
       </div>
-      <div class="footer-btn">
-        <div class="btn">获得更多勤奋分</div>
-      </div>
+      <footer-button
+        :btnText="btnText"
+        :btnType="btnType">
+      </footer-button>
     </div>
   </section>
 </template>
 
 <script>
-  import RankingHeader from '@/components/ranking-header'
+  import RankingHeader from '@/components/ranking-header';
+  import FooterButton from '@/components/footer-button';
   export default {
     name: 'person-ranking',
     components: {
-      RankingHeader
+      RankingHeader,
+      FooterButton
     },
     data() {
       return {
@@ -73,6 +76,8 @@
           rightName: '累计排行榜'
         },
         activeBtnType: true, //true今日，false累计
+        btnText: '获得更多勤奋分',
+        btnType: true
       };
     },
     computed: {
@@ -135,6 +140,11 @@
             }
           ],
         }
+        if(this.rankData.score) {
+          this.btnText = '获得更多勤奋分'
+        } else {
+          this.btnText = '参与活动得勤奋分'
+        }
       }
     },
   };

pages/yesterday-prize/index.less

@@ -80,24 +80,4 @@
     }
 
   }
-  .footer-btn {
-    width: 100%;
-    height: 40px;
-    padding: 5px 0;
-    box-shadow:0px -1px 0px 0px rgba(237,237,237,1);
-    position: fixed;
-    bottom: 0;
-    .btn {
-      width: 345px;
-      height: 40px;
-      margin: 0 auto;
-      line-height: 40px;
-      text-align: center;
-      background: linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
-      border-radius: 20px;
-      color: #FFFFFF;
-      font-weight: 700;
-      font-size: 15px;
-    }
-  }
 }
\ No newline at end of file

pages/yesterday-prize/index.vue

@@ -21,18 +21,21 @@
         </div>
       </div>
     </div>
-    <div class="footer-btn">
-      <div class="btn">今日我要拿奖</div>
-    </div>
+    <footer-button
+      :btnText="btnText"
+      :btnType="btnType">
+    </footer-button>
   </section>
 </template>
 
 <script>
-  import NormalHeader from '@/components/normal-header'
+  import NormalHeader from '@/components/normal-header';
+  import FooterButton from '@/components/footer-button';
   export default {
     name: "index",
     components: {
-      NormalHeader
+      NormalHeader,
+      FooterButton
     },
     data() {
       return {
@@ -41,7 +44,9 @@
         barHeight: 0,
         barColor: '#fff',
         rightText: '如何领奖',
-        rewardsList: []
+        rewardsList: [],
+        btnText: '今日我要拿奖',
+        btnType: true
       };
     },
     mounted() {