proginn-frontend/components/sign/experience_rz.vue

<template>
  <div class="info" id="workexp" >
    <div v-if="experience.length > 0" style="border-bottom: 1px solid #ebeef5;">
      <template v-for="(item, idx) in experience">
        <div style="display: flex;justify-content: space-between;justify-items: center;align-items: center">
          <div :key="item.id" class="show">
            <h4>
              <span>{{`${item.start_time} - ${item.end_time || '至今'} ${item.company} ${item.title}`}}</span>
            </h4>
            <p class="desc">{{item.description}}</p>
          </div>
          <div style="margin-left: 10px">
            <el-button v-if="item.status==0 || item.status==3" type="primary" @click="rz(item)" size="small">立即认证</el-button>
            <el-button v-if="item.status==1" type="warning"  size="small">审核中</el-button>
            <el-button v-if="item.status==2" type="info" size="small">已认证</el-button>
          </div>
        </div>
      </template>
    </div>
    <div v-else class="empty">
      <p style="font-size: 20px">
        还没有工作经历，<a @click="sign" style="font-size: 22px;cursor: pointer" type="text">添加工作经历</a>
      </p>
    </div>
    <el-drawer
      v-if="drawer.drawer"
      title="提交证明"
      :wrapperClosable="false"
      :size="drawer.size"
      :visible.sync="drawer.drawer"
      :direction="drawer.direction"
      :before-close="handleClose">
      <experience_rz_add :back="this" style="padding: 20px"></experience_rz_add>
    </el-drawer>
  </div>
</template>

<script>
import { mapState } from "vuex";
import experience_rz_add from "./experience_rz_add";

export default {
  data() {
    return {
      experience: [],
      drawer:{
        drawer: false,
        direction: 'btt',
        size:"700px",
        row:{},
      },
    };
  },
  components: {
    experience_rz_add
  },
  computed: {
    ...mapState(["userinfo","deviceType"])
  },
  watch: {},
  async mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      this.drawer.drawer=false;
      const res = await this.$axios.$post("/api/user_experience/get_my_list_rz");
      const data = res.data || [];
      const experience = data.map((it, index) => {
        return {
          ...it,
          date: [it.start_time, it.end_time]
        };
      });
      this.experience = experience;
    },
    rz(row)
    {
      this.drawer.row=row;
      if(window.innerWidth<800)
      {
        this.drawer.direction="btt";
        this.drawer.size="90%";
      }
      else
      {
        this.drawer.direction="rtl";
        this.drawer.size="700px";
      }
      this.drawer.drawer=true;
    },
    sign(){
      if (this.deviceType.ios || this.deviceType.android) {
        window.location.href = "proginn://my_resume";
      }
      else
      {
        window.location.href = "/sign/new";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.info {
  header .el-icon-plus {
    font-size: 18px;
  }
  .show {
    word-break: break-all;
    .desc{
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 15px;
    }
    &:last-of-type {
      border: 0;
    }
    h4 {
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 44px;
      font-size: 14px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: #308eff;
      line-height: 44px;
      span {
        margin-right: 20px;
      }
      button {
        position: absolute;
        right: 0;
      }
    }
    p {
      margin-top: 8px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 24px;
    }
  }
  .empty {
    margin: 112px auto 104px;
    font-size: 27px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: rgba(205, 205, 205, 1);
    line-height: 38px;
  }
}

@media screen and (min-width: 960px) {

}
</style>