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

<!--suppress JSFileReferences, NpmUsedModulesInstalled, VueMissingComponentImportInspection, HtmlUnknownTag -->
<script setup>
import { ref } from 'vue';
import { useCareerRecommendationStore } from '@/stores/useCareerRecommendationStore';
import uniList from '@/uni_modules/uni-list/components/uni-list/uni-list.vue';
import uniListItem from '@/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue';


const store = useCareerRecommendationStore();

const popupRef = ref();

const eventSelectCurrentJob = () => {
    popupRef.value?.open('bottom');
};

const eventCloseCurrentJob = () => {
    popupRef.value?.close('bottom');
};

const eventProfession = (item) => {
    store.eventProfession(item);
    store.eventSearch();
    popupRef.value?.close('bottom');
};
</script>

<template>
<div class="career-recommend">
    <div class="info-card">
        <div class="card-title">当前职位信息</div>
        <div class="card-content" @click="eventSelectCurrentJob">
            <span class="label">当前职位</span> <span class="value">{{ store.professionLabel }}</span>
        </div>
    </div>
    <div class="info-card">
        <div class="card-title">我的技能标签</div>
        <div class="skill-tags">
            <div v-for="(skill, index) in store.skillTags" :key="index" class="skill-tag">
                {{ skill }}
            </div>
            <span v-if="!store.skillTags.length" class="empty-text">暂无技能数据</span>
        </div>
    </div>
    <div class="section-title">
        相似推荐职位
    </div>
    <div v-if="!store.result && store.result.length === 0" class="empty-text">暂无推荐职位</div>
    <div v-for="(job, index) in store.result" :key="index" class="job-item-card">
        <div class="job-header">
            <span class="job-title">{{ job.title }}</span>
        </div>
        <div class="job-header">
            <span>职业相似度：{{ job.percentage }}%</span>
        </div>
        <div class="job-skills">
            <div v-for="tag in job.tags" :key="tag" class="job-skill-tag">
                {{ tag }}
            </div>
        </div>
    </div>
    <uni-popup ref="popupRef" :border-radius="'20rpx 20rpx 0 0'" :is-mask-click="true" background-color="#FFFFFF" mask-background-color="rgba(255, 255, 255, 0.6)" type="bottom" @mask-click="eventCloseCurrentJob">
        <div class="professions">
            <scroll-view scroll-y style="height: 100%;">
                <div class="professions-list">
                    <uni-list>
                        <template v-for="item in store.professionsRef" :key="item.label">
                        <uni-list-item :title="item.label" clickable showArrow @click="eventProfession(item)" />
                        </template>
                    </uni-list>
                </div>
            </scroll-view>
        </div>
    </uni-popup>
</div>
</template>

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

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

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

.professions {
    width: 100vw;
    height: 80vh;

    .professions-list {
        padding-left: 20px;
    }
}
</style>