ks-app-employment-service/pages/service/components/CareerRecommend.vue

<template>
    <view class="career-recommend">
        <!-- 当前职位信息卡片 -->
        <view class="info-card">
            <view class="card-title">当前职位信息</view>
            <view class="card-content">
                <text class="label">当前职位</text>
                <text class="value">{{ currentJob || '前端开发工程师' }}</text>
            </view>
        </view>

        <!-- 我的技能标签卡片 -->
        <view class="info-card">
            <view class="card-title">我的技能标签</view>
            <view class="skill-tags">
                <view 
                    class="skill-tag" 
                    v-for="(skill, index) in skillTags" 
                    :key="index"
                >
                    {{ skill }}
                </view>
            </view>
        </view>

        <!-- 相似推荐职位 -->
        <view class="section-title">相似推荐职位</view>
        <view 
            class="job-item-card" 
            v-for="(job, index) in recommendedJobs" 
            :key="index"
            @click="handleJobCardClick(job)"
        >
            <button class="search-btn" @click.stop="handleJobSearch(job)">职位搜索</button>
            <view class="job-header">
                <text class="job-title">{{ job.title }}</text>
            </view>
            <view class="job-skills">
                <view 
                    class="job-skill-tag" 
                    v-for="(skill, skillIndex) in job.skills" 
                    :key="skillIndex"
                >
                    {{ skill }}
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

const emit = defineEmits(['job-card-click']);

// 当前职位信息（后续从接口获取）
// TODO: 从接口获取当前职位信息
// async function getCurrentJob() {
//     try {
//         const response = await getCareerCurrentJob();
//         if (response && response.code === 200) {
//             currentJob.value = response.data?.jobTitle || '前端开发工程师';
//         }
//     } catch (error) {
//         console.error('获取当前职位失败:', error);
//     }
// }
const currentJob = ref('前端开发工程师'); // mock数据

// 技能标签列表（后续从接口获取）
const skillTags = ref(['JavaScript', 'React', 'Vue', 'CSS3', 'HTML5', 'Git', 'Webpack', 'TypeScript']);

// 相似推荐职位列表（后续从接口获取）
const recommendedJobs = ref([
    {
        id: 1,
        title: '全栈开发工程师',
        skills: ['React', 'Node.js', 'TypeScript', '数据库'],
        possessedSkills: [
            { name: 'React', level: 5 },
            { name: 'JavaScript', level: 5 },
            { name: 'HTML/CSS', level: 6 },
            { name: 'Git', level: 5 }
        ],
        improvementSkills: [
            { name: 'Node.js', level: 3 },
            { name: '数据库设计', level: 3 },
            { name: 'RESTful API', level: 3 },
            { name: 'Docker', level: 3 }
        ]
    },
    {
        id: 2,
        title: '高级前端开发工程师',
        skills: ['React', 'Vue', 'TypeScript', 'Webpack'],
        possessedSkills: [
            { name: 'React', level: 5 },
            { name: 'Vue', level: 4 },
            { name: 'JavaScript', level: 5 }
        ],
        improvementSkills: [
            { name: 'TypeScript', level: 3 },
            { name: 'Webpack', level: 3 }
        ]
    },
    {
        id: 3,
        title: '前端架构师',
        skills: ['React', 'Vue', 'TypeScript', '架构设计'],
        possessedSkills: [
            { name: 'React', level: 6 },
            { name: 'Vue', level: 5 }
        ],
        improvementSkills: [
            { name: '架构设计', level: 3 },
            { name: '技术选型', level: 3 }
        ]
    },
    {
        id: 4,
        title: '前端架构师',
        skills: ['架构设计', '技术选型', '工程化', '团队领导'],
        possessedSkills: [
            { name: '工程化', level: 4 }
        ],
        improvementSkills: [
            { name: '架构设计', level: 3 },
            { name: '技术选型', level: 3 },
            { name: '团队领导', level: 2 }
        ]
    }
]);

// TODO: 从接口获取推荐职位数据
// async function getRecommendedJobs() {
//     try {
//         const response = await getCareerRecommendJobs();
//         if (response && response.code === 200) {
//             recommendedJobs.value = response.data || [];
//         }
//     } catch (error) {
//         console.error('获取推荐职位失败:', error);
//     }
// }

function handleJobSearch(job) {
    console.log('搜索职位:', job.title);
    // TODO: 实现职位搜索跳转
}

function handleJobCardClick(job) {
    emit('job-card-click', job);
}
</script>

<style lang="scss" scoped>
.career-recommend {
    padding: 10rpx 28rpx 20rpx;
}

.info-card {
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 28rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.card-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #000000;
    margin-bottom: 24rpx;
}

.card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .label {
        font-size: 24rpx;
        line-height: 34rpx;
        color: rgba(154, 154, 154, 1);
        text-align: left;
        font-family: 'PingFangSC-Bold', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
        font-weight: 600;
    }
    
    .value {
        font-size: 32rpx;
        line-height: 46rpx;
        color: rgb(16, 16, 16);
        font-weight: 600;
        text-align: left;
        font-family: 'PingFangSC-Bold', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
    }
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
}

.skill-tag {
    background-color: #EAEFFE;
    color: rgba(44, 101, 247, 1);
    padding: 8rpx 20rpx;
    border-radius: 0;
    font-size: 24rpx;
    white-space: nowrap;
}

.section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #000000;
    margin-bottom: 20rpx;
    margin-top: 8rpx;
}

.job-item-card {
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 28rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    border-left: 6rpx solid #409EFF;
    position: relative;
    cursor: pointer;
}

.search-btn {
    position: absolute;
    top: 16rpx;
    right: 16rpx;
    background-color: #FFDAB9;
    color: #FF6347;
    font-size: 20rpx;
    padding: 6rpx 14rpx;
    border-radius: 6rpx;
    border: 1rpx solid #FFA07A;
    white-space: nowrap;
    z-index: 10;
    line-height: 1.2;
}

.job-header {
    margin-bottom: 16rpx;
    padding-right: 100rpx;
}

.job-title {
    font-size: 32rpx;
    font-weight: 600;
    color: rgb(16, 16, 16);
    text-align: left;
    font-family: 'PingFangSC-Bold', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
    line-height: 46rpx;
    width: 100%;
}

.job-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
}

.job-skill-tag {
    width: 130rpx;
    height: 36rpx;
    line-height: 34rpx;
    background-color: rgba(49, 100, 239, 0.1);
    color: rgba(44, 101, 247, 1);
    font-size: 24rpx;
    text-align: center;
    font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
    border-radius: 8rpx;
    white-space: nowrap;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

button::after {
    border: none;
}
</style>