Files
ks-app-employment-service/packageA/pages/myResume/myResume.vue
2025-11-04 14:30:40 +08:00

783 lines
25 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="mys-container">
<!-- 个人信息 -->
<view class="mys-tops btn-feel">
<view class="tops-left">
<view class="name">
<text>{{ userInfo.name || '编辑用户名' }}</text>
<view class="edit-icon mar_le10">
<image
class="button-click"
src="@/static/icon/edit1.png"
@click="navTo('/packageA/pages/personalInfo/personalInfo')"
></image>
</view>
</view>
<view class="subName">
<dict-Label class="mar_ri10" dictType="sex" :value="userInfo.sex"></dict-Label>
<text class="mar_ri10">{{ userInfo.age }}</text>
<dict-Label class="mar_ri10" dictType="education" :value="userInfo.education"></dict-Label>
<dict-Label
class="mar_ri10"
dictType="affiliation"
:value="userInfo.politicalAffiliation"
></dict-Label>
</view>
<view class="subName">{{ userInfo.phone }}</view>
</view>
<view class="tops-right">
<view class="right-imghead">
<image v-if="userInfo.sex === '0'" src="@/static/icon/boy.png"></image>
<image v-else src="@/static/icon/girl.png"></image>
</view>
<view class="right-sex">
<image v-if="userInfo.sex === '0'" src="@/static/icon/boy1.png"></image>
<image v-else src="@/static/icon/girl1.png"></image>
</view>
</view>
</view>
<!-- 求职期望 -->
<view class="mys-line"></view>
<view class="mys-info">
<view class="mys-h4">
<text>求职期望</text>
<view class="mys-edit-icon">
<image
class="button-click"
src="@/static/icon/edit1.png"
@click="navTo('/packageA/pages/jobExpect/jobExpect')"
></image>
</view>
</view>
<view class="mys-text">
<text>期望薪资</text>
<text>{{ userInfo.salaryMin / 1000 }}k-{{ userInfo.salaryMax / 1000 }}k</text>
</view>
<view class="mys-text">
<text>期望工作地</text>
<text>{{ config.appInfo.areaName }}-</text>
<dict-Label dictType="area" :value="Number(userInfo.area)"></dict-Label>
</view>
<view class="mys-list">
<view class="cards button-click" v-for="(title, index) in userInfo.jobTitle" :key="index">
{{ title }}
</view>
</view>
</view>
<!-- 工作经历 -->
<view class="work-experience-container">
<!-- 标题栏标题 + 编辑/添加按钮 -->
<view class="exp-header">
<text class="exp-title">工作经历</text>
<button class="exp-edit-btn" @click="handleEditOrAdd" size="mini" type="primary">
<!-- <text> {{ workExperiences.length > 0 ? '编辑' : '添加经历' }}</text> -->
添加经历
</button>
</view>
<!-- 工作经历列表 -->
<view class="exp-list" v-if="workExperiences.length > 0">
<view class="exp-item" v-for="(item, index) in workExperiences" :key="item.id">
<!-- 公司名称 + 职位 -->
<view class="exp-company-row">
<text class="exp-company">{{ item.companyName }}</text>
<text class="exp-position">{{ item.position }}</text>
</view>
<!-- 工作时间 -->
<view class="exp-date-row">
<text class="exp-label">工作时间</text>
<text class="exp-date">{{ item.startDate }} - {{ item.endDate || '至今' }}</text>
</view>
<!-- 工作描述支持多行 -->
<view class="exp-desc-row" v-if="item.description">
<text class="exp-label">工作描述</text>
<text class="exp-desc">{{ item.description }}</text>
</view>
<!-- 操作按钮编辑/删除 -->
<view class="exp-op-btn-row">
<button class="exp-op-btn edit-btn" size="mini" @click.stop="handleEditItem(item)">编辑</button>
<button
class="exp-op-btn delete-btn"
size="mini"
type="warn"
@click.stop="handleDeleteItem(item,index)"
>
删除
</button>
</view>
<!-- 分隔线最后一项不显示 -->
<view class="exp-divider" v-if="index !== workExperiences.length - 1"></view>
</view>
</view>
<!-- 空状态提示无工作经历时显示 -->
<view class="exp-empty" v-else>
<image class="empty-img" src="/static/icons/empty-work.png" mode="widthFix"></image>
<text class="empty-text">暂无工作经历点击"添加经历"完善信息</text>
</view>
</view>
<!-- 4. 新增简历上传区域固定在页面底部 -->
<view class="resume-upload-section">
<button class="upload-btn" @click="handleResumeUpload" :loading="isUploading" :disabled="isUploading">
<uni-icons type="cloud-upload" size="20"></uni-icons>
<text class="upload-text">
{{ uploadedResumeName || '上传简历' }}
</text>
<text class="reupload-text" v-if="uploadedResumeName">重新上传</text>
</button>
<text class="upload-tip">支持 PDFWord 格式文件大小不超过 20MB</text>
<view class="uploaded-file-info" v-if="uploadedResumeName">
<image class="file-icon" src="/static/icons/file-icon.png" mode="widthFix"></image>
<text class="file-name">{{ uploadedResumeName }}</text>
<button class="delete-file-btn" size="mini" @click.stop="handleDeleteResume">删除</button>
</view>
</view>
</view>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
const { $api, navTo, config } = inject('globalFunction');
import { onLoad, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const { userInfo } = storeToRefs(useUserStore());
const { getUserResume } = useUserStore();
const { getDictData, oneDictData } = useDictStore();
const isUploading = ref(false); // 上传中状态
const uploadedResumeName = ref(''); // 已上传简历文件名
const uploadedResumeUrl = ref(''); // 已上传
const workExperiences = ref([]); // 工作经历列表
const isLoading = ref(false); // 加载状态
// 获取工作经历列表
const getWorkExperiences = async () => {
try {
isLoading.value = true;
console.log('完整用户信息:', userInfo.value);
// 获取用户ID - 使用可选链操作符避免错误
const userId = userInfo.value?.userId;
console.log('用户ID:', userId);
if (!userId) {
console.log('用户ID为空等待用户信息加载...');
// 如果用户ID为空不执行任何操作避免触发退出登录
return;
}
// 只传递userId参数
console.log('请求参数:', { userId });
// 使用try-catch包装请求避免自动退出登录
try {
// 参数拼接到URL后面
const resData = await $api.createRequest(`/app/userworkexperiences/list?userId=${userId}`, {}, 'get');
console.log('工作经历列表响应:', resData);
if (resData.code === 200 && resData.rows) {
workExperiences.value = resData.rows;
console.log('工作经历数据设置成功:', resData.rows);
console.log('总数量:', resData.total);
} else {
console.log('接口返回非200状态或无数据:', resData);
// 如果接口返回错误,不显示错误提示,避免用户困惑
workExperiences.value = []; // 设置为空数组
}
} catch (requestError) {
console.error('接口请求失败:', requestError);
// 接口请求失败时,不显示错误提示,静默处理
workExperiences.value = []; // 设置为空数组
}
} catch (error) {
console.error('获取工作经历失败:', error);
// 静默处理错误,不显示错误提示
workExperiences.value = [];
} finally {
isLoading.value = false;
}
};
// 页面加载时获取数据
onLoad(() => {
// 延迟获取数据,确保用户信息完全加载
setTimeout(() => {
if (userInfo.value?.userId) {
getWorkExperiences();
}
}, 1000);
});
// 页面显示时刷新数据
onShow(() => {
// 延迟获取数据,确保用户信息完全加载
setTimeout(() => {
if (userInfo.value?.userId) {
getWorkExperiences();
}
}, 1000);
});
// 整体编辑/添加(跳转编辑页)
const handleEditOrAdd = () => {
// 跳转到添加经历页面,传递添加标识
navTo('/packageA/pages/addWorkExperience/addWorkExperience?type=add');
};
// 编辑单个经历
const handleEditItem = (item) => {
// 跳转到编辑页面,传递编辑标识和数据
const itemData = encodeURIComponent(JSON.stringify(item));
navTo(`/packageA/pages/addWorkExperience/addWorkExperience?type=edit&data=${itemData}`);
};
// 删除单个经历(带确认弹窗)
const handleDeleteItem = async (item, index) => {
uni.showModal({
title: '确认删除',
content: '此操作将删除该工作经历,是否继续?',
success: async (res) => {
if (res.confirm) {
try {
// 调用删除接口
const deleteRes = await $api.createRequest(`/app/userworkexperiences/${item.id}`, {}, 'delete');
if (deleteRes.code === 200) {
workExperiences.value.splice(index, 1); // 删除本地数据
$api.msg('删除成功');
} else {
$api.msg(deleteRes.msg || '删除失败');
}
} catch (error) {
console.error('删除工作经历失败:', error);
$api.msg('删除失败,请重试');
}
}
},
});
};
// 简历上传核心逻辑
const handleResumeUpload = () => {
// 从缓存获取用户ID参考首页实现方式
// 优先从store获取如果为空则从缓存获取
const storeUserId = userInfo.value?.userId;
const cachedUserInfo = uni.getStorageSync('userInfo') || {};
const cachedUserId = cachedUserInfo.userId;
// 获取用户ID优先使用store中的userId如果store中没有使用缓存中的userId
const userId = storeUserId || cachedUserId;
if (!userId) {
$api.msg('请先登录');
return;
}
// 检查是否正在上传
if (isUploading.value) {
return;
}
// 选择文件(微信小程序使用 wx.chooseMessageFileuni-app 中对应 uni.chooseMessageFile
uni.chooseMessageFile({
count: 1, // 只能选择一个文件
type: 'file', // 选择任意文件类型
success: (res) => {
// 注意:文件路径在 res.tempFiles[0].path
const file = res.tempFiles[0];
const tempFilePath = file.path; // 获取临时文件路径
const fileName = file.name; // 获取文件名
// 检查文件大小20MB = 20 * 1024 * 1024 字节)
const maxSize = 20 * 1024 * 1024;
if (file.size > maxSize) {
$api.msg('文件大小不能超过 20MB');
return;
}
// 检查文件类型
const allowedTypes = ['pdf', 'doc', 'docx'];
const fileExtension = fileName.split('.').pop()?.toLowerCase();
if (!fileExtension || !allowedTypes.includes(fileExtension)) {
$api.msg('仅支持 PDF、Word 格式');
return;
}
// 开始上传
uploadResumeFile(tempFilePath, fileName, userId);
},
fail: (err) => {
console.error('选择文件失败:', err);
// 用户取消选择不提示错误
if (err.errMsg && !err.errMsg.includes('cancel')) {
$api.msg('选择文件失败,请重试');
}
}
});
};
// 上传简历文件到服务器(使用 wx.uploadFileuni-app 中对应 uni.uploadFile
const uploadResumeFile = (filePath, fileName, userId) => {
// 确保 userId 存在且有效
if (!userId) {
// 如果传入的userId为空尝试从缓存再次获取
const cachedUserInfo = uni.getStorageSync('userInfo') || {};
const cachedUserId = cachedUserInfo.userId;
if (!cachedUserId) {
$api.msg('用户ID不存在无法上传');
return;
}
// 使用缓存中的userId
userId = cachedUserId;
}
isUploading.value = true;
// 获取token从缓存获取参考首页实现方式
let Authorization = '';
const tokenValue = uni.getStorageSync('token') || '';
if (tokenValue) {
Authorization = tokenValue;
} else {
// 如果缓存中没有token尝试从store获取
const userStore = useUserStore();
if (userStore.token) {
Authorization = userStore.token;
}
}
// 根据接口文档bussinessId 应该作为 Query 参数传递,而不是 formData
// 将 bussinessId 拼接到 URL 上作为查询参数
const uploadUrl = `${config.baseUrl}/app/file/upload?bussinessId=${encodeURIComponent(String(userId))}`;
// 打印调试信息
console.log('上传文件参数:', {
url: uploadUrl,
fileName: fileName,
bussinessId: userId,
userId: userId,
token: Authorization ? '已获取' : '未获取'
});
// 上传文件(参考微信小程序 wx.uploadFile API
uni.uploadFile({
url: uploadUrl, // 开发者服务器的上传接口(必须是 HTTPSbussinessId 作为 Query 参数
filePath: filePath, // 本地文件路径(临时路径)
name: 'file', // 服务器端接收文件的字段名(需与后端一致)
// 注意根据接口文档bussinessId 通过 Query 参数传递,不需要 formData
header: {
'Authorization': encodeURIComponent(Authorization)
},
success: (uploadRes) => {
try {
// 注意res.data 是字符串,需转为 JSON如果后端返回 JSON
// 参考方案const result = JSON.parse(data);
let resData;
if (typeof uploadRes.data === 'string') {
resData = JSON.parse(uploadRes.data);
} else {
resData = uploadRes.data;
}
// 判断上传是否成功
if (uploadRes.statusCode === 200 && resData.code === 200) {
// 上传成功,处理返回结果
uploadedResumeName.value = fileName;
uploadedResumeUrl.value = resData.data || resData.msg || resData.url || '';
$api.msg('简历上传成功');
console.log('上传成功', resData);
// 可以在这里保存简历信息到后端(如果需要)
// saveResumeInfo(userId, uploadedResumeUrl.value, fileName);
} else {
// 上传失败
const errorMsg = resData.msg || resData.message || '上传失败,请重试';
$api.msg(errorMsg);
console.error('上传失败:', resData);
}
} catch (error) {
// 解析响应数据失败
console.error('解析上传响应失败:', error);
console.error('原始响应数据:', uploadRes.data);
$api.msg('上传失败,请重试');
}
},
fail: (err) => {
// 上传失败
console.error('上传文件失败:', err);
$api.msg('上传失败,请检查网络连接');
},
// 上传进度监听(可选)
progress: (res) => {
const progress = res.progress; // 上传进度0-100
console.log('上传进度:', progress + '%');
// 可以在这里更新进度条 UI如果需要
},
complete: () => {
// 上传完成(无论成功或失败)
isUploading.value = false;
}
});
};
// 删除已上传的简历
const handleDeleteResume = () => {
if (!uploadedResumeName.value) {
return;
}
uni.showModal({
title: '确认删除',
content: '确定要删除已上传的简历吗?',
success: (res) => {
if (res.confirm) {
// 清除本地数据
uploadedResumeName.value = '';
uploadedResumeUrl.value = '';
$api.msg('已删除');
// 如果需要,可以调用后端接口删除服务器上的文件
// deleteResumeFile(userId);
}
}
});
};
</script>
<style lang="stylus">
/* 修复页面滚动问题:覆盖全局的 overflow: hidden */
page {
overflow-y: auto !important;
overflow-x: hidden;
}
</style>
<style lang="stylus" scoped>
image{
width: 100%;
height: 100%
}
.mys-container{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.mys-tops{
display: flex
justify-content: space-between
padding: 52rpx 48rpx
.tops-left{
.name{
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
font-weight: 600;
font-size: 44rpx;
color: #333333;
display: flex
align-items: center
justify-content: flex-start
.edit-icon{
display: inline-block
width: 40rpx;
height: 40rpx
padding-bottom: 10rpx
}
}
.subName{
margin-top: 12rpx
font-weight: 400;
font-size: 32rpx;
color: #333333;
}
}
.tops-right{
position: relative
.right-imghead{
width: 136rpx;
height: 136rpx;
border-radius: 50%;
background: #e8e8e8
overflow: hidden
}
.right-sex{
position: absolute
right: -10rpx
top: -10rpx
width: 50rpx
height: 50rpx
}
}
}
.mys-line{
margin: 0 28rpx
height: 0rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
border: 2rpx dashed #000000;
opacity: 0.16;
}
.mys-info{
padding: 28rpx
.mys-h4{
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
font-weight: 600;
font-size: 32rpx;
color: #000000;
margin-bottom: 8rpx
display: flex;
justify-content: space-between
align-items: center
.mys-edit-icon{
display: inline-block
width: 40rpx;
height: 40rpx
}
}
.mys-text{
font-weight: 400;
font-size: 28rpx;
color: #333333;
margin-top: 16rpx
}
.mys-list{
display: flex
align-items: center
flex-wrap: wrap;
.cards{
margin: 28rpx 28rpx 0 0
height: 80rpx;
padding: 0 38rpx;
width: fit-content
display: flex
align-items: center
justify-content: center
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #E8EAEE;
}
}
}
}
/* 容器样式适配多端用rpx做单位 */
.work-experience-container {
padding: 20rpx 30rpx;
background-color: #fff;
border-radius: 16rpx;
margin: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
/* 标题栏:两端对齐 */
.exp-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25rpx;
}
.exp-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
/* 编辑/添加按钮UniApp按钮样式重置 */
.exp-edit-btn {
padding: 0 20rpx;
height: 44rpx;
line-height: 44rpx;
font-size: 24rpx;
margin: 0
}
/* 经历列表容器 */
.exp-list {
margin-top: 10rpx;
}
/* 单个经历卡片 */
.exp-item {
padding: 20rpx 0;
}
/* 公司名称 + 职位(横向排列,职位右对齐) */
.exp-company-row {
display: flex;
justify-content: space-between;
margin-bottom: 15rpx;
}
.exp-company {
font-size: 28rpx;
font-weight: 500;
color: #333;
}
.exp-position {
font-size: 26rpx;
color: #666;
}
/* 工作时间/描述:标签+内容横向排列 */
.exp-date-row, .exp-desc-row {
display: flex;
margin-bottom: 12rpx;
line-height: 1.6;
}
/* 标签样式(固定宽度,统一对齐) */
.exp-label {
font-size: 26rpx;
color: #999;
min-width: 160rpx;
}
/* 内容样式 */
.exp-date, .exp-desc {
font-size: 26rpx;
color: #333;
flex: 1; /* 内容占满剩余宽度,支持换行 */
}
/* 工作描述(支持多行换行) */
.exp-desc {
word-break: break-all;
}
/* 操作按钮行(编辑+删除) */
.exp-op-btn-row {
display: flex;
gap: 15rpx;
margin-top: 15rpx;
justify-content: flex-end;
}
.exp-op-btn {
padding: 0 15rpx;
height: 40rpx;
line-height: 40rpx;
font-size: 22rpx;
margin: 0
}
.edit-btn {
background-color: #e8f3ff;
color: #1677ff;
}
/* 分隔线 */
.exp-divider {
height: 1rpx;
background-color: #f5f5f5;
margin-top: 20rpx;
}
/* 空状态样式 */
.exp-empty {
display: flex;
flex-direction: column;
align-items: center;
padding: 80rpx 0;
color: #999;
}
.empty-img {
width: 140rpx;
height: auto;
margin-bottom: 25rpx;
opacity: 0.6;
}
.empty-text {
font-size: 26rpx;
text-align: center;
line-height: 1.5;
}
/* 新增:简历上传区域样式 */
.resume-upload-section {
margin-top: 30rpx;
padding-top: 25rpx;
border-top: 1px dashed #eee; /* 分隔线区分内容区域 */
display: flex;
flex-direction: column;
gap: 15rpx;
align-items: center;
}
/* 上传按钮 */
.upload-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10rpx;
padding: 0 30rpx;
background-color: #f5f7fa;
color: #1677ff;
border-radius: 8rpx;
font-size: 26rpx;
}
.upload-icon {
width: 30rpx;
height: 30rpx;
}
.reupload-text {
font-size: 22rpx;
color: #666;
}
/* 上传说明文字 */
.upload-tip {
font-size: 20rpx;
color: #999;
text-align: center;
line-height: 1.4;
}
/* 已上传文件信息 */
.uploaded-file-info {
display: flex;
align-items: center;
gap: 15rpx;
padding: 15rpx 20rpx;
background-color: #fafafa;
border-radius: 8rpx;
margin-top: 10rpx;
}
.file-icon {
width: 36rpx;
height: 36rpx;
}
.file-name {
font-size: 24rpx;
color: #333;
max-width: 400rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.delete-file-btn {
padding: 0 15rpx;
height: 36rpx;
line-height: 36rpx;
font-size: 22rpx;
color: #ff4d4f;
background-color: transparent;
}
</style>