proginn-frontend/pages/frontend/skill_cert/invite_comment.vue

<template>
  <div class="comment-main" :class="{
    'comment-mobile':mobile
  }" >
    <el-container>
      <el-container>
        <el-container>
          <el-header>
            <el-steps align-center :active="active" style="padding-top: 20px" finish-status="success">
              <el-step title="申请认证"></el-step>
              <el-step title="审核通过"></el-step>
              <el-step title="对接面试"></el-step>
              <el-step title="面试评价"></el-step>
            </el-steps>
            <el-divider></el-divider>
          </el-header>
          <el-main>
            <el-form v-if="active==4" style="margin-top: 60px" ref="form"  label-width="0px">
              <el-form-item>
                <div class="title">
                  <p>对开发者【技术栈】进行评价</p>
                  <p>可从技术基础，技术深度和广度谈谈反馈和结论</p>
                </div>
                <el-input v-model="info.dev_kf" show-word-limit maxlength="200" ></el-input>
              </el-form-item>

              <el-form-item>
                <div class="title">
                  <p>【技术栈】掌握水平打分</p>
                  <p>1最低，5最高</p>
                </div>
                <el-select v-model="info.dev_study" placeholder="请选择分数">
                  <el-option
                    v-for="item in fenshu"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <div class="title">
                    <p>对开发者【经验/项目经历】进行评价</p>
                    <p>可从开发年限，项目经验和管理/主导经验谈谈反馈和结论</p>
                </div>
                <el-input v-model="info.dev_skill" show-word-limit maxlength="200" ></el-input>
              </el-form-item>

              <el-form-item>
                <div class="title">
                  <p>【经验/项目】工程能力打分</p>
                  <p>1最低，5最高</p>
                </div>
                <el-select v-model="info.dev_skill_base" placeholder="请选择分数">
                  <el-option
                    v-for="item in fenshu"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <div class="title">
                  <p>对开发者【整体映像】进行评价</p>
                  <p>可从学习能力，交流难度，整体表现进行评价</p>
                </div>
                <el-input v-model="info.dev_memo" show-word-limit maxlength="200" ></el-input>
              </el-form-item>

              <el-form-item>
                <div class="title">
                  <p>【整体映像】非技术能力打分</p>
                  <p>1最低，5最高</p>
                 </div>
                <el-select v-model="info.dev_experience" placeholder="请选择分数">
                  <el-option
                    v-for="item in fenshu"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <div class="title">
                  <p>最终定级</p>
                  <p>评级标准链接：https://proginn.feishu.cn/docs/doccnFJSsH0KZ9cTfQNpSRrZ4Of</p>
                </div>
                <el-radio v-model="info.level" label="1">技术1级：特定场景(包括低代码工具，二次开发)或某一小模块下，能独立开发</el-radio><br/>
                <el-radio v-model="info.level" label="2">技术2级：垂直领域上，熟练开发常见应用</el-radio><br/>
                <el-radio v-model="info.level" label="3">技术3级：垂直领域上，解决较复杂问题，独当一面</el-radio><br/>
                <el-radio v-model="info.level" label="4">技术4级：垂直领域上，能解决绝大部分问题；有大项目经验及一定的技术广度；</el-radio><br/>
                <el-radio v-model="info.level" label="5">技术5级：垂直领域的专家，主导过大型项目，能从产品架构上去考虑问题</el-radio><br/>
                <el-radio v-model="info.level" label="6">技术6级：更深的架构能力，更高的前瞻性，行业内丰富的经验或垂直领域的更高级专家</el-radio><br/>
                <el-radio v-model="info.level" label="0">技术0级【慎选】：完全不能独立开发</el-radio><br/>
              </el-form-item>

              <el-form-item>
                <el-button @click="submitData" type="primary">确认提交</el-button>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import { mapState } from "vuex";
  export default {
    layout: "default_mobile_header_no_jump",
    head: {
      title: '技术认证面试回访',
    },
    data () {
      return {
        fenshu: [{
          value: '1',
          label: '1分'
        }, {
          value: '2',
          label: '2分'
        }, {
          value: '3',
          label: '3分'
        }, {
          value: '4',
          label: '4分'
        }, {
          value: '5',
          label: '5分'
        }],
        active:4,
        id:0,
        sign:"",
        info:{},
      }
    },
    mounted () {
      var id = this.$route.query.id ? this.$route.query.id : 0;
      var sign = this.$route.query.sign ? this.$route.query.sign : "";
      this.id=id;
      this.sign=sign;
      if (id!=0 && sign!="") {
        this.getDetail();
      }
    },
    asyncData({app}) {
    return {
      mobile: app.$deviceType.isMobile(),
    }
  },
    methods: {
      async getDetail() {
        let res=await this.$axios.$post('/uapi/cert/invite_comment', {id:this.id,sign:this.sign});
        if (res.status === 1) {
          this.info=res.data.info;
        }
      },
      async submitData() {
        var data=JSON.stringify(this.info);
        let res=await this.$axios.$post('/uapi/cert/invite_comment_add', {id:this.id,sign:this.sign,data:data});
        if (res.status === 1) {
          this.$message.success('操作成功！')
        }
      },
    }
  }
