From b36ace934a490fb38a102349e37d7a9caf55f934 Mon Sep 17 00:00:00 2001
From: mengxiaolong <meng.xiaolong@ebiz-digits.com>
Date: Mon, 18 Jan 2021 18:47:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E5=8D=95=E4=BD=8D=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E4=B8=BA=E5=BF=85=E5=A1=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/SearchField.vue | 159 ++++++++++++++++++++++++++
 src/views/ebiz/sale/InsuredInfo.vue   |   5 +-
 src/views/ebiz/sale/InsuredPerson.vue |   5 +-
 3 files changed, 165 insertions(+), 4 deletions(-)
 create mode 100644 src/components/common/SearchField.vue

diff --git a/src/components/common/SearchField.vue b/src/components/common/SearchField.vue
new file mode 100644
index 000000000..d9a9917fe
--- /dev/null
+++ b/src/components/common/SearchField.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="search_box" ref="search_box">
+    <van-field :label="label" required>
+      <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>
diff --git a/src/views/ebiz/sale/InsuredInfo.vue b/src/views/ebiz/sale/InsuredInfo.vue
index 6d85e0262..af262f921 100644
--- a/src/views/ebiz/sale/InsuredInfo.vue
+++ b/src/views/ebiz/sale/InsuredInfo.vue
@@ -260,7 +260,7 @@
         right-icon="arrow"
         @click="toSelect('7')"
       /> -->
-      <van-field
+      <!-- <van-field
         v-if="specilFlag != '1'"
         v-model="userInfo.workcompany"
         label="工作单位"
@@ -280,7 +280,8 @@
         placeholder="请选择"
         v-validate="'required'"
         @click="toSelect('9')"
-      />
+      /> -->
+      <SearchField v-model="userInfo.workcompany" label="工作单位" placeholder="无工作单位，请输入无" v-validate="'required'" name="工作单位" />
       <!-- <van-field
           v-model="areaName"
           readonly
diff --git a/src/views/ebiz/sale/InsuredPerson.vue b/src/views/ebiz/sale/InsuredPerson.vue
index 2dda02ed9..69317e690 100644
--- a/src/views/ebiz/sale/InsuredPerson.vue
+++ b/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="工作单位"
@@ -305,7 +305,8 @@
         maxlength="50"
         clearable
         :readonly="isAppnt"
-      />
+      /> -->
+      <SearchField v-model="userInfo.workcompany" label="工作单位" placeholder="无工作单位，请输入无" v-validate="'required'" name="工作单位" />
       <!-- <van-field
         v-model="areaName"
         readonly