Merge branch 'feature/优化工作单位输入' into release/20210120

src/components/common/SearchField.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="search_box" ref="search_box">
+    <van-field :label="label">
+      <template #input>
+        <input
+          style="width: 100%; border: none;"
+          type="text"
+          :placeholder="placeholder"
+          :value="searchContent"
+          @click="onInputFocus"
+          @blur="onInputBlur"
+          @input="onInput"
+        />
+        <transition name="slide-in">
+          <div ref="picker" class="content_info" v-show="showCustomer">
+            <div class="border_item" v-for="(item, index) in computedCustomerList" :value="item.label" :key="index" @click="chooseCustomer(item)">
+              {{ item.label }}
+            </div>
+            <div class="border_item" v-show="computedCustomerList == 0">
+              无结果
+            </div>
+          </div>
+        </transition>
+      </template>
+    </van-field>
+  </div>
+</template>
+<script>
+import { Field } from 'vant'
+import { getTreasureMenus } from '@/api/ebiz/goodStart'
+export default {
+  name: 'SearchField',
+  props: {
+    label: {
+      type: String,
+      default: '标题'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入内容'
+    },
+    value: {
+      type: String
+    }
+  },
+  components: {
+    [Field.name]: Field
+  },
+  data() {
+    return {
+      showCustomer: false,
+      customerList: []
+    }
+  },
+  computed: {
+    computedCustomerList() {
+      let searchStr = this.value.trim()
+      return this.customerList.filter(item => {
+        return item.label.includes(searchStr)
+      })
+    },
+    searchContent() {
+      return this.value
+    }
+  },
+  async created() {
+    const param = { operateType: 'insure_company' }
+    const result = await getTreasureMenus(param)
+    if (result.result === '0') {
+      this.customerList = result.content
+    } else {
+      this.$toast(result.resultMessage)
+    }
+  },
+  methods: {
+    onInput(event) {
+      this.$emit('input', event.target.value)
+    },
+    onInputBlur() {
+      this.showCustomer = false
+      this.$emit('input', this.value)
+    },
+    onInputFocus() {
+      this.showCustomer = true
+      setTimeout(() => {
+        this.$refs.picker.scrollIntoView()
+      }, 300)
+      this.$nextTick(() => {
+        this.$refs.picker.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        })
+      })
+    },
+    chooseCustomer(item) {
+      this.$emit('input', item.label)
+      this.showCustomer = false
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.border_item {
+  box-sizing: content-box;
+  padding: 5px;
+  height: 20px;
+  line-height: 20px;
+  color: #666;
+  text-align: center;
+  font-size: 12px;
+  overflow: hidden;
+}
+
+.content_info::-webkit-scrollbar {
+  display: none;
+}
+
+.search_box {
+  position: relative;
+}
+.content_info {
+  position: absolute;
+  width: 100%;
+  background: white;
+  border-radius: 0 0 6px 6px;
+  top: 34px;
+  max-height: 150px;
+  overflow: scroll;
+  box-shadow: 0 1px 1px 1px #eee;
+  z-index: 10;
+}
+
+/deep/ .van-cell {
+  overflow: visible;
+}
+
+/deep/ .van-cell__value {
+  overflow: visible;
+}
+
+.slide-in-enter,
+.slide-in-leave-to {
+  opacity: 0;
+  position: absolute;
+  top: 44px;
+}
+
+.slide-in-leave,
+.slide-in-enter-to {
+  opacity: 1;
+  position: absolute;
+  top: 34px;
+}
+
+.slide-in-enter-active,
+.slide-in-leave-active {
+  transition: all ease 0.3s;
+}
+</style>

src/views/ebiz/sale/InsuredInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="insured-info-container pb50 redRadioCheckbox">
+  <div class="insured-info-container pb60 redRadioCheckbox">
     <!-- 基本信息 -->
     <index-bar></index-bar>
     <van-cell-group class="mt10">
@@ -260,7 +260,7 @@
         right-icon="arrow"
         @click="toSelect('7')"
       /> -->
-      <van-field
+      <!-- <van-field
         v-if="specilFlag != '1'"
         v-model="userInfo.workcompany"
         label="工作单位"
@@ -282,7 +282,8 @@
         placeholder="请选择"
         v-validate="'required'"
         @click="toSelect('9')"
-      />
+      /> -->
+      <SearchField v-model="userInfo.workcompany" label="工作单位" placeholder="无工作单位，请输入无" />
       <!-- <van-field
           v-model="areaName"
           readonly
@@ -393,6 +394,8 @@ import beforeDate from '@/assets/js/utils/getBeforeDate.js'
 import { idToData } from './js/verification'
 import { selectComp, getIdentityInfo } from './js/methods'
 
+import SearchField from '@/components/common/SearchField'
+
 export default {
   name: 'insuredInfo',
   components: {
@@ -410,7 +413,8 @@ export default {
     [Radio.name]: Radio,
     [IdentityCardScan.name]: IdentityCardScan,
     [IndexBar.name]: IndexBar,
-    [Dialog.name]: Dialog
+    [Dialog.name]: Dialog,
+    SearchField
   },
   data() {
     return {

src/views/ebiz/sale/InsuredPerson.vue

@@ -297,7 +297,7 @@
         right-icon="arrow"
         @click="toSelect('8')"
       /> -->
-      <van-field
+      <!-- <van-field
         v-model="userInfo.workcompany"
         label="工作单位"
         name="工作单位"
@@ -307,7 +307,8 @@
         v-validate="'required'"
         clearable
         :readonly="isAppnt"
-      />
+      /> -->
+      <SearchField v-model="userInfo.workcompany" label="工作单位" placeholder="无工作单位，请输入无" />
       <!-- <van-field
         v-model="areaName"
         readonly
@@ -454,6 +455,8 @@ import { idToData } from './js/verification'
 import { selectComp, getIdentityInfo } from './js/methods'
 import IndexBar from '@/components/ebiz/sale/IndexBar'
 
+import SearchField from '@/components/common/SearchField'
+
 export default {
   name: 'insuredInfo',
   components: {
@@ -469,7 +472,8 @@ export default {
     [Area.name]: Area,
     [IdentityCardScan.name]: IdentityCardScan,
     [IndexBar.name]: IndexBar,
-    [Dialog.name]: Dialog
+    [Dialog.name]: Dialog,
+    SearchField
   },
   data() {
     return {