flat:职业图谱小程序端页面完成
This commit is contained in:
佳
247
pages/service/career-planning.vue
Normal file
247
pages/service/career-planning.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<view class="career-planning-page">
|
||||
<!-- 提醒弹窗 -->
|
||||
<RemindPopup
|
||||
ref="remindPopup"
|
||||
:remind-list="remindList"
|
||||
@cancel="handleCancel"
|
||||
@confirm="handleConfirm"
|
||||
/>
|
||||
|
||||
<!-- 技能详情弹出层 -->
|
||||
<SkillDetailPopup
|
||||
ref="skillDetailPopup"
|
||||
:job-title="selectedJobTitle"
|
||||
:possessed-skills="selectedJobPossessedSkills"
|
||||
:improvement-skills="selectedJobImprovementSkills"
|
||||
@close="handleSkillPopupClose"
|
||||
/>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view class="page-content" v-if="showContent">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- 小程序背景图片 -->
|
||||
<image class="mp-background" src="/static/icon/background2.png" mode="aspectFill"></image>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- 头部区域 -->
|
||||
<PageHeader
|
||||
:active-tab="activeTab"
|
||||
@tab-change="switchTab"
|
||||
@search-click="handleSearchClick"
|
||||
@menu-click="handleMenuClick"
|
||||
@more-click="handleMoreClick"
|
||||
/>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<scroll-view scroll-y class="content-scroll">
|
||||
<component
|
||||
:is="currentComponent"
|
||||
@job-card-click="handleJobCardClick"
|
||||
></component>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<view class="tabbar-wrapper" v-if="showContent">
|
||||
<CustomTabBar :currentPage="0" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, inject, nextTick, onMounted, computed } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { appUserInfo } from '@/apiRc/user/user.js';
|
||||
import RemindPopup from './components/RemindPopup.vue';
|
||||
import PageHeader from './components/PageHeader.vue';
|
||||
import SkillDetailPopup from './components/SkillDetailPopup.vue';
|
||||
import CareerRecommend from './components/CareerRecommend.vue';
|
||||
import CareerPath from './components/CareerPath.vue';
|
||||
import SkillDevelopment from './components/SkillDevelopment.vue';
|
||||
import CustomTabBar from '@/components/CustomTabBar/CustomTabBar.vue';
|
||||
|
||||
const { navBack } = inject('globalFunction');
|
||||
|
||||
// 弹窗引用
|
||||
const remindPopup = ref(null);
|
||||
const skillDetailPopup = ref(null);
|
||||
// 提醒列表（由接口返回）
|
||||
const remindList = ref([]);
|
||||
// 是否显示页面内容
|
||||
const showContent = ref(false);
|
||||
// 当前激活的tab
|
||||
const activeTab = ref(0);
|
||||
// 选中的职位信息
|
||||
const selectedJobTitle = ref('');
|
||||
const selectedJobPossessedSkills = ref([]);
|
||||
const selectedJobImprovementSkills = ref([]);
|
||||
|
||||
// 当前组件
|
||||
const currentComponent = computed(() => {
|
||||
const components = [CareerRecommend, CareerPath, SkillDevelopment];
|
||||
return components[activeTab.value];
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
function openRemindPopup() {
|
||||
nextTick(() => {
|
||||
if (remindPopup.value) {
|
||||
remindPopup.value.open();
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
if (remindPopup.value) {
|
||||
remindPopup.value.open();
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
remindPopup.value?.open();
|
||||
}, 200);
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 获取提醒信息的接口
|
||||
async function getRemindInfo() {
|
||||
try {
|
||||
// 接口已准备好，但暂时不使用（按用户要求）
|
||||
// const response = await appUserInfo();
|
||||
// if (response && response.code === 200) {
|
||||
// const data = response.data || {};
|
||||
// const jobTitles = data.jobTitles || [];
|
||||
// const appSkillsList = data.appSkillsList || [];
|
||||
//
|
||||
// remindList.value = [];
|
||||
// if (!jobTitles || jobTitles.length === 0) {
|
||||
// remindList.value.push('求职期望;');
|
||||
// }
|
||||
//
|
||||
// if (remindList.value.length > 0) {
|
||||
// openRemindPopup();
|
||||
// return;
|
||||
// }
|
||||
// }
|
||||
|
||||
// 暂时使用测试数据显示弹窗
|
||||
remindList.value = ['求职期望;'];
|
||||
openRemindPopup();
|
||||
} catch (error) {
|
||||
console.error('获取提醒信息失败:', error);
|
||||
remindList.value = ['求职期望;'];
|
||||
openRemindPopup();
|
||||
}
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
function handleCancel() {
|
||||
remindPopup.value?.close();
|
||||
navBack();
|
||||
}
|
||||
|
||||
// 确认按钮
|
||||
function handleConfirm() {
|
||||
remindPopup.value?.close();
|
||||
showContent.value = true;
|
||||
}
|
||||
|
||||
// 切换tab
|
||||
function switchTab(index) {
|
||||
activeTab.value = index;
|
||||
}
|
||||
|
||||
// 搜索点击
|
||||
function handleSearchClick() {
|
||||
// TODO: 跳转到搜索页面
|
||||
console.log('搜索点击');
|
||||
}
|
||||
|
||||
// 菜单点击
|
||||
function handleMenuClick() {
|
||||
console.log('菜单点击');
|
||||
}
|
||||
|
||||
// 更多点击
|
||||
function handleMoreClick() {
|
||||
console.log('更多点击');
|
||||
}
|
||||
|
||||
// 处理职位卡片点击
|
||||
function handleJobCardClick(job) {
|
||||
selectedJobTitle.value = job.title || '';
|
||||
selectedJobPossessedSkills.value = job.possessedSkills || [];
|
||||
selectedJobImprovementSkills.value = job.improvementSkills || [];
|
||||
skillDetailPopup.value?.open();
|
||||
}
|
||||
|
||||
// 处理技能弹出层关闭
|
||||
function handleSkillPopupClose() {
|
||||
// 可以在这里处理关闭后的逻辑
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
getRemindInfo();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (remindList.value.length > 0 && !showContent.value) {
|
||||
openRemindPopup();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.career-planning-page {
|
||||
width: 100vw;
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||
background: url('@/static/icon/background2.png') 0 0 no-repeat;
|
||||
background-size: 100% 728rpx;
|
||||
/* #endif */
|
||||
/* #ifdef MP-WEIXIN */
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
/* #endif */
|
||||
background-color: #FFFFFF;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* #ifdef MP-WEIXIN */
|
||||
.mp-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 728rpx;
|
||||
z-index: 0;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.page-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
padding-bottom: 88rpx;
|
||||
}
|
||||
|
||||
|
||||
.content-scroll {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabbar-wrapper {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user