flat:职业图谱小程序端页面完成
This commit is contained in:
佳
394
pages/service/components/CareerPath.vue
Normal file
394
pages/service/components/CareerPath.vue
Normal file
@@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<view class="career-path">
|
||||
<!-- 职业路径查询区域 -->
|
||||
<view class="query-section">
|
||||
<view class="section-title">
|
||||
<uni-icons type="search" size="18" color="#286BFA"></uni-icons>
|
||||
<text class="title-text">职业路径查询</text>
|
||||
</view>
|
||||
|
||||
<view class="input-group">
|
||||
<view class="input-item">
|
||||
<text class="input-label">当前职位</text>
|
||||
<input
|
||||
class="input-field"
|
||||
:value="currentPosition"
|
||||
placeholder="前端开发工程师"
|
||||
placeholder-style="color: #999999"
|
||||
disabled
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="input-item">
|
||||
<text class="input-label">目标职业</text>
|
||||
<picker
|
||||
mode="selector"
|
||||
:range="targetCareerOptions"
|
||||
range-key="label"
|
||||
:value="selectedTargetIndex"
|
||||
@change="handleTargetChange"
|
||||
>
|
||||
<view class="picker-field">
|
||||
<text :class="selectedTargetIndex >= 0 ? 'picker-text' : 'picker-placeholder'">
|
||||
{{ selectedTargetIndex >= 0 ? targetCareerOptions[selectedTargetIndex].label : '请选择目标职业' }}
|
||||
</text>
|
||||
<uni-icons type="arrowdown" size="16" color="#999999"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button class="query-btn" @click="handleQuery">
|
||||
<text>查询职业发展路径</text>
|
||||
<uni-icons type="search" size="18" color="#FFFFFF"></uni-icons>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 职业发展路径区域 -->
|
||||
<view class="path-section">
|
||||
<view class="section-title">
|
||||
<uni-icons type="person-filled" size="24" color="#000000"></uni-icons>
|
||||
<text class="title-text">职业发展路径</text>
|
||||
</view>
|
||||
|
||||
<view class="timeline">
|
||||
<!-- 起点 -->
|
||||
<view class="timeline-item start">
|
||||
<view class="timeline-marker start-marker"></view>
|
||||
<view class="timeline-content">
|
||||
<view class="step-title">起点: {{ pathData.start.title }}</view>
|
||||
<view class="skill-tags">
|
||||
<view
|
||||
class="skill-tag"
|
||||
v-for="(skill, index) in pathData.start.skills"
|
||||
:key="index"
|
||||
>
|
||||
{{ skill }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 步骤 -->
|
||||
<view
|
||||
class="timeline-item step"
|
||||
v-for="(step, index) in pathData.steps"
|
||||
:key="index"
|
||||
>
|
||||
<view class="timeline-marker step-marker"></view>
|
||||
<view class="timeline-content">
|
||||
<view class="step-title">第{{ index + 1 }}步: {{ step.title }}</view>
|
||||
<view class="skill-tags">
|
||||
<view
|
||||
class="skill-tag"
|
||||
v-for="(skill, sIndex) in step.skills"
|
||||
:key="sIndex"
|
||||
>
|
||||
{{ skill }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 终点 -->
|
||||
<view class="timeline-item end">
|
||||
<view class="timeline-marker end-marker"></view>
|
||||
<view class="timeline-content">
|
||||
<view class="step-title">终点: {{ pathData.end.title }}</view>
|
||||
<view class="skill-tags">
|
||||
<view
|
||||
class="skill-tag"
|
||||
v-for="(skill, index) in pathData.end.skills"
|
||||
:key="index"
|
||||
>
|
||||
{{ skill }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
// 当前职位（从接口获取，只读）
|
||||
const currentPosition = ref('前端开发工程师');
|
||||
|
||||
// 目标职业选项（根据当前职位动态获取）
|
||||
const targetCareerOptions = ref([
|
||||
{ label: '互联网/IT', value: 'internet_it' },
|
||||
{ label: '高级前端开发工程师', value: 'senior_frontend' },
|
||||
{ label: '前端架构师', value: 'frontend_architect' },
|
||||
{ label: '技术总监', value: 'tech_director' }
|
||||
]);
|
||||
|
||||
const selectedTargetIndex = ref(-1);
|
||||
|
||||
// 职业路径数据（后续从接口获取）
|
||||
const pathData = ref({
|
||||
start: {
|
||||
title: '初级网络安全管理员',
|
||||
skills: ['React', 'Node.js', 'Typescript', '数据库']
|
||||
},
|
||||
steps: [
|
||||
{
|
||||
title: '中级网络安全工程师',
|
||||
skills: ['Vue3', '微前端', '性能优化', '团队管理']
|
||||
},
|
||||
{
|
||||
title: '资深安全顾问(横向发展)',
|
||||
skills: ['架构设计', '技术选型', '工程化', '团队领导']
|
||||
},
|
||||
{
|
||||
title: '高级网络安全架构师',
|
||||
skills: ['架构设计', '技术选型', '工程化', '团队领导']
|
||||
},
|
||||
{
|
||||
title: '技术部门经理',
|
||||
skills: ['架构设计', '技术选型', '工程化', '团队领导']
|
||||
}
|
||||
],
|
||||
end: {
|
||||
title: 'IT 项目总监',
|
||||
skills: ['架构设计', '技术选型', '工程化', '团队领导']
|
||||
}
|
||||
});
|
||||
|
||||
// 获取当前职位信息（从接口获取）
|
||||
async function getCurrentPosition() {
|
||||
// TODO: 调用接口获取当前职位
|
||||
// const response = await getCareerCurrentPosition();
|
||||
// if (response && response.code === 200) {
|
||||
// currentPosition.value = response.data?.position || '';
|
||||
// // 根据当前职位获取目标职业选项
|
||||
// await getTargetCareerOptions(currentPosition.value);
|
||||
// }
|
||||
}
|
||||
|
||||
// 根据当前职位获取目标职业选项
|
||||
async function getTargetCareerOptions(position) {
|
||||
// TODO: 调用接口获取目标职业选项
|
||||
// const response = await getTargetCareers(position);
|
||||
// if (response && response.code === 200) {
|
||||
// targetCareerOptions.value = response.data || [];
|
||||
// }
|
||||
}
|
||||
|
||||
function handleTargetChange(e) {
|
||||
selectedTargetIndex.value = e.detail.value;
|
||||
}
|
||||
|
||||
function handleQuery() {
|
||||
if (selectedTargetIndex.value < 0) {
|
||||
uni.showToast({
|
||||
title: '请选择目标职业',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
const selectedTarget = targetCareerOptions.value[selectedTargetIndex.value];
|
||||
console.log('查询职业发展路径', currentPosition.value, selectedTarget);
|
||||
// TODO: 调用接口查询职业路径
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getCurrentPosition();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.career-path {
|
||||
padding: 10rpx 28rpx 20rpx;
|
||||
}
|
||||
|
||||
.query-section {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 28rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #157DF0;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.input-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
background-color: #F5F5F5;
|
||||
border: 1rpx solid #E0E0E0;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.picker-field {
|
||||
background-color: #F5F5F5;
|
||||
border: 1rpx solid #E0E0E0;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.picker-placeholder {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.query-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
line-height: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
background: linear-gradient(180deg, rgba(18, 125, 240, 1) 0%, rgba(59, 14, 123, 0.71) 100%);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
font-family: '阿里巴巴普惠体3.0-regular', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
border: 2rpx solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.path-section {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 28rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding-left: 40rpx;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child)::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -32rpx;
|
||||
top: 0;
|
||||
width: 2rpx;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
#E0E0E0 0,
|
||||
#E0E0E0 6rpx,
|
||||
transparent 6rpx,
|
||||
transparent 12rpx
|
||||
);
|
||||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
position: absolute;
|
||||
left: -32rpx;
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 50%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.start-marker {
|
||||
background-color: #FF4444;
|
||||
border: 4rpx solid #FFFFFF;
|
||||
box-shadow: 0 0 0 2rpx #FF4444;
|
||||
}
|
||||
|
||||
.step-marker {
|
||||
background-color: #286BFA;
|
||||
border: 4rpx solid #FFFFFF;
|
||||
box-shadow: 0 0 0 2rpx #286BFA;
|
||||
}
|
||||
|
||||
.end-marker {
|
||||
background-color: #52C41A;
|
||||
border: 4rpx solid #FFFFFF;
|
||||
box-shadow: 0 0 0 2rpx #52C41A;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
background-color: #F5F5F5;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.skill-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.skill-tag {
|
||||
background-color: #F0F0F0;
|
||||
color: #286BFA;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user