= 职业规划推荐

pages/service/components/SkillDevelopment.vue

@@ -43,7 +43,7 @@ const store = useSkillDevelopmentStore();
             </button>
         </div>
     </div>
-    <div class="content-section career-section">
+    <div v-if="store.careerPaths.length" class="content-section career-section">
         <div class="section-title">
             <span class="title-text">职业路径</span>
         </div>
@@ -54,13 +54,12 @@ const store = useSkillDevelopmentStore();
                     <div
                         :class="{ 'career-active': store.currentCareer && store.currentCareer.value === item.value }"
                         class="career-path-item"
-                        @click="store.eventResult(item)"
+                        @click="store.eventResult(index)"
                     >
                         <div
                             class="career-index"
-                            :class="[index === 0 ? 'font-size-18' : 'font-size-24']"
                         >
-                            {{ index === 0 ? '起点' : index }}
+                            <span class="index">{{ item.index }}</span>
                         </div>
                         <div class="career-label">{{ item.label }}</div>
                     </div>
@@ -69,21 +68,21 @@ const store = useSkillDevelopmentStore();
             </scroll-view>
         </div>
     </div>
-    <div class="content-section">
+    <div v-if="store.careerPaths.length" class="content-section">
         <div class="section-title">
             <uni-icons color="#000000" size="18" type="person-filled"></uni-icons>
             <span class="title-text">{{ store.currentCareerLabel }}技能</span>
         </div>
         <div class="skill-list">
             <div v-if="store.result.length === 0" class="empty-text">暂无数据</div>
-            <div v-for="(item, index) in store.result" :key="index" class="font-weight-700 font-size-18 skill-card">
+            <div v-for="(item, index) in store.result" :key="index" class="skill-card">
-                <div class="margin-bottom-10 skill-label">{{ item.label }}</div>
+                <div class="skill-label">{{ item.label }}</div>
-                <div class="d-flex flex-column gap-15 skill-detail">
+                <div class="skill-detail">
-                    <div v-for="d in item.children" :key="d.label" class="d-flex justify-content-between align-items-center padding-10 border-radius-3 skill-detail-item">
+                    <div v-for="d in item.children" :key="d.label" class="skill-detail-item">
-                        <div class="skill-detail-item-label">{{ d.label }}</div>
+                        <div class="skill-detail-item-label">{{ d.label + d.label + d.label }}</div>
-                        <div class="d-flex justify-content-between align-items-center width-320">
+                        <div class="skill-detail-item-value">
-                            <div>技能得分：{{ d.value }}</div>
+                            <div class="value-item">技能得分：{{ d.value }}</div>
-                            <div>权重：{{ d.weight }}</div>
+                            <div class="value-item">权重：{{ d.weight }}</div>
                         </div>
                     </div>
                 </div>
@@ -116,6 +115,7 @@ const store = useSkillDevelopmentStore();
     background-color: #FFFFFF;
     border-radius: 16rpx;
     padding: 28rpx;
+    margin-bottom: 20rpx;
     box-sizing: border-box;
     overflow: visible;
     box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
@@ -153,6 +153,7 @@ const store = useSkillDevelopmentStore();
 button::after {
     border: none;
 }
+
 .section-title {
     font-size: 32rpx;
     color: #000000;
@@ -166,136 +167,187 @@ button::after {
     }
 }
 
