GFRS-2591【前端】新增星路历程的部分代码，此版为开发完成，可以提交测试的版本。提交人--张齐

src/components/common/audioComponent.vue

@@ -6,6 +6,7 @@
       playsinline='true'
       webkit-playsinline='true'
       x5-playsinline='true'
+      loop="loop"
       :src='audioSrc'
     ></audio>
   </div>
@@ -13,11 +14,11 @@
 
 <script>
 export default {
-  name: "audioComponent",
+  name: 'audioComponent',
   data() {
     return {
-      audioSrc: "" // 音频文件的路径地址
+      audioSrc: '' // 音频文件的路径地址
-    };
+    }
   },
   methods: {
     /**
@@ -26,18 +27,18 @@ export default {
      * @Date:2021-08-17
      */
     autoPlayFunc(audioSrc) {
-      this.audioSrc = audioSrc;
+      this.audioSrc = audioSrc
-      var music = document.getElementById("audio");
+      var music = document.getElementById('audio')
-      var state = 0;
+      var state = 0
-      document.addEventListener("touchstart", function() {
+      document.addEventListener('touchstart', function() {
         if (state == 0) {
-          music.play();
+          music.play()
-          state = 1;
+          state = 1
         }
-      }, false);
+      }, false)
-      document.addEventListener("WeixinJSBridgeReady", function() {
+      document.addEventListener('WeixinJSBridgeReady', function() {
-        music.play();
+        music.play()
-      }, false);
+      }, false)
     },
 
     /**
@@ -46,10 +47,10 @@ export default {
      * @Date:2021-08-17
      */
     handlePlay(audioSrc) {
-      this.audioSrc = audioSrc;
+      this.audioSrc = audioSrc
-      var audio_dom = document.getElementById("audio");
+      var audio_dom = document.getElementById('audio')
-      audio_dom.load();
+      audio_dom.load()
-      audio_dom.play();
+      audio_dom.play()
     },
 
     /**
@@ -58,10 +59,10 @@ export default {
      * @Date:2021-08-17
      */
     handlePause() {
-      document.getElementById("audio").pause();
+      document.getElementById('audio').pause()
+    }
   }
 }
-};
 </script>
 
 <style scoped>

src/views/ebiz/laurelClub/StarProcess.vue

@@ -9,6 +9,23 @@
     <!--  引入音频组件   -->
     <audio-component ref='audioComponents'></audio-component>
 
