= 职业规划推荐

pages/service/components/CareerRecommend.vue

@@ -1,172 +1,15 @@
-<!--suppress JSFileReferences, NpmUsedModulesInstalled, VueMissingComponentImportInspection -->
+<!--suppress JSFileReferences, NpmUsedModulesInstalled, VueMissingComponentImportInspection, HtmlUnknownTag -->
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue';
-import { useCareerRecommendationStore } from './store';
-import { recommendJob } from '@/apiRc/service/jobRecommend.js';
-import { appUserInfo } from '@/apiRc/user/user.js';
+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 props = defineProps({
-    currentJobId: {
-        type: [ Number, String ],
-        default: null
-    },
-    currentJobName: {
-        type: String,
-        default: ''
-    }
-});
-
 const store = useCareerRecommendationStore();
 
-const emit = defineEmits([ 'job-card-click', 'skills-updated' ]);
-
 const popupRef = ref();
 
-// 数据状态
-const skillTags = ref([]);
-const recommendedJobs = ref([]);
-const isLoadingSkillTags = ref(false);
-const isLoadingRecommend = ref(false);
-
-// 计算属性
-const currentJobDisplay = computed(() => props.currentJobName || '市场专员');
-
-// 从 appSkillsList 中提取技能名称
-function extractSkillsFromAppSkillsList(appSkillsList = []) {
-    return (Array.isArray(appSkillsList) ? appSkillsList : [])
-        .map(item => item?.name || item?.nameStr || '')
-        .filter(name => !!name && name.trim().length > 0);
-}
-
-// 从技能列表中提取技能名称用于显示（用于推荐职位数据）
-function extractSkillNames(skillList = []) {
-    return (Array.isArray(skillList) ? skillList : [])
-        .map(item => item?.skillName || '')
-        .filter(name => !!name && name.trim().length > 0);
-}
-
-// 获取当前职位的技能标签
-async function fetchCurrentJobSkills() {
-    isLoadingSkillTags.value = true;
-    try {
-        // 优先从 appUserInfo 接口获取技能标签
-        const response = await appUserInfo();
-        const userInfo = response?.data || {};
-
-        // 从 appSkillsList 中提取技能名称
-        const appSkillsList = Array.isArray(userInfo?.appSkillsList) ? userInfo.appSkillsList : [];
-        const apiSkills = extractSkillsFromAppSkillsList(appSkillsList);
-
-        // 如果接口返回了技能数据，使用接口数据
-        if (apiSkills.length > 0) {
-            skillTags.value = apiSkills;
-        } else {
-            // 如果接口没有返回技能数据，从缓存中读取
-            const cachedUserInfo = uni.getStorageSync('userInfo') || {};
-            const cachedAppSkills = Array.isArray(cachedUserInfo?.appSkillsList) ? cachedUserInfo.appSkillsList : [];
-            const cachedSkills = extractSkillsFromAppSkillsList(cachedAppSkills);
-
-            if (cachedSkills.length > 0) {
-                skillTags.value = cachedSkills;
-            } else {
-                skillTags.value = [];
-            }
-        }
-
-        // 通知父组件技能数据已更新
-        emit('skills-updated', {
-            currentJobSkills: skillTags.value,
-            recommendedJobs: recommendedJobs.value
-        });
-    } catch (error) {
-        // appUserInfo 接口调用失败时，从缓存中读取
-        const cachedUserInfo = uni.getStorageSync('userInfo') || {};
-        const cachedAppSkills = Array.isArray(cachedUserInfo?.appSkillsList) ? cachedUserInfo.appSkillsList : [];
-        const cachedSkills = extractSkillsFromAppSkillsList(cachedAppSkills);
-
-        if (cachedSkills.length > 0) {
-            skillTags.value = cachedSkills;
-        } else {
-            skillTags.value = [];
-        }
-
-        emit('skills-updated', {
-            currentJobSkills: skillTags.value,
-            recommendedJobs: recommendedJobs.value
-        });
-    } finally {
-        isLoadingSkillTags.value = false;
-    }
-}
-
-// 获取推荐职位列表
-async function fetchRecommendedJobs() {
-    isLoadingRecommend.value = true;
-    try {
-        const response = await recommendJob({
-            jobName: props.currentJobName
-        });
-
-        const list = Array.isArray(response?.data) ? response.data : [];
-
-        recommendedJobs.value = list.map((item, index) => {
-            const skillList = Array.isArray(item?.skillList) ? item.skillList : [];
-            const skillNames = extractSkillNames(skillList);
-
-            return {
-                id: item?.jobId ?? index,
-                jobId: item?.jobId ?? null,
-                title: item?.jobName || `推荐职位${ index + 1 }`,
-                jobName: item?.jobName || '',
-                skills: skillNames,
-                rawSkills: skillList
-            };
-        });
-
-        // 通知父组件推荐职位数据已更新
-        emit('skills-updated', {
-            currentJobSkills: skillTags.value,
-            recommendedJobs: recommendedJobs.value
-        });
-    } catch (error) {
-        recommendedJobs.value = [];
-        emit('skills-updated', {
-            currentJobSkills: skillTags.value,
-            recommendedJobs: []
-        });
-    } finally {
-        isLoadingRecommend.value = false;
-    }
-}
-
-// 组件挂载时检查并调用
-onMounted(() => {
-    setTimeout(() => {
-        if (props.currentJobName) {
-            fetchCurrentJobSkills();
-            fetchRecommendedJobs();
-        }
-    }, 100);
-});
-
-// 监听 props 变化，自动获取推荐职位和技能标签
-watch(
-    () => [ props.currentJobId, props.currentJobName ],
-    () => {
-        if (props.currentJobName) {
-            fetchCurrentJobSkills();
-            fetchRecommendedJobs();
-        }
-    },
-    { immediate: true }
-);
-
-// 事件处理
-function handleJobCardClick(job) {
-    emit('job-card-click', job);
-}
-
 const eventSelectCurrentJob = () => {
     popupRef.value?.open('bottom');
 };
