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 {
      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>