技能列表移动端适配

认证方向，数据绑定

components/public/occupation_direction.vue

@@ -1,28 +1,47 @@
 <template>
-  <div>
-    <el-cascader
-      :options="list"
-    ></el-cascader>
-  </div>
+<div>
+    <el-cascader :options="list" v-model="value" @change="change"></el-cascader>
+</div>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      list: []
-    };
-  },
-  async mounted() {
-    const res = await this.$axios.$post("/uapi/work/get/get.occupation.direction.form.sign.new");
-    this.list=res.data.list;
-  },
-  methods: {
+    data() {
+        return {
+            value: [],
+            list: []
+        };
+    },
+    async mounted() {
+        const res = await this.$axios.$post(
+            "/uapi/work/get/get.occupation.direction.form.sign.new"
+        );
+        this.list = res.data.list;
+    },
+    methods: {
+        getValue(arr) {
+            if (!arr || arr.length == 0) {
+                this.$message.error("请选择方向");
+            }
+            let result = [];
+            let target = this.list;
 
-  }
+            arr.forEach(selectItem => {
+                let {
+                    children,
+                    ...options
+                } = target.find(item => item.value == selectItem)
+                result.push(options);
+                target = children;
+            });
+            return result
+        },
+        change(e) {
+            let result = this.getValue(e)
+            this.$emit('change', result)
+        }
+    }
 };
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

components/skill_cert_header/skill_cert_header.vue

@@ -1,72 +1,76 @@
 <template>
-  <div class="skill-cert-header">
+<div class="skill-cert-header">
     <div class="page-title">
-      <span class="text">{{title}}</span>
-      <span class="cert-status">未认证</span>
+        <span class="text">{{title}}</span>
+        <span class="cert-status">{{isCert ? '已认证':'未认证'}}</span>
     </div>
     <div class="divider"></div>
-  </div>
+</div>
 </template>
 
 <script>
-  export default {
+export default {
     name: "skill_cert_header",
     props: {
-      title: {
-        type: String,
-        default: ''
-      }
+        title: {
+            type: String,
+            default: ''
+        },
+        isCert: {
+            type: Boolean,
+            default: false
+        }
     }
-  }
+}
 </script>
 
 <style lang="scss" scoped>
-  .skill-cert-header {
+.skill-cert-header {
     display: flex;
     flex-direction: column;
     width: 100%;
     box-sizing: border-box;
 
     .page-title {
-      width: 100%;
-      position: relative;
-      height: 75px;
+        width: 100%;
+        position: relative;
+        height: 75px;
 
-      .text {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 24px;
-        font-family: PingFangSC, PingFangSC-Semibold, sans-serif;
-        font-weight: 600;
-        color: #222222;
-        text-align: center;
-      }
+        .text {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 24px;
+            font-family: PingFangSC, PingFangSC-Semibold, sans-serif;
+            font-weight: 600;
+            color: #222222;
+            text-align: center;
+        }
 
-      .cert-status {
-        position: absolute;
-        width: 61px;
-        height: 30px;
-        opacity: 0.8;
-        background: #efefef;
-        border-radius: 4px;
+        .cert-status {
+            position: absolute;
+            width: 61px;
+            height: 30px;
+            opacity: 0.8;
+            background: #efefef;
+            border-radius: 4px;
 
-        font-size: 13px;
-        font-family: PingFangSC, PingFangSC-Regular, sans-serif;
-        font-weight: 400;
-        text-align: center;
-        color: #666666;
-        line-height: 30px;
-        right: 0;
-        top: 22px;
-      }
+            font-size: 13px;
+            font-family: PingFangSC, PingFangSC-Regular, sans-serif;
+            font-weight: 400;
+            text-align: center;
+            color: #666666;
+            line-height: 30px;
+            right: 0;
+            top: 22px;
+        }
     }
 
     .divider {
-      width: 100%;
-      height: 2px;
-      border: 1px solid rgba(0, 0, 0, 0.06);
+        width: 100%;
+        height: 2px;
+        border: 1px solid rgba(0, 0, 0, 0.06);
     }
-  }
+}
 </style>

pages/frontend/skill_cert/add.vue

@@ -33,9 +33,10 @@
         <div class="field-selector skill-cert-status-main">
           <span class="selector-title">选择认证方向:</span>
           <div class="fields skill-cert-select">
-            <occupation_direction />
+            <occupation_direction @change="directionChange"/>
           </div>
-          <div class="skill-cert-status">已认证</div>
+
+          <div class="skill-cert-status">{{isDirectionCert ? '已认证':'未认证'}}</div>
         </div>
         <div class="skill-cret-list">
           <skills></skills>
@@ -44,12 +45,12 @@
 
 
       <!-- 技能认证：end -->
-      <div class="level-selector" @click="toLevelsDesc">
+      <div class="level-selector">
         <div class="col-title">
           <span class="label">选择认证等级</span>
         </div>
-        <span class="action">等级对照表</span>
-        <img class="icon" src="@/assets/img/skill_cert/icon_tips.png" alt=""/>
+        <span class="action"  @click="toLevelsDesc">等级对照表</span>
+        <img class="icon"  @click="toLevelsDesc" src="@/assets/img/skill_cert/icon_tips.png" alt=""/>
       </div>
       <div class="level-selector">
         <el-select v-model="level" placeholder="认证等级" clearable @change="handleLevelChange">
@@ -109,7 +110,7 @@
   import flow from "@/components/flow/flow";
   import skillCertHeader from "@/components/skill_cert_header/skill_cert_header";
   import occupation_direction from "@/components/public/occupation_direction";
-  import skills from "@/components/sign/skills";
+  import skills from "./components/skills";
   import resume_improve from "./resume_improve";
 
   export default {
@@ -179,6 +180,10 @@
         fileList: [],
         level: '',
         price: '',
+
+        directionFirstLevelValue:"",
+        directionSecondLevelValue:"",
+        isDirectionCert:false,
       };
     },
     computed: {
@@ -254,12 +259,21 @@
         this.dialogImageUrl = file.url;
         this.dialogVisible = true;
       },
+      directionChange(value) {
+        let firstItem = value[0]
+        let secondItem = value[1]
+
+        this.directionFirstLevelValue = firstItem.value;
+        this.directionSecondLevelValue = secondItem.value;
+
+        this.isDirectionCert = secondItem.freework_level > 0 ? true : false;
+      },
       submit() {
         const form = {
           product_type: 12,
           item_id: this.level,
-          occupation_id: 1,//一级方向
-          direction_id: 1,//二级方向
+          occupation_id: this.directionFirstLevelValue,//一级方向
+          direction_id: this.directionSecondLevelValue,//二级方向
           file: this.fileList.map((ele) => ele.response.filename).join(','),
           id: this.form.id || ''
         };
@@ -617,9 +631,8 @@
       }
   }
   .skill-cert-select{
-    flex:1
+    flex:1;
+    margin-right: 20px;
   }
-  // .skill-cert-status{
-  //     align-self:flex-end;
-  //   }
+
 </style>