From 4714ee339e0e196eff90406736f569836c2600b5 Mon Sep 17 00:00:00 2001
From: mengxiaolong <meng.xiaolong@ebiz-digits.com>
Date: Wed, 28 Oct 2020 11:24:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BB=BA=E8=AE=AE=E4=B9=A6=E5=9B=9E=E9=80=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .prettierrc                                   |  1 +
 .../ebiz/proposal/BreadcrumbNavigator.vue     | 80 +++++++++++++++++++
 src/views/ebiz/proposal/Appnt.vue             | 40 ++++++++--
 .../ebiz/proposal/ChooseInsuredPerson.vue     | 45 ++++++-----
 src/views/ebiz/proposal/List.vue              |  1 +
 5 files changed, 141 insertions(+), 26 deletions(-)
 create mode 100644 src/components/ebiz/proposal/BreadcrumbNavigator.vue

diff --git a/.prettierrc b/.prettierrc
index ee32447f9..1548dded4 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,5 @@
 {
+  "trailingComma": "none",
   "semi": false,
   "singleQuote": true,
   "printWidth": 160,
diff --git a/src/components/ebiz/proposal/BreadcrumbNavigator.vue b/src/components/ebiz/proposal/BreadcrumbNavigator.vue
new file mode 100644
index 000000000..0212b1c66
--- /dev/null
+++ b/src/components/ebiz/proposal/BreadcrumbNavigator.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="index">
+    <div class="navigator-item" v-for="(item, index) in navigatorItems" :key="index">
+      <span class="title" :class="{ active: index === current }" @click="jump(index)">{{ index + 1 }}.{{ item }}</span>
+      <div v-if="showArrow(index)" class="arrow">
+        <div class="arrow-line" :style="{ backgroundColor: index === current ? 'red' : '' }" />
+        <van-icon name="arrow" :class="{ active: index === current }" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BreadcrumbNavigator',
+  props: {
+    current: {
+      type: Number,
+      default: 0
+    },
+    stepIn: {
+      type: Function
+    }
+  },
+  data() {
+    return {
+      navigatorItems: ['投保人信息', '选择被保人', '生成建议书'],
+      routerInfos: ['proposal/appnt', 'proposal/chooseInsuredPerson']
+    }
+  },
+  methods: {
+    jump(index) {
+      if (index === this.current || index == 2) return
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/${this.routerInfos[index]}`,
+          needRefresh: '1'
+        },
+        routerInfo: {
+          path: `/${this.routerInfos[index]}`
+        }
+      })
+    },
+    showArrow(index) {
+      return index + 1 != this.navigatorItems.length
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.index {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .navigator-item {
+    display: flex;
+    align-items: center;
+    margin: 5px 2px;
+    .title {
+      font-size: 14px;
+    }
+    .active {
+      color: red;
+    }
+    .arrow {
+      display: flex;
+      align-items: center;
+    }
+    .arrow-line {
+      width: 10px;
+      height: 1px;
+      background-color: #2c3e50;
+      border-radius: 1px;
+      margin-left: 2px;
+    }
+  }
+}
+</style>
diff --git a/src/views/ebiz/proposal/Appnt.vue b/src/views/ebiz/proposal/Appnt.vue
index 2f604ccdf..018cb2203 100644
--- a/src/views/ebiz/proposal/Appnt.vue
+++ b/src/views/ebiz/proposal/Appnt.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="pt10">
+  <div>
+    <BreadcrumbNavigator />
     <van-cell-group class="proposal-appnt">
       <customer-picker
         class="border-bottom"
@@ -13,7 +14,6 @@
         :parentShowPicker.sync="customerShowPicker"
         :value.sync="appntDTO.name"
       ></customer-picker>
-
       <select-radio class="border-bottom" :radios="sexRadio" label="性别" :value.sync="appntDTO.sex"></select-radio>
       <FieldDatePicter
         @confirm="dateConfirm"
@@ -44,7 +44,6 @@
       />
       <div class="border-bottom">
         <van-field :border="false" v-model="appntDTO.age" clearable label="年龄" v-validate="'appntAge'" placeholder="投保人年龄" :readonly="ageFlag" />
-        <!-- <van-field :border="false" v-model="appntDTO.age" clearable label="年龄" v-validate="'appntAge'" placeholder="投保人年龄" readonly /> -->
       </div>
       <van-field :border="false" v-model="appntDTO.mobile" clearable label="手机号码" name="手机号码" placeholder="投保人手机号码" v-validate="'mobile'" />
       <van-button type="danger" @click="nextStep" class="bottom-btn fs16">下一步</van-button>
@@ -60,6 +59,8 @@ import { CellGroup, Field } from 'vant'
 import { saveProposal } from '@/api/ebiz/proposal/proposal.js'
 import getAge from '@/assets/js/utils/age.js'
 import beforeDate from '@/assets/js/utils/getBeforeDate.js'
+import BreadcrumbNavigator from '@/components/ebiz/proposal/BreadcrumbNavigator'
+import { getDetail } from '@/api/ebiz/proposal/proposal.js'
 
 export default {
   data() {
@@ -98,13 +99,38 @@ export default {
     [Field.name]: Field,
     [FieldDatePicter.name]: FieldDatePicter,
     [OccupationPicker.name]: OccupationPicker,
-    [CustomerPicker.name]: CustomerPicker
+    [CustomerPicker.name]: CustomerPicker,
+    BreadcrumbNavigator
   },
   created() {
     this.init()
+    // 回显信息
+    this.echoInfo()
   },
-  mounted() {},
   methods: {
+    async echoInfo() {
+      // 从编辑页面过来时localstorage存在orderNo
+      const orderNo = this.$CacheUtils.getLocItem('orderNo')
+      if (orderNo) {
+        let proposalInfoDTO = {
+          orderNo
+        }
+        let res = await getDetail(proposalInfoDTO)
+        this.appntDTO = res.content[0].appntDTO
+      }
+    },
+    stepIn() {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#/proposal/appnt',
+          needRefresh: '1'
+        },
+        routerInfo: {
+          path: '/proposal/appnt'
+        }
+      })
+    },
     init() {
       // 筛选按钮的点击事件
       window.appCallBack = this.appCallBack
@@ -204,7 +230,7 @@ export default {
 
     nextStep() {
       this.appntDTO.age = String(this.appntDTO.age)
-      this.$validator.validate().then(valid => {
+      this.$validator.validate().then((valid) => {
         if (true === valid) {
           //进行投保人年龄校验（大于18周岁）
           let params = {
@@ -215,7 +241,7 @@ export default {
               }
             }
           }
-          saveProposal(params).then(res => {
+          saveProposal(params).then((res) => {
             if (res.result == '0') {
               localStorage.orderNo = res.content.orderNo
               if (this.appntDTO.socialSecurity) {
diff --git a/src/views/ebiz/proposal/ChooseInsuredPerson.vue b/src/views/ebiz/proposal/ChooseInsuredPerson.vue
index f7dda410c..e299635eb 100644
--- a/src/views/ebiz/proposal/ChooseInsuredPerson.vue
+++ b/src/views/ebiz/proposal/ChooseInsuredPerson.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="choose-insuredPerson pb60 pt10">
+  <div class="choose-insuredPerson pb60">
+    <BreadcrumbNavigator :current="1" :stepIn="stepIn" />
     <div slot="content" class="p10 bg-white flex h80 justify-content-s">
       <div v-for="item in persons" class="text-center" :key="item.code" @click="handleChoose(item)">
         <div class="relative">
@@ -45,6 +46,7 @@ import icon4 from '@/assets/images/4.png'
 import icon5 from '@/assets/images/5.png'
 import { Icon, Dialog, Toast } from 'vant'
 import { getDetail, saveProposal, deleteProposal } from '@/api/ebiz/proposal/proposal.js'
+import BreadcrumbNavigator from '@/components/ebiz/proposal/BreadcrumbNavigator'
 
 import data from '@/assets/js/utils/data-dictionary.js'
 let relation = data.relationToAppnt
@@ -102,21 +104,18 @@ export default {
   },
   components: {
     [Icon.name]: Icon,
-    [Toast.name]: Toast
+    [Toast.name]: Toast,
+    BreadcrumbNavigator
   },
-  created() {},
   mounted() {
     //根据后台数据来展示
     let proposalInfoDTO = {
-      orderNo: localStorage.orderNo
+      orderNo: this.$CacheUtils.getLocItem('orderNo')
     }
     getDetail(proposalInfoDTO).then(res => {
-      console.log(res, '详情')
-
       if (res.result == '0') {
         this.chooseList = res.content[0].insuredDTOs
-        console.log(res.content[0].appntDTO, 'zzz')
-        localStorage.proposalAppnt = JSON.stringify(res.content[0].appntDTO)
+        this.$CacheUtils.setLocItem('proposalAppnt', JSON.stringify(res.content[0].appntDTO))
         this.proposalInfo = res.content[0]
         if (this.chooseList != null) {
           this.chooseList.forEach(v => {
@@ -165,6 +164,18 @@ export default {
     })
   },
   methods: {
+    stepIn() {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#/proposal/appnt',
+          needRefresh: '1'
+        },
+        routerInfo: {
+          path: '/proposal/appnt'
+        }
+      })
+    },
     //生成建议书
     produceProposal() {
       let chooseList = this.chooseList
@@ -200,7 +211,7 @@ export default {
       }
       saveProposal(params).then(res => {
         if (res.result == '0') {
-          localStorage.orderNo = res.content.orderNo
+          this.$CacheUtils.setLocItem('orderNo', res.content.orderNo)
           //调用保存接口
           this.$jump({
             flag: 'h5',
@@ -217,7 +228,6 @@ export default {
 
     //从页头选择被保险人
     handleChoose(item) {
-      console.log(item)
       if (!item.check) {
         //增加
         item.check = !item.check
@@ -252,7 +262,7 @@ export default {
             let parans = {
               orderDTO: {
                 orderInfoDTO: {
-                  orderNo: localStorage.orderNo
+                  orderNo: this.$CacheUtils.getLocItem('orderNo')
                 },
                 insuredDTOs: deletePerson
               },
@@ -271,8 +281,6 @@ export default {
     },
     //删除被保险人
     deletePerson(choose, index) {
-      console.log(choose)
-
       Dialog.confirm({
         className: 'dialog-delete',
         title: '提示',
@@ -287,7 +295,7 @@ export default {
           let params = {
             orderDTO: {
               orderInfoDTO: {
-                orderNo: localStorage.orderNo
+                orderNo: this.$CacheUtils.getLocItem('orderNo')
               },
               insuredDTOs: [
                 {
@@ -324,8 +332,8 @@ export default {
         relationToAppnt: person.relation,
         relationName: person.relationName
       }
-      localStorage.saleInsuredPersonInfo = JSON.stringify(saleInsuredPersonInfo) //存储被保险人信息
-      localStorage.chooseProductCodes = '' //置空所选险种
+      this.$CacheUtils.setLocItem('saleInsuredPersonInfo', JSON.stringify(saleInsuredPersonInfo)) //存储被保险人信息
+      this.$CacheUtils.setLocItem('chooseProductCodes', '') //置空所选险种
 
       this.$jump({
         flag: 'h5',
@@ -341,8 +349,8 @@ export default {
     edit(item) {
       item.birthday = item.birthdayLabel
       item.age = item.insuredAge
-      localStorage.saleInsuredPersonInfo = JSON.stringify(item) //存储被保险人信息
-      localStorage.isFrom = 'proposal'
+      this.$CacheUtils.getLocItem('saleInsuredPersonInfo', JSON.stringify(item)) //存储被保险人信息
+      this.$CacheUtils.getLocItem('isFrom', 'proposal')
       this.$jump({
         flag: 'h5',
         extra: {
@@ -367,7 +375,6 @@ export default {
     },
 
     formatChoose(choose, index) {
-      console.log(choose, index)
       let has = false //判断当前是否有相同的已经选中的
       this.chooseList.splice(index, 1)
       this.chooseList.forEach(value => {
diff --git a/src/views/ebiz/proposal/List.vue b/src/views/ebiz/proposal/List.vue
index 7d9b98988..c2f2c86ff 100644
--- a/src/views/ebiz/proposal/List.vue
+++ b/src/views/ebiz/proposal/List.vue
@@ -110,6 +110,7 @@ export default {
     }
   },
   created() {
+    this.$CacheUtils.removeLocItem('orderNo')
     // document.body.style.backgroundColor = '#F5F5F5'
     setTimeout(() => {
       // eslint-disable-next-line no-undef