mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-09 06:26:44 +08:00
工作单位设置为必填
This commit is contained in:
159
src/components/common/SearchField.vue
Normal file
159
src/components/common/SearchField.vue
Normal file
@@ -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>
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user