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

flat:职业图谱小程序端页面完成

Browse Source
This commit is contained in:
佳
2025-11-04 19:00:41 +08:00
parent 4ba6539850
commit 8764849cd6
13 changed files with 6506 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
pages/service/components/CareerRecommend.vue Normal file
View File

@@ -0,0 +1,291 @@
<template>
<view class="career-recommend">
<!-- 当前职位信息卡片 -->
<view class="info-card">
<view class="card-title">当前职位信息</view>
<view class="card-content">
<text class="label">当前职位</text>
<text class="value">{{ currentJob || '前端开发工程师' }}</text>
</view>
</view>
<!-- 我的技能标签卡片 -->
<view class="info-card">
<view class="card-title">我的技能标签</view>
<view class="skill-tags">
<view
class="skill-tag"
v-for="(skill, index) in skillTags"
:key="index"
>
{{ skill }}
</view>
</view>
</view>
<!-- 相似推荐职位 -->
<view class="section-title">相似推荐职位</view>
<view
class="job-item-card"
v-for="(job, index) in recommendedJobs"
:key="index"
@click="handleJobCardClick(job)"
>
<button class="search-btn" @click.stop="handleJobSearch(job)">职位搜索</button>
<view class="job-header">
<text class="job-title">{{ job.title }}</text>
</view>
<view class="job-skills">
<view
class="job-skill-tag"
v-for="(skill, skillIndex) in job.skills"
:key="skillIndex"
>
{{ skill }}
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
const emit = defineEmits(['job-card-click']);
// 当前职位信息（后续从接口获取）
// TODO: 从接口获取当前职位信息
// async function getCurrentJob() {
// try {
// const response = await getCareerCurrentJob();
// if (response && response.code === 200) {
// currentJob.value = response.data?.jobTitle || '前端开发工程师';
// }
// } catch (error) {
// console.error('获取当前职位失败:', error);
// }
// }
const currentJob = ref('前端开发工程师'); // mock数据
// 技能标签列表（后续从接口获取）
const skillTags = ref(['JavaScript', 'React', 'Vue', 'CSS3', 'HTML5', 'Git', 'Webpack', 'TypeScript']);
// 相似推荐职位列表（后续从接口获取）
const recommendedJobs = ref([
{
id: 1,
title: '全栈开发工程师',
skills: ['React', 'Node.js', 'TypeScript', '数据库'],
possessedSkills: [
{ name: 'React', level: 5 },
{ name: 'JavaScript', level: 5 },
{ name: 'HTML/CSS', level: 6 },
{ name: 'Git', level: 5 }
],
improvementSkills: [
{ name: 'Node.js', level: 3 },
{ name: '数据库设计', level: 3 },
{ name: 'RESTful API', level: 3 },
{ name: 'Docker', level: 3 }
]
},
{
id: 2,
title: '高级前端开发工程师',
skills: ['React', 'Vue', 'TypeScript', 'Webpack'],
possessedSkills: [
{ name: 'React', level: 5 },
{ name: 'Vue', level: 4 },
{ name: 'JavaScript', level: 5 }
],
improvementSkills: [
{ name: 'TypeScript', level: 3 },
{ name: 'Webpack', level: 3 }
]
},
{
id: 3,
title: '前端架构师',
skills: ['React', 'Vue', 'TypeScript', '架构设计'],
possessedSkills: [
{ name: 'React', level: 6 },
{ name: 'Vue', level: 5 }
],
improvementSkills: [
{ name: '架构设计', level: 3 },
{ name: '技术选型', level: 3 }
]
},
{
id: 4,
title: '前端架构师',
skills: ['架构设计', '技术选型', '工程化', '团队领导'],
possessedSkills: [
{ name: '工程化', level: 4 }
],
improvementSkills: [
{ name: '架构设计', level: 3 },
{ name: '技术选型', level: 3 },
{ name: '团队领导', level: 2 }
]
}
]);
// TODO: 从接口获取推荐职位数据
// async function getRecommendedJobs() {
// try {
// const response = await getCareerRecommendJobs();
// if (response && response.code === 200) {
// recommendedJobs.value = response.data || [];
// }
// } catch (error) {
// console.error('获取推荐职位失败:', error);
// }
// }
function handleJobSearch(job) {
console.log('搜索职位:', job.title);
// TODO: 实现职位搜索跳转
}
function handleJobCardClick(job) {
emit('job-card-click', job);
}
</script>
<style lang="scss" scoped>
.career-recommend {
padding: 10rpx 28rpx 20rpx;
}
.info-card {
background-color: #FFFFFF;
border-radius: 16rpx;
padding: 28rpx;
margin-bottom: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}
.card-title {
font-size: 32rpx;
font-weight: 600;
color: #000000;
margin-bottom: 24rpx;
}
.card-content {
display: flex;
justify-content: space-between;
align-items: center;
.label {
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;
}
.value {
font-size: 32rpx;
line-height: 46rpx;
color: rgb(16, 16, 16);
font-weight: 600;
text-align: left;
font-family: 'PingFangSC-Bold', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
}
}
.skill-tags {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
}
.skill-tag {
background-color: #EAEFFE;
color: rgba(44, 101, 247, 1);
padding: 8rpx 20rpx;
border-radius: 0;
font-size: 24rpx;
white-space: nowrap;
}
.section-title {
font-size: 32rpx;
font-weight: 600;
color: #000000;
margin-bottom: 20rpx;
margin-top: 8rpx;
}
.job-item-card {
background-color: #FFFFFF;
border-radius: 16rpx;
padding: 28rpx;
margin-bottom: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
border-left: 6rpx solid #409EFF;
position: relative;
cursor: pointer;
}
.search-btn {
position: absolute;
top: 16rpx;
right: 16rpx;
background-color: #FFDAB9;
color: #FF6347;
font-size: 20rpx;
padding: 6rpx 14rpx;
border-radius: 6rpx;
border: 1rpx solid #FFA07A;
white-space: nowrap;
z-index: 10;
line-height: 1.2;
}
.job-header {
margin-bottom: 16rpx;
padding-right: 100rpx;
}
.job-title {
font-size: 32rpx;
font-weight: 600;
color: rgb(16, 16, 16);
text-align: left;
font-family: 'PingFangSC-Bold', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
line-height: 46rpx;
width: 100%;
}
.job-skills {
display: flex;
flex-wrap: wrap;
gap: 12rpx;
}
.job-skill-tag {
width: 130rpx;
height: 36rpx;
line-height: 34rpx;
background-color: rgba(49, 100, 239, 0.1);
color: rgba(44, 101, 247, 1);
font-size: 24rpx;
text-align: center;
font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
border-radius: 8rpx;
white-space: nowrap;
border: none;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
button::after {
border: none;
}
</style>