添加
This commit is contained in:
388
packageRc/pages/service/components/positionChooser.vue
Normal file
388
packageRc/pages/service/components/positionChooser.vue
Normal file
@@ -0,0 +1,388 @@
|
||||
<template>
|
||||
<uni-popup ref="showPersonChooser" type="bottom" round background-color="#fff">
|
||||
<view style="padding: 32rpx 0">
|
||||
<!-- <u--input @change="searchChange" placeholder="搜索选择岗位" v-model="searchPerson"></u--input> -->
|
||||
<scroll-view style="height: 900rpx;" :scroll-y="true" @scrolltolower="getBottomList">
|
||||
<!-- 搜索区域 -->
|
||||
<view class="search-area">
|
||||
<view class="search-inputs">
|
||||
<input
|
||||
v-model="searchValue"
|
||||
placeholder="请输入公司/岗位名称"
|
||||
border="surround"
|
||||
clearable
|
||||
class="search-input"
|
||||
/>
|
||||
</view>
|
||||
<button type="primary" @click="onSearch" class="search-btn">搜索</button>
|
||||
</view>
|
||||
|
||||
<!-- 岗位列表 -->
|
||||
<view v-for="(item, index) in jobList"
|
||||
:key="index"
|
||||
@click="chooseJob(item)"
|
||||
class="job-card"
|
||||
:class="{active: activeJobList.indexOf(item.id)!=-1}">
|
||||
<!-- 岗位名称和薪资 -->
|
||||
<view class="job-header">
|
||||
<text class="job-title">{{item.postName}}</text>
|
||||
<text class="job-salary">{{formatSalary(item.minRecruitmentSalary, item.highRecruitmentSalary)}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 标签区域 -->
|
||||
<view class="tag-area">
|
||||
<text class="tag">{{getDictLabel(item.minEducation, xue_li) || '学历不限'}}</text>
|
||||
<text class="tag">{{item.profession || '专业不限'}}</text>
|
||||
<text class="tag">全职</text>
|
||||
</view>
|
||||
|
||||
<!-- 公司信息 -->
|
||||
<view class="company-info">
|
||||
<view class="company-detail">
|
||||
<text class="company-name">{{item.unitName}}</text>
|
||||
<view class="location-line">
|
||||
<text class="location">
|
||||
<text class="location-icon">📍</text>
|
||||
{{item.workLocation || '暂无地址'}}
|
||||
</text>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 推荐标记 -->
|
||||
<view class="recommend-tag" v-if="choosedIdList.indexOf(item.id) != -1">推荐</view>
|
||||
</view>
|
||||
|
||||
<view v-if="loadingJob">加载中...</view>
|
||||
<div v-if="jobList.length == 0&&!loadingJob" :text="'暂无数据'"></div>
|
||||
</scroll-view>
|
||||
<view class="button-area">
|
||||
<view class="btn" @click="closeshowPersonChooser">取消</view>
|
||||
<view class="btn save" @click="saveInfo">确定</view>
|
||||
</view>
|
||||
<!-- <view style="color: #8492a6;margin-top: 7rpx;">距离：
|
||||
<text style="color: #fa6553;">{{item.distance || '--'}} km</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getWorkListReq } from '@/apiRc/service/jobRecommend'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showPersonChooser: false,
|
||||
activeJobList: [],
|
||||
searchPerson: '',
|
||||
searcher: '',
|
||||
workParams: {},
|
||||
jobList: [],
|
||||
jobTotal: 0,
|
||||
showMorePage: true,
|
||||
choosedIdList: [],
|
||||
loadingJob: false,
|
||||
xue_li:[],
|
||||
searchValue: '',
|
||||
searchJob: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSearch() {
|
||||
// 重置页码和列表
|
||||
this.workParams.pageNum = 1;
|
||||
this.jobList = [];
|
||||
// 添加搜索条件
|
||||
this.workParams.searchValue = this.searchValue;
|
||||
|
||||
this.doSearch();
|
||||
},
|
||||
formatSalary(min, max) {
|
||||
if (!min && !max) return '薪资面议';
|
||||
if (!min) return `${max}元/月`;
|
||||
if (!max) return `${min}元/月`;
|
||||
return `${min}-${max}元/月`;
|
||||
},
|
||||
closeshowPersonChooser() {
|
||||
this.$refs.showPersonChooser.close()
|
||||
},
|
||||
open(workParams) {
|
||||
console.log("workparams",workParams)
|
||||
this.$refs.showPersonChooser.open()
|
||||
this.activeJobList = []
|
||||
|
||||
// this.workParams = workParams
|
||||
this.workParams = {
|
||||
// ...workParams,
|
||||
recruitWorkType: workParams.recruitWorkType,
|
||||
// longitude: workParams.longitude,
|
||||
// latitude: workParams.latitude,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
latitude:workParams.latitude,
|
||||
longitude:workParams.longitude
|
||||
}
|
||||
this.jobTotal = 0;
|
||||
this.jobList = [];
|
||||
this.doSearch()
|
||||
},
|
||||
saveInfo() {
|
||||
this.$emit('confirm', this.activeJobList)
|
||||
this.$refs.showPersonChooser.close()
|
||||
},
|
||||
searchChange(){
|
||||
if(this.searcher){
|
||||
clearTimeout(this.searcher)
|
||||
this.doSearch()
|
||||
}else{
|
||||
this.doSearch()
|
||||
}
|
||||
}, // 触底加载
|
||||
getBottomList() {
|
||||
if (this.workParams.pageNum * this.workParams.pageSize >= this.jobTotal) {
|
||||
this.showMorePage = false;
|
||||
} else if (this.workParams.pageNum * this.workParams.pageSize < this.jobTotal) {
|
||||
this.workParams.pageNum++;
|
||||
this.doSearch();
|
||||
if (this.workParams.pageNum * this.workParams.pageSize >= this.jobTotal) {
|
||||
this.showMorePage = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
getDictLabel(value, list) {
|
||||
if (list && value) {
|
||||
const found = list.find(ele => ele.dictValue === value);
|
||||
return found ? found.dictLabel : '学历不限';
|
||||
}
|
||||
return '学历不限';
|
||||
},
|
||||
doSearch() {
|
||||
this.loadingJob = true;
|
||||
// 先获取学历字典
|
||||
this.$getDict('qcjy_jycd').then(res => {
|
||||
this.xue_li = res.data;
|
||||
// 再获取岗位列表
|
||||
getWorkListReq(this.workParams).then((res) => {
|
||||
this.loadingJob = false;
|
||||
if (res.code == 200) {
|
||||
if (res.rows.length < 10) {
|
||||
this.showMorePage = false;
|
||||
}
|
||||
this.loading = false;
|
||||
this.jobList = this.jobList.concat(res.rows);
|
||||
this.jobTotal = res.total;
|
||||
} else {
|
||||
this.loading = false;
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
chooseJob(item) {
|
||||
let index = this.choosedIdList.indexOf(item.id);
|
||||
if(index == -1){
|
||||
this.activeJobList.push(item);
|
||||
this.choosedIdList.push(item.id);
|
||||
}else{
|
||||
this.activeJobList.splice(index, 1);
|
||||
this.choosedIdList.splice(index, 1);
|
||||
}
|
||||
this.$forceUpdate();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.person-list{
|
||||
padding: 24rpx 32rpx;
|
||||
border-radius: 8rpx;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e4e4e4;
|
||||
margin-top: 32rpx;
|
||||
position: relative;
|
||||
&.active{
|
||||
border: 1px solid #1890ff;
|
||||
}
|
||||
.tjBtn{
|
||||
position: absolute;
|
||||
right: -16rpx;
|
||||
top: 0;
|
||||
line-height: 48rpx;
|
||||
width: 120rpx;
|
||||
margin-right: 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 0 8rpx 0 8rpx;
|
||||
background: #1D64CF;
|
||||
}
|
||||
}
|
||||
// .button-area{
|
||||
// box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
|
||||
// padding: 24rpx 32rpx 68rpx;
|
||||
// width: calc(100% + 64rpx);
|
||||
// margin-left: -32rpx;
|
||||
// background: #fff;
|
||||
// display: flex;
|
||||
// box-sizing: border-box;
|
||||
// margin-top: 40rpx;
|
||||
// border-radius: 16px 16px 0px 0px;
|
||||
// .btn{
|
||||
// line-height: 72rpx;
|
||||
// width: 176rpx;
|
||||
// margin-right: 16rpx;
|
||||
// font-size: 28rpx;
|
||||
// border: 1px solid #B8C5D4;
|
||||
// color: #282828;
|
||||
// text-align: center;
|
||||
// border-radius: 8rpx;
|
||||
// }
|
||||
// .reset{
|
||||
// background: #DCE2E9;
|
||||
// }
|
||||
// .save{
|
||||
// background: linear-gradient(103deg, #1D64CF 0%, #1590D4 99%);
|
||||
// color: #fff;
|
||||
// border: 0;
|
||||
// flex-grow: 1;
|
||||
// }
|
||||
// }
|
||||
.part-title{
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
.search-area {
|
||||
padding: 20rpx 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.search-inputs {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
border: 1px solid #e4e4e4;
|
||||
border-radius: 40rpx;
|
||||
height: 60rpx;
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
margin: 0;
|
||||
background: #1890ff;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.job-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
margin: 0 32rpx 20rpx;
|
||||
position: relative;
|
||||
border: 1px solid #EBEEF5;
|
||||
|
||||
&.active {
|
||||
border: 1px solid #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.job-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.job-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.job-salary {
|
||||
font-size: 28rpx;
|
||||
color: #FA6553;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tag-area {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
background: #F5F7FA;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.company-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.company-detail {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.location-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.location {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.location-icon {
|
||||
font-size: 24rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.post-date {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.recommend-tag {
|
||||
position: absolute;
|
||||
right: -2rpx;
|
||||
top: 0;
|
||||
background: #1D64CF;
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 0 12rpx 0 12rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user