mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-16 04:06:44 +08:00
303 lines
8.3 KiB
Vue
303 lines
8.3 KiB
Vue
<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 pb20">
|
||
<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="red">${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: ''
|
||
},
|
||
// 卡单与短期险重新投保选择职业类别时，两个模块中职业类型数据的排序不同，利用这个字段，在下方进行判断区分
|
||
// 1 -- 卡单，2-- 短期险重新投保
|
||
type: {
|
||
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
|
||
},
|
||
watch: {
|
||
code(newValue) {
|
||
this.occupationList.forEach(occupation => {
|
||
occupation.subs.forEach(sub => {
|
||
sub.subs.forEach(occupaitonItem => {
|
||
if (occupaitonItem.code == newValue) {
|
||
this.first = occupation
|
||
this.sec = occupation.subs
|
||
this.second = sub
|
||
this.thi = sub.subs
|
||
this.third = occupaitonItem
|
||
this.chooseName = this.third.name
|
||
}
|
||
})
|
||
})
|
||
})
|
||
}
|
||
},
|
||
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: this.type == '1' ? 'hot_occupation_card' : '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
|
||
}
|
||
},
|
||
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;
|
||
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>
|