添加路由跳转, 页面样式调整

src/router/ebiz/eqiVisit.js

@@ -49,9 +49,10 @@ export default [
     }
   },
   {
-    path: '/eqiVisit/historyDetail',
+    path: '/eqiVisit/historyDetail/:id',
     name: 'VisitHistory',
     component: HistoryDetail,
+    props: true,
     meta: {
       title: '陪访记录详情'
     }

src/views/ebiz/eqiVisit/ScoreRanking.vue

@@ -1,62 +1,65 @@
 <template>
   <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
     <div class="bg-white ranking">
-      <van-notice-bar text="温馨提示: 每日凌晨更新前一日积分排行，下拉刷新最新排行" wrapable />
+      <van-notice-bar :text="noticeText" wrapable />
-      <div class="table-wrapper">
+      <div class="table-wrapper" v-if="data.length">
         <table class="van-hairline--surround">
           <thead>
             <th v-for="(th, i) in theads" :key="i">{{ th }}</th>
           </thead>
           <tbody>
             <tr class="van-hairline--bottom">
-              <td class="van-hairline--right van-hairline--bottom" style="max-width: 2em;">{{ agentRank.rank }}</td>
+              <template v-if="agentRank">
-              <td class="van-hairline--right van-hairline--bottom" style="max-width: 3em;">{{ agentRank.name }}</td>
+                <td class="van-hairline--right van-hairline--bottom" style="max-width: 2em;">{{ agentRank.rank }}</td>
-              <td class="van-hairline--right van-hairline--bottom" style="max-width: 4em;">{{ agentRank.org }}</td>
+                <td class="van-hairline--right van-hairline--bottom" style="max-width: 3em;">{{ agentRank.name }}</td>
-              <td class="van-hairline--right van-hairline--bottom" style="max-width: 2em;">{{ agentRank.level }}</td>
+                <td class="van-hairline--right van-hairline--bottom" style="max-width: 4em;">{{ agentRank.org }}</td>
-              <td class="van-hairline--bottom" style="max-width: 2em;">{{ agentRank.score }}</td>
+                <td class="van-hairline--right van-hairline--bottom" style="max-width: 2em;">{{ agentRank.level }}</td>
+                <td class="van-hairline--bottom" style="max-width: 2em;" @click="jumpToDetail">{{ agentRank.score }}</td>
+              </template>
+              <td v-else colspan="5">暂无积分</td>
+            </tr>
+
+            <tr v-for="(d, index) in data" :key="index">
+              <td class="van-hairline--right van-hairline--bottom" style="max-width: 2em;">{{ d.rank }}</td>
+              <td class="van-hairline--right van-hairline--bottom" style="max-width: 3em;">{{ d.name }}</td>
+              <td class="van-hairline--right van-hairline--bottom" style="max-width: 4em;">{{ d.org }}</td>
+              <td class="van-hairline--right van-hairline--bottom" style="max-width: 2em;">{{ d.level }}</td>
+              <td class="van-hairline--bottom" style="max-width: 2em;">{{ d.score }}</td>
             </tr>
-            <template v-for="j in 20">
-              <tr v-for="(d, index) in data" :key="index">
-                <td class="van-hairline--right van-hairline--bottom" style="max-width: 2em;">{{ j }}</td>
-                <td class="van-hairline--right van-hairline--bottom" style="max-width: 3em;">{{ d.name }}</td>
-                <td class="van-hairline--right van-hairline--bottom" style="max-width: 4em;">{{ d.org }}</td>
-                <td class="van-hairline--right van-hairline--bottom" style="max-width: 2em;">{{ d.level }}</td>
-                <td class="van-hairline--bottom" style="max-width: 2em;">{{ d.score }}</td>
-              </tr>
-            </template>
           </tbody>
         </table>
       </div>
+      <div class="empty pt150">
+        <p class="mb10">暂无排名</p>
+        <img :src="empty" />
+      </div>
     </div>
   </van-pull-refresh>
 </template>
 
 <script>
 import { NoticeBar } from 'vant'
+import empty from '@/assets/images/empty.png'
 export default {
   components: {
     [NoticeBar.name]: NoticeBar
   },
   data() {
     return {
-      agentRank: {
+      empty,
-        rank: 1,
+      agentRank: null,
-        name: '弓箭',
-        org: '国富人寿国富人寿国富',
-        level: '区经理',
-        score: 9
-      },
       isLoading: false,
       theads: ['排名', '姓名', '所在机构', '职级', '积分'],
-      data: [
+      data: []
-        {
+    }
-          rank: 1,
+  },
-          name: '速度飞快',
+  computed: {
-          org: '国富人寿国富人寿',
+    noticeText() {
-          level: '区经理',
+      if (this.data.length) {
-          score: 99
+        return '温馨提示: 每日凌晨更新前一日积分排行，下拉刷新最新排行'
-        }
+      } else {
-      ]
+        return '温馨提示：当前暂无最新排名，赶紧去陪访吧！'
+      }
     }
   },
   methods: {
@@ -64,6 +67,16 @@ export default {
       setTimeout(() => {
         this.isLoading = false
       }, 2000)
+    },
+    jumpToDetail() {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          forbidSwipeBack: '1',
+          url: location.origin + `/#/eqiVisit/scoreHistory`
+        },
+        routerInfo: { path: `/eqiVisit/scoreHistory` }
+      })
     }
   }
 }