+    <!--  下方轮播组件中，第四个页面中的职级变化列表模块  -->
+    <div class='agentGrade-change-div' v-if='currentCopy==3'>
+      <img class='time-line-img animate__animated animate__zoomIn animate__slow'
+           :src='fourthPageDataObj.imageObj.timeLineImg'
+           alt=''>
+      <div class='agentGrade-change-list animate__animated animate__fadeInLeft animate__slow'>
+        <div class='content' v-for='(item,index) in fourthPageDataObj.rankAllData' :key='index'>
+          <span class='time'>{{ item.startdate }}</span>
+          <span>这一天，<span class='name-or-agentGrade'>{{ item.name }}</span>达成<span
+            class='name-or-agentGrade'>{{ item.agentgrade | agentGrade(fourthPageDataObj.agentGradeEnumObj)
+            }}</span></span>
+          <span>{{ item.agentgrade | slogan(fourthPageDataObj.agentGradeEnumObj) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!--  轮播组件  -->
     <van-swipe @change='changeVanSwipeFunc' :loop='false' :show-indicators='false' :touchable='true' vertical>
       <!--  第一页   -->
       <van-swipe-item>
@@ -37,13 +54,13 @@
           <div v-if='globalDataObj.sex=="0"'>
             <div class='man-card-img animate__animated animate__bounceIn animate__delay-1s'>
               <div class='line line-first animate__animated animate__bounceInLeft'>我于
-                <span class='special-text'>{{ this.employDateYear }}</span>年
+                <span class='special-text'>{{ this.formatEmployDate.year }}</span>年
-                <span class='special-text'>{{ this.employDateMonth }}</span>月
+                <span class='special-text'>{{ this.formatEmployDate.month }}</span>月
-                <span class='special-text'>{{ this.employDateDay }}</span>日
+                <span class='special-text'>{{ this.formatEmployDate.day }}</span>日
               </div>
               <div class='line line-second animate__animated animate__bounceInLeft'>加入国富人寿</div>
               <div class='line line-third animate__animated animate__bounceInLeft'>至今已<span
-                class='special-text'>{{ this.employDateBetweenToday }}</span>天
+                class='special-text'>{{ this.formatEmployDate.employDateBetweenToday }}</span>天
               </div>
             </div>
             <img class='man-img animate__animated animate__zoomIn' :src='secondPageDataObj.imageObj.manImg' alt=''>
@@ -52,13 +69,13 @@
           <div v-if='globalDataObj.sex=="1"'>
             <div class='woman-card-img animate__animated animate__bounceIn animate__delay-1s'>
               <div class='line line-first animate__animated animate__bounceInLeft'>我于
-                <span class='special-text'>{{ this.employDateYear }}</span>年
+                <span class='special-text'>{{ this.formatEmployDate.year }}</span>年
-                <span class='special-text'>{{ this.employDateMonth }}</span>月
+                <span class='special-text'>{{ this.formatEmployDate.month }}</span>月
-                <span class='special-text'>{{ this.employDateDay }}</span>日
+                <span class='special-text'>{{ this.formatEmployDate.day }}</span>日
               </div>
               <div class='line line-second animate__animated animate__bounceInLeft'>加入国富人寿</div>
               <div class='line line-third animate__animated animate__bounceInLeft'>至今已<span
-                class='special-text'>{{ this.employDateBetweenToday }}</span>天
+                class='special-text'>{{ this.formatEmployDate.employDateBetweenToday }}</span>天
               </div>
             </div>
             <img class='woman-img animate__animated animate__zoomIn' :src='secondPageDataObj.imageObj.womanImg' alt=''>
@@ -97,20 +114,6 @@
       <van-swipe-item>
         <div class='fourth-page-background-img animate__animated animate__fadeIn' v-if='current==3'>
           <div class='Echart animate__animated animate__zoomIn'></div>
-          <div class='agentGrade-change-div'>
-            <img class='time-line-img animate__animated animate__zoomIn'
-                 :src='fourthPageDataObj.imageObj.timeLineImg'
-                 alt=''>
-            <div class='agentGrade-change-list animate__animated animate__fadeInLeft'>
-              <div class='content' v-for='(item,index) in fourthPageDataObj.rankAllData' :key='index'>
-                <span class='time'>{{ item.startdate }}</span>
-                <span>这一天，<span class='name-or-agentGrade'>{{ item.name }}</span>达成<span
-                  class='name-or-agentGrade'>{{ item.agentgrade | agentGrade(fourthPageDataObj.agentGradeEnumObj)
-                  }}</span></span>
-                <span>{{ item.agentgrade | slogan(fourthPageDataObj.agentGradeEnumObj) }}</span>
-              </div>
-            </div>
-          </div>
           <img class='down-arrow-img animate__animated animate__shakeY animate__slower animate__infinite'
                :src='globalDataObj.imageObj.downArrowImg'
                alt=''>
@@ -191,7 +194,7 @@
                  alt=''>
             <div class='name-likedNumber-fighting'>
             <span>亲，
-              <span class='name'>{{ globalDataObj.name }}</span> 收货点赞量为
+              <span class='name'>{{ globalDataObj.name }}</span> 收获点赞量为
               {{ sixthPageDataObj.likedNumber > 999 ? '999+' : sixthPageDataObj.likedNumber }}</span>
               <span>赶快为你的代理人点赞加油吧！</span>
             </div>
@@ -218,7 +221,8 @@ import {
   queryFavorDataUrl,
   editFavorDataUrl
 } from '@/api/ebiz/laurelClub/laurelClub'
-import { getAgentInfo } from '@/api/ebiz/my/my.js'
+import { getAgentInfo } from '@/api/ebiz/my/my'
+import { getSharingToken } from '@/api/ebiz/proposal/proposal'
 // 公共的图片路径
 import playMusicImg from '@/assets/images/starProcess/play-music-img.png' // 播放背景音乐图片的路径
 import closePlayMusicImg from '@/assets/images/starProcess/close-play-music-img.png' // 关闭播放背景音乐图片的路径
@@ -264,12 +268,17 @@ export default {
     audioComponent
   },
   data() {
-    let isWeixin = this.$utils.device().isWeixin //判断环境
+    //判断环境（判断当前是否在微信环境）
+    let isWeixin = this.$utils.device().isWeixin
+    //判断手机系统（判断当前是否是Iphone手机ios系统）
+    let isIphone = this.$utils.device().isIphone
     return {
-      isWeixin, // 判断当前是哪种环境（判断当前是否在微信环境中）
+      isWeixin, // 判断当前是哪种环境（判断当前是否在微信环境）
+      isIphone, // 判断当前是哪种手机系统（判断当前是否是Iphone手机ios系统）
       isPlayAudio: '', // 定义控制开启播放背景音乐或者关闭播放背景音乐的变量
       audioMusic: audioMusic, // 定义存储背景音乐的变量
       current: 0, // 当前轮播页的索引值
+      currentCopy: 0, // 创建一个新的存储当前轮播页的索引值的变量，仅用于控制当展示到第四个页面时，显示职级变化列表模块
       globalDataObj: {
         name: '', // 用户名称（这是公用数据，所以将这个变量定义在这里）
         sex: '', // 性别 0--男 1--女
@@ -329,11 +338,8 @@ export default {
     }
   },
   mounted() {
-    // console.log(this.$utils.device().isWeixin, 999999)
+    // 调用初始化时根据手机系统类型判断是否加载音频文件的方法以及一些设置右上角分享按钮的方法
-    // 设置开启播放背景音乐，显示播放背景音乐的图片
+    this.init()
-    this.isPlayAudio = true
-    // 调用媒体播放组件中的方法，播放背景音乐
-    // this.$refs.audioComponents.autoPlayFunc(this.audioMusic)
     // 调用查询个人数据的方法
     this.getAgentInfoFunc()
     // 调用查询桂冠个人数据的方法
@@ -344,6 +350,82 @@ export default {
     this.queryFavorDataFunc()
   },
   methods: {
+    /**
+     * @Description: 初始化加载一些设置右上角分享按钮的方法
+     * @author:zhangqi
+     * @Date:2021-09-02
+     */
+    init() {
+      // 判断当前操作系统是否是Iphone手机ios系统，
+      // 根据不同的系统判断页面初始化时，是否直接播放背景音乐
+      // 因为ios系统初始化无法自动播放音频文件，所以要展示关闭播放背景音乐的图片
+      if (this.isIphone) {
+        // 当前是ios系统，初始化时无法自动开启播放背景音乐，所以显示关闭播放背景音乐的图片
+        this.isPlayAudio = false
+      } else {
+        // 非ios系统，初始化时可以自动开启播放背景音乐，所以显示开启播放背景音乐的图片
+        this.isPlayAudio = true
+        // 非ios系统，初始化时，可以调用媒体播放组件中的方法，播放背景音乐
+        this.$refs.audioComponents.handlePlay(this.audioMusic)
+      }
+      // 初始化显示右上角分享按钮
+      this.loadRightTopShareBtnFunc()
+      // 加载点击右上角分享按钮时，触发的回调事件
+      window.appCallBack = this.appCallBack
+      // 如果当前是微信环境，则从路由中获取'token'重新存储在缓存中
+      if (this.isWeixin) {
+        localStorage.token = this.$route.query.token
+      }
+    },
+
+    /**
+     * @Description: 加载显示右上角分享按钮的方法
+     * @author:zhangqi
+     * @Date:2021-09-02
+     */
+    loadRightTopShareBtnFunc() {
+      setTimeout(() => {
+        this.$jump({
+          flag: 'webview_right_button',
+          extra: {
+            btns: [
+              {
+                img: this.$assetsUrl + 'images/share@3x.png',
+                route: { flag: '', extra: {} }
+              }
+            ]
+          }
+        })
+      }, 500)
+    },
+
+    /**
+     * @Description: 右上角分享按钮时，执行的回调方法
+     * @author:zhangqi
+     * @Date:2021-09-02
+     */
+    appCallBack(data) {
+      if (data.trigger == 'right_button_click') {
+        getSharingToken({ shareType: 'club_star_process' }).then(res => {
+          if (res.result == '0') {
+            window.EWebBridge.webCallAppInJs('bridge', {
+              flag: 'share',
+              extra: {
+                title: '点击开启' + this.globalDataObj.name + '的桂冠星路历程',
+                content: '因为国富，所以民安\n' +
+                  '广西人自己的寿险公司，\n' +
+                  '更懂广西人！',
+                url: location.origin + '/#/laurelClub/StarProcess?token=' + encodeURI(res.content),
+                img: this.$assetsUrl + 'images/logo.png'
+              }
+            })
+          } else {
+            return this.$toast(res.resultMessage)
+          }
+        })
+      }
+    },
+
     /**
      * @Description: 查询个人数据的方法
      * @author:zhangqi
@@ -478,12 +560,12 @@ export default {
         // 设置关闭播放背景音乐，显示关闭播放背景音乐的图片
         this.isPlayAudio = false
         // 调用媒体播放组件中的方法，关闭播放背景音乐
-        // this.$refs.audioComponents.handlePause()
+        this.$refs.audioComponents.handlePause()
       } else {
         // 设置开启播放背景音乐，显示播放背景音乐的图片
         this.isPlayAudio = true
         // 调用媒体播放组件中的方法，播放背景音乐
-        // this.$refs.audioComponents.handlePlay(audioMusic)
+        this.$refs.audioComponents.handlePlay(audioMusic)
       }
     },
 
@@ -501,33 +583,52 @@ export default {
           top: '7%', // 距离容器上侧的距离。
           left: '1%', // 距离容器左侧的距离。
           right: '4%', // 距离容器右侧的距离。
-          bottom: '15%', // 距离容器下侧的距离。
+          bottom: '2%', // 距离容器下侧的距离。
           containLabel: true // 区域是否包含坐标轴的刻度标签。
         },
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          // axisLabel: {
+          axisLine: {
-          //   interval: 0,
+            lineStyle: {
-          //   rotate: -20
+              color: '#FFCB6B'
-          // },
+            }
+          },
+          axisLabel: {
+            margin: 15,
+            formatter: function(value) {
+              let dataArr = value.split('-')
+              return dataArr[0] + '\n' + dataArr[1] + '-' + dataArr[2]
+            }
+          },
           data: this.fourthPageDataObj.xAxisData
         },
         yAxis: {
           type: 'category',
           boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#FFCB6B'
+            }
+          },
+          axisLabel: {
+            margin: 12
+          },
           data: ['CA', 'CM', 'AS', 'SAS', 'BM', 'SBM', 'BD']
         },
-        dataZoom: [{
-          show: true,
-          height: '18',
-          bottom: '5'
-        }],
         series: [{
           type: 'line',
-          areaStyle: {},
+          symbol: 'triangle',
+          symbolSize: 15,
+          lineStyle: {
+            color: '#FFCB6B',
+            width: 4,
+            type: 'dashed'
+          },
           itemStyle: {
-            color: '#A4E0F7'
+            borderWidth: 2,
+            borderColor: '#EE6666',
+            color: 'yellow'
           },
           data: this.fourthPageDataObj.seriesData
         }]
@@ -543,6 +644,9 @@ export default {
      * @Date:2021-08-27
      */
     changeVanSwipeFunc(index) {
+      // 给变量赋值，这个变量仅用于控制当展示到第四个页面时，显示职级变化列表模块。
+      // 因为'current'这个变量在下方赋值的时候有0.5秒的延迟，所以创建了这个新的变量
+      this.currentCopy = index
       setTimeout(() => {
         this.current = index
         // 当轮播图展示第四个页面时，要执行加载Ecahrts图形的方法
@@ -586,26 +690,18 @@ export default {
   },
   // 计算属性
   computed: {
-    // 根据变量计算获取‘年份’
+    // 根据变量计算获取时间的对象（格式化存储入职时间的变量，将其拆分出‘年份’，‘月份’，‘日期’和‘从入职日期算起距今日共经过了多少天’）
-    employDateYear: function() {
+    formatEmployDate() {
-      let year = new Date(this.globalDataObj.employDate).getFullYear()
+      let date = new Date(this.globalDataObj.employDate) //根据入职时间的变量数据创建新的时间对象
-      return year
+      // 根据变量计算，从入职日期算起距今日共经过了多少天(两个日期之间的相差天数)
-    },
+      let days = parseInt(new Date().getTime() / 1000) - date.getTime() / 1000
-    // 根据变量计算获取‘月份’
-    employDateMonth: function() {
-      let month = new Date(this.globalDataObj.employDate).getMonth()
-      return (month + 1) <= 9 ? '0' + (month + 1) : month + 1
-    },
-    // 根据变量计算获取‘日’
-    employDateDay: function() {
-      let date = new Date(this.globalDataObj.employDate).getDate()
-      return date <= 9 ? '0' + date : date
-    },
-    // 根据变量计算此变量日期距今日共经过了多少天(两个日期之间的相差天数)
-    employDateBetweenToday: function() {
-      let days = parseInt(new Date().getTime() / 1000) - new Date(this.globalDataObj.employDate).getTime() / 1000
       let timeDay = parseInt(days / 60 / 60 / 24) // 相差天数
-      return timeDay
+      return {
+        year: date.getFullYear(), // 获取‘年份’
+        month: (date.getMonth() + 1) <= 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1, // 获取‘月份’
+        day: date.getDate() <= 9 ? '0' + date.getDate() : date.getDate(), // 获取‘日期’
+        employDateBetweenToday: timeDay // 相差天数
+      }
     }
   },
   // 过滤器
@@ -657,6 +753,67 @@ export default {
   z-index: 1;
 }
 
+// 轮播组件中第四个页面中职级变化列表模块的样式
+.agentGrade-change-div {
+  height: 225px;
+  margin-top: 300px;
+  display: flex;
+  margin-left: 40px;
+  position: fixed;
+  z-index: 1;
+
+  .time-line-img {
+    height: 100%;
+  }
+
+  // 设置右侧滚动条的宽高
+  ::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+
+  // 设置右侧滚动条的颜色
+  ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:horizontal {
+    border-radius: 4px;
+    background: #FFFFFF;
+  }
+
+  .agentGrade-change-list {
+    margin-left: 13px;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      height: 65px;
+
+      span {
+        font-size: 14px;
+        color: #FFFFFF;
+        white-space: nowrap;
+      }
+
+      .time {
+        font-size: 16px;
+        color: #FFCB6B;
+      }
+
+      .name-or-agentGrade {
+        color: #FFCB6B;
+        font-size: 14px;
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+    }
+
+    .content + .content {
+      margin-top: 15px;
+    }
+  }
+}
+
 .van-swipe {
   height: 100vh;
 }
@@ -665,7 +822,7 @@ export default {
   width: 100%;
   min-height: 100vh;
   background: url('../../../assets/images/starProcess/background-img-1.png') no-repeat;
-  background-size: 100% 100%;
+  background-size: 100%;
   background-color: #181935;
   position: fixed;
 
@@ -712,7 +869,7 @@ export default {
   width: 100%;
   min-height: 100vh;
   background: url('../../../assets/images/starProcess/background-img-1.png') no-repeat;
-  background-size: 100% 100%;
+  background-size: 100%;
   background-color: #181935;
   position: fixed;
 
@@ -850,7 +1007,7 @@ export default {
   width: 100%;
   min-height: 100vh;
   background: url('../../../assets/images/starProcess/background-img-1.png') no-repeat;
-  background-size: 100% 100%;
+  background-size: 100%;
   background-color: #181935;
   position: fixed;
 
@@ -929,60 +1086,60 @@ export default {
   width: 100%;
   min-height: 100vh;
   background: url('../../../assets/images/starProcess/background-img-2.png') no-repeat;
-  background-size: 100% 100%;
+  background-size: 100%;
   background-color: #181935;
   position: fixed;
 
   .Echart {
-    width: 293px;
+    width: 350px;
     height: 187px;
-    background: #FFFFFF;
     margin: 0 auto;
     margin-top: 82px;
   }
 
-  .agentGrade-change-div {
+  //.agentGrade-change-div {
-    height: 220px;
+  //  height: 220px;
-    margin-top: 40px;
+  //  margin-top: 40px;
-    display: flex;
+  //  display: flex;
-    margin-left: 71px;
+  //  margin-left: 40px;
-
+  //
-    .time-line-img {
+  //  .time-line-img {
-      height: 100%;
+  //    height: 100%;
-    }
+  //  }
-
+  //
-    .agentGrade-change-list {
+  //  .agentGrade-change-list {
-      margin-left: 13px;
+  //    margin-left: 13px;
-
+  //
-      .content {
+  //    .content {
-        display: flex;
+  //      display: flex;
-        flex-direction: column;
+  //      flex-direction: column;
-        justify-content: space-between;
+  //      justify-content: space-between;
-        height: 65px;
+  //      height: 65px;
-
+  //
-        span {
+  //      span {
-          font-size: 14px;
+  //        font-size: 14px;
-          color: #FFFFFF;
+  //        color: #FFFFFF;
-        }
+  //        white-space: nowrap;
-
+  //      }
-        .time {
+  //
-          font-size: 16px;
+  //      .time {
-          color: #FFCB6B;
+  //        font-size: 16px;
-        }
+  //        color: #FFCB6B;
-
+  //      }
-        .name-or-agentGrade {
+  //
-          color: #FFCB6B;
+  //      .name-or-agentGrade {
-          font-size: 14px;
+  //        color: #FFCB6B;
-          padding-left: 8px;
+  //        font-size: 14px;
-          padding-right: 8px;
+  //        padding-left: 8px;
-        }
+  //        padding-right: 8px;
-      }
+  //      }
-
+  //    }
-      .content + .content {
+  //
-        margin-top: 15px;
+  //    .content + .content {
-      }
+  //      margin-top: 15px;
-    }
+  //    }
-  }
+  //  }
+  //}
 
   .down-arrow-img {
     width: 24px;
@@ -998,7 +1155,7 @@ export default {
   width: 100%;
   min-height: 100vh;
   background: url('../../../assets/images/starProcess/background-img-1.png') no-repeat;
-  background-size: 100% 100%;
+  background-size: 100%;
   background-color: #181935;
   position: fixed;
 
@@ -1089,7 +1246,7 @@ export default {
   width: 100%;
   min-height: 100vh;
   background: url('../../../assets/images/starProcess/background-img-2.png') no-repeat;
-  background-size: 100% 100%;
+  background-size: 100%;
   background-color: #181935;
   position: fixed;