[IMP]电投-职业类别控件样式优化

src/components/ebiz/occipation/Occupation.vue

@@ -1,31 +1,54 @@
 <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="choose-result fs12 pl25" v-if="third.code">
-      <div class="item p10">
+      <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' : '']">
+            {{ 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 p10">
+          <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 p10">
+          <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 v-if="third.code" class="choose-result">
-        <p>职业代码：{{ third.code }}</p>
-        <p>职业：{{ chooseName }}</p>
         </div>
       </div>
-
+      <div :class="[isSearch ? '' : 'hidden']">
-    <van-button type="danger" class="bottom-btn" @click="ensureChoose">确认选择</van-button>
+        <p class="fs14 pl20 fwb pv5">搜索结果</p>
+        <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.name }}
+          </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>
@@ -36,20 +59,20 @@ export default {
   props: {
     name: {
       type: String,
-      default: ''
+      default: '',
     },
     code: {
       type: String,
-      default: ''
+      default: '',
     },
     life: {
       type: String,
-      default: ''
+      default: '',
     },
     health: {
       type: String,
-      default: ''
+      default: '',
-    }
+    },
   },
   data() {
     return {
@@ -63,14 +86,61 @@ export default {
       third: {},
       chooseName: '',
       lifeGrade: '',
-      healthGrade: ''
+      healthGrade: '',
+      commonList: [
+        {
+          code: '2099907',
+          lifeGrade: '1',
+          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,
+        },
+      ],
+      isSearch: false, // 是否搜索中
+      searchList: [],
     }
   },
   components: {
     [Search.name]: Search,
-    [Sticky.name]: Sticky
+    [Sticky.name]: Sticky,
   },
   created() {
+    // let occupationData = JSON.parse(window.localStorage.getItem('OccupationList'))
     this.init(occupationData)
   },
   mounted() {},
@@ -89,43 +159,124 @@ 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 = []
+      this.sec = []
-      for (let item of occupationData) {
+      this.thi = []
-        if (JSON.stringify(item).indexOf(this.searchParams) != -1) {
+      this.first = {}
-          data.push(item)
+      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 }))
               }
+            })
+          })
+        })
+      } 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: 50% !important;
+  }
+}
 .occupation {
   .main-area {
-    padding: 10px;
     display: flex;
     justify-content: space-between;
     .item {
@@ -133,20 +284,46 @@ 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;
     line-height: 20px;
-      color: red;
+    color: #4fc6b3;
+    box-sizing: border-box;
+    height: 40px;
+  }
+  .hidden {
+    visibility: hidden;
+  }
+  .common-occupation {
+    width: 100%;
+    box-sizing: border-box;
+    div {
+      width: 27%;
+      height: 20px;
+      line-height: 20px;
+      text-align: center;
+      border: 1px solid #f2f2f2;
+      margin: 5px;
+      border-radius: 10px;
+      box-sizing: border-box;
+    }
+  }
+  .active {
+    color: #4fc6b3;
+    background-color: #f2f2f2;
+  }
+  .search-result {
+    height: 420px;
+    overflow-y: auto;
+    p {
+      margin: 0 auto;
+      text-align: center;
+      min-width: 120px;
     }
   }
 }

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>