@@ -94,9 +107,22 @@ export default {
       }
     }
   }
+
+  .empty {
+    text-align: center;
+    p {
+      font-size: 20px;
+      color: #999999;
+    }
+  }
 }
 
 .van-pull-refresh {
   overflow: auto;
 }
+
+.van-notice-bar {
+  background-color: #f6f6f6;
+  color: #199ed8;
+}
 </style>

src/views/ebiz/eqiVisit/VisitHistory.vue

@@ -7,22 +7,22 @@
     </div>
     <div class="divider" />
     <van-list v-model="loading" :finished="finished" @load="onLoad" finished-text="没有更多了...">
-      <transition-group name="list-complete">
+      <div class="history-item p10 van-hairline--bottom arrow" v-for="i in list" :key="i" @click="jumpToDetail(i)">
-        <div class="history-item p10 van-hairline--bottom arrow list-complete-item" v-for="i in list" :key="i">
+        <div>冲刺挑战</div>
-          <div>冲刺挑战</div>
+        <div>胡娜</div>
-          <div>胡娜</div>
+        <div class="time">
-          <div class="time">
+          <span>2020-01-09</span>
-            <span>2020-01-09</span>
+          <van-icon name="arrow" />
-            <van-icon name="arrow" />
-          </div>
         </div>
-      </transition-group>
+      </div>
     </van-list>
   </div>
 </template>
 
 <script>
 export default {
+  name: 'VisitHistory',
+  props: ['id'],
   data() {
     return {
       loading: false,
@@ -41,6 +41,16 @@ export default {
           this.finished = true
         }
       }, 1000)
+    },
+    jumpToDetail(id) {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          forbidSwipeBack: '1',
+          url: location.origin + `/#/eqiVisit/historyDetail/${id}`
+        },
+        routerInfo: { path: `/eqiVisit/historyDetail/${id}` }
+      })
     }
   }
 }
@@ -82,18 +92,4 @@ export default {
   top: 50%;
   transform: translate(50%, -60%);
 }
-
-.list-complete-item {
-  transition: all 1s;
-  display: inline-block;
-  width: 100%;
-}
-.list-complete-enter,
-.list-complete-leave-to {
-  opacity: 0;
-  transform: translateY(30px);
-}
-.list-complete-leave-active {
-  position: absolute;
-}
 </style>

src/views/ebiz/eqiVisit/VisitInfoRegister.vue

@@ -52,6 +52,10 @@
       <van-uploader class="m10" v-model="fileList" :after-read="afterRead" :max-count="9" />
     </div>
     <van-button type="info" block @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>
+    </van-popup>
   </div>
 </template>
 
@@ -85,7 +89,25 @@ export default {
       visitDate: '',
       visitDuration: '',
       show: false,
-      currentDate: new Date()
+      currentDate: new Date(),
+      isSearchMoreShow: false,
+      actions: [
+        {
+          title: '陪访记录',
+          to: '/eqiVisit/visitHistory'
+        },
+        {
+          title: '查询积分',
+          to: '/eqiVisit/scoreHistory'
+        },
+        {
+          title: '积分榜',
+          to: '/eqiVisit/scoreRanking'
+        },
+        {
+          title: '取消'
+        }
+      ]
     }
   },
   computed: {
@@ -106,7 +128,28 @@ export default {
       return age
     }
   },
+  mounted() {
+    this.setRightBtn()
+  },
   methods: {
+    setRightBtn() {
+      // setTimeout(() => {
+      //   // eslint-disable-next-line no-undef
+      //   EWebBridge.webCallAppInJs('webview_right_button', {
+      //     btns: [
+      //       {
+      //         title: '查询更多'
+      //       }
+      //     ]
+      //   })
+      // }, 1000)
+      window.appCallBack = this.appCallBack
+    },
+    appCallBack(data) {
+      if (data.trigger == 'right_button_click') {
+        this.isSearchMoreShow = true
+      }
+    },
     async afterRead(file) {
       let data = new FormData()
       data.append('imgPath', file.file)
@@ -135,11 +178,26 @@ export default {
       fun()
     },
     async submitInfo() {
-      let res = await this.$validator.validate()
+      this.isSearchMoreShow = true
-      if (!res) {
+      // let res = await this.$validator.validate()
-        return this.$toast(this.$validator.errors.all()[0])
+      // if (!res) {
+      //   return this.$toast(this.$validator.errors.all()[0])
+      // }
+      // console.log('res :>> ', res)
+    },
+    jumpPage(route) {
+      if (route.to) {
+        this.$jump({
+          flag: 'h5',
+          extra: {
+            forbidSwipeBack: '1',
+            url: location.origin + `/#${route.to}`
+          },
+          routerInfo: { path: route.to }
+        })
+      } else {
+        this.isSearchMoreShow = false
       }
-      console.log('res :>> ', res)
     }
   }
 }
@@ -151,10 +209,17 @@ export default {
   height: 100vh;
   position: fixed;
   overflow: auto;
+
   .form {
     padding-bottom: 50px;
     flex: 1;
   }
+
+  .action {
+    text-align: center;
+    font-size: 16px;
+    padding: 12px;
+  }
 }
 
 .van-button {