550 lines
16 KiB
Vue
550 lines
16 KiB
Vue
<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(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>
|
||
<!-- <image class="upload-icon" src="/static/icons/upload-file.png" mode="widthFix"></image> -->
|
||
<text class="upload-text">
|
||
{{ uploadedResumeName || '上传简历' }}
|
||
</text>
|
||
<!-- 已上传时显示“重新上传”文字 -->
|
||
<text class="reupload-text" v-if="uploadedResumeName">（重新上传）</text>
|
||
</button>
|
||
|
||
<!-- 上传说明 -->
|
||
<text class="upload-tip">支持 PDF、Word 格式，文件大小不超过 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([
|
||
{
|
||
id: 1, // 唯一标识（实际项目用后端返回ID）
|
||
companyName: 'XX科技有限公司', // 公司名称
|
||
position: '前端开发工程师', // 职位
|
||
startDate: '2021-07', // 开始日期（格式：YYYY-MM）
|
||
endDate: '2023-09', // 结束日期（空/undefined 表示“至今”）
|
||
description:
|
||
'1. 负责公司小程序及H5页面开发，基于UniApp+Vue3技术栈；2. 优化前端性能，首屏加载时间减少30%；3. 参与封装通用组件库，提升团队开发效率。', // 工作描述
|
||
},
|
||
{
|
||
id: 2,
|
||
companyName: 'YY互联网公司',
|
||
position: '实习前端工程师',
|
||
startDate: '2020-12',
|
||
endDate: '2021-06',
|
||
description: '1. 协助完成后台管理系统页面开发；2. 修复页面兼容性问题，适配多浏览器；3. 整理前端开发文档。',
|
||
},
|
||
]);
|
||
|
||
// 页面加载时可从接口拉取数据
|
||
onLoad(() => {
|
||
// 实际项目中替换为接口请求：
|
||
// getWorkExperiences().then(res => {
|
||
// workExperiences.value = res.data;
|
||
// }).catch(err => {
|
||
// showToast({ title: '数据加载失败', icon: 'none' });
|
||
// });
|
||
});
|
||
|
||
// 整体编辑/添加（跳转编辑页）
|
||
const handleEditOrAdd = () => {
|
||
// 跳转至“批量编辑”或“添加经历”页面（根据实际需求设计编辑页）
|
||
// router.push({
|
||
// path: '/pages/workExperience/edit',
|
||
// query: { type: workExperiences.value.length > 0 ? 'edit' : 'add' }
|
||
// });
|
||
};
|
||
|
||
// 编辑单个经历
|
||
const handleEditItem = (item) => {
|
||
// 跳转至单个编辑页，并携带当前经历数据
|
||
// router.push({
|
||
// path: '/pages/workExperience/editItem',
|
||
// query: { item: JSON.stringify(item) } // 复杂数据需转JSON字符串（UniApp路由query不支持直接传对象）
|
||
// });
|
||
};
|
||
|
||
// 删除单个经历（带确认弹窗）
|
||
const handleDeleteItem = (index) => {
|
||
uni.showModal({
|
||
title: '确认删除',
|
||
content: '此操作将删除该工作经历，是否继续？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
workExperiences.value.splice(index, 1); // 删除本地数据
|
||
$api.msg('删除成功');
|
||
}
|
||
},
|
||
});
|
||
};
|
||
|
||
// 简历上传核心逻辑
|
||
const handleResumeUpload = () => {};
|
||
|
||
// 删除已上传的简历
|
||
const handleDeleteResume = () => {};
|
||
</script>
|
||
|
||
<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>
|