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">{{ currentJobDisplay }}</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>
                <text v-if="!skillTags.length && !isLoadingSkillTags" class="empty-text">暂无技能数据</text>
            </view>
        </view>

        <!-- 相似推荐职位 -->
        <view class="section-title">
            相似推荐职位
            <text v-if="recommendRecordCount > 0" class="recommend-count">共{{ recommendRecordCount }}条记录</text>
        </view>
        <view v-if="!isLoadingRecommend && recommendedJobs.length === 0" class="empty-text">暂无推荐职位</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, computed, watch } from 'vue';
import { getJobSkillDetail } from '@/apiRc/jobSkill.js';
import { recommendJob, countJobRecommendRecords, getJobRecommendRecords } from '@/apiRc/jobRecommend.js';

const props = defineProps({
    currentJobId: {
        type: [Number, String],
        default: null
    },
    currentJobName: {
        type: String,
        default: ''
    }
});

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

const skillTags = ref([]);
const recommendedJobs = ref([]);
const recommendRecordCount = ref(0);
const recommendRecords = ref([]);
const isLoadingSkillTags = ref(false);
const isLoadingRecommend = ref(false);
const isLoadingRecords = ref(false);

const currentJobDisplay = computed(() => props.currentJobName || '前端开发工程师');

function normalizeSkillListForDisplay(skillList = []) {
    return (Array.isArray(skillList) ? skillList : [])
        .map(item => item?.skillName)
        .filter(name => !!name);
}

async function fetchCurrentJobSkills() {
    if (!props.currentJobId && !props.currentJobName) {
        skillTags.value = [];
        return;
    }

    isLoadingSkillTags.value = true;
    try {
        const params = {};
        if (props.currentJobId !== null && props.currentJobId !== undefined && props.currentJobId !== '') {
            params.jobId = props.currentJobId;
        }
        if (props.currentJobName) {
            params.jobName = props.currentJobName;
        }
        const response = await getJobSkillDetail(params);
        const list = Array.isArray(response?.data) ? response.data : [];
        skillTags.value = normalizeSkillListForDisplay(list);
    } catch (error) {
        console.error('获取当前职位技能失败:', error);
        skillTags.value = [];
    } finally {
        isLoadingSkillTags.value = false;
    }
}

async function fetchRecommendedJobs() {
    const hasJobId = props.currentJobId !== null && props.currentJobId !== undefined && props.currentJobId !== '';
    if (!hasJobId) {
        recommendedJobs.value = [];
        return;
    }

    isLoadingRecommend.value = true;
    try {
        const response = await recommendJob({
            jobId: props.currentJobId
        });
        const list = Array.isArray(response?.data) ? response.data : [];
        recommendedJobs.value = list.map((item, index) => {
            const rawSkills = Array.isArray(item?.skillList) ? item.skillList : [];
            return {
                id: item?.jobId ?? index,
                jobId: item?.jobId ?? null,
                title: item?.jobName || `推荐职位${index + 1}`,
                jobName: item?.jobName || '',
                skills: normalizeSkillListForDisplay(rawSkills),
                rawSkills
            };
        });
    } catch (error) {
        console.error('获取推荐职位失败:', error);
        recommendedJobs.value = [];
    } finally {
        isLoadingRecommend.value = false;
    }
}

async function fetchRecommendRecordInfo() {
    const hasJobId = props.currentJobId !== null && props.currentJobId !== undefined && props.currentJobId !== '';
    const hasJobName = !!props.currentJobName;
    if (!hasJobId && !hasJobName) {
        recommendRecordCount.value = 0;
        recommendRecords.value = [];
        return;
    }

    isLoadingRecords.value = true;
    try {
        const [countRes, listRes] = await Promise.all([
            countJobRecommendRecords({
                jobId: hasJobId ? props.currentJobId : undefined,
                jobName: props.currentJobName
            }),
            getJobRecommendRecords({
                jobName: props.currentJobName || '',
                pageNo: 1,
                pageSize: 10
            })
        ]);
        recommendRecordCount.value = Number(countRes?.data) || 0;
        recommendRecords.value = Array.isArray(listRes?.data?.list) ? listRes.data.list : [];
    } catch (error) {
        console.error('获取推荐记录失败:', error);
        recommendRecordCount.value = 0;
        recommendRecords.value = [];
    } finally {
        isLoadingRecords.value = false;
    }
}

watch(
    () => [props.currentJobId, props.currentJobName],
    () => {
        fetchCurrentJobSkills();
        fetchRecommendedJobs();
        fetchRecommendRecordInfo();
    },
    { immediate: true }
);

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;
}

.recommend-count {
    margin-left: 12rpx;
    font-size: 22rpx;
    color: #666666;
    font-weight: 400;
}

.empty-text {
    font-size: 24rpx;
    color: #999999;
    line-height: 34rpx;
}

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