ks-app-employment-service/packageRc/pages/service/components/positionChooser.vue

<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 '@/packageRc/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>