-.title-text {
-    font-size: 32rpx;
-    font-weight: 600;
-    color: #167CF1;
-}
-
-.intro-text {
-    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;
-    margin-bottom: 90rpx;
-    width: 672rpx;
-}
-
-.skill-list {
-    display: flex;
-    flex-direction: column;
-    gap: 20rpx;
-}
-
-.skill-item {
-    width: 100%;
-    max-width: 796rpx;
-    min-height: 162rpx;
-    line-height: 40rpx;
-    border-radius: 20rpx;
-    background-color: rgba(239, 239, 239, 1);
-    color: rgba(16, 16, 16, 1);
-    font-size: 28rpx;
-    text-align: center;
-    padding: 24rpx;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    overflow: visible;
-    position: relative;
-}
-
-.career-paths {
-    grid-auto-flow: column;
-
-    .career-index {
-        background: #6c64e7;
-        border: 3px solid #fff;
-        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-    }
-
-    .career-label {
-        color: #6c64e7;
-    }
-
-    .career-active {
-        .career-index {
-            background: #22c55e;
-        }
-
-        .career-label {
-            color: #000;
-        }
-    }
-}
-
-.skill-label {
-    color: #94a3b8;
-}
-
-.skill-detail-item {
-    background: #c1d2ea;
-}
-
-.skill-detail-item-label {
-    color: #334155;
-
-    & + div {
-        color: #4f46e5;
-    }
-}
-
-</style>
-
-<style lang="scss" scoped>
-
 .career-paths {
     display: grid;
     grid-auto-flow: column;
-    gap: 40px;
+    gap: 20px;
-    width: fit-content;
     padding-bottom: 10px;
 
     .career-path-item {
         display: flex;
         flex-direction: column;
         align-items: center;
+        width: 80px;
         padding: 5px;
         font-weight: 700;
         cursor: pointer;
-    }
 
-    .career-index {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 64px;
-        height: 64px;
-        background: #6c64e7;
-        border: 3px solid #fff;
-        font-size: 18px;
-        color: #fff;
-        border-radius: 50%;
-        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-
-    }
-
-    .career-label {
-        margin-top: 10px;
-        text-wrap: nowrap;
-        color: #6c64e7;
-    }
-
-    .career-active {
         .career-index {
-            background: #22c55e;
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 48px;
+            height: 48px;
+            font-size: 20px;
+            color: #fff;
+            border-radius: 50%;
+
+            .index {
+                position: relative;
+                z-index: 10;
+            }
+
+            &:before,
+            &:after {
+                content: '';
+                position: absolute;
+            }
+
+            &:before {
+                inset: 0;
+                z-index: 1;
+                background: #6c64e7;
+                border: 3px solid #fff;
+                border-radius: 50%;
+                box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
+            }
+
+            &:after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                right: 50%;
+                z-index: 0;
+                width: 100px;
+                border-bottom: 4px solid #ccc;
+            }
         }
 
         .career-label {
-            color: #000;
+            margin-top: 10px;
+            font-size: 16px;
+            text-align: center;
+            color: #6c64e7;
+        }
+
+        &.career-active {
+            .career-index {
+                &:before {
+                    background: #22c55e;
+                }
+                &:after {
+                    border-color: #22c55e;
+                }
+            }
+
+            .career-label {
+                color: #000;
+            }
+
+            & + .career-path-item {
+                .career-index {
+                    &:after {
+                        border-color: #22c55e;
+                    }
+                }
+            }
+        }
+
+        &:first-child {
+            .career-index {
+                font-size: 16px;
+
+                &:after {
+                    display: none;
+                }
+            }
+        }
+
+        &:last-child {
+            .career-index {
+                font-size: 16px;
+            }
+        }
+    }
+}
+
+</style>
+
+<style lang="scss" scoped>
+.title-text {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #167CF1;
+}
+
+.skill-card {
+    margin-bottom: 14px;
+    box-sizing: border-box;
+    font-weight: 700;
+
+    .skill-list {
+        display: flex;
+        flex-direction: column;
+        gap: 20rpx;
+    }
+
+    .skill-item {
+        width: 100%;
+        max-width: 796rpx;
+        min-height: 162rpx;
+        line-height: 40rpx;
+        border-radius: 20rpx;
+        background-color: rgba(239, 239, 239, 1);
+        color: rgba(16, 16, 16, 1);
+        font-size: 28rpx;
+        text-align: center;
+        padding: 24rpx;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        overflow: visible;
+        position: relative;
+    }
+
+    .skill-label {
+        margin-bottom: 10px;
+        font-size: 16px;
+        color: #94a3b8;
+    }
+
+    .skill-detail {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        .skill-detail-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px;
+            border-radius: 3px;
+            background: #c1d2ea;
+        }
+
+        .skill-detail-item-label {
+            width: 55%;
+            word-wrap: break-word;
+            white-space: pre-wrap;
+            word-break: break-all;
+            color: #334155;
+        }
+
+        .skill-detail-item-value {
+            width: 45%;
+            padding-left: 6px;
+            color: #4f46e5;
+            box-sizing: border-box;
+
+            .value-item {
+                text-wrap: nowrap;
+            }
         }
     }
 }

stores/useCareerRecommendationStore.js

@@ -81,7 +81,7 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
             professions.value = data.map((d) => {
                 return {
                     label: d.name,
-                    value: `${ d.jobId }`
+                    value: d.name
                 };
             });
         } catch (e) {

stores/useSkillDevelopmentStore.js

@@ -62,12 +62,14 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
     const paths = ref([]);
     const pathsRef = computed(() => {
         return paths.value.filter((d) => {
-            return `${ d.startJobId }` === profession.value;
+            const [startJobId] = d.value.split('-');
+            return startJobId === profession.value;
         });
     });
 
     const careerPaths = ref([]);
     const currentCareer = ref(null);
+    const currentCareerIndex = ref(0);
     const currentCareerLabel = computed(() => {
         if (!currentCareer.value) {
             return '';
@@ -117,8 +119,8 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
             paths.value = data.map((d) => {
                 return {
                     label: d.endJob,
-                    value: d.endJob,
+                    value: `${d.startJobId}-${d.endJobId}`
-                    startJobId: d.startJobId
+
                 };
             });
         } catch (e) {
@@ -147,14 +149,26 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
             if (!data) {
                 return;
             }
-            careerPaths.value = data.map((d) => {
+            careerPaths.value = data.map((d, i) => {
+                let index = `${i}`;
+                let fontSize = 26;
+                if (i === 0) {
+                    index = '起点';
+                    fontSize = 18;
+                }
+                if (i === data.length - 1) {
+                    index = '终点';
+                    fontSize = 18;
+                }
                 return {
+                    index,
                     label: d.name,
-                    value: d.jobId
+                    value: d.jobId,
+                    fontSize
                 };
             });
             if (careerPaths.value[0]) {
-                void eventResult(careerPaths.value[0]);
+                void eventResult(0);
             }
         } catch (e) {
             console.warn(e);
@@ -162,13 +176,15 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
         }
     };
 
-    const eventResult = async (path) => {
+    const eventResult = async (index) => {
-        currentCareer.value = path;
+        currentCareerIndex.value = index;
+        currentCareer.value = careerPaths.value[index] ?? null;
+
         const params = {
-            jobId: path.value
+            jobId: currentCareer.value?.value
         };
         try {
-            const { code, msg, data } = await $AxiosHttp.useAxiosRequest(getSkillResult, params);
+            const { code, msg, data } = await getSkillResult(params);
             if (code !== 0) {
                 uni.showToast({
                     title: msg,
@@ -267,6 +283,7 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
         careerPaths,
         currentCareer,
         currentCareerLabel,
+        currentCareerIndex,
         result,
         eventProfession,
         eventTargetCareer,