发布兼职推进

assets/css/public.css

@@ -453,6 +453,10 @@
   width: 55%;
 }
 
+.app__w_80_p {
+  width: 80%;
+}
+
 .app__mw_20_p {
   max-width: 20%;
 }
@@ -541,6 +545,10 @@
   line-height: 40px;
 }
 
+.app__lh_45 {
+  line-height: 45px;
+}
+
 .app__lh_50 {
   line-height: 50px;
 }
@@ -687,6 +695,10 @@
   text-align: center;
 }
 
+.app__ta_e {
+  text-align: end;
+}
+
 .app__tras {
   transition: 0.5s ease-in-out;
 }

pages/otherpage/publish/publish.vue

@@ -1,6 +1,8 @@
 <template>
-  <div :class="{ isMobile: mobile }">
-    <div v-if="!mobile">
+  <!--  <div :class="{ isMobile: mobile }">-->
+  <!--    <div v-if="!mobile">-->
+  <div>
+    <div>
       <div class="app__bg_w">
         <!--工作方式、职业类型-->
         <div class="app__w_100vw app__pl_10 app__pr_10 ">
@@ -17,7 +19,28 @@
           </div>
           <div class="app__h_50 app__f_r app__al_c">
             <p class="app__fs_15 app__f_g_1"><span class="app__fc_r">*</span>职业类型</p>
-            <p class="app__fs_16 app__fc_999">请选择</p>
+            <p class="app__fs_16 app__fc_999" @click="careeDirectionDialogVisible = true">
+              {{careeLv2Index > -1 ? careeChildren[careeLv2Index].direction_name : "请选择"}}
+            </p>
+            <el-dialog title="" :visible.sync="careeDirectionDialogVisible" width="80%" center>
+              <div class="app__f_r app__w_80p">
+                <!--职业方向  -级列表-->
+                <div class="app__f_1 app__h_172" style="overflow: scroll">
+                  <p class="app__h_45 app__lh_45 app__bd_b_eee" :class="{'app__fc_308EFF':index=== careeLv1Index}"
+                     v-for="(caree,index) in careeDirectionDatas"
+                     @click="careeSelectEvent(1,caree.occupation_id)">
+                    {{caree.occupation_name}} </p>
+                </div>
+                <!--职业方向  二级列表-->
+                <div class="app__f_1 app__h_172 app__ml_10" style="overflow: scroll">
+                  <p class="app__h_45 app__lh_45 app__bd_b_eee" v-for="(curSubCaree ,index) in careeChildren"
+                     :class="{'app__fc_308EFF':index=== careeLv2Index}"
+                     @click="careeSelectEvent(2,curSubCaree.direction_id)">
+                    {{curSubCaree.direction_name}}
+                  </p>
+                </div>
+              </div>
+            </el-dialog>
             <img src="../../../assets/img/credit/rightIcon.png" class="app__ml_10" style="width:7px;height:13px"/>
           </div>
         </div>
@@ -30,12 +53,8 @@
       <!--技能要求-->
       <div class="app__pl_10 app__pr_10 app__h_50 app__f_r app__al_c app__mt_10 app__bd_b_eee app__bg_w">
         <p class="app__fs_15 app__f_g_1"><span class="app__fc_r">*</span>技能要求</p>
-        <el-popover placement="left-end" trigger="click" v-model="skillShow">
-          <el-table :data="needSkills">
-            <el-table-column property="label" label="日期"></el-table-column>
-          </el-table>
-        </el-popover>
-        <p class="app__fs_16 app__fc_999 app__f_1" @click="skillShow = !skillShow">请选择</p>
+
+        <p class="app__fs_16 app__fc_999 app__f_1" style="text-align: end" @click="isSkillShow = !isSkillShow">请选择</p>
         <img src="../../../assets/img/credit/rightIcon.png" class="app__ml_10" style="width:7px;height:13px"/>
       </div>
       <!--薪资范围-->
@@ -60,7 +79,26 @@
       <!--工作地点-->
       <div class="app__pl_10 app__pr_10 app__h_50 app__f_r app__al_c app__mt_10 app__bd_b_eee app__bg_w">
         <p class="app__fs_15 app__f_g_1"><span class="app__fc_r">*</span>工作地点</p>
-        <input class="app__fs_16 app__fc_999" style="" placeholder="请输入" style="text-align: end"/>
+        <el-dialog title="" :visible.sync="isShoWorkPlace" width="80%" center>
+          <div class="app__f_r app__w_80_p app__jf_c">
+            <!--省-->
+            <div class="app__h_172" style="overflow: scroll;">
+              <p class="app__h_45 app__lh_45 app__bd_b_eee app__ta_c" :class="{'app__fc_308EFF':province.id=== selectProvince.id}"
+                 v-for="(province,index) in provinceDatas"
+                 @click="workPlaceSelectEvent(1,province.id)">
+                {{province.name}} </p>
+            </div>
+            <!--市-->
+            <div class="app__h_172 app__ml_30" style="overflow: scroll;min-width: 50px">
+              <p class="app__h_45 app__lh_45 app__bd_b_eee app__ta_c" v-for="(city ,index) in cityDatas"
+                 :class="{'app__fc_308EFF':city.id=== selectCity.id}"
+                 @click="workPlaceSelectEvent(2,city.id)">
+                {{city.name}}
+              </p>
+            </div>
+          </div>
+        </el-dialog>
+        <p class="app__fs_16 app__fc_999" style="text-align: end" @click="isShoWorkPlace = !isShoWorkPlace">{{selectCity.name || "请选择"}}</p>
         <img src="../../../assets/img/credit/rightIcon.png" class="app__ml_10" style="width:7px;height:13px"/>
       </div>
       <!--企业信息-->
