列表搜索优化

src/api/job.js

@@ -76,3 +76,22 @@ export function getPolicyByJobIdApi(data) {
     url: `/yishoudan/store/job/getPolicyByStoreJobId?storeJobId=${data}`,
   });
 }
+// 获取热门职位城市
+export function getHotCityApi() {
+  return request({
+    url: `/yishoudan/city/getHotCity`,
+  });
+}
+
+// 获取热门职位城市
+export function getCityWhichHasJobApi() {
+  return request({
+    url: `/yishoudan/city/getCityHasOnlineJob`,
+  });
+}
+// 获取热门企业
+export function getHotStoreApi() {
+  return request({
+    url: `/yishoudan/store/getHotStore`,
+  });
+}

src/components/FirstJob/joblist.vue

@@ -6,17 +6,9 @@
       </div>
     </div> -->
     <!-- 录单弹出框 -->
-    <a-drawer
+    <!-- <a-drawer title="报名" placement="right" :closable="true" :visible="visible" labelAlign="right" width="480" @close="onClose"> -->
-      title="报名"
+    <!-- <recordbill :visible.sync="visible" :firminfo="apply"></recordbill> -->
-      placement="right"
+    <!-- </a-drawer> -->
-      :closable="true"
-      :visible="visible"
-      labelAlign="right"
-      width="480"
-      @close="onClose"
-    >
-      <!-- <recordbill :visible.sync="visible" :firminfo="apply"></recordbill> -->
-    </a-drawer>
     <!-- <a-modal
       title="报名"
       :visible="visible"
@@ -30,6 +22,43 @@
       :destroyOnClose="true"
     >
     </a-modal> -->
+    <!-- 城市的弹出框 -->
+    <a-modal
+      class="cityModal"
+      v-model="visible"
+      width="680px"
+      title="请选择城市"
+      :footer="null"
+    >
+      <div class="inputBox">
+        <a-input
+          placeholder="请输入城市名称"
+          allow-clear
+          width="300px"
+          v-model="cityValue"
+        ></a-input
+        ><a-button @click="searchCity">确认</a-button>
+      </div>
+      <ul class="firstList">
+        <li @click="[(currentCity = hotCityList), (activeInd = -1)]">
+          <div :class="activeInd == -1 ? 'active' : ''">热门地区</div>
+        </li>
+        <li
+          v-for="(item, index) in hasJobCityList.firstList"
+          :key="index"
+          @click="[changeCurrentCity(index), (activeInd = index)]"
+        >
+          <div :class="activeInd == index ? 'active' : ''">
+            <span v-for="i in item" :key="i">{{ i }}</span>
+          </div>
+        </li>
+      </ul>
+      <ul class="currentCity">
+        <li v-for="(item, index) in currentCity" :key="index">
+          <div>{{ item.name }}</div>
+        </li>
+      </ul>
+    </a-modal>
     <!-- 筛选导航 -->
     <div class="navigation" id="navigation">
       <div class="w">
@@ -52,6 +81,8 @@
         </div>
         <ul class="filterbox">
           <li>
+            <!-- @click="visible = true" -->
+
             <i class="iconfont icon-dingwei"></i
             ><a-cascader
               :options="cityoption"
@@ -337,11 +368,15 @@ import {
   // JobListApi,
   getJobSpecialApi,
   getProvinceApi,
+  getHotCityApi,
+  getCityWhichHasJobApi,
+  getHotStoreApi,
   // getCityApi,
 } from "../../api/job";
 import { moneyToFixed, getSalaryClassifyValue } from "../../utils/commonUtil";
 import recommend from "@/components/FirstJob/components/recommend.vue";
 import { nationlist } from "../../utils/datalist";
