492 lines
15 KiB
Vue
492 lines
15 KiB
Vue
<template>
|
||
<AppLayout title="我的简历" title-color="#FFFFFF" back-gorund-color="#F4F4F4">
|
||
<template #headerleft>
|
||
<view class="btn">
|
||
<image src="@/static/icon/back-white.png" @click="navBack"></image>
|
||
</view>
|
||
</template>
|
||
<view
|
||
v-if="userInfo.resumeOcrStatus && showNotice"
|
||
class="notice-line"
|
||
:class="userInfo.resumeOcrStatus?.includes('成功') ? 'green' : 'blue'"
|
||
>
|
||
<image
|
||
v-if="userInfo.resumeOcrStatus?.includes('成功')"
|
||
class="icon"
|
||
src="@/static/icon/notice-green.png"
|
||
/>
|
||
<image v-else class="icon" src="@/static/icon/notice-blue.png" />
|
||
<view class="text">{{ userInfo.resumeOcrStatus }}</view>
|
||
<image
|
||
@click="closeNotice"
|
||
v-if="userInfo.resumeOcrStatus?.includes('成功')"
|
||
class="close"
|
||
src="@/static/icon/close-green.png"
|
||
/>
|
||
<image @click="closeNotice" v-else class="close" src="@/static/icon/close-blue.png" />
|
||
</view>
|
||
<view class="mys-container">
|
||
<!-- 个人信息 -->
|
||
<view class="card-top" style="margin-top: 12rpx; padding: 0; background: none">
|
||
<view class="mys-tops">
|
||
<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.avatar" :src="userInfo.avatar"></image>
|
||
<image v-else-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 class="line"></view>
|
||
</view>
|
||
<view class="mys-info">
|
||
<view class="mys-h4">
|
||
<view>求职期望</view>
|
||
<image
|
||
class="icon"
|
||
src="@/static/icon/edit1.png"
|
||
@click="navTo('/packageA/pages/jobExpect/jobExpect')"
|
||
></image>
|
||
</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>青岛市-</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>
|
||
<view class="card-top" style="margin-top: 24rpx">
|
||
<view class="mys-info" style="padding: 0">
|
||
<view class="mys-h4">
|
||
<text>工作经历</text>
|
||
<view class="mys-edit-icon btn-tada" @click="navTo('/packageA/pages/workExp/workExp')">
|
||
<image class="icon button-click btn-feel" src="@/static/icon/plus.png"></image>
|
||
<view class="txt">添加</view>
|
||
</view>
|
||
</view>
|
||
<view class="exp-item button-click" v-for="item in userInfo.workExp" :key="item.id">
|
||
<view class="fl_box fl_justbet mar_top15">
|
||
<view >{{ item.company }}</view>
|
||
<image
|
||
class="icon btn-feel"
|
||
src="@/static/icon/edit1.png"
|
||
@click="navTo(`/packageA/pages/workExp/workExp?id=${item.id}`)"
|
||
></image>
|
||
</view>
|
||
<view class="mys-text fl_box fl_justbet">
|
||
<text class="color_333333">{{ item.position }}</text>
|
||
<text class="datetext">{{ item.startTime }}--{{ item.endTime || '至今' }}</text>
|
||
</view>
|
||
<view class="mys-text">
|
||
<text>{{ item.duty }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template #footer>
|
||
<view class="footer-container">
|
||
<view class="footer-button btn-feel" @click="chooseResume">上传简历</view>
|
||
</view>
|
||
</template>
|
||
</AppLayout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
|
||
const { $api, navTo, navBack } = 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();
|
||
import config from '@/config.js';
|
||
|
||
const showNotice = ref(true);
|
||
onLoad(() => {
|
||
getUserResume();
|
||
});
|
||
|
||
function closeNotice() {
|
||
showNotice.value = false;
|
||
}
|
||
|
||
function chooseResume() {
|
||
uni.chooseImage({
|
||
sizeType: ['original', 'compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
count: 1,
|
||
success: ({ tempFilePaths, tempFiles }) => {
|
||
uploadResume(tempFilePaths[0], true)
|
||
.then((res) => {
|
||
res = JSON.parse(res);
|
||
getUserResume();
|
||
$api.msg('上传成功');
|
||
})
|
||
.catch((err) => {
|
||
$api.msg('上传失败');
|
||
});
|
||
},
|
||
fail: (error) => {},
|
||
});
|
||
}
|
||
|
||
function uploadResume(tempFilePath, loading) {
|
||
if (loading) {
|
||
uni.showLoading({
|
||
title: '请稍后',
|
||
mask: true,
|
||
});
|
||
}
|
||
let Authorization = '';
|
||
if (useUserStore().token) {
|
||
Authorization = `${useUserStore().token}`;
|
||
}
|
||
const header = {};
|
||
header['Authorization'] = encodeURIComponent(Authorization);
|
||
return new Promise((resolve, reject) => {
|
||
uni.uploadFile({
|
||
url: config.baseUrl + '/app/oss/uploadToObs',
|
||
filePath: tempFilePath,
|
||
name: 'file',
|
||
header,
|
||
success: (uploadFileRes) => {
|
||
if (uploadFileRes.statusCode === 200) {
|
||
resolve(uploadFileRes.data);
|
||
} else {
|
||
reject();
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
reject(err);
|
||
},
|
||
complete: () => {
|
||
if (loading) {
|
||
uni.hideLoading();
|
||
}
|
||
},
|
||
});
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
.btn {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
image {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
}
|
||
.footer-container{
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11,44,112,0.12);
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
padding: 40rpx 28rpx 20rpx 28rpx
|
||
.footer-button{
|
||
width: 100%;
|
||
height: 90rpx;
|
||
background: #1677FF;
|
||
border-radius: 8rpx;
|
||
color: #FFFFFF;
|
||
line-height: 90rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.notice-line
|
||
width 100%;
|
||
height:60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding:0 30rpx
|
||
margin-bottom: 20rpx
|
||
.icon
|
||
width:35rpx;
|
||
height:35rpx;
|
||
.text
|
||
flex: 1;
|
||
overflow hidden
|
||
padding:0 25rpx
|
||
.close
|
||
width:25rpx;
|
||
height:25rpx;
|
||
|
||
.notice-line.blue{
|
||
background: #E8F1FF
|
||
color: #1677ff
|
||
}
|
||
.notice-line.green{
|
||
background: #D4FFF1
|
||
color: #38bb8f
|
||
}
|
||
|
||
image{
|
||
width: 100%;
|
||
height: 100%
|
||
}
|
||
.mys-container{
|
||
padding-bottom:20rpx;
|
||
.card-top{
|
||
background: #FFFFFF;
|
||
margin: 0 28rpx;
|
||
border-radius: 8rpx;
|
||
padding: 24rpx
|
||
}
|
||
.mys-tops{
|
||
display: flex
|
||
justify-content: space-between
|
||
padding: 38rpx 44rpx
|
||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) , rgba(255, 255, 255, 1));
|
||
border-radius: 8rpx 8rpx 0 0 ;
|
||
.tops-left{
|
||
.name{
|
||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
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: 26rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
}
|
||
.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{
|
||
background: #ffffff;
|
||
padding: 0 24rpx
|
||
.line{
|
||
border: 2rpx dashed #eeeeee;
|
||
}
|
||
}
|
||
.mys-info{
|
||
padding: 28rpx
|
||
background: #ffffff;
|
||
border-radius: 0 0 8rpx 8rpx ;
|
||
.mys-h4{
|
||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #000000;
|
||
margin-bottom: 8rpx
|
||
display: flex;
|
||
justify-content: space-between
|
||
align-items: center
|
||
.icon{
|
||
width: 40rpx;
|
||
height: 40rpx
|
||
}
|
||
.mys-edit-icon{
|
||
display: flex;
|
||
align-items: center;
|
||
.txt{
|
||
font-size: 26rpx;
|
||
color: #444;
|
||
font-weight: 400;
|
||
}
|
||
.icon{
|
||
width: 28rpx;
|
||
height: 28rpx
|
||
margin-right: 5rpx;
|
||
margin-top: 2rpx
|
||
vertical-align: bottom;
|
||
}
|
||
}
|
||
}
|
||
.datetext{
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
}
|
||
.mys-text{
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
margin-top: 16rpx
|
||
}
|
||
.mys-list{
|
||
display: flex
|
||
align-items: center
|
||
flex-wrap: wrap;
|
||
.cards{
|
||
margin: 12rpx 12rpx 0 0
|
||
padding: 12rpx 25rpx;
|
||
width: fit-content
|
||
display: flex
|
||
align-items: center
|
||
justify-content: center
|
||
border-radius:10rpx;
|
||
border: 2rpx solid #E8EAEE;
|
||
}
|
||
}
|
||
.exp-item{
|
||
padding-bottom: 28rpx;
|
||
border-bottom: 2rpx dashed #EEEEEE;
|
||
.icon{
|
||
width 40rpx;
|
||
height 40rpx
|
||
}
|
||
}
|
||
.exp-item:nth-last-child(1){
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
@media(min-width: 800px){
|
||
.notice-line{
|
||
height: 100rpx;
|
||
.icon{
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
.text{
|
||
font-size: 34rpx;
|
||
}
|
||
.close{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
.mys-container{
|
||
.mys-tops{
|
||
.tops-left{
|
||
.name{
|
||
font-size: 50rpx;
|
||
.edit-icon{
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
.subName{
|
||
font-size: 38rpx;
|
||
}
|
||
}
|
||
.tops-right{
|
||
.right-imghead{
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
}
|
||
}
|
||
}
|
||
.mys-info{
|
||
.mys-h4{
|
||
font-size: 40rpx;
|
||
.icon{
|
||
width: 55rpx;
|
||
height: 55rpx;
|
||
}
|
||
.mys-edit-icon{
|
||
.icon{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
.txt{
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
.exp-item{
|
||
font-size: 38rpx;
|
||
.icon{
|
||
width: 55rpx;
|
||
height: 55rpx;
|
||
}
|
||
}
|
||
.datetext{
|
||
font-size: 34rpx;
|
||
}
|
||
.mys-text{
|
||
font-size: 34rpx;
|
||
}
|
||
.mys-list{
|
||
margin-top: 20rpx;
|
||
.cards{
|
||
padding: 12rpx 40rpx;
|
||
font-size: 34rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
|