feat : 新增 点子名片页, 修改我的简历页, 编辑个人信息页

This commit is contained in:
bin
2025-11-10 17:09:05 +08:00
parent e12241b0e4
commit 544cae7cb1
11 changed files with 868 additions and 576 deletions

View File

@@ -269,10 +269,9 @@ function getFormCompletionPercent(form) {
display: flex
flex-wrap: wrap
.nx-item
padding: 20rpx 28rpx
width: fit-content
margin: 12rpx 12rpx 0 0;
padding: 12rpx 25rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #E8EAEE;
margin-right: 24rpx
margin-top: 24rpx
</style>

View File

@@ -1,120 +1,105 @@
<template>
<AppLayout title="我的简历" title-color="#FFFFFF" back-gorund-color="#F4F4F4">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
<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 class="mys-container">
<!-- 个人信息 -->
<view class="card-top" style="margin-top: 12rpx; padding: 0; background: none">
<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>
</template>
<view class="mys-container">
<!-- 个人信息 -->
<view class="card-top" style="margin-top: 12rpx; padding: 0">
<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>青岛市-</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="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="card-top" style="margin-top: 24rpx">
<view class="mys-info" style="padding: 0">
<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="mar_top10" v-for="item in userInfo.workExp" :key="item.id">
<view class="fl_box fl_justbet mar_top10">
<text class="fs_16">{{ item.company }}</text>
<text class="datetext">{{ item.startTime }}--{{ item.endTime || '至今' }}</text>
</view>
<view class="mys-text">
<text class="color_333333 fs_14">{{ item.position }}</text>
<text></text>
</view>
<view class="mys-text color_333333">
<text>{{ item.duty }}</text>
</view>
</view>
</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>
<template #footer>
<view class="footer-container">
<view class="footer-button">上传简历</view>
<!-- 求职期望 -->
<view class="mys-line">
<view class="line"></view>
</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>
</template>
</AppLayout>
</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">
<image class="button-click" src="@/static/icon/edit1.png" @click="navTo('/packageA/pages/jobExpect/jobExpect')"></image>
</view>
</view>
<view class="exp-item" v-for="item in userInfo.workExp" :key="item.id">
<view class="fl_box fl_justbet mar_top10">
<text class="fs_16">{{ item.company }}</text>
</view>
<view class="mys-text fl_box fl_justbet">
<text class="color_333333 fs_14">{{ 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">上传简历</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';
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();
@@ -152,6 +137,7 @@ image{
height: 100%
}
.mys-container{
padding-bottom:20rpx;
.card-top{
background: #FFFFFF;
margin: 0 28rpx;
@@ -162,6 +148,8 @@ image{
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;
@@ -205,17 +193,19 @@ image{
}
}
.mys-line{
margin: 0 28rpx
height: 0rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
border: 2rpx dashed #000000;
opacity: 0.16;
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: 600;
font-weight: 500;
font-size: 30rpx;
color: #000000;
margin-bottom: 8rpx
@@ -244,17 +234,24 @@ image{
align-items: center
flex-wrap: wrap;
.cards{
margin: 28rpx 28rpx 0 0
height: 80rpx;
padding: 0 38rpx;
margin: 12rpx 12rpx 0 0
padding: 12rpx 25rpx;
width: fit-content
display: flex
align-items: center
justify-content: center
border-radius: 12rpx 12rpx 12rpx 12rpx;
border-radius:10rpx;
border: 2rpx solid #E8EAEE;
}
}
.exp-item{
padding-bottom: 28rpx;
border-bottom: 2rpx dashed #EEEEEE;
}
.exp-item:nth-last-child(1){
border-bottom: none;
}
}
}
</style>

View File

@@ -1,257 +1,260 @@
<template>
<AppLayout
title="个人信息"
:sub-title="`完成度${percent}`"
border
back-gorund-color="#ffffff"
:show-bg-image="false"
>
<template #headerleft>
<view class="btn mar_le20 button-click" @click="navBack">取消</view>
</template>
<template #headerright>
<view class="btn mar_ri20 button-click" @click="confirm">确认</view>
</template>
<view class="content">
<view class="content-input">
<view class="input-titile">姓名</view>
<input class="input-con" v-model="fromValue.name" placeholder="请输入您的姓名" />
</view>
<view class="content-sex">
<view class="sex-titile">性别</view>
<view class="sext-ri">
<view class="sext-box" :class="{ 'sext-boxactive': fromValue.sex === 0 }" @click="changeSex(0)">
</view>
<view class="sext-box" :class="{ 'sext-boxactive': fromValue.sex === 1 }" @click="changeSex(1)">
</view>
</view>
</view>
<view class="content-input" @click="changeDateBirt">
<view class="input-titile">出生年月</view>
<input
class="input-con triangle"
v-model="fromValue.birthDate"
disabled
placeholder="请选择您的出生年月"
/>
</view>
<view class="content-input" @click="changeEducation">
<view class="input-titile">学历</view>
<input class="input-con triangle" v-model="state.educationText" disabled placeholder="请选择您的学历" />
</view>
<view class="content-input" @click="changePoliticalAffiliation">
<view class="input-titile">政治面貌</view>
<input
class="input-con triangle"
v-model="state.politicalAffiliationText"
disabled
placeholder="请选择您的政治面貌"
/>
</view>
<view class="content-input">
<view class="input-titile">手机号码</view>
<input class="input-con" v-model="fromValue.phone" placeholder="请输入您的手机号码" />
</view>
<AppLayout title="个人信息" :sub-title="`完成度${percent}`" border back-gorund-color="#ffffff" :show-bg-image="false">
<template #headerleft>
<view class="btn mar_le20 button-click" @click="navBack">取消</view>
</template>
<template #headerright>
<view class="btn mar_ri20 button-click" @click="confirm">确认</view>
</template>
<view class="content">
<view class="content-avatar">
<view class="avatar-title">编辑头像</view>
<view @click="selectAvatar">
<image class="avatar" v-if="fromValue.avatar" :src="fromValue.avatar" />
<image class="avatar" v-else-if="fromValue.sex == '0'" src="@/static/icon/boy.png" />
<image class="avatar" v-else="fromValue.sex == '1'" src="@/static/icon/girl.png" />
</view>
</AppLayout>
</view>
<view class="content-input">
<view class="input-titile">姓名</view>
<input class="input-con" v-model="fromValue.name" placeholder="请输入您的姓名" />
</view>
<view class="content-sex">
<view class="sex-titile">性别</view>
<view class="sext-ri">
<view class="sext-box" :class="{ 'sext-boxactive': fromValue.sex === 0 }" @click="changeSex(0)"> </view>
<view class="sext-box" :class="{ 'sext-boxactive': fromValue.sex === 1 }" @click="changeSex(1)"> </view>
</view>
</view>
<view class="content-input" @click="changeDateBirt">
<view class="input-titile">出生年月</view>
<input class="input-con triangle" v-model="fromValue.birthDate" disabled placeholder="请选择您的出生年月" />
</view>
<view class="content-input" @click="changeEducation">
<view class="input-titile">学历</view>
<input class="input-con triangle" v-model="state.educationText" disabled placeholder="请选择您的学历" />
</view>
<view class="content-input" @click="changePoliticalAffiliation">
<view class="input-titile">政治面貌</view>
<input class="input-con triangle" v-model="state.politicalAffiliationText" disabled placeholder="请选择您的政治面貌" />
</view>
<view class="content-input">
<view class="input-titile">手机号码</view>
<input class="input-con" v-model="fromValue.phone" placeholder="请输入您的手机号码" />
</view>
</view>
</AppLayout>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navTo, navBack, checkingPhoneRegExp } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
import { reactive, inject, watch, ref, onMounted } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
const { $api, navTo, navBack, checkingPhoneRegExp } = inject("globalFunction");
import { storeToRefs } from "pinia";
import useUserStore from "@/stores/useUserStore";
import useDictStore from "@/stores/useDictStore";
const { userInfo } = storeToRefs(useUserStore());
const { getUserResume } = useUserStore();
const { dictLabel, oneDictData } = useDictStore();
const openSelectPopup = inject('openSelectPopup');
const openSelectPopup = inject("openSelectPopup");
const percent = ref('0%');
const percent = ref("0%");
const state = reactive({
educationText: '',
politicalAffiliationText: '',
educationText: "",
politicalAffiliationText: "",
});
const fromValue = reactive({
name: '',
sex: 0,
birthDate: '',
education: '',
politicalAffiliation: '',
name: "",
sex: 0,
birthDate: "",
education: "",
politicalAffiliation: "",
avatar: "",
});
onLoad(() => {
initLoad();
// setTimeout(() => {
// const { age, birthDate } = useUserStore().userInfo;
// const newAge = calculateAge(birthDate);
// // 计算年龄是否对等
// if (age != newAge) {
// completeResume();
// }
// }, 1000);
initLoad();
// setTimeout(() => {
// const { age, birthDate } = useUserStore().userInfo;
// const newAge = calculateAge(birthDate);
// // 计算年龄是否对等
// if (age != newAge) {
// completeResume();
// }
// }, 1000);
});
function initLoad() {
fromValue.name = userInfo.value.name;
fromValue.sex = Number(userInfo.value.sex);
fromValue.phone = userInfo.value.phone;
fromValue.birthDate = userInfo.value.birthDate;
fromValue.education = userInfo.value.education;
fromValue.politicalAffiliation = userInfo.value.politicalAffiliation;
// 回显
state.educationText = dictLabel('education', userInfo.value.education);
state.politicalAffiliationText = dictLabel('affiliation', userInfo.value.politicalAffiliation);
const result = getFormCompletionPercent(fromValue);
percent.value = result;
fromValue.name = userInfo.value.name;
fromValue.sex = Number(userInfo.value.sex);
fromValue.phone = userInfo.value.phone;
fromValue.birthDate = userInfo.value.birthDate;
fromValue.education = userInfo.value.education;
fromValue.politicalAffiliation = userInfo.value.politicalAffiliation;
fromValue.avatar = userInfo.value.avatar;
// 回显
state.educationText = dictLabel("education", userInfo.value.education);
state.politicalAffiliationText = dictLabel("affiliation", userInfo.value.politicalAffiliation);
const result = getFormCompletionPercent(fromValue);
percent.value = result;
}
const confirm = () => {
if (!fromValue.name) {
return $api.msg('请输入姓名');
}
if (!fromValue.birthDate) {
return $api.msg('请选择出生年月');
}
if (!fromValue.education) {
return $api.msg('请选择学历');
}
if (!fromValue.politicalAffiliation) {
return $api.msg('请选择政治面貌');
}
if (!checkingPhoneRegExp(fromValue.phone)) {
return $api.msg('请输入正确手机号');
}
const params = {
...fromValue,
age: calculateAge(fromValue.birthDate),
};
$api.createRequest('/app/user/resume', params, 'post').then((resData) => {
$api.msg('完成');
state.disbleDate = true;
getUserResume().then(() => {
navBack();
});
if (!fromValue.name) {
return $api.msg("请输入姓名");
}
if (!fromValue.birthDate) {
return $api.msg("请选择出生年月");
}
if (!fromValue.education) {
return $api.msg("请选择学历");
}
if (!fromValue.politicalAffiliation) {
return $api.msg("请选择政治面貌");
}
// if (!checkingPhoneRegExp(fromValue.phone)) {
// return $api.msg('请输入正确手机号');
// }
const params = {
...fromValue,
age: calculateAge(fromValue.birthDate),
};
$api.createRequest("/app/user/resume", params, "post").then((resData) => {
$api.msg("完成");
state.disbleDate = true;
getUserResume().then(() => {
navBack();
});
});
};
const changeDateBirt = () => {
const datearray = generateDatePickerArrays();
const defaultIndex = getDatePickerIndexes(fromValue.birthDate);
openSelectPopup({
title: '年龄段',
maskClick: true,
data: datearray,
defaultIndex,
success: (_, value) => {
const [year, month, day] = value;
const dateStr = `${year.value}-${month.value}-${day.value}`;
if (isValidDate(dateStr)) {
fromValue.birthDate = dateStr;
} else {
$api.msg('没有这一天');
}
},
});
const datearray = generateDatePickerArrays();
const defaultIndex = getDatePickerIndexes(fromValue.birthDate);
openSelectPopup({
title: "年龄段",
maskClick: true,
data: datearray,
defaultIndex,
success: (_, value) => {
const [year, month, day] = value;
const dateStr = `${year.value}-${month.value}-${day.value}`;
if (isValidDate(dateStr)) {
fromValue.birthDate = dateStr;
} else {
$api.msg("没有这一天");
}
},
});
};
const changeEducation = () => {
openSelectPopup({
title: '学历',
maskClick: true,
data: [oneDictData('education')],
success: (_, [value]) => {
fromValue.education = value.value;
state.educationText = value.label;
},
});
openSelectPopup({
title: "学历",
maskClick: true,
data: [oneDictData("education")],
success: (_, [value]) => {
fromValue.education = value.value;
state.educationText = value.label;
},
});
};
const changeSex = (sex) => {
fromValue.sex = sex;
fromValue.sex = sex;
};
const changePoliticalAffiliation = () => {
openSelectPopup({
title: '政治面貌',
maskClick: true,
data: [oneDictData('affiliation')],
success: (_, [value]) => {
fromValue.politicalAffiliation = value.value;
state.politicalAffiliationText = value.label;
},
});
openSelectPopup({
title: "政治面貌",
maskClick: true,
data: [oneDictData("affiliation")],
success: (_, [value]) => {
fromValue.politicalAffiliation = value.value;
state.politicalAffiliationText = value.label;
},
});
};
function generateDatePickerArrays(startYear = 1975, endYear = new Date().getFullYear()) {
const years = [];
const months = [];
const days = [];
const years = [];
const months = [];
const days = [];
for (let y = startYear; y <= endYear; y++) {
years.push(y.toString());
}
for (let m = 1; m <= 12; m++) {
months.push(m.toString().padStart(2, '0'));
}
for (let d = 1; d <= 31; d++) {
days.push(d.toString().padStart(2, '0'));
}
for (let y = startYear; y <= endYear; y++) {
years.push(y.toString());
}
for (let m = 1; m <= 12; m++) {
months.push(m.toString().padStart(2, "0"));
}
for (let d = 1; d <= 31; d++) {
days.push(d.toString().padStart(2, "0"));
}
return [years, months, days];
return [years, months, days];
}
function isValidDate(dateString) {
const [year, month, day] = dateString.split('-').map(Number);
const [year, month, day] = dateString.split("-").map(Number);
const date = new Date(year, month - 1, day); // 月份从0开始
return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
const date = new Date(year, month - 1, day); // 月份从0开始
return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
}
const calculateAge = (birthDate) => {
const birth = new Date(birthDate);
const today = new Date();
let age = today.getFullYear() - birth.getFullYear();
const monthDiff = today.getMonth() - birth.getMonth();
const dayDiff = today.getDate() - birth.getDate();
const birth = new Date(birthDate);
const today = new Date();
let age = today.getFullYear() - birth.getFullYear();
const monthDiff = today.getMonth() - birth.getMonth();
const dayDiff = today.getDate() - birth.getDate();
// 如果生日的月份还没到,或者刚到生日月份但当天还没过,则年龄减 1
if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
age--;
}
// 如果生日的月份还没到,或者刚到生日月份但当天还没过,则年龄减 1
if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
age--;
}
return age;
return age;
};
function getFormCompletionPercent(form) {
let total = Object.keys(form).length;
let filled = 0;
let total = Object.keys(form).length;
let filled = 0;
for (const key in form) {
const value = form[key];
if (value !== '' && value !== null && value !== undefined) {
if (typeof value === 'number') {
filled += 1;
} else if (typeof value === 'string' && value.trim() !== '') {
filled += 1;
}
}
for (const key in form) {
const value = form[key];
if (value !== "" && value !== null && value !== undefined) {
if (typeof value === "number") {
filled += 1;
} else if (typeof value === "string" && value.trim() !== "") {
filled += 1;
}
}
}
if (total === 0) return '0%';
const percent = (filled / total) * 100;
return percent.toFixed(0) + '%'; // 取整,不要小数点
if (total === 0) return "0%";
const percent = (filled / total) * 100;
return percent.toFixed(0) + "%"; // 取整,不要小数点
}
// 主函数
function getDatePickerIndexes(dateStr) {
const [year, month, day] = dateStr.split('-');
const [year, month, day] = dateStr.split("-");
const [years, months, days] = generateDatePickerArrays();
const [years, months, days] = generateDatePickerArrays();
const yearIndex = years.indexOf(year);
const monthIndex = months.indexOf(month);
const dayIndex = days.indexOf(day);
const yearIndex = years.indexOf(year);
const monthIndex = months.indexOf(month);
const dayIndex = days.indexOf(day);
return [yearIndex, monthIndex, dayIndex];
return [yearIndex, monthIndex, dayIndex];
}
function selectAvatar() {
uni.chooseImage({
sizeType: ["original", "compressed"],
sourceType: ["album", "camera"],
count: 1,
success: ({ tempFilePaths, tempFiles }) => {
console.log(`选择的图片:${tempFilePaths}`);
console.warn("没有做后续上传逻辑!!!!!!!");
},
fail: (error) => {},
});
}
</script>
@@ -267,6 +270,22 @@ function getDatePickerIndexes(dateStr) {
height: calc(100% - 120rpx)
}
.content-avatar{
margin-bottom: 52rpx;
padding-bottom: 28rpx
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2rpx solid #EBEBEB
.avatar-title{
font-size: 30rpx;
color #333;
}
.avatar{
width:110rpx;
height: 110rpx;
}
}
.content-input
margin-bottom: 52rpx
.input-titile
@@ -302,12 +321,12 @@ function getDatePickerIndexes(dateStr) {
background: #697279;
transform: rotate(45deg)
.content-sex
height: 110rpx;
display: flex
justify-content: space-between;
align-items: flex-start;
border-bottom: 2rpx solid #EBEBEB
margin-bottom: 52rpx
padding-bottom: 28rpx
.sex-titile
line-height: 80rpx;
.sext-ri

View File

@@ -0,0 +1,261 @@
<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 class="mys-container">
<!-- 个人信息 -->
<view class="card-top">
<view class="info">
<view class="avatar">
<image v-if="userInfo.sex === '0'" src="@/static/icon/boy.png"></image>
<image v-else src="@/static/icon/girl.png"></image>
</view>
<view class="info-right">
<view class="name">{{ userInfo.name || "编辑用户名" }}</view>
<view class="des">
<dict-Label class="mar_ri10" dictType="sex" :value="userInfo.sex"></dict-Label>
<text class="mar_ri10">|</text>
<text class="mar_ri10">{{ userInfo.age }}</text>
<text class="mar_ri10">|</text>
<dict-Label class="mar_ri10" dictType="education" :value="userInfo.education"></dict-Label>
<!-- <text class="mar_ri10">|</text>
<dict-Label class="mar_ri10" dictType="affiliation" :value="userInfo.politicalAffiliation"></dict-Label> -->
</view>
<view class="phone">
<image class="call-icon" src="@/static/icon/call.png" />
<view>{{ userInfo.phone }}</view>
</view>
</view>
</view>
<view class="info-bottom">
<view>到岗2025-11-02</view>
<view>地点<dict-Label dictType="area" :value="Number(userInfo.area)"></dict-Label></view>
</view>
<view class="des-card" style="margin-top: 24rpx">
<view class="fl_box fl_justbet">
<view>求职意向岗位</view>
<view>{{ userInfo.jobIntention || "-" }}</view>
</view>
<view class="fl_box fl_justbet">
<view>毕业学校</view>
<view>{{ userInfo.graduationSchool || "-" }}</view>
</view>
<view class="fl_box fl_justbet">
<view>当前状态</view>
<view>在职 看工作机会</view>
</view>
</view>
</view>
<view class="card">
<view class="title">
<image class="bg" src="@/static/icon/title-bg.png" />
<view class="text">个人技能</view>
</view>
<view class="skill-box">
<view class="skill-item" v-for="item in userInfo?.skillList" :key="item.id">{{ item.skill }}</view>
</view>
<view v-if="!userInfo?.skillList?.length" class="empty-box">
<image class="img" src="@/static/icon/empty.png" mode="widthFix"></image>
<view class="content">暂无个人技能</view>
</view>
</view>
<view class="card">
<view class="title">
<image class="bg" src="@/static/icon/title-bg.png" />
<view class="text">关键经历</view>
</view>
<view class="exp-box">
<view class="exp-item" v-for="(item, index) in userInfo?.workExp" :key="item.id">{{ index + 1 + "." }}{{ item.duty }}</view>
</view>
<view v-if="!userInfo?.workExp?.length" class="empty-box">
<image class="img" src="@/static/icon/empty.png" mode="widthFix"></image>
<view class="content">暂无关键经历</view>
</view>
</view>
<view class="card">
<view class="title">
<image class="bg" src="@/static/icon/title-bg.png" />
<view class="text">荣誉及证书情况</view>
</view>
<ul class="certificate-box">
<li class="certificate-item" v-for="(item, index) in userInfo?.certificateList" :key="item.id">{{ item.name }}</li>
</ul>
<view v-if="!userInfo?.certificateList?.length" class="empty-box">
<image class="img" src="@/static/icon/empty.png" mode="widthFix"></image>
<view class="content">暂无荣誉证书</view>
</view>
</view>
</view>
</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();
</script>
<style lang="scss" scoped>
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
image {
height: 100%;
width: 100%;
}
}
.card-top {
width: 100%;
border-radius: 8rpx;
box-sizing: border-box;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.9));
}
.card {
width: 100%;
border-radius: 8rpx;
box-sizing: border-box;
background: #fff;
padding: 24rpx;
margin-top: 24rpx;
.title {
position: relative;
.bg {
width: 108rpx;
height: 16rpx;
position: absolute;
left: 0;
bottom: 0;
}
.text {
margin-left: 20rpx;
font-size: 30rpx;
font-weight: bold;
color: #333;
}
}
}
.skill-box {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
margin-top: 24rpx;
.skill-item {
padding: 8rpx 20rpx;
font-size: 24rpx;
color: #333;
background: #e7f1ff;
border-radius: 8rpx;
}
}
.exp-box {
display: flex;
flex-wrap: wrap;
gap: 24rpx;
margin-top: 24rpx;
.exp-item {
font-size: 26rpx;
color: #333;
}
}
.certificate-box {
margin-top: 24rpx;
padding-inline-start: 40rpx !important;
.certificate-item {
font-size: 26rpx;
color: #333;
margin-bottom: 24rpx;
}
}
image {
width: 100%;
height: 100%;
}
.mys-container {
padding: 28rpx;
.info {
display: flex;
align-items: center;
padding: 24rpx;
.avatar {
width: 160rpx;
height: 160rpx;
margin-right: 24rpx;
}
.info-right {
height: 160rpx;
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
font-size: 40rpx;
font-weight: bold;
}
.des {
font-size: 26rpx;
color: #999999;
}
.phone {
display: flex;
align-items: center;
font-size: 26rpx;
color: #999999;
.call-icon {
width: 24rpx;
height: 24rpx;
margin-right: 5rpx;
}
}
}
}
.info-bottom {
background: linear-gradient(to right, #91b6ff, #87afff, #b7adff);
border-radius: 0 0 8rpx 8rpx;
padding: 12rpx 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 26rpx;
color: #333;
}
.des-card {
padding: 24rpx;
font-size: 26rpx;
color: #666;
display: flex;
flex-direction: column;
gap: 12rpx;
}
.empty-box {
padding: 80rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.img {
width: 100%;
}
.content {
margin-top: 24rpx;
font-size: 30rpx;
color: #666;
}
}
}
</style>