+// import PinYin from '../../utils/ChinesePY'
 // import recordbill from "@/components/FirstJob/components/recordbill.vue";
 export default {
   // 注入获取职位列表的方法
@@ -380,6 +415,12 @@ export default {
       visible: false, // 录单模态框的展示
       confirmLoading: false, // 录单提交的loading效果
       cityoption: [], // 城市列表
+      hotCityList: [], // 热门城市列表
+      hasJobCityList: {}, // 有职位的城市列表
+      currentCity: {}, // 当前首字母展示的城市列表
+      cityValue: "", // 城市输入框内容
+      activeInd: -1,
+      hotStoreList: [],
       newFormValue: [],
       apply: "", // 报名企业id
       proxyinfo: JSON.parse(sessionStorage.getItem("LOGIN_DATA")),
@@ -459,8 +500,8 @@ export default {
             document.getElementById("city").style.width =
               (result.length + 3) * 14 + "px";
             document.getElementById("city").style.maxWidth = "210px";
-            document.querySelector("#city").nextElementSibling.style.width = // 获取下一个兄弟元素s
+            document.querySelector("#city").nextElementSibling.style.width =
-              (result.length + 3) * 14 + "px";
+              (result.length + 3) * 14 + "px"; // 获取下一个兄弟元素s
             document.getElementById("city").nextElementSibling.style.maxWidth =
               "210px";
           } else if (result.length > 5) {
@@ -533,6 +574,9 @@ export default {
     this.getJobSpecial();
     this.getProvince();
     this.getdateinfo();
+    this.getHotCity();
+    this.getCityWhichHasJob();
+    this.getHotStore();
   },
   /**
    * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
@@ -556,6 +600,7 @@ export default {
     //     // return document.body;
     //   };
     // },
+
     //搜索企业名称
     onSearch(e) {
       console.log(e);
@@ -712,50 +757,50 @@ export default {
       // });
     },
     // 录单弹出层的关闭
-    handleCancel() {
+    // handleCancel() {
-      this.visible = false;
+    // 	this.visible = false;
-      this.form = {
+    // 	this.form = {
-        // 录单数据
+    // 		// 录单数据
-        name: "",
+    // 		name: "",
-        peoplecard: "",
+    // 		peoplecard: "",
-        gender: "",
+    // 		gender: "",
-        nation: "",
+    // 		nation: "",
-        location: "",
+    // 		location: "",
-        firm: "",
+    // 		firm: "",
-        post: "",
+    // 		post: "",
-        pattern: "",
+    // 		pattern: "",
-        policy: "",
+    // 		policy: "",
-        proxy: "",
+    // 		proxy: "",
-        facedate: "",
+    // 		facedate: "",
-      };
+    // 	};
-    },
+    // },
     // 录单提交按钮的回调
 
     // 弹出录单模态框
-    showmodal(item) {
+    // showmodal(item) {
-      this.visible = true;
+    // 	this.visible = true;
-      this.apply = item;
+    // 	this.apply = item;
-      console.log(this.apply);
+    // 	console.log(this.apply);
-      // console.log(id);
+    // 	// console.log(id);
-    },
+    // },
-    onClose() {
+    // onClose() {
-      console.log(123);
+    // 	console.log(123);
-      this.visible = false;
+    // 	this.visible = false;
-      this.form = {
+    // 	this.form = {
-        // 录单数据
+    // 		// 录单数据
-        name: "",
+    // 		name: "",
-        peoplecard: "",
+    // 		peoplecard: "",
-        gender: "", // 性别
+    // 		gender: "", // 性别
-        nation: "", // 民族
+    // 		nation: "", // 民族
-        location: "", // 家庭住址
+    // 		location: "", // 家庭住址
-        firm: "", // 公司名
+    // 		firm: "", // 公司名
-        post: "", // 岗位
+    // 		post: "", // 岗位
-        pattern: "", // 模式
+    // 		pattern: "", // 模式
-        policy: "", // 代理政策
+    // 		policy: "", // 代理政策
-        proxy: "", // 代理
+    // 		proxy: "", // 代理
-        facedate: "", // 面试时间
+    // 		facedate: "", // 面试时间
-      };
+    // 	};
-    },
+    // },
     // 获取日期信息
     getdateinfo() {
       const date = new Date();
@@ -807,6 +852,89 @@ export default {
     getSalaryClassifyValue(salaryClassify, salaryClassifyValue) {
       return getSalaryClassifyValue(salaryClassify, salaryClassifyValue);
     },
+    async getHotCity() {
+      try {
+        const { data } = await getHotCityApi();
+        console.log(data);
+        if (data.status == 200) {
+          this.hotCityList = data.data;
+          this.currentCity = this.hotCityList;
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async getCityWhichHasJob() {
+      try {
+        const { data } = await getCityWhichHasJobApi();
+        console.log(data);
+        if (data.status == 200) {
+          let pinyinList = [];
+          data.data.forEach((item) => {
+            if (pinyinList.indexOf(item.firstLetter) == -1) {
+              pinyinList.push(item.firstLetter);
+            }
+          });
+          pinyinList.sort(); // 拼音首字母排序
+          let firstList = [];
+          let cityList = [];
+          let num = -1;
+
+          pinyinList.forEach((item, i) => {
+            if (i % 5 == 0) {
+              num++;
+              firstList[num] = [];
+            }
+            firstList[num].push(item);
+          });
+          firstList.forEach((item, i) => {
+            cityList[i] = [];
+
+            item.forEach((item1) => {
+              data.data.forEach((item2) => {
+                if (item2.firstLetter == item1) {
+                  cityList[i].push(item2);
+                }
+              });
+            });
+          });
+          this.hasJobCityList.firstList = firstList;
+          this.hasJobCityList.cityList = cityList;
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async getHotStore() {
+      try {
+        const { data } = await getHotStoreApi();
+        console.log(data);
+        if (data.status == 200) {
+          this.hotStoreList = data.data;
+          console.log(this.hotStoreList);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    changeCurrentCity(index) {
+      this.currentCity = this.hasJobCityList.cityList[index];
+      console.log(index);
+    },
+    searchCity() {
+      if (this.cityValue) {
+        this.currentCity = [];
+        this.hotCityList.forEach((item) => {
+          console.log(item);
+          console.log(item.name.indexOf(this.cityValue));
+          if (item.name.indexOf(this.cityValue) > -1) {
+            console.log(123);
+            this.currentCity.push(item);
+          }
+        });
+        console.log(this.currentCity);
+      }
+    },
     // todetail(item) {
     //   const routeURL = this.$router.resolve({
     //     name: "Detail",
@@ -1569,4 +1697,57 @@ export default {
     }
   }
 }
+.cityModal {
+  .inputBox {
+    display: flex;
+  }
+  .ant-input-affix-wrapper {
+    flex: 1;
+    margin-right: 30px;
+  }
+  button {
+    width: 60px;
+    height: 32px;
+  }
+  .firstList {
+    display: flex;
+    justify-content: start;
+    margin: 30px 0;
+    li {
+      width: 16.6%;
+      text-align: center;
+      div {
+        width: 60%;
+        padding-bottom: 5px;
+      }
+      .active {
+        color: #ff6a00;
+        // position: relative;
+        // &::after {
+        //   content:'';
+        //   display: block;
+        //   position: absolute;
+        //   height: 2px;
+        //   width: 50px;
+        //   bottom: 0;
+        //   left: 0;
+        //   background-color: #ff6a00;
+        // }
+        border-bottom: 2px solid #ff6a00;
+      }
+    }
+  }
+  .currentCity {
+    display: flex;
+    flex-wrap: wrap;
+    li {
+      width: 16.6%;
+      margin-bottom: 20px;
+      text-align: center;
+      div {
+        width: 60%;
+      }
+    }
+  }
+}
 </style>

src/router/index.js

@@ -25,6 +25,11 @@ const routes = [
         name: "JobList",
         component: () => import("../components/FirstJob/joblist.vue"),
       },
+      {
+        path: "/list1",
+        name: "JobList",
+        component: () => import("../components/FirstJob/joblist1.vue"),
+      },
       {
         path: "/detail/:id",
         name: "Detail",