[FIX]【电投】职业类别控件样式恢复到之前

src/components/ebiz/occipation/Occupation.vue

@@ -1,54 +1,31 @@
 <template>
   <div class="occupation pb70">
-    <van-search v-model="searchParams" @input="onSearch" placeholder="请输入搜索关键词" show-action shape="round" @clear="clearSearch" @search="onSearch">
+    <van-search v-model="searchParams" 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">
+    <div class="main-area fs12">
-      <p>职业代码：{{ third.code }}</p>
+      <div class="item p10">
-      <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">
+      <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>
-          <div class="item ph10">
+      <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>
     </div>
-      <div :class="[isSearch ? '' : 'hidden']">
+
-        <p class="fs14 pl20 fwb pv5">搜索结果</p>
+    <van-button type="danger" class="bottom-btn" @click="ensureChoose">确认选择</van-button>
-        <div class="item p10 search-result fs12 flex flex-direction-colunm">
-          <p class="p5 mv5" :class="[item.isActive ? 'active' : '']" v-for="(item, index) in searchList" @click="searchChoose(item, index)" :key="index">
-            {{ item.showName }}
-          </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>
@@ -86,95 +63,7 @@ export default {
       third: {},
       chooseName: '',
       lifeGrade: '',
-      healthGrade: '',
+      healthGrade: ''
-      commonList: [
-        {
-          code: '2070202',
-          lifeGrade: '2',
-          name: '保险推销员',
-          healthGrade: '1',
-          isActive: false
-        },
-        {
-          code: '2099907',
-          lifeGrade: '1',
-          name: '一般学生',
-          healthGrade: '1',
-          isActive: false
-        },
-        {
-          code: '8000001',
-          lifeGrade: '2',
-          name: '无业人员',
-          healthGrade: '1',
-          isActive: false
-        },
-        {
-          code: '2099908',
-          lifeGrade: '1',
-          name: '学龄前儿童',
-          healthGrade: '1',
-          isActive: false
-        },
-        {
-          code: '3010101',
-          lifeGrade: '1',
-          name: '行政业务办公人员（内勤）',
-          healthGrade: '1',
-          isActive: false
-        },
-        {
-          code: '5010101',
-          lifeGrade: '2',
-          name: '农夫',
-          healthGrade: '1',
-          isActive: false
-        },
-        {
-          code: '2090301',
-          lifeGrade: '1',
-          name: '中学教师',
-          healthGrade: '1',
-          isActive: false
-        },
-        {
-          code: '2090401',
-          lifeGrade: '1',
-          name: '小学教师',
-          healthGrade: '1',
-          isActive: false
-        },
-        {
-          code: '4010101',
-          lifeGrade: '1',
-          name: '营业员',
-          healthGrade: '1',
-          isActive: false
-        },
-        {
-          code: '1050102',
-          lifeGrade: '1',
-          name: '企业经理',
-          healthGrade: '1',
-          isActive: false
-        },
-        {
-          code: '4071203',
-          lifeGrade: '1',
-          name: '家庭主妇',
-          healthGrade: '1',
-          isActive: false
-        },
-        {
-          code: '4010201',
-          lifeGrade: '2',
-          name: '推销员',
-          healthGrade: '1',
-          isActive: false
-        }
-      ],
-      isSearch: false, // 是否搜索中
-      searchList: []
     }
   },
   components: {
@@ -182,7 +71,6 @@ export default {
     [Sticky.name]: Sticky
   },
   created() {
-    // let occupationData = JSON.parse(window.localStorage.getItem('OccupationList'))
     this.init(occupationData)
   },
   mounted() {},
@@ -201,127 +89,43 @@ 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() {
-      this.sec = []
+      let data = []
-      this.thi = []
+      for (let item of occupationData) {
-      this.first = {}
+        if (JSON.stringify(item).indexOf(this.searchParams) != -1) {
-      this.second = {}
+          data.push(item)
-      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.isSearch = true
+      this.init(data)
-
-      // 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 {
@@ -329,50 +133,20 @@ export default {
       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;
+      color: red;
       background-color: #f2f2f2;
     }
-  .search-result {
+    .choose-result {
-    height: 420px;
+      position: fixed;
-    overflow-y: auto;
+      width: 100%;
-    p {
+      left: 20px;
-      margin: 0 auto;
+      bottom: 44px;
-      text-align: center;
+      z-index: 100;
-      min-width: 120px;
+      background: #ffffff;
+      line-height: 20px;
+      color: red;
     }
   }
 }

src/components/ebiz/occipation/OccupationPicker.vue

@@ -11,6 +11,12 @@
       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>