接入数据及数据处理

src/components/annual-summary/card-1.vue

 <template>
   <div class="card-1-wrapper">
     <Logo></Logo>
-    <div class="bgi-wrapper"><img src="~@/images/annual/page-1-back.png" alt="" /></div>
+    <div class="bgi-wrapper">
+      <img src="~@/images/annual/page-1-back.png" alt />
+    </div>
     <section class="detail">
-      <p class="title">尊敬的<span class="shareanimate" swiper-animate-effect="shareanimate" swiper-animate-duration="4s"  swiper-animate-delay="0s">齐天大圣</span>医生</p>
+      <p v-if="anualData.doctorName" class="title">
+        尊敬的
+        <span
+          class="shareanimate"
+          swiper-animate-effect="shareanimate"
+          swiper-animate-duration="4s"
+          swiper-animate-delay="0s"
+        >{{anualData.doctorName | shortName(5)}}</span>医生
+      </p>
+      <p v-if="!anualData.doctorName" class="title">
+        尊敬的医生
+      </p>
       <article class="shareanimate">
-        <p style="line-height: 2;">我们在一起已经<span class="fbig6 cg2">100</span>天啦</p>
-        <p class="mt-15"><span class="cg2 b">2018</span> 年 <span class="cg2 b">12</span> 月 <span class="cg2 b"> 1 </span>日</p>
+        <p style="line-height: 2;">
+          我们在一起已经
+          <span class="fbig6 cg2">{{anualData.registerDays}}</span> 天啦
+        </p>
+        <p class="mt-15">
+          <span class="cg2 b">{{parseTime(anualData.registerTime, '{yyyy}')}} </span>年
+          <span class="cg2 b">{{parseTime(anualData.registerTime, '{mm}')}} </span>月
+          <span class="cg2 b">{{parseTime(anualData.registerTime, '{dd}')}} </span>日
+        </p>
         <p>第一次遇见您</p>
-        <p class="mt-20"><span class="cg2 b">陈半仙</span> 老师的<span class="cg2 b">《我的大学》</span>课程</p>
-        <p>是您学习的第一门课；</p>
+        <p v-show="anualData.firstCourseName" class="mt-20">
+          <!-- <span class="cg2 b">陈半仙</span> 老师的 -->
+          <span class="cg2 b">《{{anualData.firstCourseName | shortName(10)}}》</span>课程
+        </p>
+        <p v-show="anualData.firstCourseName">是您学习的第一门课；</p>
       </article>
     </section>
   </div>
 </template>
 <script>
 import Logo from "@/components/annual-summary/logo";
+import { parseTime } from "@/utils"
 export default {
   components: {
     Logo
-  }
+  },
+  props: {
+    anualData: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  methods: {
+    parseTime(value, format) {
+      return parseTime(value, format);
+    }
+  },
 };
 </script>
 <style lang="less" scoped>

src/components/annual-summary/card-2.vue

@@ -4,12 +4,12 @@
     <div class="bgi-wrapper"><img src="~@/images/annual/page-2-back.png" alt="" /></div>
     <section class="detail">
       <div id="detail-content">
-        <p >2020年，您一共学习了</p>
-        <p class="mt-10"><span class="fbig6 cg2">100</span>  分钟</p>
-        <p><span class="fbig6 cg2">100</span>  课程</p>
-        <p><span class="fbig6 cg2">100</span>  文章</p>
-        <p class="mt-5">您最关注的学科</p>
-        <p class="cg2 b">内科内科内科</p>
+        <p >{{anualData.yearType}}年，您一共学习了</p>
+        <p class="mt-10"><span class="fbig6 cg2">{{anualData.loginTotalTimeM}}</span>  分钟</p>
+        <p v-show="anualData.learnCourseNum" ><span class="fbig6 cg2">{{anualData.learnCourseNum}}</span>  课程</p>
+        <p v-show="anualData.learnArticleNum"><span class="fbig6 cg2">{{anualData.learnArticleNum}}</span>  文章</p>
+        <p v-show="anualData.learnMoreCourseLabelName" class="mt-5">您最关注的学科</p>
+        <p v-show="anualData.learnMoreCourseLabelName" class="cg2 b">{{anualData.learnMoreCourseLabelName | shortName(10)}}</p>
       </div>
     </section>    
   </div>