@@ -174,52 +17,62 @@ const eventSelectCurrentJob = () => {
 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">
-            <span class="label">当前职位</span>
-            <span class="value" @click="eventSelectCurrentJob">{{ currentJobDisplay }}</span>
+        <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 skillTags" :key="index" class="skill-tag">
+            <div v-for="(skill, index) in store.skillTags" :key="index" class="skill-tag">
                 {{ skill }}
             </div>
-            <span v-if="!skillTags.length && !isLoadingSkillTags" class="empty-text">暂无技能数据</span>
-            <span v-if="isLoadingSkillTags" class="empty-text">加载中...</span>
+            <span v-if="!store.skillTags.length" class="empty-text">暂无技能数据</span>
         </div>
     </div>
-
-    <!-- 相似推荐职位 -->
     <div class="section-title">
         相似推荐职位
     </div>
-    <div v-if="!isLoadingRecommend && recommendedJobs.length === 0" class="empty-text">暂无推荐职位</div>
-    <div v-for="(job, index) in recommendedJobs" :key="index" class="job-item-card" @click="handleJobCardClick(job)">
+    <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="(skill, skillIndex) in job.skills" :key="skillIndex" class="job-skill-tag">
-                {{ skill }}
+            <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>
-<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="">
-
-    </div>
-</uni-popup>
 </template>
 
 <style lang="scss" scoped>
@@ -297,7 +150,6 @@ const eventCloseCurrentJob = () => {
     box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
     border-left: 6rpx solid #409EFF;
     position: relative;
-    cursor: pointer;
 }
 
 .job-header {
@@ -354,4 +206,13 @@ const eventCloseCurrentJob = () => {
 button::after {
     border: none;
 }
+
+.professions {
+    width: 100vw;
+    height: 80vh;
+
+    .professions-list {
+        padding-left: 20px;
+    }
+}
 </style>