cmanager/src/components/resume/index.vue

<template>
  <basic-container>
    <el-drawer title="个人简历" append-to-body :visible.sync="drawer" size="60%">
      <div class="page" v-loading="loading">
        <div class="title">
          <b style="font-size:16px;">基础信息</b>
        </div>

        <div class="basic-info">
          <div class="avatar">
            <img src="/manage/svg/avatar.svg" style="display:inline-block;width:100%;height:auto;" />
            <i
              class="iconfont iconnan"
              style="position:absolute;top:5px;right:5px;"
              v-if="data.age===1"
            ></i>
            <i class="iconfont iconnv" style="position:absolute;top:5px;right:5px;" v-else></i>
          </div>

          <table>
            <tr>
              <td>{{data.realName}}</td>
              <td>{{data.age}}岁</td>
              <td style="padding-left:120px">身份</td>
              <td>灵活用工</td>
            </tr>
            <tr>
              <td>联系方式</td>
              <td>{{data.telphone}}</td>
              <td style="padding-left:120px">期望地点</td>
              <td>{{getCity(data.cityId)}}</td>
            </tr>
          </table>
        </div>

        <div class="title">
          <b>期望行业</b>
        </div>
        <div class="content">
          <el-tag v-for="(item,index) in data.list" :key="index">{{item.trade}}</el-tag>
        </div>

        <div class="title">
          <b>具备技能</b>
        </div>
        <div class="content">
          <el-tag type="success" v-for="(item,index) in data.list" :key="index">{{item.worktypes}}</el-tag>
        </div>

        <div class="title">
          <b>技能水平</b>
        </div>
        <div class="content">
          <el-tag type="danger" v-for="(item,index) in data.list" :key="index">{{item.skills}}</el-tag>
        </div>
      </div>
    </el-drawer>
  </basic-container>
</template>

<script>

import { getDetail } from "@/api/tenant/resume";
//   import {mapGetters} from "vuex";

export default {
  comments: {

  },
  components: {
  },
  data () {
    return {
      userId: '',
      loading: false,
      drawer: false,
      data: {}
    }
  },
  computed: {
  },
  watch: {

  },
  methods: {
    getCity (val) {
      if (val) {
        return this.$store.getters.getAreaParents(val)[0].label + this.$store.getters.getAreaParents(val)[1].label
      }
    },
    /*打开drawer*/
    openDialog (row) {
      this.userId = row.userId;
      this.drawer = true;
      this.getDetail();
    },
    /*加载数据*/
    getDetail () {
      this.loading = true;
      getDetail(this.userId).then(res => {
        const data = res.data.data;
        this.data = data;
        this.loading = false;
      });
    }

  }
};
</script>
<style scoped>
.page {
  /* padding: 0 30px; */
}
.page .title {
  margin-bottom: 20px;
  font-size: 16px;
}

.page .basic-info {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.page .basic-info .avatar {
  position: relative;
  width: 120px;
  margin-right: 100px;
}
.page .basic-info table {
  border-collapse: separate;
  border-spacing: 0px 20px;
}
.page .basic-info table tr td {
  min-width: 100px;
}

.page .content {
  margin-bottom: 30px;
}
.el-tag {
  margin-right: 10px;
}
</style>