我的成绩页面接口对接

assets/style/awards-list/personal-grade.less

 
 .personal-grade-wrap {
+  .wrap-container {
     width: 100%;
     /*min-height: 907px;*/
     background: url("../../img/stage3/personal-grade.png") no-repeat;
@@ -145,6 +146,7 @@
       display: flex;
       justify-content: center;
       margin-top: 54.5px;
+      margin-bottom: 30px;
       .task-item {
         width: 60px;
         display: flex;
@@ -186,4 +188,5 @@
       text-align: center;
       margin-bottom: 41px;
     }
+  }
 }
\ No newline at end of file

pages/awards-list/index.vue

@@ -11,7 +11,7 @@
     <!--已登录及个人未参加-->
     <div class="person-details" v-if="isLogin&&mainInfoType==1&&!isWeb">
       <div class="info">
-        <img src="https://test-file.yunqueyi.com/png/2019/9/19/1568874397547_45fff40f.png" alt="">
+        <img :src="myGrades.avatarImageUrl" alt="">
         <div class="right">
           <div class="name">{{mainInfo.name}}</div>
           <div class="hospital">{{mainInfo.hospitalName}}</div>
@@ -146,10 +146,11 @@
 
     },
     mounted() {
+      this.$rocNative.appInit();
+      this.isWeb = this.$rocNative.isWeb;
       this.getMainInfo();
       this.shareObj.shareUrl = location.href; //微信分享链接
       /*从app获取用户信息*/
-      this.$rocNative.appInit();
       this.getUserInfo();
       const _this = this
       window.__refresh = function(params) {
@@ -168,7 +169,12 @@
         })
       },
       goMyGrade() { //跳转我的成绩页
-        this.$router.push('/awards-list/personal-grade')
+        this.$router.push({
+          path: '/awards-list/personal-grade',
+          query: {
+            encyptId: this.mainInfo.encyptId
+          }
+        })
       },
       goRankList(type,hospitalType) { //跳转榜单页,type:1机构，2个人
         if (type == 1) {

pages/awards-list/personal-grade.vue

 <template>
   <section class="personal-grade-wrap">
+    <h5header
+      v-if="!isWeb"
+      title="云鹊奖2019"
+      :isOpacity="false"
+      :shareObj="shareObj"/>
+    <div class="wrap-container" :style="{ marginTop: isWeb?0:`${44+statusBarHeight}Px`}">
       <img src="~/assets/img/stage3/awards-title.png" alt="" class="title">
-    <img src="~/assets/img/stage3/awards-icon1.png" alt="" class="awards-grade">
+      <img :src="dealAwardsIcon()" alt="" class="awards-grade">
       <div class="personal-info">
-      <img src="https://test-file.yunqueyi.com/png/2019/9/19/1568874397547_45fff40f.png" alt="">
+        <img :src="myGrades.avatarImageUrl" alt="">
         <div class="right">
-        <p class="name">赵欢</p>
-        <p class="hospital">上海复旦大学附属中山医院</p>
+          <p class="name">{{myGrades.name}}</p>
+          <p class="hospital">{{myGrades.hospitalName}}</p>
         </div>
       </div>
-    <div class="join-num">活动总计参与人数:23432334</div>
+      <div class="join-num">活动总计参与人数:{{myGrades.count}}</div>
       <div class="grade-details">
         <div class="left">
-        <p class="title">您的成绩:</p>
+          <p class="title">{{isWeb?'TA':'您'}}的成绩:</p>
           <div class="item">
             <div class="line"></div>
             <div class="content">
               <p class="label">累计获得勤奋分</p>
-            <p class="grade">1809987</p>
+              <p class="grade">{{myGrades.diligence}}</p>
               <div class="trapezoid">
                 <p class="detail-bg"></p>
-              <p class="detail-text">超过95%的医生</p>
+                <p class="detail-text">超过{{myGrades.superCount||0}}%的医生</p>
               </div>
             </div>
           </div>
@@ -28,7 +34,7 @@
             <div class="line line168"></div>
             <div class="content">
               <p class="label">累计获得云鹊豆</p>
-            <p class="grade">3600</p>
+              <p class="grade">{{myGrades.bonus}}</p>
               <div class="detail">记得去云鹊豆中心进行兑换哦</div>
             </div>
           </div>
@@ -36,41 +42,96 @@
             <div class="line line168"></div>
             <div class="content">
               <p class="label">进每日TOP10</p>
-            <p class="grade">5次</p>
+              <p class="grade">{{myGrades.userDayTop10Count}}次</p>
               <div class="detail">拿奖拿到手发软 </div>
             </div>
           </div>
         </div>
         <div class="right">
-        <p>学无止境</p>
-        <p>学而不倦</p>
+          <p>{{rightText1}}</p>
+          <p>{{rightText2}}</p>
         </div>
       </div>
       <div class="task-details">
         <div class="task-item">
           <img src="~/assets/img/stage3/task-icon1.png" alt="">
-        <p class="num">13次</p>
+          <p class="num">{{myGrades.clockCount}}次</p>
           <p class="name">活动打卡</p>
         </div>
         <div class="task-item">
           <img src="~/assets/img/stage3/task-icon2.png" alt="">
-        <p class="num">12门</p>
+          <p class="num">{{myGrades.courseCount}}门</p>
           <p class="name"> 学习课程</p>
         </div>
         <div class="task-item">
           <img src="~/assets/img/stage3/task-icon3.png" alt="">
-        <p class="num">500人</p>
+          <p class="num">{{myGrades.inviteCount}}人</p>
           <p class="name">邀请好友</p>
         </div>
       </div>
-    <div class="share-btn">分享我的成绩</div>
-    <p class="footer-text">共同推进医防融合 齐心聚力机构发展</p>
+      <div class="share-btn" @click="share" v-if="!isWeb">分享我的成绩</div>
+      <p class="footer-text" v-if="!isWeb">共同推进医防融合 齐心聚力机构发展</p>
+    </div>
   </section>
 </template>
 
 <script>
+  import { getMyGrades } from '@/service/stage3Api';
+  import { wxShare } from '@/configs/wxShare';
+  import h5header from '@/components/h5header';
   export default {
-    name: "personal-grade"
+    name: "personal-grade",
+    components: {
+      h5header
+    },
+    data() {
+      return {
+        rightText1: '',//右侧文案
+        rightText2: '',//右侧文案
+        shareObj: wxShare,
+        isWeb: false
+      }
+    },
+    async asyncData({query}) {
+      const { data } = await getMyGrades({id: query.encyptId});
+      return {
+        encyptId: query.encyptId,//加密doctorId
+        myGrades: data
+      }
+    },
+    created() {
+    },
+    mounted() {
+      this.isWeb = this.$rocNative.isWeb;
+      this.shareObj.shareUrl = location.href; //微信分享链接
+      this.dealRightText();
+    },
+    methods: {
+      dealRightText() {
+        if(this.myGrades.superCount<=10) {
+          this.rightText1 = '勤学不辍';
+          this.rightText2 = '必有收获';
+        } else if(this.myGrades.superCount>=11&&this.myGrades.superCount<=40) {
+          this.rightText1 = '学无止境';
+          this.rightText2 = '不知疲倦';
+        } else if(this.myGrades.superCount>=41&&this.myGrades.superCount<=100) {
+          this.rightText1 = '学而不倦';
+          this.rightText2 = '可圈可点';
+        }
+      },
+      dealAwardsIcon() {
+        if(this.myGrades.superCount<=10) {
+          return require('../../assets/img/stage3/awards-icon3.png');
+        } else if(this.myGrades.superCount>=11&&this.myGrades.superCount<=40) {
+          return require('../../assets/img/stage3/awards-icon2.png');
+        } else if(this.myGrades.superCount>=41&&this.myGrades.superCount<=100) {
+          return require('../../assets/img/stage3/awards-icon2.png');
+        }
+      },
+      share() {
+        this.$rocNative.shareWechat(this.shareObj);
+      }
+    }
   }
 </script>
 

service/stage3Api.js

@@ -15,3 +15,11 @@ export const getMainRank = (parmas) => {
     params: parmas
   })
 }
+/*我的成绩*/
+export const getMyGrades = (data) => {
+  return request({
+    url: '/campaign/third/share/result',
+    method: 'post',
+    data: data
+  })
+}