</script>

<style scope lang="scss">
  @import "@/assets/css/consult/create.scss";

  .comment-main{
    background-color: white;
    margin:20px auto 30px;
    overflow: hidden;
  }

  .comment-mobile{
    width:100%;
    overflow: hidden;
    .title{
      word-break: break-all;
      line-height: 1.5;
      margin-bottom: 20px;
    }
    .el-radio__label{
      word-break: break-all;
    }
    .label-tips{
      max-width: 100%;
      width: 100%;
      display: block;
      word-break: break-all;
    }


    .el-radio{
      display: block;
      overflow: hidden;
      .el-radio__input{
        float: left;
      }
      .el-radio__label{
        margin-left: 16px;
        display: block;
        white-space: normal;
        line-height: 1.5;
        position: relative;
        top: -3px;
      }
    }

  }
  .comment-main{
    .el-select {
      width: 100%;
      // max-width: 925px;
       .el-input{
        width: 100%;
      }
    }

    .title{
        p{
          // line-height:1.5;
        }
        p:nth-of-type(1){
          font-size: 14px;
          color:#000;
        }
        p:nth-of-type(2){
          font-size: 13px;
          color:#666;
        }
      }
  }

  .common-upload {
    display: flex;
    align-items: end;
    .look-img {
      margin-left: 14px;
      .text {
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #308eff;
        cursor: pointer;
      }
      .text-hover:hover {
        position: relative;
        .img {
          display: block;
        }
      }
      .img {
        background: #fff;
        border: 1px solid #e0e5ed;
        box-shadow: 0px 2px 20px 0px rgba(22,40,63,0.15);
        border-radius: 10px;
        text-align: center;
        position: relative;
        position: absolute;
        top: -120px;
        left: 0;
        width: 300px;
        height: 120px;
        display: none;
        transition: all ease .3s;
        .active-img2 {
          width: 234px;
          height: 71px;
          background-size: cover;
          overflow: hidden;
          margin-top: 24px;
        }
        .active-img1 {
          width: 262px;
          height: 78px;
          background-size: cover;
          overflow: hidden;
          margin-top: 22px;
        }
      }
      .img:after {
        content: '';
        width: 0;
        height: 0;
        border-right: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-top: 10px solid #e0e5ed;
        border-left: 10px solid transparent;
        position: absolute;
        left: 24px;
        bottom: -20px;
      }
      .img:before {
        content: '';
        width: 0;
        height: 0;
        border-right: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-top: 9px solid #fff;
        border-left: 9px solid transparent;
        position: absolute;
        left: 25px;
        bottom: -18px;
        z-index: 1;
      }
    }
  }
</style>