Files
ks-app-employment-service/packageRc/pages/index/index.vue

815 lines
20 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
* @Date: 2025-10-16 15:15:47
* @LastEditors: shirlwang
* @LastEditTime: 2026-01-27 09:30:18
-->
<template>
<!-- @scroll="handleScroll" @scrolltolower="scrollBottom" -->
<scroll-view :scroll-y="true" class="container" :class="{'h5-pc-container': isH5}" :show-scrollbar="false">
<!-- 自定义导航栏 -->
<view class="custom-nav" :style="{paddingTop: statusBarHeight + 'px'}">
<view class="nav-content">
<view class="nav-back" @click="back"><text class="iconfont"><</text></view>
<view class="nav-title">高校毕业生智慧就业</view>
<view class="nav-placeholder"></view>
</view>
</view>
<view class="main-content">
<!-- #ifdef MP-WEIXIN -->
<view class="kinggang">
<view @click="navTo('/packageA/pages/myResume/myResume')">
<image src="../../../packageRc/static/kinggang1.png"/>
<view>信息维护</view>
</view>
<view @click="navTo('/packageA/pages/Intendedposition/Intendedposition')">
<image src="../../../packageRc/static/kinggang5.png"/>
<view>投递记录</view>
</view>
<view @click="tiao()">
<image src="../../../packageRc/static/kinggang2.png"/>
<view>需求上报</view>
</view>
<view>
<image @click="goAiAu" src="../../../packageRc/static/kinggang3.png"/>
<view>虚拟面试</view>
</view>
<view @click="goCa">
<image src="../../../packageRc/static/kinggang4.png"/>
<view>素质测评</view>
</view>
</view>
<!-- #endif -->
<!-- 岗位类型切换 -->
<view class="tabs">
<view class="tab" :class="{active: pageState.type == ''}" @click="changeJobType('')">岗位列表</view>
<view class="tab" :class="{active: pageState.type == 2}" @click="changeJobType(2)">实习实训</view>
<view class="tab" :class="{active: pageState.type == 3}" @click="changeJobType(3)">社区实践</view>
</view>
<!-- 子选项卡 -->
<view class="titles">
<view class="title-item" :class="{active: activeTitle == 1}" @click="activeTitle = 1,getJobRecommed()">
<view>推荐<text class="accent">岗位</text></view>
</view>
<view class="title-item" :class="{active: activeTitle == 2}" @click="activeTitle = 2,getJobList()">
<view>热门<text class="accent">岗位</text></view>
</view>
</view>
<!-- 岗位列表改为网格布局 -->
<view class="job-grid">
<view v-for="(item, index) in jobList" :key="index" @click="nextDetail(item)" class="job-card-box">
<view class="job-top">
<view class="job-name">{{ item.jobTitle }}</view>
<view class="job-salary">{{item.minSalary}}-{{item.maxSalary}}/</view>
</view>
<view class="job-tags">
<view v-if="item.jobLocationAreaCode" class="tag"><dict-Label dictType="jobLocationAreaCode" :value="item.jobLocationAreaCode"></dict-Label></view>
<view class="tag"><dict-Label dictType="education" :value="item.education"></dict-Label></view>
<view class="tag"><dict-Label dictType="experience" :value="item.experience"></dict-Label></view>
</view>
<view class="job-desc">
{{ vacanciesTo(item.vacancies) }} | {{item.jobCategory}} | {{ item.jobCategory }}
</view>
<view class="company-link">
<image class="comp-icon" src="../../../packageRc/static/dmsc/gs.png" />
<view class="comp-name">{{ item.companyName }}</view>
</view>
<view class="delivery-btn" @click.stop="nextDetail(item)">简历投递</view>
</view>
</view>
<view class="view-more-btn" @click="viewMore">查看更多内容</view>
<!-- 政策专区改为常驻显示 -->
<view class="titles section-title" style="justify-content: space-between; margin-top: 60rpx;">
<view class="title-item active"><view>政策<text class="accent">专区</text></view></view>
<view class="more-link" @click="toPolicyList">{{'查看更多 >'}}</view>
</view>
<view v-for="(item, index) in policyList" :key="index" class="policy-list-card" @click="toPolicyDetail(item)">
<view class="card-left">
<image class="clock-icon" src="../../../packageRc/static/dmsc/sj.png" />
<view class="date-md">{{ formatMD(item.publishTime || item.createTime) }}</view>
<view class="date-year">{{ formatYear(item.publishTime || item.createTime) }}</view>
</view>
<view class="card-right">
<view class="card-title">{{ item.zcmc }}</view>
<view class="card-infos">
<view v-if="item.zcLevel" class="info-tag">{{ item.zcLevel }}</view>
<view v-if="item.sourceUnit" class="info-tag">{{ item.sourceUnit }}</view>
</view>
</view>
</view>
</view>
</scroll-view>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from 'vue';
const { $api, navTo, vacanciesTo, formatTotal, config } = inject('globalFunction');
const isH5 = ref(false);
const uniIconSize = ref(18);
// #ifdef H5
isH5.value = true;
uniIconSize.value = 20;
// #endif
// 状态栏高度(用于自定义导航栏)
const statusBarHeight = ref(0);
try {
const sysInfo = uni.getSystemInfoSync();
statusBarHeight.value = sysInfo.statusBarHeight || 0;
} catch(e) {}
import { getPolicyList } from '@/packageRc/apiRc/policy';
let policyList = ref([])
function getPolicy() {
getPolicyList({pageNum: 1, pageSize: 4,zclx:'1'}).then(res => {
if (res.code == 200) {
policyList.value = res.rows
} else {
throw new Error();
}
})
}
let tabType = ref(1)
function changeType(type) {
tabType.value = type
}
function toPolicyList() {
navTo(`/packageRc/pages/policy/policyList?zclx=1`)
}
function toPolicyDetail(item) {
navTo(`/packageRc/pages/policy/policyDetail?id=${item.id}`)
}
let activeTab = ref(1)
let activeTitle = ref(1)
function back() {
// uni.navigateBack({
// delta: 1
// })
// window.location.href='https://www.xjksly.cn/mechine-single-vue/'
window.parent.changeParentLocation("https://www.xjksly.cn/mechine-single-vue/");
// uni.reLaunch({
// url: '/pages/index/index'
// })
}
onMounted(()=>{
getJobRecommed()
getPolicy();
})
function goCa(){
if (checkLogin()) {
const userInfo = uni.getStorageSync('userInfo')
navTo(`/packageCa/search/search?userId=${userInfo.userId}&name=${userInfo.name}`);
}
}
// 跳转AI智能面试
function goAiAu(){
if (checkLogin()) {
const userInfo = uni.getStorageSync('userInfo')
navTo(`/packageCa/search/AIAudition?userId=${userInfo.userId}&name=${userInfo.name}`);
}
}
function viewMore() {
navTo(`/packageRc/pages/jobList/jobList`);
}
function tiao(){
console.log('尝试导航到待办详情页面');
// 尝试直接使用uni.navigateTo使用正确的格式
uni.navigateTo({
url: `/packageRc/pages/needs/personNeeds`,
success: function() {
console.log('导航成功');
},
fail: function(err) {
console.error('导航失败:', err);
}
});
}
import useUserStore from '@/stores/useUserStore';
const conditionSearch = ref({});
const pageState = reactive({
page: 0,
total: 0,
maxPage: 2,
pageSize: 4,
search: {
order: 0,
},
type:'',
});
let jobList = ref([])
// 获取推荐岗位
function getJobRecommed(){
let params = {
pageSize: pageState.pageSize,
sessionId: useUserStore().seesionId,
...pageState.search,
...conditionSearch.value,
isPublish: 1,
type:pageState.type
};
$api.createRequest('/app/job/recommend', params).then((resData) => {
if (resData.code == 200 && resData.data.length) {
jobList.value = resData.data
} else {
throw new Error();
}
}).catch(() => {
// 造一些测试数据
const mock = { jobTitle: '计算机网络运维员', companyName: '新疆天山人才智汇发展有限责任公司', minSalary: '面议', maxSalary: '面议' };
jobList.value = [mock, mock, mock, mock];
});
}
// 获取岗位列表
function getJobList(){
let params = {
current: pageState.page,
pageSize: pageState.pageSize,
...pageState.search,
// ...conditionSearch.value,
type:pageState.type
};
$api.createRequest('/app/job/list', params).then((resData) => {
jobList.value = resData.rows
pageState.total = 0;
});
}
// 更改实习实训等
function changeJobType(val){
pageState.type = val
if(activeTitle.value == 1){
getJobRecommed()
}else{
getJobList()
}
}
// 登录检查函数
import { storeToRefs } from 'pinia';
const { userInfo, hasLogin, token } = storeToRefs(useUserStore());
const checkLogin = () => {
const tokenValue = uni.getStorageSync('token') || '';
if (!tokenValue || !hasLogin.value) {
// 未登录,打开授权弹窗
wxAuthLoginRef.value?.open();
return false;
}
return true;
};
// 跳转到详情页面
function nextDetail(job) {
// 登录检查
if (checkLogin()) {
navTo(`/packageA/pages/post/post?jobId=${encodeURIComponent(job.jobId)}`);
}
}
function formatMD(dateStr) {
if (!dateStr) return '--';
const parts = dateStr.split('-').length > 1 ? dateStr.split('-') : dateStr.split(' ');
// 处理 YYYY-MM-DD 或 YYYY-MM-DD HH:mm:ss
let d = parts[0].includes('-') ? parts[0].split('-') : parts;
if (d.length >= 3) {
return `${d[1]}-${d[2].substring(0,2)}`;
}
return dateStr;
}
function formatYear(dateStr) {
if (!dateStr) return '';
const parts = dateStr.split('-');
if (parts.length >= 1) {
return parts[0].substring(0, 4);
}
return '';
}
</script>
<style lang="less" scoped>
/* 隐藏滚动条 */
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
view{box-sizing: border-box;display: block;}
.container{
background-color: #FFFFFF;
min-height: 100vh;
min-width: 100vw;
box-sizing: border-box;
}
/* 自定义导航栏 */
.custom-nav {
background: #107AFD;
width: 100%;
.nav-content {
height: 200rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40rpx;
.nav-back {
width: 120rpx;
height: 200rpx;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 300;
.iconfont{
font-size: 40px!important;
}
}
.nav-title {
color: #fff;
font-size: 72rpx;
font-weight: bold;
}
.nav-placeholder {
width: 120rpx;
}
}
}
.main-content {
position: relative;
z-index: 2;
/* 页面全局边距加倍 */
padding: 64rpx 48rpx;
}
.kinggang{
display: flex;
justify-content: space-around;
align-items: center;
padding: 24rpx 16rpx 48rpx 16rpx;
font-size: 52rpx;
background: #FFFFFF;
border-radius: 20rpx;
margin-bottom: 32rpx;
>view{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
image{
width: 160rpx;
height: 160rpx;
margin-bottom: 20rpx;
}
}
.tabs{
/* 调大上方选项卡的边距 */
margin: 64rpx auto 64rpx;
border-radius: 120rpx;
display: flex;
background: #F4F6F9;
color: #878787;
text-align: center;
width: 80%;
overflow: hidden;
padding: 8rpx;
box-sizing: border-box;
.tab{
flex: 1;
line-height: 120rpx;
position: relative;
font-size: 72rpx;
font-weight: 500;
transition: all 0.25s;
border-radius: 120rpx;
&.active{
color: #fff;
background: #107AFD;
box-shadow: none;
}
}
}
.titles{
display: flex;
/* 调大标题下边距 */
margin-bottom: 72rpx;
align-items: flex-end;
.title-item{
font-size: 120rpx;
font-weight: bold;
color: #282828;
margin-right: 56rpx;
position: relative;
>view{
position: relative;
z-index: 2;
padding: 0 8rpx;
.accent {
color: #EC7737;
margin-left: 4rpx;
}
}
&.active::after{
content: '';
position: absolute;
z-index: 1;
bottom: -8rpx;
left: 10%;
width: 80%;
height: 20rpx;
border-radius: 50px;
background: linear-gradient(90deg, rgba(82, 149, 255, 0.4) 0%, rgba(24, 116, 255, 0) 100%);
}
}
}
.job-list{
width: 100%;
margin: 0 auto;
color: #333333;
border-radius: 12rpx;
background: #FFFFFF;
padding: 32rpx;
margin-bottom: 24rpx;
position: relative;
/* 去掉阴影,保持扁平统一 */
.sign{
position: absolute;
font-size: 28rpx;
right: 0;
top: 0;
padding: 8rpx 20rpx;
border: 1rpx solid #EC4827;
background: rgba(227, 79, 49, 0.09);
border-top-right-radius: 24rpx;
border-bottom-left-radius: 24rpx;
color: #EC4827;
}
.top-line{
display: flex;
justify-content: space-between;
font-size: 24rpx;
color: #A2A2A2;
margin-bottom: 16rpx;
.salary{
font-size: 32rpx;
color: #4C6EFB;
font-weight: bold;
}
}
.title{
font-size: 32rpx;
font-weight: bold;
color: #282828;
margin-bottom: 16rpx;
display: flex;
image{
width: 46rpx;
height: 46rpx;
margin-right: 11rpx;
}
}
.infos{
display: flex;
flex-wrap: wrap;
font-size: 24rpx;
margin-bottom: 16rpx;
line-height: 42rpx;
view{
padding: 0 16rpx;
margin-right: 10rpx;
background: #F2F2F2;
}
}
.bottom-line{
display: flex;
justify-content: space-between;
font-size: 24rpx;
color: #A2A2A2;
margin-top: 12rpx;
}
}
.view-more-btn{
padding: 10rpx 56rpx;
background: #FFFFFF;
color: #4C6EFB;
border: 1rpx solid #4C6EFB;
text-align: center;
border-radius: 40rpx;
width: fit-content;
margin: 0 auto;
margin-bottom: 20rpx;
}
.job-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
/* 列表前边距调大 */
margin-top: 48rpx;
.job-card-box {
/* 缩小宽度比例以增加瀑布流列间距 */
width: calc(50% - 24rpx);
background: #FFFFFF;
background-image: url(../../../packageRc/static/dmsc/kpbj.png);
background-size: 100% 100%;
/* 加大卡片下边距 */
margin-bottom: 48rpx;
border: 1px solid #D1E5FF;
border-radius: 16rpx;
/* 加大卡片内边距 */
padding: 48rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
.job-top {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24rpx;
.job-salary {
color: #EC7737;
font-weight: bold;
font-size: 64rpx;
flex-shrink: 0;
}
.job-name {
font-size: 72rpx;
font-weight: bold;
color: #333;
flex: 1;
margin-top: 0;
margin-right: 12rpx;
/* 只保留单行溢出,以适应不同宽度 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.job-tags {
display: flex;
flex-wrap: wrap;
margin-bottom: 32rpx;
.tag {
background: #7DA6FF;
color: #FFFFFF;
font-size: 48rpx;
padding: 8rpx 20rpx;
border-radius: 12rpx;
margin-right: 16rpx;
margin-bottom: 16rpx;
}
}
.job-desc {
font-size: 48rpx;
color: #4C6EFB;
margin-bottom: 44rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.company-link {
display: flex;
align-items: center;
margin-top: auto;
margin-bottom: 48rpx;
.comp-icon {
width: 56rpx;
height: 56rpx;
margin-right: 16rpx;
flex-shrink: 0;
}
.comp-name {
font-size: 48rpx;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.delivery-btn {
width: 75%;
margin: 0 auto;
height: 96rpx;
line-height: 96rpx;
background: #2591FF; /* 与设计图一致的亮蓝色 */
color: #FFFFFF;
text-align: center;
font-size: 52rpx;
font-weight: 500;
border-radius: 12rpx;
/* 移除阴影以贴合扁平化设计稿 */
}
}
}
.policy-list-card {
width: 100%;
margin: 0 auto;
color: #333333;
/* 政策卡片大边距与内边距 */
margin-bottom: 48rpx;
box-sizing: border-box;
display: flex;
background: linear-gradient(180deg, #F0F8FF 0%, #FFFFFF 100%);
padding: 64rpx 48rpx;
border-radius: 16rpx;
border: 1px solid #D1E5FF;
box-shadow: 0px 4rpx 12rpx 0px rgba(16, 122, 253, 0.05);
.card-left {
/* 加宽左侧保护不再折行 */
width: 220rpx;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-right: 1px solid #E5EEFA;
/* 增大左右空隙 */
margin-right: 48rpx;
.clock-icon {
width: 52rpx;
height: 52rpx;
margin-bottom: 12rpx;
}
.date-md {
font-size: 60rpx;
font-weight: bold;
color: #107afd;
line-height: 1;
margin-bottom: 12rpx;
}
.date-year {
font-size: 40rpx;
color: #107afd;
line-height: 1;
}
}
.card-right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.card-title {
font-size: 64rpx;
font-weight: bold;
color: #333;
margin-bottom: 24rpx;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.card-infos {
display: flex;
flex-wrap: wrap;
.info-tag {
font-size: 48rpx;
color: #999;
margin-right: 24rpx;
}
}
}
}
/* #ifdef H5 */
.h5-pc-container {
& > view {
width: 100% !important;
margin: 0 auto !important;
padding-left: 32px !important;
padding-right: 32px !important;
padding-top: 0 !important; /* 彻底移除顶部补白 */
box-sizing: border-box !important;
}
.showtab {
margin-top: 0 !important; /* 移除卡片顶部间距 */
margin-bottom: 120rpx;
height: 340rpx;
.tabItem {
height: 340rpx !important;
image:first-child {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.activeImg {
width: 160rpx !important;
height: 20rpx !important;
bottom: -40rpx !important;
}
}
.tabs {
margin-bottom: 80rpx;
background-color: #eee;
border-radius: 60px;
padding: 10px;
.tab {
width: 33.3% !important;
line-height: 180rpx !important;
font-size: 36px !important;
border-radius: 100rpx;
}
}
.titles {
margin-top: 40rpx;
margin-bottom: 60px;
.title-item {
font-size: 40px;
font-weight: 600;
margin-right: 100px !important;
>view {
padding: 0 16rpx !important;
}
&::after {
height: 20rpx !important;
bottom: -16px !important;
width: 20% !important;
left: 40% !important;
background: orange;
border-radius: 0;
}
}
.more-link {
font-size: 20px !important;
color: #A2A2A2;
}
}
.job-list {
padding: 48rpx 40rpx !important;
margin-bottom: 32rpx !important;
border-radius: 24rpx !important;
border: 1px solid #f0f0f0;
box-shadow: 0px 2rpx 10rpx rgba(0, 0, 0, 0.02);
.sign {
font-size: 20px !important;
padding: 8rpx 20rpx !important;
}
}
.title {
font-size: 24px !important;
font-weight: 600;
margin-bottom: 24rpx !important;
}
.infos view {
font-size: 20px !important;
line-height: 1.5 !important;
padding: 10rpx 24rpx !important;
margin-bottom: 12rpx;
background: #f5f5f5 !important;
border-radius: 12rpx !important;
}
.salary {
font-size: 24px !important;
font-weight: 600;
}
.time {
font-size: 20px !important; /* 发布日期字号放大 */
}
.bottom-line {
font-size: 20px !important;
margin-top: 20rpx !important;
}
.view-more-btn {
font-size: 24px !important; /* 查看更多字号放大 */
padding: 20rpx 80rpx !important;
border-radius: 60rpx !important;
}
}
/* #endif */
</style>