veterans_client_web/src/views/PersonalCenter/Resume/ResumeIndex.vue

<!--
 * @Description: 我的简历
 * @Author: 空白格
 * @Date: 2022-08-24 09:35:03
 * @LastEditors: gcz
 * @LastEditTime: 2022-08-26 17:52:03
 * @FilePath: \veterans_client_web\src\views\PersonalCenter\Resume\ResumeIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="app-main">
    <BannerBreadcrumb title="我的简历" :breadcrumb="false" />
    <div class="banner-breadcrumb-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/personalcenter' }"
          >我的</el-breadcrumb-item
        >
        <el-breadcrumb-item>我的简历</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="app-main-box">
      <div class="app-main-box-content resume">
        <div class="title">我的简历</div>
        <el-row>
          <el-col :span="16">
            <div class="name">{{ memberinfo.name }}</div>
            <div class="">
              {{ memberinfo.menSex === 1 ? "女" : "男" }} ·
              <span class="position" v-if="memberinfo.jobStatus !== 0">
                <span class="c-yellow">入职中</span>
                <span v-if="memberinfo.jobStatus==1&&memberinfo.company">({{memberinfo.company}})</span>
              </span>
              <span class="c-yellow" v-else>未入职</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="avatar hexagon">
              <div
                class="avatar-box hexagon-box"
                :style="{
                  backgroundImage: `url('${
                    memberinfo.avatar
                      ? memberinfo.avatar
                      : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                  }')`,
                }"
              ></div>
            </div>
          </el-col>
        </el-row>
        <el-row class="resumm-item">
          <el-col :span="22">
            <div class="item-title">基本信息</div>
            <p>
              退役军人 ·
              {{ memberinfo.menBirth ? getAge(memberinfo.menBirth) : "-" }}岁 ·
              {{ memberinfo.politOutlook || "-" }} ·
              {{ memberinfo.degrEduc || "-" }}
            </p>
            <p>电话：{{ memberinfo.mobile }}</p>
          </el-col>
          <el-col class="link-page" :span="2">
            <img @click="goEdit" src="@/assets/images/link-page-icon.svg" alt="">
          </el-col>
        </el-row>
        <el-row class="resumm-item">
          <el-col :span="22">
            <div class="item-title">期望薪资</div>
            <div v-if="memberinfo.cityName && memberinfo.provinceName && memberinfo.areaName">{{ `${memberinfo.provinceName}-${memberinfo.cityName}-${memberinfo.areaName}` }}</div>
				    <div class="c-yellow" v-if="memberinfo.expectedLowestSalary && memberinfo.expectedHighestSalary">{{ `${memberinfo.expectedLowestSalary}k ~ ${memberinfo.expectedHighestSalary}k` }}</div>
				    <div class="supple" v-if="!memberinfo.workCity && !memberinfo.expectedLowestSalary && !memberinfo.expectedLowestSalary">暂末补充求职意向… </div>
          </el-col>
          <el-col class="link-page" :span="2">
            <img @click="goEdit" src="@/assets/images/link-page-icon.svg" alt="">
          </el-col>
        </el-row>
        <el-row class="resumm-item">
          <el-col :span="22">
            <div class="item-title">自我评价</div>
            <div v-if="memberinfo.selfAssessment">
              {{ memberinfo.selfAssessment }}
            </div>
            <p v-else>暂末补充自我评价…</p>
          </el-col>
          <el-col class="link-page" :span="2">
            <img @click="goEdit" src="@/assets/images/link-page-icon.svg" alt="">
          </el-col>
        </el-row>
        <el-row class="resumm-item">
          <el-col :span="22">
            <div class="item-title">工作经历</div>
            <el-empty description="暂无工作经历"></el-empty>
          </el-col>
          <el-col class="link-page" :span="2">
            <!-- <img @click="goEdit" src="@/assets/images/link-page-icon.svg" alt=""> -->
          </el-col>
        </el-row>
        <el-row class="resumm-item">
          <el-col :span="22">
            <div class="item-title">培训与教育经历</div>
            <el-empty description="暂无培训与教育经历"></el-empty>
          </el-col>
          <el-col class="link-page" :span="2">
            <!-- <img @click="goEdit" src="@/assets/images/link-page-icon.svg" alt=""> -->
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import BannerBreadcrumb from "@/components/BannerBreadcrumb";
import { getPersonInfoData } from "@/api/PersonalCenter";
export default {
  name: "Resume",
  components: {
    BannerBreadcrumb,
  },
  data() {
    return {
      memberinfo: {},
    };
  },
  created() {
    this.getPersonInfo();
  },
  methods: {
    /**
     * 获取个人信息
     * @date 2022-08-15
     * @returns {any}
     */
    getPersonInfo() {
      getPersonInfoData().then((res) => {
        if (res.code === 200) {
          this.memberinfo = res?.data;
          console.log("this.memberinfo", this.memberinfo);
        }
      });
    },
    /**
     * 通过出生年月计算年龄
     * @param { String } date
     */
    getAge(date) {
      const birth = new Date(date).valueOf();
      const now = new Date().valueOf();
      const age = (now - birth) / 1000 / 60 / 60 / 24 / 365;
      return parseInt(age);
    },
    goEdit(){
      this.$router.push({path:'resumeEdit'});
    }
  },
};
</script>

<style lang='scss' scoped>
.c-yellow {
  color: #ff6901;
}

.app-main-box-content {
  min-height: calc(100vh - 73px - 104px - 64px - 100px - 23px - 40px);
}
.banner-breadcrumb-breadcrumb {
  background-color: #fff;
  :deep(.el-breadcrumb) {
    width: 70%;
    height: 64px;
    line-height: 64px;
    min-width: 600px;
    margin: 0 auto;
    font-size: 20px;
  }
  :deep(.el-breadcrumb__inner.is-link) {
    color: #7e7e7e;
    font-weight: normal;
  }
  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #ff0000;
  }
}
.resume {
  color: #666;
  .title {
    text-align: center;
    color: #222;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: 1.55px;
    padding-bottom: 30px;
    border-bottom: 1px solid #d7d7d7;
    margin-bottom: 40px;
  }
  .name {
    color: #222;
    font-size: 30px;
    margin-bottom: 10px;
  }
  .avatar {
    width: 138px;
    height: 138px;
    background-color: rgba($color: #fff, $alpha: 0.7);
    padding: 7px;
    margin-right: 0;
    margin-left: auto;
  }
  .resumm-item {
    margin-bottom: 50px;
    .item-title {
      font-size: 20px;
      color: #222;
      margin-bottom: 14px;
      position: relative;
      padding-left: 10px;
      &::before{
        content:'';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -2.5px;
        background: #709078;
      }
    }
    p {
      margin-bottom: 10px;
    }
    .link-page{
      padding-top: 24px;
      text-align: right;
      cursor: pointer;
    }
  }
}
</style>