添加e起陪访页面

src/components/common/PopupSelector.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <van-cell-group @click.native="showPopup">
+      <van-field v-bind="$attrs" right-icon="arrow" v-model="value" :required="required" :readonly="readonly" />
+    </van-cell-group>
+    <van-popup id="popup" :value="isShow" :position="position" @click-overlay="closePopup">
+      <slot :closePopup="closePopup">
+        <van-picker id="picker" show-toolbar :columns="columns" />
+      </slot>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PopupSelectorq',
+  props: {
+    position: {
+      type: String,
+      default: 'bottom'
+    },
+    columns: {
+      type: Array,
+      default() {
+        return ['暂无数据']
+      }
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      value: '',
+      isShow: false
+    }
+  },
+  created() {},
+  methods: {
+    showPopup() {
+      this.isShow = true
+    },
+    closePopup() {
+      this.isShow = false
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+#app .van-picker__cancel,
+#app .van-picker__confirm {
+  color: #1989fa;
+}
+</style>

src/main.js

@@ -15,8 +15,7 @@ import md5 from 'js-md5'
 import cryptoJs from 'crypto-js'
 import cacheUtils from '@/assets/js/utils/cacheUtils'
 
-
-import { Cell, CellGroup, DatetimePicker, Popup, Picker, Col, Row, Tab, Tabs, NavBar, Toast, Button, Dialog, Icon, Lazyload } from 'vant'
+import { Cell, CellGroup, DatetimePicker, Popup, Picker, Col, Row, Tab, Tabs, NavBar, Toast, Button, Dialog, Icon, Lazyload, Field, Area, Uploader } from 'vant'
 Vue.use(Cell)
 Vue.use(CellGroup)
 Vue.use(DatetimePicker)
@@ -35,6 +34,9 @@ Vue.use(Dialog)
 Vue.use(Lazyload, {
   lazyComponent: true
 })
+Vue.use(Field)
+Vue.use(Area)
+Vue.use(Uploader)
 
 Vue.prototype.$assetsUrl = config.assetsUrl
 Vue.prototype.$assetsUpUrl = config.assetsUpUrl

src/router/ebiz/eqiVisit.js

@@ -0,0 +1,40 @@
+// e起陪访
+const VisitInfoRegister = () => import('@/views/ebiz/eqiVisit/VisitInfoRegister')
+const RegisterResult = () => import('@/views/ebiz/eqiVisit/RegisterResult')
+const NewcomerList = () => import('@/views/ebiz/eqiVisit/NewcomerList')
+const ScoreRanking = () => import('@/views/ebiz/eqiVisit/ScoreRanking')
+
+export default [
+  {
+    path: '/eqiVisit/VisitInfoRegister',
+    name: 'VisitInfoRegister',
+    component: VisitInfoRegister,
+    meta: {
+      title: '陪访信息登记'
+    }
+  },
+  {
+    path: '/eqiVisit/registerResult',
+    name: 'RegisterResult',
+    component: RegisterResult,
+    meta: {
+      title: '提交结果'
+    }
+  },
+  {
+    path: '/eqiVisit/newcomerList',
+    name: 'NewcomerList',
+    component: NewcomerList,
+    meta: {
+      title: '选择陪访对象'
+    }
+  },
+  {
+    path: '/eqiVisit/scoreRanking',
+    name: 'ScoreRanking',
+    component: ScoreRanking,
+    meta: {
+      title: '积分榜'
+    }
+  }
+]

src/router/ebiz/index.js

@@ -29,6 +29,8 @@ import goodStart from './goodStart'
 import renewalManage from './renewalManage'
 import question from './question'
 import hgb from './hgb'
+import eqiVisit from './eqiVisit'
+
 export default [
   ...proposal,
   ...sale,
@@ -55,5 +57,6 @@ export default [
   ...renewalManage,
   ...question,
   ...hgb,
-  ...goodStart
+  ...goodStart,
+  ...eqiVisit
 ] //根据需要进行删减

src/views/ebiz/eqiVisit/NewcomerList.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="bg-white">
+    <van-sticky>
+      <van-tabs v-model="deptIndex">
+        <van-tab v-for="(dept, i) in depts" :key="i" :title="dept.name" />
+      </van-tabs>
+      <van-tabs v-model="groupIndex">
+        <van-tab v-for="(group, i) in groups" :key="i" :title="group.name" />
+      </van-tabs>
+    </van-sticky>
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+        <div v-for="(item, i) in list" :key="i" class="van-hairline--bottom newcomer">
+          <div class="avatar">
+            <img :src="avatar" />
+          </div>
+          <div class="info">
+            <p class="mb10 agentCode">工号: {{ item.agentCode }}</p>
+            <div class="detail">
+              <span>{{ item.name }}</span>
+              <span>{{ item.gender }}</span>
+              <span>{{ item.phone }}</span>
+            </div>
+          </div>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+  </div>
+</template>
+
+<script>
+import avatar from '@/assets/images/bnf_avatar.png'
+import { Tab, Tabs, List, Sticky, PullRefresh } from 'vant'
+export default {
+  components: {
+    [Tab.name]: Tab,
+    [Tabs.name]: Tabs,
+    [List.name]: List,
+    [Sticky.name]: Sticky,
+    [PullRefresh.name]: PullRefresh
+  },
+  data() {
+    return {
+      avatar,
+      isLoading: false,
+      list: [
+        { agentCode: '0232389', name: 'xxx', gender: 0, phone: '13888888888' },
+        { agentCode: '0232389', name: 'xxx', gender: 0, phone: '13888888888' },
+        { agentCode: '0232389', name: 'xxx', gender: 0, phone: '13888888888' },
+        { agentCode: '0232389', name: 'xxx', gender: 0, phone: '13888888888' },
+        { agentCode: '0232389', name: 'xxx', gender: 0, phone: '13888888888' },
+        { agentCode: '0232389', name: 'xxx', gender: 0, phone: '13888888888' },
+        { agentCode: '0232389', name: 'xxx', gender: 0, phone: '13888888888' },
+        { agentCode: '0232389', name: 'xxx', gender: 0, phone: '13888888888' },
+        { agentCode: '0232389', name: 'xxx', gender: 0, phone: '13888888888' },
+        { agentCode: '0232389', name: 'xxx', gender: 0, phone: '13888888888' },
+        { agentCode: '0232389', name: 'xxx', gender: 0, phone: '13888888888' },
+        { agentCode: '0232389', name: 'xxx', gender: 0, phone: '13888888888' },
+        { agentCode: '0232389', name: 'xxx', gender: 0, phone: '13888888888' },
+        { agentCode: '0232389', name: 'xxx', gender: 0, phone: '13888888888' },
+        { agentCode: '0232389', name: 'xxx', gender: 0, phone: '13888888888' },
+        { agentCode: '0232389', name: 'xxx', gender: 0, phone: '13888888888' }
+      ],
+      loading: false,
+      finished: false,
+      deptIndex: 0,
+      depts: [
+        {
+          id: 1,
+          name: 'aaa部门'
+        },
+        {
+          id: 2,
+          name: 'bbb部门'
+        },
+        {
+          id: 3,
+          name: 'ccc部门'
+        }
+      ],
+      groupIndex: 0,
+      groups: [
+        {
+          id: 1,
+          name: 'aaa组'
+        },
+        {
+          id: 2,
+          name: 'bbb组'
+        },
+        {
+          id: 3,
+          name: 'ccc组'
+        },
+        {
+          id: 4,
+          name: 'ddd组'
+        },
+        {
+          id: 5,
+          name: 'eee组'
+        },
+        {
+          id: 6,
+          name: 'fff组'
+        }
+      ]
+    }
+  },
+  methods: {
+    onRefresh() {
+      setTimeout(() => {
+        this.isLoading = false
+        this.count++
+      }, 1000)
+    },
+    onLoad() {
+      // 异步更新数据
+      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+      setTimeout(() => {
+        for (let i = 0; i < 10; i++) {
+          this.list.push({ agentCode: '0232389', name: 'xxx', gender: 0, phone: '13888888888' })
+        }
+
+        // 加载状态结束
+        this.loading = false
+
+        // 数据全部加载完成
+        if (this.list.length >= 40) {
+          this.finished = true
+        }
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.newcomer {
+  display: flex;
+  padding: 10px 25px;
+  .avatar {
+    max-width: 50px;
+    margin-right: 10px;
+    img {
+      max-width: 100%;
+    }
+  }
+
+  .info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    .agentCode {
+      color: #999;
+    }
+
+    .detail {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+</style>

src/views/ebiz/eqiVisit/RegisterResult.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="bg-white container">
+    <div class="wrapper">
+      <img class="mb30 icon" :src="img" />
+      <h1 class="blue mb30">恭喜完成陪访</h1>
+      <p class="blue mb30">奖励: +1积分</p>
+      <h2 class="blue mb30">累计积分99分</h2>
+      <div class="btns p30">
+        <van-button class="mr5" plain color="#199ed8" type="primary">继续登记陪访</van-button>
+        <van-button class="ml5" plain color="#199ed8" type="primary">积分榜</van-button>
+        <van-button color="#199ed8" type="primary">返回</van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import img from '@/assets/images/success.png'
+export default {
+  data() {
+    return {
+      img
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100vh;
+}
+
+.icon {
+  transform: scale(1.5);
+}
+
+.blue {
+  color: #199ed8;
+}
+
+.btns {
+  display: flex;
+  flex-wrap: wrap;
+  .van-button:nth-of-type(1),
+  .van-button:nth-of-type(2) {
+    flex: 1;
+    margin-bottom: 10px;
+  }
+
+  .van-button:nth-of-type(3) {
+    width: 100%;
+  }
+}
+</style>

src/views/ebiz/eqiVisit/ScoreRanking.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="bg-white ranking">
+    <van-notice-bar text="温馨提示: 每日凌晨更新前一日积分排行，下拉刷新最新排行" wrapable />
+    <div class="table-wrapper">
+      <table>
+        <thead>
+          <th v-for="(th, i) in theads" :key="i" :style="{ minWidth: th.length + 2 + 'em' }">{{ th }}</th>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>撒扽撒</td>
+            <td>就安家费冲动foi</td>
+            <td>赛发赛</td>
+            <td>232</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { NoticeBar } from 'vant'
+export default {
+  components: {
+    [NoticeBar.name]: NoticeBar
+  },
+  data() {
+    return {
+      theads: ['排名', '姓名', '所在机构', '职级', '积分']
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ranking {
+  height: 100vh;
+  .table-wrapper {
+    width: 100vw;
+    overflow: auto;
+    table {
+      border-collapse: collapse;
+      text-align: center;
+    }
+    th {
+      white-space: nowrap;
+      padding: 20px 10px;
+      background: #199ed8;
+      color: #fff;
+    }
+  }
+}
+</style>

src/views/ebiz/eqiVisit/VisitInfoRegister.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="full-page bg-white">
+    <div class="form m10">
+      <van-cell-group>
+        <van-field right-icon="arrow" v-model="accompanyingName" label="陪访新人姓名" placeholder="请选择" required readonly />
+      </van-cell-group>
+      <PopupSelector label="陪访类型" placeholder="请选择" readonly required :columns="visitType" />
+      <PopupSelector label="日期" placeholder="请选择" readonly required>
+        <template v-slot:default="{ closePopup }">
+          <van-datetime-picker v-model="currentDate" type="date" @confirm="onDateConfirm($event, closePopup)" @cancel="closePopup" />
+        </template>
+      </PopupSelector>
+      <PopupSelector label="时长(h)" placeholder="请选择" readonly required :columns="duration" />
+      <van-cell-group>
+        <van-field v-model="customerName" label="客户姓名" placeholder="请输入" required />
+      </van-cell-group>
+      <PopupSelector label="客户年龄" placeholder="请选择" readonly required />
+      <PopupSelector label="地点" placeholder="请选择" readonly required>
+        <template v-slot:default="{ closePopup }">
+          <van-area :area-list="areaList" value="450000" @confirm="onAreaConfirm($event, closePopup)" @cancel="closePopup" />
+        </template>
+      </PopupSelector>
+      <van-cell-group>
+        <van-field v-model="homeAddress" label="详细地址" placeholder="请输入" required />
+      </van-cell-group>
+      <p class="m10">现场照片(最多9张)</p>
+      <van-uploader class="m10" v-model="fileList" :after-read="afterRead" :max-count="9" />
+    </div>
+    <van-button type="info" block>提交</van-button>
+  </div>
+</template>
+
+<script>
+import PopupSelector from '@/components/common/PopupSelector.vue'
+import areaList from '@/assets/js/utils/areaForSale'
+import { uploadImg } from '@/api/ebiz/sale/sale'
+
+export default {
+  name: 'VisitInfoRegister',
+  components: {
+    PopupSelector
+  },
+  data() {
+    return {
+      fileList: [],
+      areaList,
+      accompanyingName: '',
+      customerName: '',
+      homeAddress: '',
+      visitType: ['入职前陪访', '新人首单', '冲刺挑战', '参与衔训'],
+      show: false,
+      currentDate: new Date()
+    }
+  },
+  computed: {
+    duration() {
+      let duration = []
+      for (let i = 0; i < 48; i++) {
+        duration.push(0.5 + i * 0.5)
+      }
+      return duration
+    }
+  },
+  methods: {
+    async afterRead(file) {
+      let data = new FormData()
+      data.append('imgPath', file.file)
+      this.$toast.loading({
+        duration: 0
+      })
+      let res = await uploadImg(data)
+      console.log('res :>> ', res)
+      if (res.result === '0') {
+        file.result = res.path
+      }
+    },
+    onDateConfirm(data, fun) {
+      console.log('date :>> ', data)
+      fun()
+    },
+    onAreaConfirm(data, fun) {
+      console.log('data :>> ', data)
+      fun()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.full-page {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  overflow: auto;
+  .form {
+    padding-bottom: 50px;
+    flex: 1;
+  }
+}
+
+.van-button {
+  border-radius: 0;
+  position: fixed;
+  bottom: 0;
+}
+</style>