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">
                <component 
                    :is="currentComponent" 
                    @job-card-click="handleJobCardClick"
                ></component>
            </scroll-view>
        </view>

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

<script setup>
import { ref, inject, nextTick, onMounted, computed } from 'vue';
import { onLoad } 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 } = 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 currentComponent = computed(() => {
    const components = [CareerRecommend, CareerPath, SkillDevelopment];
    return components[activeTab.value];
});

// 打开弹窗
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 jobTitles = data.jobTitles || [];
        //     const appSkillsList = data.appSkillsList || [];
        //     
        //     remindList.value = [];
        //     if (!jobTitles || jobTitles.length === 0) {
        //         remindList.value.push('求职期望;');
        //     }
        //     
        //     if (remindList.value.length > 0) {
        //         openRemindPopup();
        //         return;
        //     }
        // }
        
        // 暂时使用测试数据显示弹窗
        remindList.value = ['求职期望;'];
        openRemindPopup();
    } catch (error) {
        console.error('获取提醒信息失败:', error);
        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 handleJobCardClick(job) {
    selectedJobTitle.value = job.title || '';
    selectedJobPossessedSkills.value = job.possessedSkills || [];
    selectedJobImprovementSkills.value = job.improvementSkills || [];
    skillDetailPopup.value?.open();
}

// 处理技能弹出层关闭
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>