添加e起陪访页面

src/main.js

@@ -35,7 +35,8 @@ import {
   Area,
   Uploader,
   PullRefresh,
-  List
+  List,
+  Image as VanImage
 } from 'vant'
 Vue.use(Cell)
 Vue.use(CellGroup)
@@ -60,6 +61,7 @@ Vue.use(Area)
 Vue.use(Uploader)
 Vue.use(PullRefresh)
 Vue.use(List)
+Vue.use(VanImage)
 
 Vue.prototype.$assetsUrl = config.assetsUrl
 Vue.prototype.$assetsUpUrl = config.assetsUpUrl

src/router/ebiz/eqiVisit.js

@@ -4,10 +4,12 @@ const RegisterResult = () => import('@/views/ebiz/eqiVisit/RegisterResult')
 const NewcomerList = () => import('@/views/ebiz/eqiVisit/NewcomerList')
 const ScoreRanking = () => import('@/views/ebiz/eqiVisit/ScoreRanking')
 const VisitHistory = () => import('@/views/ebiz/eqiVisit/VisitHistory')
+const HistoryDetail = () => import('@/views/ebiz/eqiVisit/HistoryDetail')
+const ScoreHistory = () => import('@/views/ebiz/eqiVisit/ScoreHistory')
 
 export default [
   {
-    path: '/eqiVisit/VisitInfoRegister',
+    path: '/eqiVisit/visitInfoRegister',
     name: 'VisitInfoRegister',
     component: VisitInfoRegister,
     meta: {
@@ -45,5 +47,21 @@ export default [
     meta: {
       title: '陪访记录'
     }
+  },
+  {
+    path: '/eqiVisit/historyDetail',
+    name: 'VisitHistory',
+    component: HistoryDetail,
+    meta: {
+      title: '陪访记录详情'
+    }
+  },
+  {
+    path: '/eqiVisit/scoreHistory',
+    name: 'ScoreHistory',
+    component: ScoreHistory,
+    meta: {
+      title: '查询积分'
+    }
   }
 ]

src/views/ebiz/eqiVisit/HistoryDetail.vue

@@ -0,0 +1,87 @@
+<template>
+  <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-cell-group>
+    <van-cell-group>
+      <van-field label-width="120" v-model="newcomerName" label="陪访新人姓名" readonly />
+    </van-cell-group>
+    <van-cell-group>
+      <van-field label-width="120" v-model="visitDuration" label="时长" readonly />
+    </van-cell-group>
+    <van-cell-group>
+      <van-field label-width="120" v-model="customerName" label="客户姓名" readonly />
+    </van-cell-group>
+    <van-cell-group>
+      <van-field label-width="120" v-model="customerAge" 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-cell-group>
+    <van-cell-group>
+      <van-field label-width="120" label="现场照片" readonly />
+    </van-cell-group>
+    <div class="imgs">
+      <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>
+      </van-grid>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Grid, GridItem } from 'vant'
+export default {
+  components: {
+    [Grid.name]: Grid,
+    [GridItem.name]: GridItem
+  },
+  data() {
+    return {
+      accompanyingName: '弓箭',
+      newcomerName: '胡娜',
+      visitDuration: '4',
+      customerName: '但你',
+      customerAge: '28',
+      homeProvince: '河北省',
+      homeCity: '泰安市',
+      homeArea: '清丰县',
+      homeAddress: '泰安公寓1-706'
+    }
+  },
+  computed: {
+    homeLocation() {
+      return `${this.homeProvince} ${this.homeCity} ${this.homeArea}`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.history-detail {
+  min-height: 100vh;
+  .date {
+    font-size: 14px;
+    background-color: #ebebeb;
+  }
+
+  .imgs {
+    padding: 0 8px;
+  }
+}
+</style>

src/views/ebiz/eqiVisit/ScoreHistory.vue

@@ -0,0 +1,58 @@
+<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>
+        <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>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.score-history {
+  min-height: 100vh;
+  .year {
+    padding: 5px 10px;
+    background-color: #ebebeb;
+  }
+  .history-item {
+    .col {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .col:nth-of-type(2) {
+      color: #999999;
+    }
+  }
+}
+</style>

src/views/ebiz/eqiVisit/VisitHistory.vue

@@ -1,13 +1,99 @@
 <template>
-  <div></div>
+  <div class="history bg-white">
+    <div class="history-item p10 van-hairline--bottom">
+      <div>陪访类型</div>
+      <div>被陪访人</div>
+      <div>日期</div>
+    </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 list-complete-item" v-for="i in list" :key="i">
+          <div>冲刺挑战</div>
+          <div>胡娜</div>
+          <div class="time">
+            <span>2020-01-09</span>
+            <van-icon name="arrow" />
+          </div>
+        </div>
+      </transition-group>
+    </van-list>
+  </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {}
+    return {
+      loading: false,
+      finished: false,
+      list: [1, 2, 3, 4, 5],
+      index: 5
+    }
+  },
+  methods: {
+    onLoad() {
+      setTimeout(() => {
+        this.index++
+        this.loading = false
+        this.list.push(this.index)
+        if (this.index >= 30) {
+          this.finished = true
+        }
+      }, 1000)
+    }
   }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+* {
+  box-sizing: border-box;
+}
+.history {
+  min-height: 100vh;
+  .history-item {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 16px;
+    div {
+      flex: 1;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      color: #333;
+    }
+  }
+
+  .time {
+    position: relative;
+  }
+
+  .divider {
+    height: 10px;
+    background-color: #ebebeb;
+  }
+}
+
+.van-icon {
+  position: absolute;
+  font-weight: bold;
+  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>