diff --git a/src/api/ebiz/sale/sale.js b/src/api/ebiz/sale/sale.js
index 6bf249bd8..269c01e7f 100644
--- a/src/api/ebiz/sale/sale.js
+++ b/src/api/ebiz/sale/sale.js
@@ -194,3 +194,4 @@ export function getPayState(data) {
     data
   })
 }
+
diff --git a/src/components/ebiz/occipation/Occupation.vue b/src/components/ebiz/occipation/Occupation.vue
index 692ae17ca..3eb063d1e 100644
--- a/src/components/ebiz/occipation/Occupation.vue
+++ b/src/components/ebiz/occipation/Occupation.vue
@@ -1,35 +1,59 @@
 <template>
   <div class="occupation pb70">
-    <van-search v-model="searchParams" placeholder="请输入搜索关键词" show-action shape="round" @clear="clearSearch" @search="onSearch">
+    <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="main-area fs12">
-      <div class="item p10">
-        <p class="p5" v-for="(item, index) in occupationList" :key="index" @click="handleFirst(item)" :class="{ active: first.code == item.code }">
-          {{ item.name }}
-        </p>
+    <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="item p10">
-        <p class="p5" v-for="(item, index) in sec" :key="index" @click="handleSec(item)" :class="{ active: second.code == item.code }">
-          {{ item.name }}
-        </p>
+      <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="item p10">
-        <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 v-if="third.code" class="choose-result">
-        <p>职业代码：{{ third.code }}</p>
-        <p>职业：{{ chooseName }}</p>
+      <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>
-
-    <van-button type="danger" class="bottom-btn" @click="ensureChoose">确认选择</van-button>
+    <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',
@@ -63,7 +87,10 @@ export default {
       third: {},
       chooseName: '',
       lifeGrade: '',
-      healthGrade: ''
+      healthGrade: '',
+      commonList: [],
+      isSearch: false, // 是否搜索中
+      searchList: []
     }
   },
   components: {
@@ -71,6 +98,7 @@ export default {
     [Sticky.name]: Sticky
   },
   created() {
+    // let occupationData = JSON.parse(window.localStorage.getItem('OccupationList'))
     this.init(occupationData)
   },
   mounted() {},
@@ -82,6 +110,16 @@ export default {
       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
@@ -89,43 +127,127 @@ export default {
       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)
-        console.log(this.third)
       } else {
         this.$toast('请选择职业')
       }
     },
     onSearch() {
-      let data = []
-      for (let item of occupationData) {
-        if (JSON.stringify(item).indexOf(this.searchParams) != -1) {
-          data.push(item)
-        }
+      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.init(data)
+      // 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 {
-    padding: 10px;
     display: flex;
     justify-content: space-between;
     .item {
@@ -133,20 +255,50 @@ export default {
       flex-grow: 1;
       display: flex;
       flex-direction: column;
+      height: 360px;
+      overflow-y: auto;
     }
-    .active {
-      color: red;
-      background-color: #f2f2f2;
-    }
-    .choose-result {
-      position: fixed;
-      width: 100%;
-      left: 20px;
-      bottom: 44px;
-      z-index: 100;
-      background: #ffffff;
+  }
+  .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;
-      color: red;
+      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;
     }
   }
 }
diff --git a/src/components/ebiz/occipation/OccupationPicker.vue b/src/components/ebiz/occipation/OccupationPicker.vue
index e02b803f3..17f44071a 100644
--- a/src/components/ebiz/occipation/OccupationPicker.vue
+++ b/src/components/ebiz/occipation/OccupationPicker.vue
@@ -11,12 +11,6 @@
       right-icon="arrow"
     />
     <van-popup v-model="parentShowPicker" position="bottom">
-      <!-- <div class="close" v-if="showPicker">
-        <div class="close-wrap">
-          <p>职业选择</p>
-          <van-icon name="cross" @click="cancel" />
-        </div>
-      </div> -->
       <occupation @chooseOccupation="chooseOccupation" :code="code" :name="name"></occupation>
     </van-popup>
   </div>