ks-app-employment-service/pages/service/career-planning.vue

<template>
    <view 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"
            @close="handleSkillPopupClose"
        />

        <!-- 页面内容 -->
        <view 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"
                    :current-job-id="currentJobId"
                    :current-job-name="currentJobName"
                    @job-card-click="handleJobCardClick"
                />
                <CareerPath v-else-if="activeTab === 1" />
                <SkillDevelopment v-else />
            </scroll-view>
        </view>

        <!-- 底部导航栏 -->
        <view class="tabbar-wrapper" v-if="showContent">
            <CustomTabBar :currentPage="0" />
        </view>
    </view>
</template>

<script setup>
import { ref, inject, nextTick, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { appUserInfo } from '@/apiRc/user/user.js';
import { getJobSkillDetail } from '@/apiRc/jobSkill.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 } = 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 isLoadingJobSkill = ref(false);
const currentJobId = ref(null);
const currentJobName = ref('');

// 打开弹窗
function openRemindPopup() {
    nextTick(() => {
        if (remindPopup.value) {
            remindPopup.value.open();
        } else {
            setTimeout(() => {
                if (remindPopup.value) {
                    remindPopup.value.open();
                } else {
                    setTimeout(() => {
                        remindPopup.value?.open();
                    }, 200);
                }
            }, 300);
        }
    });
}

// 获取提醒信息的接口
async function getRemindInfo() {
    try {
        const response = await appUserInfo();
        if (response && response.code === 200) {
            const data = response.data || {};
            const reminders = [];

            currentJobId.value = data?.jobId ?? data?.currentJobId ?? null;
            currentJobName.value = data?.jobName ?? data?.currentJobName ?? '';

            if (Array.isArray(data.remindList) && data.remindList.length > 0) {
                reminders.push(
                    ...data.remindList
                        .filter(item => typeof item === 'string' && item.trim().length > 0)
                        .map(item => item.trim())
                );
            } else {
                const jobTitles = Array.isArray(data.jobTitles) ? data.jobTitles : [];
                const appSkillsList = Array.isArray(data.appSkillsList) ? data.appSkillsList : [];

                if (!currentJobName.value && jobTitles.length > 0) {
                    currentJobName.value = jobTitles[0];
                }

                if (jobTitles.length === 0) {
                    reminders.push('请完善求职期望');
                }

                if (appSkillsList.length === 0) {
                    reminders.push('请完善技能信息');
                }
            }

            if (reminders.length === 0) {
                reminders.push('暂无待完善信息');
            }

            remindList.value = reminders;
            if (!currentJobName.value) {
                currentJobName.value = '前端开发工程师';
            }
            openRemindPopup();
            return;
        }

        throw new Error('接口返回异常');
    } catch (error) {
        console.error('获取提醒信息失败:', error);
        currentJobId.value = null;
        if (!currentJobName.value) {
            currentJobName.value = '前端开发工程师';
        }
        remindList.value = ['获取提醒信息失败，请稍后重试'];
        openRemindPopup();
    }
}

// 取消按钮
function handleCancel() {
    remindPopup.value?.close();
    navBack();
}

// 确认按钮
function handleConfirm() {
    remindPopup.value?.close();
    showContent.value = true;
}

// 切换tab
function switchTab(index) {
    activeTab.value = index;
}

// 搜索点击
function handleSearchClick() {
    // TODO: 跳转到搜索页面
    console.log('搜索点击');
}

// 菜单点击
function handleMenuClick() {
    console.log('菜单点击');
}

// 更多点击
function handleMoreClick() {
    console.log('更多点击');
}

function normalizeSkillLevel(score) {
    const numericScore = Number(score);
    if (Number.isNaN(numericScore)) {
        return 0;
    }
    const rounded = Math.round(numericScore);
    return Math.max(1, Math.min(6, rounded));
}

function splitSkillListByScore(skills = []) {
    if (!Array.isArray(skills) || skills.length === 0) {
        return {
            possessed: [],
            improvement: []
        };
    }

    const sorted = [...skills].sort((a, b) => (Number(b.skillScore) || 0) - (Number(a.skillScore) || 0));
    const midpoint = Math.ceil(sorted.length / 2);
    const mapSkill = (item) => ({
        name: item?.skillName || '',
        level: normalizeSkillLevel(item?.skillScore)
    });

    return {
        possessed: sorted.slice(0, midpoint).map(mapSkill),
        improvement: sorted.slice(midpoint).map(mapSkill)
    };
}

// 处理职位卡片点击
async function handleJobCardClick(job) {
    if (!job) {
        return;
    }

    selectedJobTitle.value = job.title || job.jobName || '';
    selectedJobPossessedSkills.value = [];
    selectedJobImprovementSkills.value = [];

    if (isLoadingJobSkill.value) {
        return;
    }

    isLoadingJobSkill.value = true;
    uni.showLoading({
        title: '加载中...',
        mask: true
    });

    const fallbackSkills = Array.isArray(job?.rawSkills) ? job.rawSkills : [];
    const params = {};
    if (job?.jobId) {
        params.jobId = job.jobId;
    }
    if (job?.title) {
        params.jobName = job.title;
    } else if (job?.jobName) {
        params.jobName = job.jobName;
    }

    try {
        const response = await getJobSkillDetail(params);
        const skillList = Array.isArray(response?.data) ? response.data : [];
        const { possessed, improvement } = splitSkillListByScore(skillList);

        if (possessed.length === 0 && improvement.length === 0) {
            if (fallbackSkills.length === 0) {
                uni.showToast({
                    title: '暂无技能数据',
                    icon: 'none'
                });
                return;
            }
            const fallbackSplit = splitSkillListByScore(fallbackSkills);
            selectedJobPossessedSkills.value = fallbackSplit.possessed;
            selectedJobImprovementSkills.value = fallbackSplit.improvement;
        } else {
            selectedJobPossessedSkills.value = possessed;
            selectedJobImprovementSkills.value = improvement;
        }
        skillDetailPopup.value?.open();
    } catch (error) {
        console.error('获取职位技能详情失败:', error);
        if (fallbackSkills.length > 0) {
            const fallbackSplit = splitSkillListByScore(fallbackSkills);
            selectedJobPossessedSkills.value = fallbackSplit.possessed;
            selectedJobImprovementSkills.value = fallbackSplit.improvement;
            skillDetailPopup.value?.open();
        } else {
            uni.showToast({
                title: '获取技能信息失败',
                icon: 'none'
            });
        }
    } finally {
        isLoadingJobSkill.value = false;
        uni.hideLoading();
    }
}

// 处理技能弹出层关闭
function handleSkillPopupClose() {
    // 可以在这里处理关闭后的逻辑
}

onLoad(() => {
    getRemindInfo();
});

onMounted(() => {
    if (remindList.value.length > 0 && !showContent.value) {
        openRemindPopup();
    }
});
</script>

<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;
    padding-bottom: 88rpx;
}


.content-scroll {
    flex: 1;
    height: 0;
    width: 100%;
}

.tabbar-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
</style>