flat: 暂存

This commit is contained in:
Apcallover
2025-09-29 11:53:10 +08:00
parent ee57ac7568
commit 3d7cb0c561
34 changed files with 1617 additions and 236 deletions

View File

@@ -55,7 +55,7 @@
</view>
<view class="mys-text">
<text>期望工作地</text>
<text>青岛市-</text>
<text>{{ config.appInfo.areaName }}-</text>
<dict-Label dictType="area" :value="Number(userInfo.area)"></dict-Label>
</view>
<view class="mys-list">
@@ -64,12 +64,92 @@
</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">支持 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 } = inject('globalFunction');
const { $api, navTo, config } = inject('globalFunction');
import { onLoad, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
@@ -77,6 +157,77 @@ 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>
@@ -85,6 +236,8 @@ image{
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
@@ -179,4 +332,218 @@ image{
}
}
}
/* 容器样式适配多端用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>