GFRS-2591【前端】新增星路历程的部分代码与图片。提交人--张齐

2025-12-25 06:02:52 +08:00 · 2021-09-01 23:25:30 +08:00
parent 7471b9768c
commit ffe063f777
5 changed files with 409 additions and 95 deletions
--- a/src/api/ebiz/laurelClub/laurelClub.js
+++ b/src/api/ebiz/laurelClub/laurelClub.js
@@ -95,11 +95,12 @@ export function getPayTemp(data) {
 //
 export function getShareParam(data) {
  return request({
-    url: getUrl('/customer/account/getShareParam', 1),  
+    url: getUrl('/customer/account/getShareParam', 1),
    method: 'post',
    data
  })
 }
+
 // 更新险种文档阅读状态
 export function saveOrUpdateDocument(data) {
  return request({
@@ -126,6 +127,7 @@ export function revokeOrder(data) {
    data
  })
 }
+
 //--------以上不属于桂冠俱乐部----------------
 //桂冠俱乐部

@@ -155,6 +157,7 @@ export function getBranchByUser(data) {
    data
  })
 }
+
 // 查询个人数据
 export function queryPersonal(data) {
  return request({
@@ -163,6 +166,7 @@ export function queryPersonal(data) {
    data
  })
 }
+
 // 查询团队数据
 export function queryTeamList(data) {
  return request({
@@ -179,4 +183,34 @@ export function queryPosterDataUrl(data) {
    method: 'post',
    data
  })
-}
+}
+
+// 查询职级变化的接口
+export function queryStarCourseDataUrl(data) {
+  return request({
+    url: getUrl('/agent/laure/queryStarCourse', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 星路历程查询代理人点赞数量
+export function queryFavorDataUrl(data) {
+  return request({
+    url: getUrl('/agent/laure/queryFavor', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 星路历程修改点赞数量的接口
+export function editFavorDataUrl(data) {
+  return request({
+    url: getUrl('/agent/laure/editFavor', 1),
+    method: 'post',
+    data
+  })
+}
+
+
+
--- a/src/assets/audio/audio-star-process-music.mp3
+++ b/src/assets/audio/audio-star-process-music.mp3
--- a/src/assets/images/starProcess/time-line-img.png
+++ b/src/assets/images/starProcess/time-line-img.png
--- a/src/components/common/audioComponent.vue
+++ b/src/components/common/audioComponent.vue
@@ -1,6 +1,5 @@
 <template>
-  <div class='audio-container' id='my_div'>
-    <!--    :src='audioSrc'-->
+  <div class='audio-container'>
    <audio
      id='audio'
      autoplay='autoplay'
@@ -15,12 +14,6 @@
 <script>
 export default {
  name: "audioComponent",
-  // props: {
-  //   audioSrc: {
-  //     type: String,
-  //     default: ""
-  //   }
-  // },
  data() {
    return {
      audioSrc: "" // 音频文件的路径地址
--- a/src/views/ebiz/laurelClub/StarProcess.vue
+++ b/src/views/ebiz/laurelClub/StarProcess.vue
@@ -34,7 +34,7 @@
          <img class='crown-group-img animate__animated animate__zoomIn animate__slow'
               :src='globalDataObj.imageObj.crownGroupImg' alt=''>
          <!--     男     -->
-          <div v-if='secondPageDataObj.sex==0'>
+          <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>年
@@ -49,9 +49,8 @@
            <img class='man-img animate__animated animate__zoomIn' :src='secondPageDataObj.imageObj.manImg' alt=''>
          </div>
          <!--     女    -->
-          <div v-if='secondPageDataObj.sex==1'>
-            <div class='woman-card-img animate__animated animate__bounceIn animate__delay-1s'
-                 v-if='secondPageDataObj.sex==1'>
+          <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.employDateMonth }}</span>月
@@ -96,10 +95,26 @@

      <!--  第四页   -->
      <van-swipe-item>
-        <div class='second-page-background-img animate__animated animate__fadeIn' v-if='current==3'>
-
+        <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=''>
        </div>
-
      </van-swipe-item>

      <!--  第五页   -->
@@ -110,36 +125,40 @@
          <div class='global-style'>
            <img class='GG-level-img animate__animated animate__zoomIn'
                 :src='fifthPageDataObj.imageObj.GGLevelImg' alt=''>
-            <span class='animate__animated animate__fadeInLeft'>桂冠级别已达
-              <strong>{{ fifthPageDataObj.glevel }}</strong>冠
+            <span class='animate__animated animate__fadeInLeft'
+                  v-if='fifthPageDataObj.glevel !=0'>桂冠级别已达<strong>{{ fifthPageDataObj.glevel }}</strong>冠
            </span>
+            <span class='animate__animated animate__fadeInLeft' v-else>桂冠级别为非会员</span>
          </div>
-          <div class='global-style'>
+          <div class='global-style' v-if='fifthPageDataObj.slevel != 0'>
            <img class='SG-level-img animate__animated animate__zoomIn animate__slow'
                 :src='fifthPageDataObj.imageObj.SGLevelImg' alt=''>
-            <span class='animate__animated animate__fadeInLeft animate__slow'>双冠级别已达
-              <strong>{{ fifthPageDataObj.slevel }}</strong>冠
+            <span class='animate__animated animate__fadeInLeft animate__slow'>双冠级别已达<strong>{{ fifthPageDataObj.slevel
+              }}</strong>冠
            </span>
          </div>
          <div class='global-style'>
            <img class='service-number-img animate__animated animate__zoomIn animate__slower'
                 :src='fifthPageDataObj.imageObj.serviceNumberImg' alt=''>
-            <span class='animate__animated animate__fadeInLeft animate__slower'>当前服务客户数量已达
-              <strong>{{ fifthPageDataObj.clientcount }}</strong>人/位
+            <span
+              class='animate__animated animate__fadeInLeft animate__slower'>当前服务客户数量已达<strong>{{ fifthPageDataObj.clientcount
+              }}</strong>人/位
            </span>
          </div>
          <div class='global-style'>
            <img class='cumulative-number-img animate__animated animate__zoomIn'
                 :src='fifthPageDataObj.imageObj.cumulativeNumberImg' alt=''>
-            <span class='cumulative-number-span animate__animated animate__fadeInLeft'>累计为
-              <strong>{{ fifthPageDataObj.polnum }}</strong>位客户送去保障
+            <span
+              class='cumulative-number-span animate__animated animate__fadeInLeft'>累计为<strong>{{ fifthPageDataObj.polnum
+              }}</strong>位客户送去保障
            </span>
          </div>
          <div class='global-style'>
            <img class='security-fund-img animate__animated animate__zoomIn'
                 :src='fifthPageDataObj.imageObj.securityFundImg' alt=''>
-            <span class='security-fund-span animate__animated animate__fadeInLeft'>客户保障金额达
-              <strong>{{ fifthPageDataObj.transmoney }}</strong>万元
+            <span
+              class='security-fund-span animate__animated animate__fadeInLeft'>客户保障金额达<strong>{{ fifthPageDataObj.transmoney
+              }}</strong>万元
            </span>
          </div>
          <img class='down-arrow-img animate__animated animate__shakeY animate__slower animate__infinite'
@@ -154,14 +173,14 @@
          <img class='crown-img animate__animated animate__zoomIn'
               :src='sixthPageDataObj.imageObj.crownImg'
               alt=''>
-          <img class='head-portrait-img' :src='sixthPageDataObj.imageObj.headPortraitImg' alt=''>
-          <div class='name-likedNumber' v-if='sixthPageDataObj.browseMode == sixthPageDataObj.appOrWxFlagEnum.app'>
+          <img class='head-portrait-img' :src='globalDataObj.headPortraitImg' alt=''>
+          <div class='name-likedNumber' v-if='!isWeixin'>
            <span class='name'>{{ globalDataObj.name }}</span>
            <span
              class='likedNumber'>收获点赞量为
              {{ sixthPageDataObj.likedNumber > 999 ? '999+' : sixthPageDataObj.likedNumber }}，继续加油吧！</span>
          </div>
-          <div v-if='sixthPageDataObj.browseMode == sixthPageDataObj.appOrWxFlagEnum.wx'>
+          <div v-else>
            <img class='no-likes-img' :src='sixthPageDataObj.imageObj.noLikesImg' @click='goLikedFunc'
                 v-if='!sixthPageDataObj.isLiked'
                 alt=''>
@@ -191,9 +210,15 @@
 import { Swipe, SwipeItem } from 'vant'
 // 引入媒体播放的组件
 import audioComponent from '../../../components/common/audioComponent'
-import audioMusic from '@/assets/audio/audio-luck-draw-music.mp3'
+import audioMusic from '@/assets/audio/audio-star-process-music.mp3'
 // 引入调用接口的方法
-import { queryPersonal } from '@/api/ebiz/laurelClub/laurelClub'
+import {
+  queryPersonal,
+  queryStarCourseDataUrl,
+  queryFavorDataUrl,
+  editFavorDataUrl
+} from '@/api/ebiz/laurelClub/laurelClub'
+import { getAgentInfo } from '@/api/ebiz/my/my.js'
 // 公共的图片路径
 import playMusicImg from '@/assets/images/starProcess/play-music-img.png' // 播放背景音乐图片的路径
 import closePlayMusicImg from '@/assets/images/starProcess/close-play-music-img.png' // 关闭播放背景音乐图片的路径
@@ -215,6 +240,8 @@ import fireworksLeftImg from '@/assets/images/starProcess/fireworks-left-img.png
 import fireworksRightTopImg from '@/assets/images/starProcess/fireworks-right-top-img.png'
 import fireworksRightDownImg from '@/assets/images/starProcess/fireworks-right-down-img.png'
 import runnerReticularImg from '@/assets/images/starProcess/runner-reticular-img.png'
+// 第四个页面中使用到的图片路径
+import timeLineImg from '@/assets/images/starProcess/time-line-img.png'
 // 第五个页面中使用到的图片路径
 import GGLevelImg from '@/assets/images/starProcess/GG-level-img.png'
 import SGLevelImg from '@/assets/images/starProcess/SG-level-img.png'
@@ -236,37 +263,18 @@ export default {
    [SwipeItem.name]: SwipeItem,
    audioComponent
  },
-  computed: {
-    // 根据变量计算获取‘年份’
-    employDateYear: function() {
-      let year = new Date(this.globalDataObj.employDate).getFullYear()
-      return year
-    },
-    // 根据变量计算获取‘月份’
-    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 + 1) <= 9 ? '0' + (date + 1) : date + 1
-    },
-    // 根据变量计算此变量日期距今日共经过了多少天(两个日期之间的相差天数)
-    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
-    }
-  },
  data() {
+    let isWeixin = this.$utils.device().isWeixin //判断环境
    return {
+      isWeixin, // 判断当前是哪种环境（判断当前是否在微信环境中）
      isPlayAudio: '', // 定义控制开启播放背景音乐或者关闭播放背景音乐的变量
      audioMusic: audioMusic, // 定义存储背景音乐的变量
-      current: 0,
+      current: 0, // 当前轮播页的索引值
      globalDataObj: {
        name: '', // 用户名称（这是公用数据，所以将这个变量定义在这里）
+        sex: '', // 性别 0--男 1--女
        employDate: '', // 入职日期
+        headPortraitImg: '', // 用户头像
        imageObj: { playMusicImg, closePlayMusicImg, crownGroupImg, downArrowImg }
      },
      // 定义第一个页面中使用到的数据以及图片的对象
@@ -275,7 +283,6 @@ export default {
      },
      // 定义第二个页面中使用到的数据以及图片的对象
      secondPageDataObj: {
-        sex: 1, // 性别 0--男 1--女
        imageObj: { manImg, manCardImg, womanImg, womanCardImg }
      },
      // 定义第三个页面中使用到的数据以及图片的对象
@@ -286,6 +293,23 @@ export default {
          fireworksRightTopImg, fireworksRightDownImg, runnerReticularImg
        }
      },
+      // 定义第四个页面中使用到的数据以及图片的对象
+      fourthPageDataObj: {
+        xAxisData: [], // Echarts图形中X轴的数据
+        seriesData: [], // Echarts图形中图形的数据
+        rankAllData: [], // 职级变化的所有数据
+        // 定义各个职级对应的数据枚举对象
+        agentGradeEnumObj: {
+          CA: { id: 'A101', text: '客户专员（CA）', code: 'CA', slogan: '在国富，升官发财!' },
+          CM: { id: 'A102', text: '客户经理（CM）', code: 'CM', slogan: '在国富，升官发财!' },
+          AS: { id: 'A201', text: '业务主任（AS）', code: 'AS', slogan: '在国富，夯实架构，做大团队!' },
+          SAS: { id: 'A202', text: '高级业务主任（SAS）', code: 'SAS', slogan: '在国富，夯实架构，做大团队!' },
+          BM: { id: 'A301', text: '营业部经理（BM）', code: 'BM', slogan: '在国富，夯实架构，做大团队!' },
+          SBM: { id: 'A302', text: '高级营业部经理（SBM）', code: 'SBM', slogan: '在国富，夯实架构，做大团队!' },
+          BD: { id: 'A401', text: '业务总监（BD）', code: 'BD', slogan: '在国富，成功其实很简单!' }
+        },
+        imageObj: { timeLineImg }
+      },
      // 定义第五个页面中使用到的数据以及图片的对象
      fifthPageDataObj: {
        glevel: '', // 桂冠级别
@@ -300,29 +324,51 @@ export default {
        isLiked: false, //是否已经点赞的状态 true--已点赞，false--未点赞
        addOneLiked: false, // 控制显示获隐藏点赞时‘+1’的图片的变量
        likedNumber: 0, // 点赞数量
-        browseMode: 2, // 浏览方式 1--app内浏览 2--微信分享浏览(微信分享后其他人可以给自己点赞)
-        appOrWxFlagEnum: { app: 1, wx: 2 }, // 定义是在app内浏览还是在微信内浏览的枚举值 1--app 2--微信(微信分享后其他人可以给自己点赞)
        imageObj: { crownImg, headPortraitImg, noLikesImg, LikedImg, addOneLikeImg, bottomSloganImg }
      }
    }
  },
  mounted() {
-    // 调用初始化加载调用的方法
-    this.initFunc()
+    // console.log(this.$utils.device().isWeixin, 999999)
+    // 设置开启播放背景音乐，显示播放背景音乐的图片
+    this.isPlayAudio = true
+    // 调用媒体播放组件中的方法，播放背景音乐
+    // this.$refs.audioComponents.autoPlayFunc(this.audioMusic)
+    // 调用查询个人数据的方法
+    this.getAgentInfoFunc()
+    // 调用查询桂冠个人数据的方法
+    this.queryPersonalFunc()
+    // 调用查询代理人职级变化的方法
+    this.queryStarCourseDataFunc()
+    // 调用查询代理人点赞数量的方法
+    this.queryFavorDataFunc()
  },
  methods: {
    /**
-     * @Description: 初始化加载调用的方法
+     * @Description: 查询个人数据的方法
     * @author:zhangqi
     * @Date:2021-08-31
     */
-    initFunc() {
-      // 设置开启播放背景音乐，显示播放背景音乐的图片
-      this.isPlayAudio = true
-      // 调用媒体播放组件中的方法，播放背景音乐
-      // this.$refs.audioComponents.autoPlayFunc(this.audioMusic)
-      // 调用查询桂冠个人数据的方法
-      this.queryPersonalFunc()
+    getAgentInfoFunc() {
+      // 调用接口获取数据
+      getAgentInfo({}).then(res => {
+        if (res.result == 0) {
+          // 将姓名数据，赋值给变量
+          this.globalDataObj.name = res.name
+          // 将性别数据，赋值给变量
+          this.globalDataObj.sex = res.sex
+          // 将入职日期数据，赋值给变量
+          this.globalDataObj.employDate = res.employDate
+          // 判断是否有头像图片链接，如果有，则正常展示；如果没有，则使用默认的头像图片
+          if (res.agentHeadImgUrl) {
+            this.globalDataObj.headPortraitImg = res.agentHeadImgUrl
+          } else {
+            this.globalDataObj.headPortraitImg = this.sixthPageDataObj.headPortraitImg
+          }
+        }
+      }).catch(err => {
+        console.log(err)
+      })
    },

    /**
@@ -331,23 +377,89 @@ export default {
     * @Date:2021-08-31
     */
    queryPersonalFunc() {
-      let params = { mdType: 'm' }
+      let params = { mdType: 'd' }
      queryPersonal(params).then(res => {
        if (res.result == 0) {
-          // 将获取到的用户名称，赋值给变量
-          this.globalDataObj.name = res.content[0].name
-          // 将获取到的入职日期数据，赋值给变量
-          this.globalDataObj.employDate = res.content[0].employdate
-          // 将获取到的桂冠级别数据，赋值给变量
-          this.fifthPageDataObj.glevel = res.content[0].glevel
-          // 将获取到的双冠级别数据，赋值给变量
-          this.fifthPageDataObj.slevel = res.content[0].slevel
-          // 将获取到的服务客户数数据，赋值给变量
-          this.fifthPageDataObj.clientcount = res.content[0].clientcount
-          // 将获取到的保障数数据，赋值给变量
-          this.fifthPageDataObj.polnum = res.content[0].polnum
-          // 将获取到的客户保障金额数据，赋值给变量
-          this.fifthPageDataObj.transmoney = res.content[0].transmoney
+          // 判断查出的数据是否为空，如果未空数据，则要将变量设置为0
+          if (res.content.length) {
+            // 将获取到的用户名称，赋值给变量
+            this.globalDataObj.name = res.content[0].name
+            // 将获取到的入职日期数据，赋值给变量
+            this.globalDataObj.employDate = res.content[0].employdate
+            // 将获取到的桂冠级别数据，赋值给变量
+            this.fifthPageDataObj.glevel = res.content[0].glevel
+            // 将获取到的双冠级别数据，赋值给变量
+            this.fifthPageDataObj.slevel = res.content[0].slevel
+            // 将获取到的服务客户数数据，赋值给变量
+            this.fifthPageDataObj.clientcount = res.content[0].clientcount
+            // 将获取到的保障数数据，赋值给变量
+            this.fifthPageDataObj.polnum = res.content[0].polnum
+            // 将获取到的客户保障金额数据，赋值给变量
+            this.fifthPageDataObj.transmoney = res.content[0].transmoney
+          } else {
+            // 将桂冠级别数据，设置为0
+            this.fifthPageDataObj.glevel = 0
+            // 将双冠级别数据，设置为0
+            this.fifthPageDataObj.slevel = 0
+            // 将服务客户数数据，设置为0
+            this.fifthPageDataObj.clientcount = 0
+            // 将保障数数据，设置为0
+            this.fifthPageDataObj.polnum = 0
+            // 将客户保障金额数据，设置为0
+            this.fifthPageDataObj.transmoney = 0
+          }
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+
+    /**
+     * @Description: 查询代理人职级变化的方法
+     * @author:zhangqi
+     * @Date:2021-08-31
+     */
+    queryStarCourseDataFunc() {
+      let params = { mdType: 'd' }
+      queryStarCourseDataUrl(params).then(res => {
+        if (res.result == 0) {
+          // 变量数据集合，获取Echarts图形中X轴时间（年-月-日）的数据
+          this.fourthPageDataObj.xAxisData = res.content.map(item => {
+            return item.startdate
+          })
+          // 变量数据集合，获取Echarts图形中Y轴职级的数据
+          this.fourthPageDataObj.seriesData = res.content.map(item => {
+            return item.agentgrade
+          })
+          // 将数据赋值给定义职级变化的所有数据的变量
+          this.fourthPageDataObj.rankAllData = res.content
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+
+    /**
+     * @Description: 查询代理人点赞数量的方法
+     * @author:zhangqi
+     * @Date:2021-08-31
+     */
+    queryFavorDataFunc() {
+      let params = { mdType: 'd' }
+      queryFavorDataUrl(params).then(res => {
+        if (res.result == 0) {
+          // 判断查出的数据是否为空，如果未空数据，则要将点赞数量设置为0
+          if (res.content.length) {
+            // 将点赞数量的数据，赋值给变量
+            this.sixthPageDataObj.likedNumber = res.content[0].favorCount
+          } else {
+            // 将点赞数量的数据，设置为0
+            this.sixthPageDataObj.likedNumber = 0
+          }
        } else {
          this.$toast(res.resultMessage)
        }
@@ -375,6 +487,56 @@ export default {
      }
    },

+    /**
+     * @Description: 加载Echarts图形的方法
+     * @author:zhangqi
+     * @Date:2021-09-01
+     */
+    loadEchatsFunc() {
+      // 定位绘制Echarts图形的dom元素
+      let Echart = window.echarts.init(document.querySelector('.Echart'))
+      // 创建Echarts图形模板
+      let option = {
+        grid: {
+          top: '7%', // 距离容器上侧的距离。
+          left: '1%', // 距离容器左侧的距离。
+          right: '4%', // 距离容器右侧的距离。
+          bottom: '15%', // 距离容器下侧的距离。
+          containLabel: true // 区域是否包含坐标轴的刻度标签。
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          // axisLabel: {
+          //   interval: 0,
+          //   rotate: -20
+          // },
+          data: this.fourthPageDataObj.xAxisData
+        },
+        yAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['CA', 'CM', 'AS', 'SAS', 'BM', 'SBM', 'BD']
+        },
+        dataZoom: [{
+          show: true,
+          height: '18',
+          bottom: '5'
+        }],
+        series: [{
+          type: 'line',
+          areaStyle: {},
+          itemStyle: {
+            color: '#A4E0F7'
+          },
+          data: this.fourthPageDataObj.seriesData
+        }]
+      }
+      // 加载绘制Echarts图形
+      Echart.setOption(option)
+      Echart.resize() //不加会出现高度为0
+    },
+
    /**
     * @Description: 切换轮播页的方法
     * @author:zhangqi
@@ -383,6 +545,13 @@ export default {
    changeVanSwipeFunc(index) {
      setTimeout(() => {
        this.current = index
+        // 当轮播图展示第四个页面时，要执行加载Ecahrts图形的方法
+        if (this.current == 3) {
+          this.$nextTick(() => {
+            // 执行加载Ecahrts图形的方法
+            this.loadEchatsFunc()
+          })
+        }
      }, 500)
    },

@@ -392,14 +561,62 @@ export default {
     * @Date:2021-08-31
     */
    goLikedFunc() {
-      // 将状态切换为已点赞的状态
-      this.sixthPageDataObj.isLiked = true
-      // 显示‘+1’的图片
-      this.sixthPageDataObj.addOneLiked = true
-      // 延迟1.5秒之后，隐藏‘+1’的图片
-      setTimeout(() => {
-        this.sixthPageDataObj.addOneLiked = false
-      }, 1500)
+      // 定义参数
+      let params = { mdType: 'm' }
+      // 调用执行修改点赞数量的接口
+      editFavorDataUrl(params).then(res => {
+        if (res.result == 0) {
+          // 将状态切换为已点赞的状态
+          this.sixthPageDataObj.isLiked = true
+          // 显示‘+1’的图片
+          this.sixthPageDataObj.addOneLiked = true
+          // 延迟1.5秒之后，隐藏‘+1’的图片
+          setTimeout(() => {
+            this.sixthPageDataObj.addOneLiked = false
+          }, 1500)
+          // 点赞完成之后，重新查询点赞数量
+          this.queryFavorDataFunc()
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      }).catch(err => {
+        console.log(err)
+      })
+    }
+  },
+  // 计算属性
+  computed: {
+    // 根据变量计算获取‘年份’
+    employDateYear: function() {
+      let year = new Date(this.globalDataObj.employDate).getFullYear()
+      return year
+    },
+    // 根据变量计算获取‘月份’
+    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
+    }
+  },
+  // 过滤器
+  filters: {
+    // 过滤职级数据
+    agentGrade(val, agentGradeEnumData) {
+      return agentGradeEnumData[val].text
+    },
+    // 过滤职级对应的标语数据
+    slogan(val, agentGradeEnumData) {
+      return agentGradeEnumData[val].slogan
    }
  }
 }
@@ -653,7 +870,7 @@ export default {

  .userName {
    font-size: 40px;
-    font-family: STXingkai;
+    font-family: FZShuTi;
    text-align: center;
    font-weight: normal;
    margin-top: 23px;
@@ -708,6 +925,75 @@ export default {
  }
 }

+.fourth-page-background-img {
+  width: 100%;
+  min-height: 100vh;
+  background: url('../../../assets/images/starProcess/background-img-2.png') no-repeat;
+  background-size: 100% 100%;
+  background-color: #181935;
+  position: fixed;
+
+  .Echart {
+    width: 293px;
+    height: 187px;
+    background: #FFFFFF;
+    margin: 0 auto;
+    margin-top: 82px;
+  }
+
+  .agentGrade-change-div {
+    height: 220px;
+    margin-top: 40px;
+    display: flex;
+    margin-left: 71px;
+
+    .time-line-img {
+      height: 100%;
+    }
+
+    .agentGrade-change-list {
+      margin-left: 13px;
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 65px;
+
+        span {
+          font-size: 14px;
+          color: #FFFFFF;
+        }
+
+        .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;
+      }
+    }
+  }
+
+  .down-arrow-img {
+    width: 24px;
+    height: 24px;
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
 .fifth-page-background-img {
  width: 100%;
  min-height: 100vh;
@@ -765,7 +1051,7 @@ export default {
      margin-left: 13px;
      letter-spacing: 1px;
      font-weight: lighter;
-      display: block;
+      //display: block;

      strong {
        padding-left: 10px;
@@ -821,6 +1107,7 @@ export default {
    display: block;
    margin: 0 auto;
    margin-top: 20px;
+    border-radius: 30px;
  }

  .name-likedNumber {