= 职业规划推荐

pages/service/components/CareerRecommend.vue

@@ -1,11 +1,14 @@
+<!--suppress JSFileReferences, NpmUsedModulesInstalled, VueMissingComponentImportInspection -->
 <script setup>
-import { ref, computed, watch, onMounted } from 'vue';
-import { recommendJob } from '@/apiRc/jobRecommend.js';
+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';
 
+
 const props = defineProps({
     currentJobId: {
-        type: [Number, String],
+        type: [ Number, String ],
         default: null
     },
     currentJobName: {
@@ -14,7 +17,11 @@ const props = defineProps({
     }
 });
 
-const emit = defineEmits(['job-card-click', 'skills-updated']);
+const store = useCareerRecommendationStore();
+
+const emit = defineEmits([ 'job-card-click', 'skills-updated' ]);
+
+const popupRef = ref();
 
 // 数据状态
 const skillTags = ref([]);
@@ -110,7 +117,7 @@ async function fetchRecommendedJobs() {
             return {
                 id: item?.jobId ?? index,
                 jobId: item?.jobId ?? null,
-                title: item?.jobName || `推荐职位${index + 1}`,
+                title: item?.jobName || `推荐职位${ index + 1 }`,
                 jobName: item?.jobName || '',
                 skills: skillNames,
                 rawSkills: skillList
@@ -145,7 +152,7 @@ onMounted(() => {
 
 // 监听 props 变化，自动获取推荐职位和技能标签
 watch(
-    () => [props.currentJobId, props.currentJobName],
+    () => [ props.currentJobId, props.currentJobName ],
     () => {
         if (props.currentJobName) {
             fetchCurrentJobSkills();
@@ -159,60 +166,60 @@ watch(
 function handleJobCardClick(job) {
     emit('job-card-click', job);
 }
+
+const eventSelectCurrentJob = () => {
+    popupRef.value?.open('bottom');
+};
+
+const eventCloseCurrentJob = () => {
+    popupRef.value?.close('bottom');
+};
 </script>
 
 <template>
-    <div class="career-recommend">
-        <!-- 当前职位信息卡片 -->
-        <div class="info-card">
-            <div class="card-title">当前职位信息</div>
-            <div class="card-content">
-                <text class="label">当前职位</text>
-                <text class="value">{{ currentJobDisplay }}</text>
-            </div>
+<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>
+    </div>
 
-        <!-- 我的技能标签卡片 -->
-        <div class="info-card">
-            <div class="card-title">我的技能标签</div>
-            <div class="skill-tags">
-                <div
-                    class="skill-tag"
-                    v-for="(skill, index) in skillTags"
-                    :key="index"
-                >
-                    {{ skill }}
-                </div>
-                <text v-if="!skillTags.length && !isLoadingSkillTags" class="empty-text">暂无技能数据</text>
-                <text v-if="isLoadingSkillTags" class="empty-text">加载中...</text>
+    <!-- 我的技能标签卡片 -->
+    <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">
+                {{ skill }}
             </div>
+            <span v-if="!skillTags.length && !isLoadingSkillTags" class="empty-text">暂无技能数据</span>
+            <span v-if="isLoadingSkillTags" class="empty-text">加载中...</span>
         </div>
+    </div>
 
-        <!-- 相似推荐职位 -->
-        <div class="section-title">
-            相似推荐职位
+    <!-- 相似推荐职位 -->
+    <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 class="job-header">
+            <span class="job-title">{{ job.title }}</span>
         </div>
-        <div v-if="!isLoadingRecommend && recommendedJobs.length === 0" class="empty-text">暂无推荐职位</div>
-        <div
-            class="job-item-card"
-            v-for="(job, index) in recommendedJobs"
-            :key="index"
-            @click="handleJobCardClick(job)"
-        >
-            <div class="job-header">
-                <text class="job-title">{{ job.title }}</text>
-            </div>
-            <div class="job-skills">
-                <div
-                    class="job-skill-tag"
-                    v-for="(skill, skillIndex) in job.skills"
-                    :key="skillIndex"
-                >
-                    {{ skill }}
-                </div>
+        <div class="job-skills">
+            <div v-for="(skill, skillIndex) in job.skills" :key="skillIndex" class="job-skill-tag">
+                {{ skill }}
             </div>
         </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="">
+
+    </div>
+</uni-popup>
 </template>
 
 <style lang="scss" scoped>