sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

= 职业规划推荐

Browse Source
This commit is contained in:
danchaotaiyang
2026-01-23 18:38:13 +08:00
parent a45b247496
commit b030d45d49
3 changed files with 206 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
pages/service/components/SkillDevelopment.vue
View File

@@ -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 class="margin-bottom-10 skill-label">{{ item.label }}</div>
<div class="d-flex flex-column gap-15 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 class="skill-detail-item-label">{{ d.label }}</div>
<div class="d-flex justify-content-between align-items-center width-320">
<div>技能得分：{{ d.value }}</div>
<div>权重：{{ d.weight }}</div>
<div v-for="(item, index) in store.result" :key="index" class="skill-card">
<div class="skill-label">{{ item.label }}</div>
<div class="skill-detail">
<div v-for="d in item.children" :key="d.label" class="skill-detail-item">
<div class="skill-detail-item-label">{{ d.label + d.label + d.label }}</div>
<div class="skill-detail-item-value">
<div class="value-item">技能得分：{{ d.value }}</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,22 +167,124 @@ button::after {
}
}
.career-paths {
display: grid;
grid-auto-flow: column;
gap: 20px;
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 {
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 {
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;
}
.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-card {
margin-bottom: 14px;
box-sizing: border-box;
font-weight: 700;
.skill-list {
display: flex;
@@ -208,94 +311,43 @@ button::after {
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 {
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;
}
& + div {
.skill-detail-item-value {
width: 45%;
padding-left: 6px;
color: #4f46e5;
}
}
box-sizing: border-box;
</style>
<style lang="scss" scoped>
.career-paths {
display: grid;
grid-auto-flow: column;
gap: 40px;
width: fit-content;
padding-bottom: 10px;
.career-path-item {
display: flex;
flex-direction: column;
align-items: center;
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;
.value-item {
text-wrap: nowrap;
color: #6c64e7;
}
.career-active {
.career-index {
background: #22c55e;
}
.career-label {
color: #000;
}
}
}

2
stores/useCareerRecommendationStore.js
View File

@@ -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) {

37
stores/useSkillDevelopmentStore.js
View File

@@ -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,
startJobId: d.startJobId
value: `${d.startJobId}-${d.endJobId}`
};
});
} 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) => {
currentCareer.value = path;
const eventResult = async (index) => {
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,