feat: 投保信息优化，信息录入更新之后同步

src/views/ebiz/productFlowImprove/ProductDetail.vue

@@ -30,10 +30,7 @@
     </div>
     <!--自定义面板-->
     <van-popup round position="bottom" v-model="isShowCalculatePremium">
-      <div style="position: sticky; top: 0; padding: 10px 0; background: #FFF">
+      <title-bar :value.sync="isShowCalculatePremium" title="保费试算" />
-        <div class="fs16" style="text-align: center;">保费试算</div>
-        <div style="position: absolute;right: 10px; top: 10px; color: red;" @click="isShowCalculatePremium = false">取消</div>
-      </div>
       <CalculatePremium :productDTOS="itemProductDTOS" />
     </van-popup>
   </div>
@@ -46,7 +43,7 @@ import { funcPermCheck } from '@/api/ebiz/common/common'
 import riskRules from '../common/risk-rules.js'
 import { getAgentInfo } from '@/api/ebiz/my/my.js'
 import CalculatePremium from './components/CalculatePremium'
-
+import TitleBar from "./components/TitleBar.vue"
 export default {
   components: {
     [Tab.name]: Tab,
@@ -58,7 +55,8 @@ export default {
     [Cell.name]: Cell,
     [Sticky.name]: Sticky,
     [ActionSheet.name]: ActionSheet,
-    CalculatePremium: CalculatePremium
+    CalculatePremium: CalculatePremium,
+    TitleBar: TitleBar,
   },
   data() {
     return {

src/views/ebiz/productFlowImprove/components/TitleBar.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <div style="position: sticky; top: 0; padding: 10px 0; background: #FFF">
+      <div class="fs16" style="text-align: center;color: #FFF">{{ title || '标题' }}</div>
+      <div style="position: absolute;right: 10px; top: 10px; color: red;" @click="handleChangePopup">取消</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['value', 'title'],
+  data() {
+    return {
+      canShow: this.value
+    }
+  },
+  methods: {
+    handleChangePopup() {
+      this.$emit("update:value", false);
+      console.log(this.value)
+    }
+  }
+}
+</script>

src/views/ebiz/saleFlowProImprove/InsuredInfo.vue

@@ -38,7 +38,7 @@
         required
         :parentShowPicker.sync="customerShowPicker"
         v-model="userInfo.name"
-        @nameChange="nameChange"
+        @blur="nameChange"
         @on-click="selectClick('1')"
       ></customer-picker>
       <van-field
@@ -145,6 +145,7 @@
         placeholder="请输入"
         v-validate="'required|mobileLength11|mobileStartWith1|mobile'"
         maxlength="11"
+        @blur="save"
       />
       <van-field
         v-model="userInfo.email"
@@ -154,6 +155,7 @@
         placeholder="请输入"
         v-validate="Number(branchType) !== 14 ? 'required|' : '' + 'email'"
         clearable
+        @blur="save"
       />
 
       <p class="email-tip" v-if="branchType == '14'">用于接收电子保单及相关服务通知</p>
@@ -183,7 +185,7 @@
         style="border-bottom: 1px solid #eee;display: flex;justify-content: space-between;align-items: center;"
         v-if="manageComCode == '45'"
       >
-        <van-radio-group v-model="userInfo.isNewPeopleFlag" class="flex">
+        <van-radio-group @change="save" v-model="userInfo.isNewPeopleFlag" class="flex">
           <label>
             <i class="red">*</i>
             新市民身份
@@ -239,6 +241,7 @@
       name="有无社保"
       required
       :value.sync="userInfo.medical"
+      @change="save"
     />
     <van-field
       :value="userInfo.taxResidentId | idToText('taxIdentity')"
@@ -298,6 +301,7 @@
       v-validate="'required|onlyNumber'"
       clearable
       maxlength="5"
+      @blur="save"
     />
     <!--      <van-field-->
     <!--        v-model="userInfo.liabilitiesMoney"-->
@@ -356,7 +360,8 @@
       v-validate="'required'"
       :value.sync="userInfo.isAsync"
       v-if="branchType != '14'"
-    ></select-radio>
+      @radioChange="save"
+    />
     <SearchField
       :isAsync="userInfo.isAsync == 1"
       @workcompanys="workcompanys"
@@ -386,6 +391,7 @@
       v-validate="'required|homeAddressNum|homeAddressCh'"
       clearable
       maxlength="30"
+      @blur="save"
       style="font-size: 3.5vw"
     />
     <!-- <van-field
@@ -559,11 +565,11 @@
 </template>
 <script>
 import { Field, CellGroup, Checkbox, Popup, Picker, Area, RadioGroup, Radio, Dialog } from 'vant'
-import SelectRadio from '@/components/ebiz/SelectRadio'
+import SelectRadio from './components/SelectRadio.vue'
 import IndexBar from '@/components/ebiz/sale/IndexBar'
 import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
-import OccupationPicker from '@/components/ebiz/occipation/OccupationPicker'
+import OccupationPicker from './components/OccupationPicker.vue'
-import CustomerPicker from '@/components/ebiz/customer/CustomerPicker'
+import CustomerPicker from './components/CustomerPicker.vue'
 import DataDictionary from '@/assets/js/utils/data-dictionary'
 import areaList from '@/assets/js/utils/areaForSale'
 import countCredentialValidity from '@/assets/js/utils/countCredentialValidity'
@@ -1000,6 +1006,7 @@ export default {
     //监听名字变化
     nameChange(name) {
       this.userInfo.name = name
+      this.save()
     },
     selectClick(index) {
       selectComp(this, index, '1')
@@ -1058,6 +1065,7 @@ export default {
         }
       })
       this.occupationShowPicker = false
+      this.save()
     },
     //弹框选择
     toSelect(pickerType, valueKey) {
@@ -1207,6 +1215,7 @@ export default {
         this.insuredDialogInfo.idNo = ''
         this.insuredDialogInfo.idType = value.id
       }
+      this.save()
     },
     //证件起始截止日期
     onDateConfirm(val, type) {
@@ -1282,6 +1291,7 @@ export default {
           }
           break
       }
+      this.save()
     },
     //选择客户
     chooseCustomer(data) {
@@ -1358,6 +1368,9 @@ export default {
       this.effectiveDateTypeAble = age <= 45
 
       this.getRelatedData(this.userInfo.idNo, '1')
+
+      //   获取信息之后进行保存操作
+      this.save()
     },
     async nextStep() {
       //表单校验, 成功跳转
@@ -1726,15 +1739,15 @@ export default {
         // if (age >= 60 && this.manageComCode == '45') {
         //   this.thisdoubledialogshow = true
         // } else {
-        this.$jump({
+        // this.$jump({
-          flag: 'h5',
+        //   flag: 'h5',
-          extra: {
+        //   extra: {
-            url: location.origin + `/#/sale/insuredPerson?${this.thismystr}` + '&orderNo=' + this.thismyorderNo
+        //     url: location.origin + `/#/sale/insuredPerson?${this.thismystr}` + '&orderNo=' + this.thismyorderNo
-          },
+        //   },
-          routerInfo: {
+        //   routerInfo: {
-            path: `/sale/insuredPerson?${this.thismystr}` + '&orderNo=' + this.thismyorderNo
+        //     path: `/sale/insuredPerson?${this.thismystr}` + '&orderNo=' + this.thismyorderNo
-          }
+        //   }
-        })
+        // })
         // }
       } else {
         this.$toast(resultData.resultMessage)
@@ -1795,6 +1808,7 @@ export default {
       } else {
         this.certiexpiredateRequired = true
       }
+      this.save()
     },
     //获取身份证扫描信息
     getIdentityInfo(data) {
@@ -1813,6 +1827,7 @@ export default {
         this.userInfo.stature = ''
         return this.$toast('身高输入有误')
       }
+      this.save()
     },
     //校验体重
     checkAvoirdupois(val) {
@@ -1827,6 +1842,7 @@ export default {
         this.userInfo.avoirdupois = ''
         return this.$toast('体重输入有误')
       }
+      this.save()
     },
     getRelatedData(val, source) {
       if (this.userInfo.idType != '1') {
@@ -1859,6 +1875,7 @@ export default {
       } else {
         // this.userInfo.effectiveDateType = false
       }
+      this.save()
     },
     reload() {
       location.reload()
@@ -1882,6 +1899,9 @@ export default {
           this.userInfo.marriage = status.id
         }
       }
+    },
+    "userInfo.sex"(){
+        this.save()
     }
   }
 }

src/views/ebiz/saleFlowProImprove/components/CustomerPicker.vue

@@ -0,0 +1,178 @@
+<template>
+  <div id="customer-picker">
+    <van-field
+      :label="label"
+      v-model="name"
+      @input="onChange"
+      :placeholder="placeholder"
+      :required="required"
+      :right-icon="$assetsUrl + 'images/avatar.png'"
+      @click-right-icon="chooseCustomer"
+      :readonly="readonly"
+      @blur="handleFieldBlur"
+    />
+    <van-popup v-model="parentShowPicker" position="bottom">
+      <customer @on-choose="choose" :code="code" :name="name" :life="life" :health="health"></customer>
+    </van-popup>
+  </div>
+</template>
+<script>
+import { Field, Popup, Icon, Sticky } from 'vant'
+import Customer from '@/components//ebiz/claims/Customer.vue'
+
+export default {
+  name: 'CustomerPicker',
+  props: {
+    label: {
+      type: String,
+      default: '11'
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    chooseName: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+
+    required: {
+      type: Boolean,
+      default: false
+    },
+    data: {
+      type: Array,
+      default: () => {
+      }
+    },
+    //选项对象中，文字对应的 key
+    valueKey: {
+      type: String,
+      default: 'text'
+    },
+    keyId: {},
+    lifeGrade: {
+      type: String,
+      default: ''
+    },
+    healthGrade: {
+      type: String,
+      default: ''
+    },
+    parentShowPicker: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      name: '',
+      code: '',
+      life: '',
+      health: '',
+      showPicker: false
+    }
+  },
+  components: {
+    [Field.name]: Field,
+    [Popup.name]: Popup,
+    [Customer.name]: Customer,
+    [Icon.name]: Icon,
+    [Sticky.name]: Sticky
+  },
+  created() {
+    this.init()
+  },
+  mounted() {
+    this.showPicker = this.parentShowPicker
+  },
+  watch: {
+    value() {
+      this.name = this.value
+    }
+  },
+  methods: {
+    /**
+     * 初始化
+     */
+
+    init() {
+      this.name = this.value
+    },
+    onChange(value) {
+      console.log(value)
+      this.$emit('nameChange', value)
+    },
+    choose(data) {
+      this.name = data.customerName
+      this.$emit('on-choose', data)
+    },
+    chooseCustomer() {
+      if (this.disabled) {
+        return
+      }
+      this.showPicker = true
+      this.$emit('on-click')
+    },
+    cancel() {
+      this.showPicker = false
+      this.$emit('cancel', '')
+    },
+    handleFieldBlur() {
+      this.$emit("update:value", this.name)
+      this.$emit('blur', this.name)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+#customer-picker {
+  .van-popup--bottom {
+    height: 100%;
+  }
+
+  .van-popup {
+    background: #f5f5f5;
+  }
+
+  /deep/ .van-cell:not(:last-child)::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    right: 0;
+    bottom: 0;
+    left: 4.26667vw;
+    border-bottom: 1px solid transparent;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+}
+
+#customer-picker:not(:last-child)::after {
+  position: absolute;
+  z-index: 99;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  // bottom: 0;
+  // top: 0;
+  left: 4.26667vw;
+  border-bottom: 1px solid #dadada;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}
+</style>

src/views/ebiz/saleFlowProImprove/components/Occupation.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="occupation pb70">
+    <van-search v-model="searchParams" @input="onSearch" placeholder="请输入搜索关键词" show-action shape="round" @clear="clearSearch" @search="onSearch">
+      <div slot="action" @click="onSearch">搜索</div>
+    </van-search>
+    <div class="choose-result fs12 pl25" v-if="third.code">
+      <p>职业代码：{{ third.code }}</p>
+      <p>职业：{{ chooseName }}</p>
+    </div>
+    <div>
+      <div :class="[isSearch ? 'hidden' : '']">
+        <p class="fs14 pl20 fwb pv5">常用职业</p>
+        <div class="common-occupation flex flex-wrap fs12 ph25">
+          <div v-for="(item, index) in commonList" @click="commonChoose(item, index)" :key="index" :class="[item.isActive ? 'active' : '', 'fwb']">
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <div :class="[isSearch ? 'hidden' : '']">
+        <p class="fs14 pl20 fwb pv5">全部职业</p>
+        <div class="main-area fs12 ph10">
+          <div class="item ph10">
+            <p class="p5" v-for="(item, index) in occupationList" :key="index" @click="handleFirst(item)" :class="{ active: first.code == item.code }">
+              {{ item.name }}
+            </p>
+          </div>
+          <div class="item ph10">
+            <p class="p5" v-for="(item, index) in sec" :key="index" @click="handleSec(item)" :class="{ active: second.code == item.code }">
+              {{ item.name }}
+            </p>
+          </div>
+          <div class="item ph10">
+            <p class="p5" v-for="(item, index) in thi" :key="index" @click="handleThi(item)" :class="{ active: third.code == item.code }">
+              {{ item.name }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div :class="[isSearch ? '' : 'hidden']">
+        <p class="fs14 pl20 fwb pv5">搜索结果</p>
+        <div class="item p10 search-result fs14 flex flex-direction-colunm">
+          <p class="p5 mv5" :class="[item.isActive ? 'active' : '']" v-for="(item, index) in searchList" @click="searchChoose(item, index)" :key="index">
+            <span v-html="item.showName.replace(new RegExp(searchParams, 'g'), `<span class=&quot;red&quot;>${searchParams}</span>`)"></span>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="close-btn fixed">
+      <van-button type="danger" @click="ensureChoose">确认选择</van-button>
+      <!-- <van-button type="primary" @click="$emit('chooseOccupation', '')">取消</van-button> -->
+    </div>
+  </div>
+</template>
+<script>
+import occupationData from './data/occupation'
+import { getBankList } from '@/api/ebiz/sale/sale'
+import { Search, Sticky } from 'vant'
+export default {
+  name: 'Occupation',
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    code: {
+      type: String,
+      default: ''
+    },
+    life: {
+      type: String,
+      default: ''
+    },
+    health: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      occupationList: [],
+      sec: [], //二级数据
+      thi: [], //三级数据
+      choose: [],
+      searchParams: '',
+      first: {},
+      second: {},
+      third: {},
+      chooseName: '',
+      lifeGrade: '',
+      healthGrade: '',
+      commonList: [],
+      isSearch: false, // 是否搜索中
+      searchList: []
+    }
+  },
+  components: {
+    [Search.name]: Search,
+    [Sticky.name]: Sticky
+  },
+  created() {
+    // let occupationData = JSON.parse(window.localStorage.getItem('OccupationList'))
+    this.init(occupationData)
+  },
+  mounted() {},
+  methods: {
+    init(data) {
+      this.occupationList = data
+      this.chooseName = this.name
+      this.third.code = this.code
+      this.lifeGrade = this.life
+      this.healthGrade = this.health
+      this.third = {}
+
+      getBankList({
+        operateType: 'hot_occupation'
+      }).then(res => {
+        if (res.result == '0') {
+          this.commonList = res.content
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    handleFirst(item) {
+      this.sec = item.subs
+      this.first = item
+      this.second = {}
+      this.thi = []
+      this.third = {}
+      this.commonInit()
+    },
+    handleSec(item) {
+      this.thi = item.subs
+      this.second = item
+      this.third = {}
+      this.commonInit()
+    },
+    handleThi(item) {
+      this.third = item
+      this.chooseName = this.third.name
+      this.commonInit()
+    },
+    ensureChoose() {
+      if (this.third.code) {
+        this.$emit('chooseOccupation', this.third)
+      } else {
+        this.$toast('请选择职业')
+      }
+    },
+    onSearch() {
+      this.sec = []
+      this.thi = []
+      this.first = {}
+      this.second = {}
+      this.third = {}
+      this.commonInit()
+      if (this.searchParams) {
+        this.searchList = []
+        this.isSearch = true
+        this.occupationList.forEach(first => {
+          first.subs.forEach(second => {
+            second.subs.forEach(third => {
+              if (third.name.indexOf(this.searchParams) != -1) {
+                // this.searchList.push(Object.assign(third, { isActive: false }, { showName: first[index1].name + second[index2].name + third.name }))
+                this.searchList.push(Object.assign(third, { isActive: false }, { showName: first.name + ' - ' + second.name + ' - ' + third.name }))
+                console.log('first = ', first)
+              }
+            })
+          })
+        })
+        console.log('this.searchList ==', this.searchList)
+      } else {
+        this.isSearch = false
+      }
+      // this.isSearch = true
+
+      // let data = JSON.parse(JSON.stringify(occupationData))
+      // data.forEach(first => {
+      //   first.firstSubs = []
+      //   first.subs.forEach(second => {
+      //     second.secondSubs = []
+      //     second.subs.forEach(third => {
+      //       if (third.name.indexOf(this.searchParams) != -1) {
+      //         second.secondSubs.push(third)
+      //       }
+      //     })
+      //     second.subs = second.secondSubs
+      //     if (second.secondSubs.length != 0) {
+      //       first.firstSubs.push(second)
+      //     }
+      //     delete second.secondSubs
+      //   })
+      //   first.subs = first.firstSubs
+      //   delete first.firstSubs
+      // })
+      // for (let i = 0; i < data.length; i++) {
+      //   if (data[i].subs.length == 0) {
+      //     data.splice(i, 1)
+      //     i--
+      //   }
+      // }
+      // this.init(data)
+    },
+    clearSearch() {
+      this.init(occupationData)
+    },
+    commonChoose(item, index) {
+      this.commonInit()
+      this.commonList[index].isActive = true
+      this.occupationList.forEach(occupation => {
+        occupation.subs.forEach(sub => {
+          sub.subs.forEach(occupaitonItem => {
+            if (occupaitonItem.code == item.code) {
+              this.first = occupation
+              this.sec = occupation.subs
+              this.second = sub
+              this.thi = sub.subs
+              this.third = occupaitonItem
+              this.chooseName = this.third.name
+            }
+          })
+        })
+      })
+    },
+    searchChoose(item, index) {
+      this.searchList.forEach(item => {
+        item.isActive = false
+      })
+      this.searchList[index].isActive = true
+      this.third = item
+      this.chooseName = this.third.name
+    },
+    commonInit() {
+      this.commonList.forEach(item => {
+        item.isActive = false
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.close-btn {
+  bottom: 0;
+  width: 100%;
+  .van-button {
+    width: 100% !important;
+  }
+}
+.occupation {
+  .main-area {
+    display: flex;
+    justify-content: space-between;
+    .item {
+      width: 0;
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      // height: 360px;
+      max-height: 220px;
+      overflow-y: auto;
+    }
+  }
+  .choose-result {
+    width: 100%;
+    background: #ffffff;
+    line-height: 20px;
+    color: #e9332e;
+    box-sizing: border-box;
+    height: 40px;
+  }
+  .hidden {
+    visibility: hidden;
+  }
+  .common-occupation {
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    // flex-wrap: wrap;
+    align-items: center;
+    div {
+      // width: 30%;
+      // height: 20px;
+      padding: 4px;
+      line-height: 20px;
+      text-align: center;
+      border: 1px solid #f2f2f2;
+      margin: 5px;
+      border-radius: 10px;
+      box-sizing: border-box;
+    }
+  }
+  .active {
+    color: #e9332e;
+    background-color: #f2f2f2;
+  }
+  .search-result {
+    height: 420px;
+    overflow-y: auto;
+    p {
+      // margin: 0 auto;
+      text-align: left;
+      min-width: 120px;
+    }
+  }
+}
+</style>

src/views/ebiz/saleFlowProImprove/components/OccupationPicker.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="date-picter" id="occupation-picker">
+    <van-field
+      readonly
+      clickable
+      :label="label"
+      :value="chooseName"
+      :placeholder="placeholder"
+      @click="openOccupation"
+      :required="required"
+      right-icon="arrow"
+    />
+    <van-popup v-model="showPicker" position="bottom" style="max-height: 95%" round>
+      <title-bar :value.sync="showPicker" title="选择职业"/>
+      <occupation @chooseOccupation="chooseOccupation" :code="code" :name="name"></occupation>
+    </van-popup>
+  </div>
+</template>
+<script>
+import { Field, Popup, Icon } from 'vant'
+import Occupation from './Occupation'
+import TitleBar from '@/views/ebiz/productFlowImprove/components/TitleBar.vue'
+
+export default {
+  name: 'OccupationPicker',
+  props: {
+    label: {
+      type: String,
+      default: '11'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    chooseName: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+
+    required: {
+      type: Boolean,
+      default: false
+    },
+    data: {
+      type: Array,
+      default: () => {
+      }
+    },
+    //选项对象中，文字对应的 key
+    valueKey: {
+      type: String,
+      default: 'text'
+    },
+    keyId: {},
+    lifeGrade: {
+      type: String,
+      default: ''
+    },
+    healthGrade: {
+      type: String,
+      default: ''
+    },
+    parentShowPicker: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      name: '',
+      code: '',
+      life: '',
+      health: '',
+      showPicker: false
+    }
+  },
+  components: {
+    [Field.name]: Field,
+    [Popup.name]: Popup,
+    [Icon.name]: Icon,
+    [Occupation.name]: Occupation,
+    TitleBar: TitleBar,
+  },
+  created() {
+    this.init()
+  },
+  mounted() {
+  },
+  methods: {
+    /**
+     * 初始化
+     */
+    init() {
+      this.code = this.value
+      this.name = this.chooseName
+      this.life = this.lifeGrade
+      this.health = this.healthGrade
+    },
+    chooseOccupation(data) {
+      let { code, name, healthGrade, lifeGrade } = data
+      this.$emit('update:value', code)
+      this.$emit('update:chooseName', name)
+      this.$emit('update:lifeGrade', lifeGrade)
+      this.$emit('update:healthGrade', healthGrade)
+      this.$emit('on-choose', data)
+      this.name = name
+      this.showPicker = false
+    },
+    openOccupation() {
+      if (this.disabled) {
+        return
+      }
+      this.$emit('on-click')
+      this.showPicker = true
+    },
+    cancel() {
+      this.showPicker = false
+      this.$emit('cancel', '')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.date-picter:not(:last-child)::after {
+  position: absolute;
+  z-index: 99;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  // bottom: 0;
+  // top: 0;
+  left: 4.26667vw;
+  border-bottom: 1px solid #dadada;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}
+
+#occupation-picker {
+  /deep/ .van-cell:not(:last-child)::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    right: 0;
+    bottom: 0;
+    left: 4.26667vw;
+    border-bottom: 1px solid transparent;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+}
+
+.van-popup--bottom {
+  height: 100%;
+}
+
+.close {
+  // display: flex;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  text-align: center;
+  align-items: center;
+  // right: 20px;
+  // left: 20px;
+  .close-wrap {
+    display: flex;
+    padding: 5px 10px;
+    background-color: #fff;
+
+    .van-icon {
+      font-size: 20px;
+    }
+
+    p {
+      font-size: 16px;
+      flex-grow: 1;
+    }
+  }
+}
+</style>

src/views/ebiz/saleFlowProImprove/components/SelectRadio.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="sex-radio">
+    <div class="van-cell-group ">
+      <div class="van-cell van-field pv7" :class="{ 'van-cell--required': required }">
+        <div class="van-cell__title van-field__label">
+          <span>{{ label }}</span>
+        </div>
+        <van-radio-group class="radio-area" v-model="radio" @change="handleRadioChange">
+          <van-radio @click="handleChoose(itemRadio.value)" :name="itemRadio.value" v-for="(itemRadio, index) in radios"
+                     :key="index">
+            <div slot="icon"></div>
+            <van-button :color="color" class="ph30" :type="type" :plain="radio!=itemRadio.value" round size="small">
+              {{ itemRadio.label }}
+            </van-button>
+          </van-radio>
+        </van-radio-group>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { RadioGroup, Radio } from 'vant'
+
+export default {
+  name: 'select-radio',
+  props: {
+    value: {
+      type: String | Boolean,
+      default: '0'
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'danger'
+    },
+    radios: {
+      type: Array,
+      default: () => ([])
+    },
+    required: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+    handleChoose(value) {
+      if (this.disabled) {
+        return
+      }
+      this.$emit('update:value', value)
+      this.$emit('radioChange', value)
+      // this.$emit('change', this.radio)
+    }, handleRadioChange() {
+      this.$emit('change', this.radio)
+    }
+  },
+  computed: {
+    radio: {
+      get() {
+        return this.value
+      },
+      set() {
+      }
+    }
+  },
+  components: {
+    [RadioGroup.name]: RadioGroup,
+    [Radio.name]: Radio
+  }
+}
+</script>
+<style lang="scss"></style>
+<style lang="scss" scoped>
+.sex-radio {
+  .radio-area {
+    display: -webkit-flex;
+    display: flex;
+    justify-content: flex-start;
+    margin-left: -8px;
+  }
+
+  .van-cell {
+    align-items: center;
+  }
+
+  .van-button--plain {
+    background: #fff;
+  }
+}
+
+.sex-radio:not(:last-child)::after {
+  position: absolute;
+  z-index: 99;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  // bottom: 0;
+  // top: 0;
+  left: 4.26667vw;
+  border-bottom: 1px solid #dadada;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}
+
+</style>