From ae7f63f2cf93b4839fb5af4c9242c61dad554933 Mon Sep 17 00:00:00 2001
From: mengxiaolong <meng.xiaolong@ebiz-digits.com>
Date: Mon, 8 Feb 2021 15:36:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/js/utils/data-dictionary.js        |   7 +
 src/assets/sass/common.scss                   |   2 +
 src/main.js                                   |   4 +-
 src/views/ebiz/eqiVisit/HistoryDetail.vue     |  83 +++++++-----
 src/views/ebiz/eqiVisit/NewcomerList.vue      |  25 ++--
 src/views/ebiz/eqiVisit/RegisterResult.vue    |  16 ++-
 src/views/ebiz/eqiVisit/ScoreHistory.vue      | 122 ++++++++++++++----
 src/views/ebiz/eqiVisit/ScoreRanking.vue      |  25 ++--
 src/views/ebiz/eqiVisit/VisitHistory.vue      |  46 ++++---
 src/views/ebiz/eqiVisit/VisitInfoRegister.vue |   2 +-
 10 files changed, 232 insertions(+), 100 deletions(-)

diff --git a/src/assets/js/utils/data-dictionary.js b/src/assets/js/utils/data-dictionary.js
index a1db9e8cd..3a43153b8 100644
--- a/src/assets/js/utils/data-dictionary.js
+++ b/src/assets/js/utils/data-dictionary.js
@@ -1805,6 +1805,13 @@ export default {
     { id: 'A302', text: '高级营业部经理' },
     { id: 'A401', text: '业务总监' }
   ],
