qingdao-employment-service/packageA/pages/vCard/vCard.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 {
            background: #e8e8e8;
            border-radius: 50%;
            overflow: hidden;
            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>