@@ -20,6 +20,14 @@ export default {
   components: {
     Logo
   },
+  props: {
+    anualData: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
 }
 </script>
 <style lang="less" scoped>

src/components/annual-summary/card-3.vue

@@ -3,11 +3,11 @@
     <Logo></Logo>
     <div class="bgi-wrapper"><img src="~@/images/annual/page-3-back.png" alt="" /></div>
     <section class="detail">
-      <p>2020年，您通过使用</p>
+      <p>{{anualData.yearType}}年，您通过使用</p>
       <p class="mt-10 lh-25"><span class="fbig6 cg2">找药工具</span></p>
-      <p class="mt-5">开了 <span class="cg2 b">2018</span> 笔订单</p>
-      <p class="mt-5">服务了 <span class="cg2 b">2018</span> 居民增加了</p>
-      <p class="mt-5">增加了 <span class="cg2 b">2018</span> 收入</p>
+      <p class="mt-5">开了 <span class="cg2 b">{{anualData.orderNum}}</span> 笔订单</p>
+      <p class="mt-5">服务了 <span class="cg2 b">{{anualData.orderOfferPatientNum}}</span> 居民增加了</p>
+      <p class="mt-5">增加了 <span class="cg2 b">{{anualData.orderTotalAmountY | yLocalString}}</span> 收入</p>
     </section>    
   </div>
 </template>
@@ -17,6 +17,14 @@ export default {
   components: {
     Logo
   },
+  props: {
+    anualData: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
 }
 </script>
 <style lang="less" scoped>

src/components/annual-summary/card-4.vue

 <template>
   <div class="card-4-wrapper" :class="{'ysl': type == 1, 'zqc': type == 2, 'no': type == 3}">
-    <Logo imgType=2></Logo>
+    <Logo imgType="2"></Logo>
     <section class="detail">
-      <p v-show="title"><span class="fbig6 cw">{{title}}</span></p>
+      <p v-show="title">
+        <span class="fbig6 cw">{{title}}</span>
+      </p>
       <section class="ct">
-        <p><span class="fw7">12</span> 月 <span class="fw7">12</span> 日 <span class="fw7">12</span> 点，您还在学习。 </p>
+        <p>
+          <span class="fw7">{{parseTime(anualData.learnEarliestTime, '{mm}')}}</span> 月
+          <span class="fw7">{{parseTime(anualData.learnEarliestTime, '{dd}')}}</span> 日
+          <span class="fw7">{{parseTime(anualData.learnEarliestTime, '{hh}')}}</span> 点，您还在学习。
+        </p>
         <p>老师，您辛苦了！</p>
-        <p class="tr mt-40">这一年，有 <span class="fw7">10</span> 天，</p>
+        <p class="tr mt-40">
+          这一年，有
+          <span class="fw7">{{anualData.loginDays}}</span> 天，
+        </p>
         <p class="tr">您都在持续不断的学习。</p>
       </section>
-    </section>    
+    </section>
   </div>
 </template>
+
 <script>
+import { parseTime } from "@/utils"
 import Logo from "@/components/annual-summary/logo";
 export default {
   components: {
@@ -21,55 +32,85 @@ export default {
   props: {
     type: {
       type: Number | String,
-      default: 3,
+      default: 1
     },
-    title: {
-      type: String,
-      default: '' // 夜深了 早起床
+    anualData: {
+      type: Object,
+      default: () => {
+        return {};
+      }
     }
   },
 
-}
+  computed: {
+    title() {
+      let text = "";
+      if (this.type == 1) {
+        text = "夜深了";
+      } else if (this.type == 2) {
+        text = "早起床";
+      }
+      return text;
+    }
+  },
+  methods: {
+    parseTime(value, format) {
+      return parseTime(value, format);
+    }
+  },  
+};
 </script>
+
 <style lang="less" scoped>
 @import "../../style/as-common.less";
+
 .card-4-wrapper {
   position: relative;
   top: 0;
   left: 0;
   height: 100vh;
   font-size: 16px;
-  color: #3B3B3B;
+  color: #3b3b3b;
+
   &.ysl {
-    background: url('../../images/annual/page-4-back.png') no-repeat center center;
+    background: url("../../images/annual/page-4-back.png") no-repeat center
+      center;
     background-size: cover;
-    color: #FFFFFF;
-  }  
+    color: #ffffff;
+  }
+
   &.zqc {
-    background: url('../../images/annual/page-5-back.png') no-repeat center center;
+    background: url("../../images/annual/page-5-back.png") no-repeat center
+      center;
     background-size: cover;
-    color: #134A5D;
+    color: #134a5d;
   }
+
   &.no {
-    background: url('../../images/annual/page-6-back.png') no-repeat center center;
+    background: url("../../images/annual/page-6-back.png") no-repeat center
+      center;
     background-size: cover;
-    color: #FFFFFF;
+    color: #ffffff;
   }
+
   .detail {
     position: relative;
     top: 0;
     left: 0;
     z-index: 2;
     margin: 20px 30px;
+
     .ct {
       p {
         line-height: 1.6 !important;
       }
+
       margin-top: 20px;
+
       .tr {
         text-align: right;
       }
     }
   }
 }
-</style>
+</style>
\ No newline at end of file

src/components/annual-summary/card-5.vue

@@ -7,7 +7,7 @@
     </div>
     <section v-show="type == 1" class="detail">
       <p>这一年</p>
-      <p class="mg-30">您获得了 <span class="num">100</span> 个云鹊豆</p>
+      <p class="mg-30">您获得了 <span class="num">{{anualData.creditNum | yLocalString}}</span> 个云鹊豆</p>
       <p>在勤奋学习的同时，还积极参与活动，是收获颇丰的一年</p>
     </section>
     <section v-show="type == 2" class="detail">
@@ -24,9 +24,17 @@ export default {
     Logo
   },
   props: {
-    type: {
-      type: Number | String,
-      default: 2,     // 1: 已经获取云鹊豆;  2: 没有获取云鹊豆
+    anualData: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  computed: {
+    // 1: 已经获取云鹊豆;  2: 没有获取云鹊豆
+    type() {
+      return this.anualData.creditNum ? 1 : 2;
     }
   }
 }

src/components/annual-summary/card-6.vue

@@ -7,28 +7,31 @@
     </div>
     <section class="detail">
       <p class="title">2020年度学习报告</p>
-      <p>
+      <p v-if="anualData.doctorName">
         尊敬的
-        <span class="cg2 b">齐天大圣</span> 医生
+        <span class="cg2 b">{{anualData.doctorName}}</span> 医生
+      </p>
+      <p v-if="!anualData.doctorName">
+        尊敬的医生
       </p>
       <p>
-        2020年您学习了
-        <span class="cg2 b">10</span> 门课程，时长
-        <span class="cg2 b">10</span> 小时
+        {{anualData.yearType}}年您学习了
+        <span class="cg2 b">{{anualData.learnCourseNum}}</span> 门课程，时长
+        <span class="cg2 b">{{anualData.loginTotalTimeH}}</span> 小时
       </p>
       <p>
         获得了
-        <span class="cg2 b">10</span> 个云鹊豆
+        <span class="cg2 b">{{anualData.creditNum | yLocalString}}</span> 个云鹊豆
       </p>
-      <p>
+      <p v-if="anualData.learnMoreCourseLabelName">
         最关注的知识类型是：
-        <span class="cg2 b">10</span>
+        <span class="cg2 b">{{anualData.learnMoreCourseLabelName}}</span>
       </p>
-      <p class="mt-20">2020年极不平凡，回顾这一年也极为难得，这一年感谢有你。</p>
+      <p class="mt-20">{{anualData.yearType}}年极不平凡，回顾这一年也极为难得，这一年感谢有你。</p>
       <p>希望你的2021年也有云鹊医的陪伴，因为云鹊医的参与，生活变得平凡也珍贵。</p>
       <p class="mt-20">
         ——已陪伴你
-        <span class="cg2 b">10</span> 天的云鹊医
+        <span class="cg2 b">{{anualData.registerDays}}</span> 天的云鹊医
       </p>
     </section>
     <div class="qr-wrapper">
@@ -54,6 +57,12 @@ export default {
     type: {
       type: Number | String,
       default: 1 // 1: 站内;  2: 站外
+    },
+    anualData: {
+      type: Object,
+      default: () => {
+        return {};
+      }
     }
   },
   data() {
@@ -136,8 +145,9 @@ export default {
     }
   }
   .qr-wrapper {
-    position: relative;
-    top: 0;
+    width: 100%;
+    position: absolute;
+    top: 410px;
     left: 0;
     z-index: 1;
     text-align: center;

src/components/annual-summary/logo.vue

@@ -12,6 +12,10 @@ export default {
     imgType: {
       type: Number | String,
       default: 1
+    },
+    backType: {
+      type: Number | String,
+      default: 1  // 1: H5返回; 2: 原生返回
     }
   },
   data() {
@@ -21,8 +25,11 @@ export default {
   },
   methods: {
     back() {
-      // rocNative.goBack();
-      this.$router.back(-1);
+      if( backType == 1) {
+        this.$router.back(-1);
+      } else {
+        rocNative.goBack();
+      }
     }
   },
 };

src/utils/env-config.js

@@ -8,7 +8,7 @@ export const envConfig = {
     // baseUrl: 'http://10.177.15.180:10202/',
     // baseUrl: 'http://192.168.140.14:10201/',
 
-    baseUrl: 'https://test1-sc.yunqueyi.com/',
+    baseUrl: 'https://dev-sc.yunqueyi.com/',
     apiUrl: 'https://dev-api.yunqueyi.com/',
     webPageUrl: 'https://dev-phome.yunqueyi.com/',
     hactiveUrl: 'https://dev-hactive.yunqueyi.com',

src/views/annual-summary/detail.vue

 <template>
-    <div class="swiper-container">
-      <div class="swiper-wrapper">
-        <div class="swiper-slide">
-          <Card1></Card1>
-        </div>
-        <div class="swiper-slide">
-          <Card2></Card2>
-        </div>
-        <div class="swiper-slide">
-          <Card3></Card3>
-        </div>
-        <div class="swiper-slide">
-          <Card4></Card4>
-        </div>
-        <div class="swiper-slide">
-          <Card5></Card5>
-        </div>
-        <div class="swiper-slide">
-          <Card6></Card6>
-        </div>
+  <div class="swiper-container">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide">
+        <Card1 :anualData="anualData"></Card1>
+      </div>
+      <div class="swiper-slide">
+        <Card2 :anualData="anualData"></Card2>
+      </div>
+      <div v-if="anualData.orderNum" class="swiper-slide">
+        <Card3 :anualData="anualData"></Card3>
+      </div>
+      <div v-if="anualData.learnTime4Show" class="swiper-slide">
+        <Card4 :anualData="anualData"></Card4>
+      </div>
+      <div class="swiper-slide">
+        <Card5 :anualData="anualData"></Card5>
+      </div>
+      <div class="swiper-slide">
+        <Card6 :anualData="anualData"></Card6>
       </div>
-      <Loading v-show="showLoading" />
     </div>
+    <Loading v-show="showLoading" />
+  </div>
 </template>
 <script>
 import Loading from "@/components/common/common-loading";
@@ -52,9 +52,14 @@ export default {
   },
   data() {
     return {
+      token: "5EE5FA068BD646C687239ED119377185",
       isWeb: window.__isWeb,
       isInfresh: false,
-      showLoading: false
+      showLoading: false,
+      anualData: {
+        orderNum: 1,
+        learnTime4Show: 1
+      }
     };
   },
 
@@ -84,31 +89,7 @@ export default {
     _this.getUserInfo();
   },
 
-  mounted() {
-    new Swiper(".swiper-container", {
-      direction: "vertical",
-      speed: 300,
-      slidesPerView: 1,
-      // observer: true, //修改swiper自己或子元素时，自动初始化swiper
-      // observeParents: true //修改swiper的父元素时，自动初始化swiper
-      // // slidesPerGroup : 5,
-      on: {
-        init: function() {
-          swiperAnimateCache(this);
-          console.log('---111');
-          swiperAnimate(this);
-        },
-        slideChangeTransitionEnd: function(se) {
-          let activeIndex = se.activeIndex;
-          swiperAnimate(this);
-          console.log('---2323', se);
-          if (activeIndex == 1) {
-            document.getElementById('detail-content').className = 'shareanimate';
-          }
-        }
-      }
-    });
-  },
+  mounted() {},
 
   methods: {
     ...mapActions(["setUserInfo"]),
@@ -116,17 +97,87 @@ export default {
     // 获取数据
     initData() {
       let param = {
-        token: this.token,
+        token: this.token || "A0774D88168047CC9BE57B8BAB4F6F50",
+        yearType: "2020",
         setEntry: true
       };
-      // this.showLoading = true;
-      // this.GET(`portal/titleTest/user/getBrushTitleInfo/${this.secondSubjectId}`, param).then(res => {
-      //   if (res.code == "000000") {
-      // this.showLoading = false;
-      //   } else {
-      //     this.$toast(res.message);
-      //   }
-      // });
+      this.showLoading = true;
+      this.GET(`stats/year/end/report/app`, param).then(res => {
+        if (res.code == "000000") {
+          this.handlerDate(res.data || {});
+          this.$forceUpdate();
+          this.$nextTick(() => {
+            setTimeout(() => {
+              this.showLoading = false;
+              this.initSwiper();
+            }, 100);
+          });
+        } else {
+          this.$toast(res.message);
+        }
+      });
+    },
+
+    // 对数据进行处理
+    handlerDate(anualData) {
+      let learnTime4Show = 0,
+        loginTotalTime = 0,
+        loginTotalTimeM = 0,
+        loginTotalTimeH = 0,
+        orderTotalAmount = 0,
+        orderTotalAmountY = 0;
+      if (anualData.learnEarliestTimeFlag == 1) {
+        learnTime4Show = anualData.learnEarliestTime;
+      } else if (anualData.learnLatestTimeFlag == 1) {
+        learnTime4Show = anualData.learnLatestTime;
+      } else {
+        learnTime4Show =
+          anualData.learnEarliestTime || anualData.learnLatestTime;
+      }
+      anualData.learnTime4Show = learnTime4Show;
+
+      loginTotalTime = anualData.loginTotalTime || 0;
+      if (loginTotalTime) {
+        loginTotalTimeM = Math.floor(loginTotalTime / 1000);
+        loginTotalTimeH = Math.floor(loginTotalTime / 1000 / 60);
+      }
+      anualData.loginTotalTimeM = loginTotalTimeM;
+      anualData.loginTotalTimeH = loginTotalTimeH;
+
+      orderTotalAmount = anualData.orderTotalAmount;
+      if (orderTotalAmount) {
+        orderTotalAmountY = Math.floor(orderTotalAmount / 100);
+      }
+      anualData.orderTotalAmountY = orderTotalAmountY;
+      this.anualData = anualData;
+    },
+
+    // 初始化Swiper
+    initSwiper() {
+      new Swiper(".swiper-container", {
+        direction: "vertical",
+        speed: 300,
+        slidesPerView: 1,
+        // observer: true, //修改swiper自己或子元素时，自动初始化swiper
+        // observeParents: true //修改swiper的父元素时，自动初始化swiper
+        // // slidesPerGroup : 5,
+        on: {
+          init: function() {
+            swiperAnimateCache(this);
+            console.log("---111");
+            swiperAnimate(this);
+          },
+          slideChangeTransitionEnd: function(se) {
+            let activeIndex = se.activeIndex;
+            swiperAnimate(this);
+            console.log("---2323", se);
+            if (activeIndex == 1) {
+              document.getElementById("detail-content").className =
+                "shareanimate";
+            }
+          }
+        }
+      });
     },
 
     //获取用户信息
@@ -139,7 +190,7 @@ export default {
     // token是否失效校验
     checkToken() {
       let param = {
-        token: this.userInfo.userToken || this.token,
+        token: this.anualData.userToken || this.token,
         setEntry: true
       };
       this.GET("campaign/admin/task/checkToken", param).then(res => {

src/views/annual-summary/index.vue

 <template>
   <div class="as-index-wrapper">
-    <Logo imgType="2"></Logo>
+    <Logo imgType=2 backType=2></Logo>
     <div class="bgi-wrapper">
       <img src="~@/images/annual/index-back.png" alt />
     </div>
@@ -58,6 +58,7 @@ export default {
     return {
       isSelect: false,
       isHide: true,
+      isAndroid: window.__isAndroid,
     };
   },
   created() {
@@ -75,6 +76,15 @@ export default {
       this.isHide = true;
       console.log("__savePage2Picture", param);
     }
+
+    // 先调用存储权限（只有安卓手机需要）
+    this.isAndroid && rocNative.openExternalStoragePermission();
+
+    // 全局埋点--对外埋点
+    this.$sendBuriedData({
+      action: "ACTION_WEB_ENTER",
+      component_tag: `559#0#app`
+    });
   },
   methods: {
 

src/views/annual-summary/share.vue

 <template>
   <div class="as-share-wrapper">
-    <Card6 type="2"></Card6>
+    <Card6 type="2" :anualData="anualData"></Card6>
+    <Loading v-show="showLoading" />
   </div>
 </template>
 <script>
+import Loading from "@/components/common/common-loading";
 import Card6 from "@/components/annual-summary/card-6";
 import {
   getWebPageUrl
 } from "@/utils"
 export default {
   components: {
-    Card6
+    Card6,
+    Loading
   },
   data() {
     return {
       uuid: '',
       shareUrl: '',
+      showLoading: false,
+      anualData: {
+
+      }
     }
   },
   created() {
@@ -24,18 +31,77 @@ export default {
     if (uuidIndex > 0) {
       this.uuid = href.substr(uuidIndex + 5, 32);
     } else {
-      this.uuid = "07F9625472D6444EBAE4BF7D2EF83BC4";
+      this.uuid = "74ad500d5edf11eba76d000c29f14581"; // 测试用
     }
     this.shareUrl = location.href;
     if (href.indexOf("singlemessage") >= 0 || href.indexOf("wx_code") >= 0) {
-      this.shareUrl = getWebPageUrl(`profexam/#/sharecoop?uuid=${this.uuid}`);
+      this.shareUrl = getWebPageUrl(`profexam/#/as-share?uuid=${this.uuid}`);
       location.replace(this.shareUrl);
     }
+    this.initData();
     // 设置二次分享
     this.secondShare();
+
+    // 全局埋点--对外埋点
+    this.$sendBuriedData({
+      action: "ACTION_WEB_ENTER",
+      component_tag: `561#0#${this.uuid}`
+    });
+
   },
 
   methods: {
+    // 获取数据
+    initData() {
+      let param = {
+        uuid: this.uuid,
+      };
+      this.showLoading = true;
+      this.GET(`stats/year/end/report/share`, param).then(res => {
+        if (res.code == "000000") {
+          this.showLoading = false;
+          this.handlerDate(res.data || {});
+        } else {
+          this.$toast(res.message);
+        }
+      });
+    },
+
+    // 对数据进行处理
+    handlerDate(anualData) {
+      let learnTime4Show = 0,
+        loginTotalTime = 0,
+        loginTotalTimeM = 0,
+        loginTotalTimeH = 0,
+        orderTotalAmount = 0,
+        orderTotalAmountY = 0;
+      if (anualData.learnEarliestTimeFlag == 1) {
+        learnTime4Show = anualData.learnEarliestTime;
+      } else if (anualData.learnLatestTimeFlag == 1) {
+        learnTime4Show = anualData.learnLatestTime;
+      } else {
+        learnTime4Show =
+          anualData.learnEarliestTime || anualData.learnLatestTime;
+      }
+      anualData.learnTime4Show = learnTime4Show;
+
+      loginTotalTime = anualData.loginTotalTime || 0;
+      if (loginTotalTime) {
+        loginTotalTimeM = Math.floor(loginTotalTime / 1000);
+        loginTotalTimeH = Math.floor(loginTotalTime / 1000 / 60);
+      }
+      anualData.loginTotalTimeM = loginTotalTimeM;
+      anualData.loginTotalTimeH = loginTotalTimeH;
+
+      orderTotalAmount = anualData.orderTotalAmount;
+      if (orderTotalAmount) {
+        orderTotalAmountY = Math.floor(orderTotalAmount / 100);
+      }
+      anualData.orderTotalAmountY = orderTotalAmountY;
+      this.anualData = anualData;
+    },
+
+    // 二次分享
     secondShare() {
       this.wechatShare(
         {