267 lines
7.5 KiB
Vue
267 lines
7.5 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 class="mys-container">
|
||
<!-- 个人信息 -->
|
||
<view class="card-top btn-feel">
|
||
<view class="info">
|
||
<view class="avatar">
|
||
<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="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></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 style="white-space:nowrap">求职意向岗位</view>
|
||
<view class="line_1" style="padding-left:40rpx" >{{ userInfo.jobIntention || userInfo.jobTitle?.join(',') || '-' }}</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 btn-feel">
|
||
<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 btn-feel">
|
||
<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 btn-feel">
|
||
<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;
|
||
image{
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.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>
|