@@ -83,25 +121,55 @@
 </template>
 
 <script>
+  import mobile from "@/components/type/vip/mobile";
+
   export default {
     name: "publish",
 
     data() {
       return {
         params: {workType: 0, minSalary: "", maxSalary: "", experience: 0},
-        jobType: [{value: "0", label: '前端'}, {value: "1", label: '后端'}, {value: "2", label: '全栈'}, {value: "3", label: 'C++'}, {value: "4", label: '小程序'}],
-        needSkills: [{value: "0", label: "JAVA"}, {value: "0", label: "JAVA"}, {value: "0", label: "JAVA"}, {value: "0", label: "JAVA"}, {
-          value: "0",
-          label: "JAVA"
-        }, {value: "0", label: "JAVA"}],
         money: [3000, 4000, 5000, 6000, 7000],
         experiance: [{label: "不限", index: 0}, {label: "3-5年", index: 1}, {label: "5-10年", index: 2}, {label: "10年以上", index: 3}],
         workTypes: [{label: "远程", index: 0}, {label: "驻场", index: 1}],
-        skillShow: false
+        //职业方向
+        careeDirectionDialogVisible: false,
+        careeDirectionDatas: [],
+        careeChildren: [],
+        careeLv1Index: 0,
+        careeLv2Index: -1,
+        //技能要求
+        isSkillShow: false,
+        skillDatas: [],
+        //省、市
+        isShoWorkPlace: false,
+        provinceDatas: [],
+        cityDatas: [],
+        selectProvince: {},
+        selectCity: {}
 
       }
     },
+    head: {
+      title: "兼职发布",
+      meta: [
+        {
+          name: "viewport",
+          content: "width=device-width,initial-scale=1.0,user-scalable=no"
+        }
+      ]
+    },
+    mounted() {
+      this.getCareerDirection();
+      this.getSkillMap();
+      this.getProvince();
+    },
 
+    async asyncData({...params}) {
+      return {
+        mobile: params.app.$deviceType.isMobile(),
+      };
+    },
     methods: {
       workTypeChange(index) {
         console.log(index);
@@ -113,6 +181,91 @@
       textInput(e) {
 
       },
+
+      async getCareerDirection() {
+        let res = await this.$axios.$post(`/api/direction/get_all_data`);
+        if (Number(res.status) === 1) {
+          this.careeDirectionDatas = res.data;
+          this.careeChildren = this.careeDirectionDatas[0].children;
+        }
+      },
+      /**
+       * 职业方向选择事件
+       */
+      careeSelectEvent(level, id) {
+        switch (level) {
+          case 1:
+            let data = this.careeDirectionDatas.find(p => p.occupation_id == id);
+            if (data) {
+              this.careeChildren = data.children;
+              this.careeLv1Index = this.careeDirectionDatas.findIndex(p => p.occupation_id == id);
+              this.careeLv2Index = -1;
+              console.log(data.children);
+            }
+            break;
+          case 2:
+            this.careeLv2Index = this.careeChildren.findIndex(p => p.direction_id == id);
+            this.careeDirectionDialogVisible = false;
+            break;
+        }
+      },
+
+      workPlaceSelectEvent(level, id) {
+        switch (level) {
+          case 1://省
+            let prov = this.provinceDatas.find(p => p.id === id);
+            if (prov) {
+              this.selectProvince = prov;
+              this.cityDatas = [];
+              this.getCity(prov.id);
+            }
+            break;
+          case 2://市
+            let city = this.cityDatas.find(p => p.id === id);
+            this.selectCity = city;
+            this.isShoWorkPlace = false;
+            break;
+        }
+      },
+
+      /**
+       * 技能要求
+       * @return {Promise<void>}
+       */
+      async getSkillMap() {
+        let res = await this.$axios.$post(`/api/admin/common/getSkillMap`);
+        if (Number(res.status) === 1) {
+          console.log("6666", res);
+          this.skillDatas = res.data;
+        }
+      },
+
+      async getProvince() {
+        let res = await this.$axios.$post(`/api/geo/getProvinceList`);
+        if (Number(res.status) === 1) {
+          console.log("province", res);
+          this.provinceDatas = res.data;
+          if (this.provinceDatas && this.provinceDatas.length > 0) {
+            let defaultProvince = this.provinceDatas[0];
+            if (defaultProvince) {
+              this.selectProvinceId = defaultProvince.id;
+              this.getCity(defaultProvince.id);
+            }
+          }
+        } else {
+          this.$message.error("数据请求失败，请重试");
+          this.isShoWorkPlace = false;
+        }
+      },
+
+      async getCity(provinceId) {
+        let res = await this.$axios.$post(`/api/geo/get_city_list_by_province`, {prov_id: provinceId});
+        if (Number(res.status) === 1) {
+          console.log("city", res);
+          this.cityDatas = res.data;
+        }
+      },
+
       publish() {
         console.log(this.params);
       }