523 lines
16 KiB
Vue
523 lines
16 KiB
Vue
<!--suppress HtmlUnknownTag, NpmUsedModulesInstalled, JSFileReferences -->
|
||
<script setup>
|
||
import { ref, inject, nextTick, onMounted } from 'vue';
|
||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||
import { appUserInfo } from '@/apiRc/user/user.js';
|
||
import RemindPopup from './components/RemindPopup.vue';
|
||
import PageHeader from './components/PageHeader.vue';
|
||
import SkillDetailPopup from './components/SkillDetailPopup.vue';
|
||
import CareerRecommend from './components/CareerRecommend.vue';
|
||
import CareerPath from './components/CareerPath.vue';
|
||
import SkillDevelopment from './components/SkillDevelopment.vue';
|
||
import CustomTabBar from '@/components/CustomTabBar/CustomTabBar.vue';
|
||
|
||
const { navBack, navTo } = inject('globalFunction');
|
||
|
||
// 弹窗引用
|
||
const remindPopup = ref(null);
|
||
const skillDetailPopup = ref(null);
|
||
// 提醒列表（由接口返回）
|
||
const remindList = ref([]);
|
||
// 是否显示页面内容
|
||
const showContent = ref(false);
|
||
// 当前激活的tab
|
||
const activeTab = ref(0);
|
||
// 选中的职位信息
|
||
const selectedJobTitle = ref('');
|
||
const selectedJobPossessedSkills = ref([]);
|
||
const selectedJobImprovementSkills = ref([]);
|
||
const currentJobId = ref(null);
|
||
const currentJobName = ref('');
|
||
|
||
|
||
const pathSkillsData = ref({
|
||
pathData: {
|
||
start: { title: '', skills: [] },
|
||
steps: [],
|
||
end: { title: '', skills: [] }
|
||
},
|
||
targetCareer: ''
|
||
});
|
||
|
||
// 打开弹窗
|
||
function openRemindPopup() {
|
||
nextTick(() => {
|
||
if (remindPopup.value) {
|
||
try {
|
||
remindPopup.value.open();
|
||
} catch (error) {
|
||
// 静默处理错误
|
||
}
|
||
} else {
|
||
setTimeout(() => {
|
||
if (remindPopup.value) {
|
||
try {
|
||
remindPopup.value.open();
|
||
} catch (error) {
|
||
// 静默处理错误
|
||
}
|
||
} else {
|
||
setTimeout(() => {
|
||
if (remindPopup.value) {
|
||
try {
|
||
remindPopup.value.open();
|
||
} catch (error) {
|
||
// 静默处理错误
|
||
}
|
||
}
|
||
}, 500);
|
||
}
|
||
}, 500);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 检查用户是否完善了个人信息（调用接口获取）
|
||
let hasCheckedRemindInfo = false;
|
||
// 保存缺失信息的标识
|
||
const missingInfo = ref({
|
||
hasJobInfo: false,
|
||
hasSkills: false
|
||
});
|
||
|
||
async function getRemindInfo() {
|
||
if (hasCheckedRemindInfo) {
|
||
return;
|
||
}
|
||
|
||
hasCheckedRemindInfo = true;
|
||
|
||
try {
|
||
const response = await appUserInfo();
|
||
const userInfo = response?.data || {};
|
||
|
||
// 检查 idCard（身份证）- 必须项
|
||
let idCard = userInfo?.resume?.idCard ?? userInfo?.idCard ?? null;
|
||
const cachedUserInfo = uni.getStorageSync('userInfo') || {};
|
||
if (!idCard || idCard === null || idCard === '') {
|
||
idCard = cachedUserInfo?.resume?.idCard ?? cachedUserInfo?.idCard ?? null;
|
||
}
|
||
const hasIdCard = idCard !== null && idCard !== undefined && idCard !== '';
|
||
|
||
// 检查职位信息：优先从 jobTitles 数组获取
|
||
const jobTitles = Array.isArray(userInfo?.jobTitles) ? userInfo.jobTitles : [];
|
||
const hasJobTitle = jobTitles.length > 0;
|
||
|
||
// 如果 jobTitles 为空，尝试从其他字段获取
|
||
let jobName = '';
|
||
if (!hasJobTitle) {
|
||
jobName = userInfo?.jobName ??
|
||
userInfo?.currentJobName ??
|
||
userInfo?.resume?.jobName ??
|
||
userInfo?.resume?.currentJobName ??
|
||
'';
|
||
}
|
||
const hasJobInfo = hasJobTitle || (jobName && jobName.trim() !== '');
|
||
|
||
// 检查技能标签：从 appSkillsList 获取
|
||
const appSkillsList = Array.isArray(userInfo?.appSkillsList) ? userInfo.appSkillsList : [];
|
||
// 检查是否有有效的技能（name 或 nameStr 不为空）
|
||
const hasSkills = appSkillsList.some(skill => {
|
||
const skillName = skill?.name || skill?.nameStr;
|
||
return skillName && skillName.trim() !== '';
|
||
});
|
||
|
||
// 保存缺失信息标识（只保存职位信息和技能标签，身份证信息跳转到个人信息页面）
|
||
missingInfo.value.hasJobInfo = hasJobInfo;
|
||
missingInfo.value.hasSkills = hasSkills;
|
||
|
||
// 判断信息是否完整（idCard、职位信息、技能标签都必须有）
|
||
const isComplete = hasIdCard && hasJobInfo && hasSkills;
|
||
|
||
if (!isComplete) {
|
||
// 收集缺失的信息提示
|
||
const missingItems = [];
|
||
if (!hasIdCard) {
|
||
missingItems.push('身份证信息');
|
||
}
|
||
if (!hasJobInfo) {
|
||
missingItems.push('职位信息');
|
||
}
|
||
if (!hasSkills) {
|
||
missingItems.push('技能标签');
|
||
}
|
||
remindList.value = [`请完善${missingItems.join('、')}`];
|
||
} else {
|
||
// 信息完整，设置职位信息
|
||
if (hasJobTitle) {
|
||
currentJobName.value = jobTitles[0];
|
||
} else {
|
||
currentJobName.value = jobName;
|
||
currentJobId.value = userInfo?.jobId ??
|
||
userInfo?.currentJobId ??
|
||
userInfo?.resume?.jobId ??
|
||
userInfo?.resume?.currentJobId ??
|
||
null;
|
||
}
|
||
// 信息完整，直接显示页面内容
|
||
showContent.value = true;
|
||
return;
|
||
}
|
||
|
||
setTimeout(() => {
|
||
openRemindPopup();
|
||
}, 500);
|
||
} catch (error) {
|
||
// 接口调用失败时，使用缓存作为降级方案
|
||
const cachedUserInfo = uni.getStorageSync('userInfo') || {};
|
||
|
||
// 检查 idCard
|
||
const idCard = cachedUserInfo?.resume?.idCard ?? cachedUserInfo?.idCard ?? null;
|
||
const hasIdCard = idCard !== null && idCard !== undefined && idCard !== '';
|
||
|
||
// 检查职位信息
|
||
const cachedJobTitles = Array.isArray(cachedUserInfo?.jobTitles) ? cachedUserInfo.jobTitles : [];
|
||
const hasJobTitle = cachedJobTitles.length > 0;
|
||
let jobName = '';
|
||
if (!hasJobTitle) {
|
||
jobName = cachedUserInfo?.jobName ??
|
||
cachedUserInfo?.currentJobName ??
|
||
cachedUserInfo?.resume?.jobName ??
|
||
cachedUserInfo?.resume?.currentJobName ??
|
||
'';
|
||
}
|
||
const hasJobInfo = hasJobTitle || (jobName && jobName.trim() !== '');
|
||
|
||
// 检查技能标签
|
||
const cachedAppSkillsList = Array.isArray(cachedUserInfo?.appSkillsList) ? cachedUserInfo.appSkillsList : [];
|
||
const hasSkills = cachedAppSkillsList.some(skill => {
|
||
const skillName = skill?.name || skill?.nameStr;
|
||
return skillName && skillName.trim() !== '';
|
||
});
|
||
|
||
// 保存缺失信息标识
|
||
missingInfo.value.hasJobInfo = hasJobInfo;
|
||
missingInfo.value.hasSkills = hasSkills;
|
||
|
||
// 判断信息是否完整（idCard、职位信息、技能标签都必须有）
|
||
const isComplete = hasIdCard && hasJobInfo && hasSkills;
|
||
|
||
if (!isComplete) {
|
||
// 收集缺失的信息提示
|
||
const missingItems = [];
|
||
if (!hasIdCard) {
|
||
missingItems.push('身份证信息');
|
||
}
|
||
if (!hasJobInfo) {
|
||
missingItems.push('职位信息');
|
||
}
|
||
if (!hasSkills) {
|
||
missingItems.push('技能标签');
|
||
}
|
||
remindList.value = [`请完善${missingItems.join('、')}`];
|
||
} else {
|
||
// 信息完整，设置职位信息
|
||
if (hasJobTitle) {
|
||
currentJobName.value = cachedJobTitles[0];
|
||
} else {
|
||
currentJobName.value = jobName;
|
||
currentJobId.value = cachedUserInfo?.jobId ??
|
||
cachedUserInfo?.currentJobId ??
|
||
cachedUserInfo?.resume?.jobId ??
|
||
cachedUserInfo?.resume?.currentJobId ??
|
||
null;
|
||
}
|
||
// 信息完整，直接显示页面内容
|
||
showContent.value = true;
|
||
return;
|
||
}
|
||
|
||
setTimeout(() => {
|
||
openRemindPopup();
|
||
}, 500);
|
||
}
|
||
}
|
||
|
||
// 取消按钮
|
||
function handleCancel() {
|
||
remindPopup.value?.close();
|
||
navBack();
|
||
}
|
||
|
||
// 确认按钮
|
||
async function handleConfirm() {
|
||
remindPopup.value?.close();
|
||
|
||
const { hasJobInfo, hasSkills } = missingInfo.value;
|
||
|
||
// 如果同时缺少职位信息和技能标签：先跳转到职位信息页面，并传递参数表示完成后需要继续跳转到技能页面
|
||
if (!hasJobInfo && !hasSkills) {
|
||
// 跳转到职位信息页面，传递参数表示完成后需要继续跳转到技能页面
|
||
navTo('/packageA/pages/jobExpect/jobExpect?needSkill=true');
|
||
}
|
||
// 如果只缺少技能标签：直接跳转到技能页面（个人信息页面的技能部分）
|
||
else if (!hasSkills) {
|
||
navTo('/packageA/pages/personalInfo/personalInfo');
|
||
}
|
||
// 如果只缺少职位信息：直接跳转到职位信息页面
|
||
else if (!hasJobInfo) {
|
||
navTo('/packageA/pages/jobExpect/jobExpect');
|
||
}
|
||
// 如果只缺少身份证信息：跳转到个人信息页面
|
||
else {
|
||
navTo('/packageA/pages/personalInfo/personalInfo');
|
||
}
|
||
}
|
||
|
||
// 切换tab
|
||
function switchTab(index) {
|
||
activeTab.value = index;
|
||
|
||
if (index === 0 && !currentJobId.value) {
|
||
const cachedUserInfo = uni.getStorageSync('userInfo') || {};
|
||
|
||
// 优先从缓存中的 jobTitles 数组获取职位信息（取第一个）
|
||
const cachedJobTitles = Array.isArray(cachedUserInfo?.jobTitles) ? cachedUserInfo.jobTitles : [];
|
||
let newJobName = '';
|
||
|
||
if (cachedJobTitles.length > 0) {
|
||
newJobName = cachedJobTitles[0];
|
||
} else {
|
||
// 如果缓存中没有 jobTitles，从其他字段获取
|
||
newJobName = currentJobName.value ||
|
||
(cachedUserInfo?.jobName ??
|
||
cachedUserInfo?.currentJobName ??
|
||
cachedUserInfo?.resume?.jobName ??
|
||
cachedUserInfo?.resume?.currentJobName ??
|
||
'市场专员');
|
||
}
|
||
|
||
const newJobId = cachedUserInfo?.jobId ??
|
||
cachedUserInfo?.currentJobId ??
|
||
cachedUserInfo?.resume?.jobId ??
|
||
cachedUserInfo?.resume?.currentJobId ??
|
||
null;
|
||
|
||
currentJobId.value = newJobId;
|
||
currentJobName.value = newJobName;
|
||
}
|
||
}
|
||
|
||
// 搜索点击
|
||
function handleSearchClick() {
|
||
navTo('/pages/search/search');
|
||
}
|
||
|
||
// 菜单点击
|
||
function handleMenuClick() {
|
||
// TODO: 实现菜单功能
|
||
}
|
||
|
||
// 更多点击
|
||
function handleMoreClick() {
|
||
// TODO: 实现更多功能
|
||
}
|
||
|
||
// 处理职业路径数据更新
|
||
function handlePathDataUpdated(data) {
|
||
pathSkillsData.value = {
|
||
pathData: data.pathData || {
|
||
start: { title: '', skills: [] },
|
||
steps: [],
|
||
end: { title: '', skills: [] }
|
||
},
|
||
targetCareer: data.targetCareer || ''
|
||
};
|
||
}
|
||
|
||
onLoad(() => {
|
||
getRemindInfo();
|
||
});
|
||
|
||
onShow(() => {
|
||
// 返回本页后，如果之前因为信息缺失未展示内容，则重新检查
|
||
if (!showContent.value) {
|
||
hasCheckedRemindInfo = false;
|
||
getRemindInfo();
|
||
}
|
||
});
|
||
|
||
onMounted(() => {
|
||
if (remindList.value.length > 0 && !showContent.value) {
|
||
setTimeout(() => {
|
||
if (remindPopup.value) {
|
||
openRemindPopup();
|
||
}
|
||
}, 300);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="career-planning-page">
|
||
<!-- 提醒弹窗 -->
|
||
<RemindPopup
|
||
ref="remindPopup"
|
||
:remind-list="remindList"
|
||
@cancel="handleCancel"
|
||
@confirm="handleConfirm"
|
||
/>
|
||
|
||
<!-- 技能详情弹出层 -->
|
||
<SkillDetailPopup
|
||
ref="skillDetailPopup"
|
||
:job-title="selectedJobTitle"
|
||
:possessed-skills="selectedJobPossessedSkills"
|
||
:improvement-skills="selectedJobImprovementSkills"
|
||
/>
|
||
|
||
<!-- 页面内容 -->
|
||
<div class="page-content" v-if="showContent">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<!-- 小程序背景图片 -->
|
||
<image class="mp-background" src="/static/icon/background2.png" mode="aspectFill"></image>
|
||
<!-- #endif -->
|
||
|
||
<!-- 头部区域 -->
|
||
<PageHeader
|
||
:active-tab="activeTab"
|
||
@tab-change="switchTab"
|
||
@search-click="handleSearchClick"
|
||
@menu-click="handleMenuClick"
|
||
@more-click="handleMoreClick"
|
||
/>
|
||
|
||
<!-- 内容区域 -->
|
||
<scroll-view scroll-y class="content-scroll">
|
||
<CareerRecommend v-if="activeTab === 0"/>
|
||
<CareerPath
|
||
v-else-if="activeTab === 1"
|
||
:current-job-name="currentJobName"
|
||
@path-data-updated="handlePathDataUpdated"
|
||
/>
|
||
<SkillDevelopment
|
||
v-else
|
||
:current-job-name="currentJobName"
|
||
@path-data-updated="handlePathDataUpdated"
|
||
/>
|
||
</scroll-view>
|
||
</div>
|
||
|
||
<!-- 底部导航栏 -->
|
||
<div class="tabbar-wrapper" v-if="showContent">
|
||
<CustomTabBar :currentPage="0" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
.query-btn {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
line-height: 40rpx;
|
||
border-radius: 20rpx;
|
||
background: linear-gradient(180deg, rgba(18, 125, 240, 1) 0%, rgba(59, 14, 123, 0.71) 100%);
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
font-family: '阿里巴巴普惠体3.0-regular', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||
border: 2rpx solid rgba(187, 187, 187, 1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12rpx;
|
||
padding: 0;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.input-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30rpx;
|
||
}
|
||
|
||
.input-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.picker-field {
|
||
background-color: #F5F5F5;
|
||
border: 1rpx solid #E0E0E0;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.picker-text {
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.picker-placeholder {
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
.career-planning-page {
|
||
width: 100vw;
|
||
/* #ifdef H5 */
|
||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||
background: url('@/static/icon/background2.png') 0 0 no-repeat;
|
||
background-size: 100% 728rpx;
|
||
/* #endif */
|
||
/* #ifdef MP-WEIXIN */
|
||
height: 100vh;
|
||
position: relative;
|
||
/* #endif */
|
||
background-color: #FFFFFF;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
|
||
/* #ifdef MP-WEIXIN */
|
||
.mp-background {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 728rpx;
|
||
z-index: 0;
|
||
}
|
||
/* #endif */
|
||
|
||
.page-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
z-index: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
.content-scroll {
|
||
flex: 1;
|
||
height: 0;
|
||
width: 100%;
|
||
padding-bottom: calc(88rpx + env(safe-area-inset-bottom));
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.tabbar-wrapper {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 999;
|
||
}
|
||
</style>
|