|
|
@@ -5,7 +5,7 @@
|
|
|
<div :style="isTop==true?'background:#ffffff;box-shadow: 0 10px 8px rgba(153, 153, 153, 0.1);':''"
|
|
|
class="search flex align-center justify-center">
|
|
|
<div class="search-box flex align-center justify-between">
|
|
|
- <div class="search-box-l flex align-center" @click="allCitys = true">
|
|
|
+ <div class="search-box-l flex align-center" @click="openCityDialog">
|
|
|
<el-image style="width: 16px; height: 18px;margin-right: 5px;"
|
|
|
src="/images/index/addressIcon.png" fit="cover" />
|
|
|
<el-text style="color: #00DD9A;font-size: 16px;margin-right: 10px;">{{city}}</el-text>
|
|
|
@@ -34,7 +34,7 @@
|
|
|
搜索
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- <div class="search-box-r flex align-center justify-center">
|
|
|
+ <div class="search-box-r flex align-center justify-center">
|
|
|
<el-image style="width: 20px; height: 30px;margin-right: 10px;" src="/images/index/phone.png"
|
|
|
fit="cover" />
|
|
|
<div class="search-box-r-c">
|
|
|
@@ -54,7 +54,7 @@
|
|
|
微信扫描二维码
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-affix>
|
|
|
@@ -63,7 +63,7 @@
|
|
|
<div class="tabs-box">
|
|
|
<div @click="selectTabs(index)" :class="tabsCurr == index?'tabs-box-item-active':''"
|
|
|
class="tabs-box-item" v-for="(item,index) in tabs" :key="index">
|
|
|
- {{item.value}}
|
|
|
+ {{item.name}}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -190,23 +190,42 @@
|
|
|
v-for="(item,index) in recommendLists" :key="index">
|
|
|
<div class="list-box-item-title flex align-center justify-between">
|
|
|
<div class="list-box-item-title-name">
|
|
|
- {{item.stationName}}
|
|
|
+ {{ item.ruleClassifyName }}
|
|
|
</div>
|
|
|
<div class="list-box-item-title-price">
|
|
|
- {{item.salaryRange}}
|
|
|
+ {{ item.salaryRange }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="list-box-item-label flex align-center flex-wrap">
|
|
|
- <div class="list-box-item-label-item" v-for="(ite,ind) in item.positionWelfare" :key="ind">
|
|
|
- {{ite}}
|
|
|
+ <!-- 公司名称-公司人数 -->
|
|
|
+ <div class="list-box-item-title flex align-center justify-between">
|
|
|
+ <div style="margin: 10px 0;">
|
|
|
+ <span class="company-name" style="margin-right: 8rpx;">{{ item.company ?
|
|
|
+ item.company.companyName : '' }}</span>
|
|
|
+ <span class="company-people" v-if="item.company">{{ item.company ?
|
|
|
+ item.company.companyPeople : '0人' }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 职位标签 -->
|
|
|
+ <div class="gwList-box-item-box-label flex align-center flex-wrap">
|
|
|
+ <span class="job-tag">{{ item.education }}</span>
|
|
|
+ <span class="job-tag">{{ item.experience }}</span>
|
|
|
+ <span class="job-tag" v-for="(ite, ind) in parseWelfareTag(item.welfareTag)" :key="ind">{{ ite }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- 公司简介-位置 -->
|
|
|
<div class="list-box-item-info flex align-center justify-between">
|
|
|
- <div class="list-box-item-info-name">
|
|
|
- {{item.company.companyName}}
|
|
|
+ <div class="gwList-box-item-box-info-l flex align-center">
|
|
|
+ <img :src="item.hr && item.hr.hrImg ? item.hr.hrImg : ''"
|
|
|
+ style="width: 40px;height: 40px;border-radius: 50%;" mode="">
|
|
|
+ </img>
|
|
|
+ <div class="company-info-text">
|
|
|
+ {{ item.user && item.user.userName || '未知' }}·{{ item.hr &&
|
|
|
+ item.hr.hrPosition || '未知' }}
|
|
|
+ </div>
|
|
|
+ <div v-if="item.respondTime" class="reply-time">{{ item.respondTime }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="list-box-item-info-price">
|
|
|
- {{item.company.companyPeople}}
|
|
|
+ <div class="location-text">
|
|
|
+ {{ formatDistance(item.distance) }} {{ item.county }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -226,35 +245,55 @@
|
|
|
<el-dialog v-model="allCitys" :draggable="true" destroy-on-close align-center center>
|
|
|
<template #header>
|
|
|
<div class="my-header flex align-center">
|
|
|
- <div class="my-header-title" style="font-weight: bold;">
|
|
|
- 切换城市
|
|
|
+ <div class="my-header-title" style="font-weight: bold">
|
|
|
+ 城市选择
|
|
|
+ </div>
|
|
|
+ <div class="my-header-title flex" style="margin-left: 40px; width: 300px">
|
|
|
+ <el-input v-model="search" prefix-icon="Search" size="default" placeholder="请输入城市名称"
|
|
|
+ @keyup.enter="handleSearch()" class="inputClass">
|
|
|
+ </el-input>
|
|
|
+ <el-button @click="handleSearch" style="margin-left: 10px" type="primary">搜索</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <div class="citys">
|
|
|
- <div class="citys-top">
|
|
|
- <div class="citys-top-cityt flex align-center justify-between">
|
|
|
- 定位城市
|
|
|
- <div @click="getLocation()" class="citys-top-cityt-r flex align-center">
|
|
|
- <el-icon size="18">
|
|
|
- <Location />
|
|
|
- </el-icon>
|
|
|
- 重新定位
|
|
|
+ <div class="city flex align-center justify-center">
|
|
|
+ <div class="city-box">
|
|
|
+ <div class="city-box-city">
|
|
|
+ <div class="city-box-cityt flex align-center justify-between">
|
|
|
+ 定位城市
|
|
|
+ <div @click="getLocation()" class="city-box-cityt-r flex align-center">
|
|
|
+ <el-icon :size="14" name="RefreshRight" />
|
|
|
+ 重新定位
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div @click="selectCity(citys)" class="city-box-citys">{{ citys }}</div>
|
|
|
</div>
|
|
|
- <div @click="selectCity(citys)" class="citys-top-citys">
|
|
|
- {{citys}}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="citys-top">
|
|
|
- <div class="citys-top-cityt flex align-center justify-between">
|
|
|
- 其他城市
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="citys-item">
|
|
|
- <div @click="selectCity(item.label)" v-for="(item,index) in cityList" :key="index"
|
|
|
- class="citys-item-citys">
|
|
|
- {{item.label}}
|
|
|
+ <div class="city-box-list">
|
|
|
+ <ul class="city-box-lists" style="overflow: auto">
|
|
|
+ <li class="city-box-lists-title">热门城市</li>
|
|
|
+ <li class="city-box-lists-title-cs flex align-center flex-wrap">
|
|
|
+ <div @click="selectCity(item)" class="city-box-lists-title-css"
|
|
|
+ v-for="(item, index) in rmCity" :key="index">
|
|
|
+ {{ item }}
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li v-for="(item, index) in cityGroupList" :key="index" class="city-box-lists-item">
|
|
|
+ <div v-if="item.city.length > 0">
|
|
|
+ <div class="city-box-lists-item-title">
|
|
|
+ {{ item.letter }}
|
|
|
+ </div>
|
|
|
+ <div class="flex align-center flex-wrap">
|
|
|
+ <div class="city-box-lists-item-titles flex align-center"
|
|
|
+ v-for="(ite, ind) in item.city" :key="ind">
|
|
|
+ <div @click="selectCity(ite)">
|
|
|
+ {{ ite }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <el-empty v-if="cityGroupList.length == 0" description="暂无城市" />
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -264,6 +303,7 @@
|
|
|
|
|
|
<script>
|
|
|
import cityJs from '../../publicJs/city.js'
|
|
|
+ import citySelect from '../../publicJs/citySelect.js'
|
|
|
import axios from 'axios';
|
|
|
import jsonp from 'axios-jsonp'
|
|
|
import VueQrcode from 'vue-qrcode'
|
|
|
@@ -286,7 +326,7 @@
|
|
|
isTop: false,
|
|
|
searchBg: 'background:#ffffff',
|
|
|
tabsCurr: 0,
|
|
|
- tabs: [],
|
|
|
+ tabs: [{ name: '全日制', id: 1 },{ name: '兼职', id: 0 },{ name: '校招', id: 2 }, { name: '社招', id: 3 }],
|
|
|
bannerType: [], //岗位分类
|
|
|
recommendList: [], //推荐岗位
|
|
|
recommendLists: [], //最新岗位
|
|
|
@@ -299,6 +339,10 @@
|
|
|
longitude: '',
|
|
|
latitude: '',
|
|
|
cityList: cityJs, //所有的城市
|
|
|
+ //城市选择弹框相关
|
|
|
+ search: '', //城市搜索关键字
|
|
|
+ cityGroupList: [], //按字母分组的城市列表
|
|
|
+ rmCity: [], //热门城市列表
|
|
|
jobTypeList: {}, //求职意向第一个
|
|
|
loading: false,
|
|
|
loadings: false,
|
|
|
@@ -319,8 +363,6 @@
|
|
|
if (inviterCode) {
|
|
|
localStorage.setItem('inviterCode', inviterCode)
|
|
|
}
|
|
|
- //工作性质
|
|
|
- this.getTabsList();
|
|
|
//app下载地址
|
|
|
this.getAppDown()
|
|
|
//获取热门搜索
|
|
|
@@ -435,36 +477,38 @@
|
|
|
data = {
|
|
|
page: 1,
|
|
|
limit: 9,
|
|
|
- postType: this.tabs.length > 0 ? this.tabs[this.tabsCurr].value : '', //工作性质
|
|
|
+ postType: this.tabs[this.tabsCurr].id, //工作性质
|
|
|
ruleClassifyName: this.jobTypeList.ruleClassifyName, //岗位名称
|
|
|
screen: 1, //1推荐 2最新
|
|
|
- city: this.city == '全国' ? '' : this.city, //城市
|
|
|
- salaryRange: '', //薪资范围
|
|
|
+ city: this.city || '', //城市
|
|
|
+ salaryRange: this.formatSalaryRange(this.jobTypeList.salaryRange), //薪资范围
|
|
|
education: '', //学历
|
|
|
experience: '', //经验
|
|
|
- industry: this.jobTypeList.industry, //行业
|
|
|
+ industry:'', //行业
|
|
|
+ preference: this.jobTypeList.industry || '',//偏好
|
|
|
companyPeople: '', //公司规模
|
|
|
lng: this.longitude,
|
|
|
lat: this.latitude,
|
|
|
- userId: localStorage.getItem('userId') ? localStorage.getItem('userId') : ''
|
|
|
+ // userId: localStorage.getItem('userId') ? localStorage.getItem('userId') : ''
|
|
|
}
|
|
|
} else {
|
|
|
this.loadings = true
|
|
|
data = {
|
|
|
page: 1,
|
|
|
limit: 9,
|
|
|
- postType: this.tabs.length > 0 ? this.tabs[this.tabsCurr].value : '', //工作性质
|
|
|
+ type: this.tabs[this.tabsCurr].id, //工作性质
|
|
|
ruleClassifyName: '', //岗位名称
|
|
|
screen: 2, //1推荐 2最新
|
|
|
- city: this.city, //城市
|
|
|
+ city: this.city || '', //城市
|
|
|
salaryRange: '', //薪资范围
|
|
|
education: '', //学历
|
|
|
experience: '', //经验
|
|
|
industry: '', //行业
|
|
|
+ preference: '',//偏好
|
|
|
companyPeople: '', //公司规模
|
|
|
lng: this.longitude,
|
|
|
lat: this.latitude,
|
|
|
- userId: localStorage.getItem('userId') ? localStorage.getItem('userId') : ''
|
|
|
+ // userId: localStorage.getItem('userId') ? localStorage.getItem('userId') : ''
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -492,22 +536,6 @@
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- //获取工作性质
|
|
|
- getTabsList() {
|
|
|
- let data = {
|
|
|
- type: '工作性质'
|
|
|
- }
|
|
|
- this.$Request.get('/app/dict/list', {
|
|
|
- params: data
|
|
|
- }).then(res => {
|
|
|
- if (res.code == 0) {
|
|
|
- this.tabs = res.data
|
|
|
- //定位
|
|
|
- this.getLocation();
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
//获取求职意向
|
|
|
getJobYx() {
|
|
|
this.$Request.get('/app/intention/getIntentionList').then(res => {
|
|
|
@@ -517,7 +545,7 @@
|
|
|
this.jobTypeList = item
|
|
|
}
|
|
|
})
|
|
|
- this.getTabsList()
|
|
|
+ this.getLocation();
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
@@ -530,6 +558,60 @@
|
|
|
this.getRecommendJob(1)
|
|
|
this.getRecommendJob(2)
|
|
|
},
|
|
|
+ //打开城市选择弹框
|
|
|
+ openCityDialog() {
|
|
|
+ this.allCitys = true;
|
|
|
+ },
|
|
|
+ //打开城市选择弹框
|
|
|
+ openCityDialog() {
|
|
|
+ this.allCitys = true;
|
|
|
+ this.search = '';
|
|
|
+ //获取热门城市列表
|
|
|
+ this.getRmCityList();
|
|
|
+ //获取按字母分组的城市列表
|
|
|
+ this.getCityGroupList();
|
|
|
+ },
|
|
|
+ //获取热门城市列表
|
|
|
+ getRmCityList() {
|
|
|
+ let data = {
|
|
|
+ limitCount: 10
|
|
|
+ };
|
|
|
+ this.$Request
|
|
|
+ .get('/app/postPush/getHotCity', { params: data })
|
|
|
+ .then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.rmCity = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取按字母分组的城市列表
|
|
|
+ getCityGroupList(keyword = '') {
|
|
|
+ const grouped = {};
|
|
|
+ // 过滤：如果有关键字，就按城市名模糊匹配
|
|
|
+ const filtered = keyword
|
|
|
+ ? cityJs.filter(item => item.label.includes(keyword))
|
|
|
+ : cityJs;
|
|
|
+
|
|
|
+ // 遍历城市数据
|
|
|
+ filtered.forEach(item => {
|
|
|
+ // 按字母分组
|
|
|
+ const letterObj = citySelect.getFirstLetter(item.label);
|
|
|
+ const letter = letterObj.firstletter.toUpperCase();
|
|
|
+ if (!grouped[letter]) grouped[letter] = [];
|
|
|
+ grouped[letter].push(item.label);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 生成按字母分组的城市列表
|
|
|
+ const sortedLetters = Object.keys(grouped).sort();
|
|
|
+ this.cityGroupList = sortedLetters.map(letter => ({
|
|
|
+ letter,
|
|
|
+ city: grouped[letter]
|
|
|
+ }));
|
|
|
+ },
|
|
|
+ //搜索城市
|
|
|
+ handleSearch() {
|
|
|
+ this.getCityGroupList(this.search.trim());
|
|
|
+ },
|
|
|
//使用jsonp请求从腾讯地图获取经纬度
|
|
|
getLocation() {
|
|
|
let data = {
|
|
|
@@ -611,12 +693,42 @@
|
|
|
change(e) {
|
|
|
this.isTop = e
|
|
|
},
|
|
|
+ formatSalaryRange(range) {
|
|
|
+ if (!range || !range.includes('-')) return range
|
|
|
+
|
|
|
+ const [min, max] = range.split('-').map(v => parseInt(v.trim()))
|
|
|
+ if (isNaN(min) || isNaN(max)) return range
|
|
|
+
|
|
|
+ // 除以1000并去掉小数点后多余的0
|
|
|
+ const formatNum = num => {
|
|
|
+ const val = num / 1000
|
|
|
+ return val % 1 === 0 ? val.toFixed(0) + 'k' : val.toFixed(1) + 'k'
|
|
|
+ }
|
|
|
+
|
|
|
+ return `${formatNum(min)}-${formatNum(max)}`
|
|
|
+ },
|
|
|
+ parseWelfareTag(tagStr) {
|
|
|
+ return tagStr ? tagStr.split(';').filter(Boolean) : []
|
|
|
+ },
|
|
|
+ formatDistance(distance) {
|
|
|
+ if (distance == null || distance === '') return ''
|
|
|
+ const num = parseFloat(distance)
|
|
|
+ if (isNaN(num)) return ''
|
|
|
+ // 小于1000显示米，否则显示千米
|
|
|
+ if (num < 1000) {
|
|
|
+ return `${num}m`
|
|
|
+ } else {
|
|
|
+ const km = num / 1000
|
|
|
+ // 去掉多余的小数（保留一位小数）
|
|
|
+ const formatted = km % 1 === 0 ? km.toFixed(0) : km.toFixed(1)
|
|
|
+ return `${formatted}km`
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
$marginTop-60: 120px;
|
|
|
-
|
|
|
.searchLabel {
|
|
|
width: 100%;
|
|
|
|
|
|
@@ -734,10 +846,11 @@
|
|
|
color: #333333;
|
|
|
cursor: pointer;
|
|
|
flex-shrink: 0;
|
|
|
- margin-right: 30px;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.search-box-c {
|
|
|
+ margin:0 30px;
|
|
|
flex: 1;
|
|
|
// width: 70vw;
|
|
|
height: 100%;
|
|
|
@@ -1147,4 +1260,136 @@
|
|
|
|
|
|
}
|
|
|
}
|
|
|
+ .city {
|
|
|
+ width: 100%;
|
|
|
+ height: 500px;
|
|
|
+
|
|
|
+ .city-box {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .city-box-city {
|
|
|
+ .city-box-cityt {
|
|
|
+ width: 100%;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .city-box-cityt-r {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .city-box-citys {
|
|
|
+ background-color: #F2F2F7;
|
|
|
+ width: fit-content;
|
|
|
+ padding: 4px 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .city-box-citys:hover {
|
|
|
+ background-color: #00DD9A;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .city-box-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 420px;
|
|
|
+ margin-top: 20px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
+
|
|
|
+ .city-box-lists {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .city-box-lists-title {
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .city-box-lists-title-css {
|
|
|
+ background-color: #F2F2F7;
|
|
|
+ width: fit-content;
|
|
|
+ padding: 4px 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .city-box-lists-title-css:hover {
|
|
|
+ background-color: #00DD9A;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .city-box-lists-item-title {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .city-box-lists-item-titles {
|
|
|
+ background-color: #F2F2F7;
|
|
|
+ width: fit-content;
|
|
|
+ padding: 4px 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .city-box-lists-item-titles:hover {
|
|
|
+ background-color: #00DD9A;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .company-name,.company-people{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(156, 164, 171, 1);
|
|
|
+ }
|
|
|
+ .gwList-box-item-box-label{
|
|
|
+ padding: 0 20px;
|
|
|
+ gap: 12px;
|
|
|
+ .job-tag{
|
|
|
+ padding: 4px;
|
|
|
+ background: rgba(198, 198, 198, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .gwList-box-item-box-info-l{
|
|
|
+ .company-info-text{
|
|
|
+ margin: 0 10px;
|
|
|
+ color: rgba(156, 164, 171, 1);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ .reply-time{
|
|
|
+ border-radius: 4px;
|
|
|
+ background: rgba(236, 225, 253, 1);
|
|
|
+ padding: 4px;
|
|
|
+ color: rgba(106.94, 84.63, 214.02, 0.96);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .location-text{
|
|
|
+ color: rgba(156, 164, 171, 1);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
</style>
|