+  // e起陪访: 陪访类型枚举
+  visitTypes: [
+    { code: '01', text: '入职前陪访' },
+    { code: '02', text: '新人首单' },
+    { code: '03', text: '冲刺挑战' },
+    { code: '04', text: '参与衔训' }
+  ],
   salarySource: [
     {
       id: 1,
diff --git a/src/assets/sass/common.scss b/src/assets/sass/common.scss
index 67781cf53..56597ed96 100644
--- a/src/assets/sass/common.scss
+++ b/src/assets/sass/common.scss
@@ -48,6 +48,7 @@ a:hover {
   transform: scale(0.5);
   left: 0;
   top: 0;
+  pointer-events: none;
 }
 
 .thin-bottom::after {
@@ -60,6 +61,7 @@ a:hover {
   transform: scale(0.5);
   left: 0;
   top: 0;
+  pointer-events: none;
 }
 
 // 宽度设置
diff --git a/src/main.js b/src/main.js
index eb3de9960..7e01c0eca 100644
--- a/src/main.js
+++ b/src/main.js
@@ -36,7 +36,8 @@ import {
   Uploader,
   PullRefresh,
   List,
-  Image as VanImage
+  Image as VanImage,
+  Sticky
 } from 'vant'
 Vue.use(Cell)
 Vue.use(CellGroup)
@@ -62,6 +63,7 @@ Vue.use(Uploader)
 Vue.use(PullRefresh)
 Vue.use(List)
 Vue.use(VanImage)
+Vue.use(Sticky)
 
 Vue.prototype.$assetsUrl = config.assetsUrl
 Vue.prototype.$assetsUpUrl = config.assetsUpUrl
diff --git a/src/views/ebiz/eqiVisit/HistoryDetail.vue b/src/views/ebiz/eqiVisit/HistoryDetail.vue
index c94f0a7f3..3c506b7a0 100644
--- a/src/views/ebiz/eqiVisit/HistoryDetail.vue
+++ b/src/views/ebiz/eqiVisit/HistoryDetail.vue
@@ -2,42 +2,33 @@
   <div class="history-detail bg-white">
     <p class="date pl20 pt5 pb5">2021-1-29</p>
     <van-cell-group>
-      <van-field label-width="120" v-model="accompanyingName" label="陪访人" readonly />
+      <van-field label-width="120" v-model="accompanyRecordDTO.agentName" label="陪访人" readonly />
     </van-cell-group>
     <van-cell-group>
-      <van-field label-width="120" v-model="newcomerName" label="陪访新人姓名" readonly />
+      <van-field label-width="120" v-model="accompanyRecordDTO.accompanyAgentName" label="陪访新人姓名" readonly />
     </van-cell-group>
     <van-cell-group>
-      <van-field label-width="120" v-model="visitDuration" label="时长" readonly />
+      <van-field label-width="120" v-model="accompanyRecordDTO.visitDuration" label="时长" readonly />
     </van-cell-group>
     <van-cell-group>
-      <van-field label-width="120" v-model="customerName" label="客户姓名" readonly />
+      <van-field label-width="120" v-model="accompanyRecordDTO.visitName" label="客户姓名" readonly />
     </van-cell-group>
     <van-cell-group>
-      <van-field label-width="120" v-model="customerAge" label="客户年龄" readonly />
+      <van-field label-width="120" v-model="accompanyRecordDTO.visitAge" label="客户年龄" readonly />
     </van-cell-group>
     <van-cell-group>
       <van-field label-width="120" v-model="homeLocation" label="地点" readonly />
     </van-cell-group>
     <van-cell-group>
-      <van-field label-width="120" v-model="homeAddress" label="详细地址" readonly />
+      <van-field label-width="120" v-model="accompanyRecordDTO.visitAddress" label="详细地址" readonly />
     </van-cell-group>
-    <van-cell-group>
+    <van-cell-group v-if="imgList.length">
       <van-field label-width="120" label="现场照片" readonly />
     </van-cell-group>
-    <div class="imgs">
+    <div class="imgs pb30">
       <van-grid :column-num="3" :border="false">
-        <van-grid-item>
-          <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
-        </van-grid-item>
-        <van-grid-item>
-          <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
-        </van-grid-item>
-        <van-grid-item>
-          <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
-        </van-grid-item>
-        <van-grid-item>
-          <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
+        <van-grid-item v-for="(img, i) in imgList" :key="i" @click="prevImg(img)">
+          <van-image height="100" fit="cover" :src="img.url" />
         </van-grid-item>
       </van-grid>
     </div>
@@ -45,28 +36,52 @@
 </template>
 
 <script>
-import { Grid, GridItem } from 'vant'
+import { Grid, GridItem, ImagePreview } from 'vant'
+import config from '@/config'
+import { getAccompanyDetail } from '@/api/ebiz/eqiVisit/eqiVisit'
 export default {
   components: {
     [Grid.name]: Grid,
     [GridItem.name]: GridItem
   },
+  props: ['id'],
   data() {
     return {
-      accompanyingName: '弓箭',
-      newcomerName: '胡娜',
-      visitDuration: '4',
-      customerName: '但你',
-      customerAge: '28',
-      homeProvince: '河北省',
-      homeCity: '泰安市',
-      homeArea: '清丰县',
-      homeAddress: '泰安公寓1-706'
+      accompanyRecordDTO: {},
+      mediaDTOLst: []
     }
   },
   computed: {
     homeLocation() {
-      return `${this.homeProvince} ${this.homeCity} ${this.homeArea}`
+      let detail = this.accompanyRecordDTO
+      if (!detail.visitProvinceName || !detail.visitCityName || !detail.visitAreaName) {
+        return ''
+      }
+      return `${detail.visitProvinceName} ${detail.visitCityName} ${detail.visitAreaName}`
+    },
+    imgList() {
+      return this.mediaDTOLst.map(img => {
+        return {
+          url: config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=${encodeURIComponent(img.rgssUrl)}`
+        }
+      })
+    }
+  },
+  created() {
+    this.getHistoryDetail()
+  },
+  methods: {
+    prevImg(img) {
+      ImagePreview([img.url])
+    },
+    async getHistoryDetail() {
+      let res = await getAccompanyDetail({
+        accompanyRecordDTO: {
+          accompanyId: this.id
+        }
+      })
+      this.accompanyRecordDTO = res.content.accompanyRecordDTO
+      this.mediaDTOLst = res.content.mediaDTOLst ? res.content.mediaDTOLst : []
     }
   }
 }
@@ -83,5 +98,13 @@ export default {
   .imgs {
     padding: 0 8px;
   }
+
+  .van-image {
+    height: 100%;
+  }
+
+  /deep/ .van-grid-item__content {
+    padding: 3px;
+  }
 }
 </style>
diff --git a/src/views/ebiz/eqiVisit/NewcomerList.vue b/src/views/ebiz/eqiVisit/NewcomerList.vue
index fbcfdaecf..b42c9eb63 100644
--- a/src/views/ebiz/eqiVisit/NewcomerList.vue
+++ b/src/views/ebiz/eqiVisit/NewcomerList.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="bg-white newcomerlist">
     <van-sticky>
+      <!-- 部 -->
       <van-tabs v-model="deptIndex" :ellipsis="false" @change="onDeptChanged">
         <van-tab v-for="(dept, i) in depts" :key="i" :title="dept.name" />
       </van-tabs>
+      <!-- 组 -->
       <van-tabs v-model="groupIndex" :ellipsis="false" @change="onGroupChanged">
         <van-tab v-for="(group, i) in groups" :key="i" :title="group.name" />
       </van-tabs>
@@ -30,25 +32,26 @@
 
 <script>
 import avatar from '@/assets/images/bnf_avatar.png'
-import { Tab, Tabs, Sticky } from 'vant'
 import { getAccompanyComCode, getAccompanyPerson } from '@/api/ebiz/eqiVisit/eqiVisit'
 export default {
   name: 'NewcomerList',
-  components: {
-    [Tab.name]: Tab,
-    [Tabs.name]: Tabs,
-    [Sticky.name]: Sticky
-  },
   data() {
     return {
       avatar,
+      // pull-refresh是否处于加载状态
       isLoading: false,
       list: [],
+      // List是否处于加载状态
       loading: false,
+      // List是否加载完毕
       finished: false,
+      // 已选部索引
       deptIndex: 0,
+      // 可选部数据
       depts: [],
+      // 已选组索引
       groupIndex: 0,
+      // 可选组数据
       groups: [],
       pageSize: 10,
       pageNum: 1
@@ -63,7 +66,7 @@ export default {
     }
   },
   async created() {
-    // 获取代理人可查看部门
+    // 获取代理人可查看部
     await this.getDepts()
     // 设置初始组
     this.groups = this.dept.subBranchGroupLst
@@ -73,13 +76,7 @@ export default {
     async getDepts() {
       let res = await getAccompanyComCode({})
       if (res.result === '0') {
-        let dept = {
-          ...res.content.branchInfoBeanList[0]
-        }
-        let d = JSON.parse(JSON.stringify(dept))
-        d.code = '1450100201'
-        d.subBranchGroupLst.splice(0, 4)
-        this.depts = [dept, d]
+        this.depts = [...res.content.branchInfoBeanList]
       } else {
         this.$toast(res.resultMessage)
       }
diff --git a/src/views/ebiz/eqiVisit/RegisterResult.vue b/src/views/ebiz/eqiVisit/RegisterResult.vue
index 1f9df6bd4..6d83de5d8 100644
--- a/src/views/ebiz/eqiVisit/RegisterResult.vue
+++ b/src/views/ebiz/eqiVisit/RegisterResult.vue
@@ -7,7 +7,7 @@
       <h2 class="blue mb30">累计积分{{ totalScore }}分</h2>
       <div class="btns p30">
         <van-button class="mr5" plain color="#199ed8" type="primary" @click="accompanyAgain">继续登记陪访</van-button>
-        <van-button class="ml5" plain color="#199ed8" type="primary">积分榜</van-button>
+        <van-button class="ml5" plain color="#199ed8" type="primary" @click="toScoreRanking">积分榜</van-button>
         <van-button color="#199ed8" type="primary" @click="quit">返回</van-button>
       </div>
     </div>
@@ -59,14 +59,24 @@ export default {
         flag: 'home'
       })
     },
+    toScoreRanking() {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          forbidSwipeBack: '1',
+          url: location.origin + `/#/eqiVisit/scoreRanking?agentCode=${this.agentCode}`
+        },
+        routerInfo: { path: `/eqiVisit/scoreRanking?agentCode=${this.agentCode}` }
+      })
+    },
     accompanyAgain() {
       this.$jump({
         flag: 'h5',
         extra: {
           forbidSwipeBack: '1',
-          url: location.origin + `/#/eqiVisit/visitInfoRegister?agentCode=${this.agentCode}`
+          url: location.origin + `/#/eqiVisit/visitInfoRegister`
         },
-        routerInfo: { path: `/eqiVisit/visitInfoRegister?agentCode=${this.agentCode}` }
+        routerInfo: { path: `/eqiVisit/visitInfoRegister` }
       })
     }
   }
diff --git a/src/views/ebiz/eqiVisit/ScoreHistory.vue b/src/views/ebiz/eqiVisit/ScoreHistory.vue
index 6fd539ab6..16ac7c1b3 100644
--- a/src/views/ebiz/eqiVisit/ScoreHistory.vue
+++ b/src/views/ebiz/eqiVisit/ScoreHistory.vue
@@ -1,45 +1,109 @@
 <template>
-  <div class="score-history bg-white">
-    <div>
-      <p class="year">2021年</p>
-      <div class="history-item pt10 pb10 pl20 pr20 van-hairline--bottom" v-for="i in 10" :key="i">
-        <div class="col mb10">
-          <p><span>胡娜</span> - <span>参与衔训</span></p>
-          <p>+1</p>
+  <div ref="container" class="score-history bg-white">
+    <div v-for="(value, key) in list" :key="key">
+      <p class="year">{{ value.year }} 年</p>
+      <template v-for="v in value.data">
+        <div class="history-item pt10 pb10 pl20 pr20 van-hairline--bottom" :key="v.bussinessId">
+          <div class="col mb10">
+            <p>
+              <span>{{ v.accompanyAgentName }}</span> - <span>{{ v.recordInfo }}</span>
+            </p>
+            <p style="color: #008000;">+ {{ v.rewardCount }}</p>
+          </div>
+          <div class="col">
+            <span>{{ v.recordDate }}</span>
+            <span>累计 {{ v.rewardAllCount }} 积分</span>
+          </div>
         </div>
-        <div class="col">
-          <span>1月1日 10:32</span>
-          <span>累计132积分</span>
-        </div>
-      </div>
-    </div>
-    <div>
-      <p class="year">2020年</p>
-      <div class="history-item pt10 pb10 pl20 pr20 van-hairline--bottom" v-for="i in 5" :key="i">
-        <div class="col mb10">
-          <p><span>胡娜</span> - <span>参与衔训</span></p>
-          <p>+1</p>
-        </div>
-        <div class="col">
-          <span>1月1日 10:32</span>
-          <span>累计132积分</span>
-        </div>
-      </div>
+      </template>
     </div>
+    <p v-show="finished" class="finished p10">没有更多了</p>
   </div>
 </template>
 
 <script>
+import { getRewardRecord } from '@/api/ebiz/eqiVisit/eqiVisit'
+import dataDictionary from '@/assets/js/utils/data-dictionary'
+
+let timer = null
 export default {
+  name: 'ScoreHistory',
   data() {
-    return {}
+    return {
+      dataList: [],
+      pageNum: 1,
+      pageSize: 20,
+      finished: false,
+      dataMap: {},
+      visitTypes: dataDictionary.visitTypes
+    }
+  },
+  computed: {
+    list() {
+      let years = []
+      for (let key in this.dataMap) {
+        years.push(Number(key))
+      }
+      years.sort((a, b) => b - a)
+      let result = []
+      years.forEach(value => {
+        result.push({ year: value, data: this.dataMap[value] })
+      })
+      return result
+    }
+  },
+  async created() {
+    await this.getScoreHistory()
+  },
+  mounted() {
+    this.$refs.container.onscroll = this.onscroll
+  },
+  methods: {
+    onscroll() {
+      let sHeight = this.$refs.container.scrollHeight
+      let sTop = this.$refs.container.scrollTop
+      let dHeight = document.documentElement.scrollHeight
+      if (sHeight - sTop - dHeight <= 100) {
+        this.getScoreHistory()
+      }
+    },
+    async getScoreHistory() {
+      if (this.finished) {
+        return
+      }
+      clearTimeout(timer)
+
+      timer = setTimeout(async () => {
+        let res = await getRewardRecord({
+          pageReqDTO: {
+            pageSize: this.pageSize,
+            pageNum: this.pageNum
+          }
+        })
+        this.pageNum++
+        if (res.content.pageInfo.isLastPage) {
+          this.finished = true
+        }
+        let arrs = res.content.pageInfo.list
+        for (let item of arrs) {
+          let year = new Date(item.recordDate).getFullYear()
+          if (!this.dataMap.hasOwnProperty(year)) {
+            this.$set(this.dataMap, year, [])
+            this.dataMap[year].push(item)
+          } else {
+            this.dataMap[year].push(item)
+          }
+        }
+      }, 200)
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .score-history {
-  min-height: 100vh;
+  height: 100vh;
+  overflow: auto;
   .year {
     padding: 5px 10px;
     background-color: #ebebeb;
@@ -54,5 +118,9 @@ export default {
       color: #999999;
     }
   }
+  .finished {
+    text-align: center;
+    color: #999999;
+  }
 }
 </style>
diff --git a/src/views/ebiz/eqiVisit/ScoreRanking.vue b/src/views/ebiz/eqiVisit/ScoreRanking.vue
index a5a32f0a4..0443caa94 100644
--- a/src/views/ebiz/eqiVisit/ScoreRanking.vue
+++ b/src/views/ebiz/eqiVisit/ScoreRanking.vue
@@ -8,15 +8,17 @@
             <th v-for="(th, i) in theads" :key="i">{{ th }}</th>
           </thead>
           <tbody>
-            <tr class="hairline-bottom">
-              <template v-if="agentRank.name">
-                <td class="thin-right thin-bottom" style="max-width: 2em;">{{ agentRank.rank }}</td>
-                <td class="thin-right thin-bottom" style="max-width: 3em;">{{ agentRank.name }}</td>
-                <td class="thin-right thin-bottom" style="max-width: 4em;">{{ agentRank.org }}</td>
-                <td class="thin-right thin-bottom" style="max-width: 2em;">{{ agentRank.level }}</td>
-                <td class="van-hairline--bottom" style="max-width: 2em;" @click="jumpToDetail">{{ agentRank.score }}</td>
+            <tr class="thin-bottom">
+              <template v-if="inRanking">
+                <td class="thin-right thin-bottom" style="max-width: 2em; font-weight: bold;">{{ agentRank.rank }}</td>
+                <td class="thin-right thin-bottom" style="max-width: 3em; font-weight: bold;">{{ agentRank.agentName }}</td>
+                <td class="thin-right thin-bottom" style="max-width: 4em; font-weight: bold;">{{ agentRank.thirManageName }}</td>
+                <td class="thin-right thin-bottom" style="max-width: 2em; font-weight: bold;">{{ agentRank.applGrade }}</td>
+                <td class="thin-bottom" style="max-width: 2em; text-decoration: underline; font-weight: bold;" @click="jumpToDetail">
+                  {{ agentRank.rewardCount }}
+                </td>
               </template>
-              <td class="van-hairline--bottom" v-else colspan="5">暂无积分</td>
+              <td class="thin-bottom" v-else colspan="5">暂无积分</td>
             </tr>
 
             <tr v-for="(rank, index) in ranking" :key="index">
@@ -49,6 +51,7 @@ export default {
     return {
       empty,
       agentRank: {},
+      inRanking: false,
       isLoading: false,
       theads: ['排名', '姓名', '所在机构', '职级', '积分'],
       ranking: []
@@ -73,12 +76,17 @@ export default {
     async queryRanking() {
       let res = await getAccompanyRank({ billboardStart: 0, billboardEnd: 20, agentCode: this.agentCode })
       this.ranking = res.content.statisticsBeanList
+      if (res.content.agentStatisticsBean) {
+        this.agentRank = res.content.agentStatisticsBean
+        this.inRanking = true
+      }
     },
     async onRefresh() {
       await this.queryRanking()
       this.isLoading = false
     },
     jumpToDetail() {
+      console.log('object')
       this.$jump({
         flag: 'h5',
         extra: {
@@ -114,6 +122,7 @@ export default {
         padding: 6px 0;
         font-size: 14px;
         word-break: break-all;
+        color: #199ed8;
       }
     }
   }
diff --git a/src/views/ebiz/eqiVisit/VisitHistory.vue b/src/views/ebiz/eqiVisit/VisitHistory.vue
index 9c40a8353..09f807110 100644
--- a/src/views/ebiz/eqiVisit/VisitHistory.vue
+++ b/src/views/ebiz/eqiVisit/VisitHistory.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="history bg-white">
-    <div class="history-item p10 van-hairline--bottom">
+    <div class="history-item p10 thin-bottom">
       <div>陪访类型</div>
       <div>被陪访人</div>
       <div>日期</div>
     </div>
     <div class="divider" />
-    <van-list v-model="loading" :finished="finished" @load="onLoad" finished-text="没有更多了...">
-      <div class="history-item p10 van-hairline--bottom arrow" v-for="i in list" :key="i" @click="jumpToDetail(i)">
-        <div>冲刺挑战</div>
-        <div>胡娜</div>
+    <van-list v-model="loading" :finished="finished" @load="getListData" finished-text="没有更多了...">
+      <div class="history-item p10 thin-bottom arrow" v-for="his in dataList" :key="his.accompanyId" @click="jumpToDetail(his.accompanyId)">
+        <div>{{ his.accompanyName }}</div>
+        <div>{{ his.accompanyAgentName }}</div>
         <div class="time">
-          <span>2020-01-09</span>
+          <span>{{ his.visitDate | dateFilter }}</span>
           <van-icon name="arrow" />
         </div>
       </div>
@@ -20,6 +20,8 @@
 </template>
 
 <script>
+import { getAgentAccompanyRecordPage } from '@/api/ebiz/eqiVisit/eqiVisit'
+import dateUtil from '@/assets/js/utils/date-utils'
 export default {
   name: 'VisitHistory',
   props: ['id'],
@@ -27,20 +29,26 @@ export default {
     return {
       loading: false,
       finished: false,
-      list: [1, 2, 3, 4, 5],
-      index: 5
+      dataList: [],
+      index: 5,
+      pageSize: 10,
+      pageNum: 1
     }
   },
   methods: {
-    onLoad() {
-      setTimeout(() => {
-        this.index++
-        this.loading = false
-        this.list.push(this.index)
-        if (this.index >= 30) {
-          this.finished = true
+    async getListData() {
+      let res = await getAgentAccompanyRecordPage({
+        pageReqDTO: {
+          pageSize: this.pageSize,
+          pageNum: this.pageNum
         }
-      }, 1000)
+      })
+      this.pageNum++
+      if (res.content.pageInfo.isLastPage) {
+        this.finished = true
+      }
+      this.dataList.push(...res.content.pageInfo.list)
+      this.loading = false
     },
     jumpToDetail(id) {
       this.$jump({
@@ -52,6 +60,12 @@ export default {
         routerInfo: { path: `/eqiVisit/historyDetail/${id}` }
       })
     }
+  },
+  filters: {
+    dateFilter(val) {
+      let time = new Date(Number(val))
+      return dateUtil.formatDate(time, 'yyyy-MM-dd')
+    }
   }
 }
 </script>
diff --git a/src/views/ebiz/eqiVisit/VisitInfoRegister.vue b/src/views/ebiz/eqiVisit/VisitInfoRegister.vue
index a382deff8..61e8bd94f 100644
--- a/src/views/ebiz/eqiVisit/VisitInfoRegister.vue
+++ b/src/views/ebiz/eqiVisit/VisitInfoRegister.vue
@@ -51,7 +51,7 @@
       <p class="m10">现场照片(最多9张)</p>
       <van-uploader class="m10" v-model="imageList" :after-read="uploadImg" :max-count="9" />
     </div>
-    <van-button type="info" block @click="submitInfo">提交</van-button>
+    <van-button type="info" block v-no-more-click="2000" @click="submitInfo">提交</van-button>
 
     <van-popup :value="isSearchMoreShow" position="bottom" @click-overlay="isSearchMoreShow = false">
       <div class="action van-hairline--bottom" v-for="(action, i) in actions" :key="i" @click="jumpPage(action)">{{ action.title }}</div>