proginn-frontend/pages/frontend/skill_cert/dev_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">面试专业度（面试水平，面试态度）</div>
                            <el-select v-model="info.invite_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">技术专业度（技术水平）</div>
                            <el-select v-model="info.invite_skill" 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">对面试官进行评价</div>
                            <el-input v-model="info.inter_memo" show-word-limit maxlength="200"></el-input>
                        </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 {
    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: {},
        }
    },
    asyncData({
        app
    }) {
        return {
            mobile: app.$deviceType.isMobile(),
        }
    },
    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();
        }
    },
    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/dev_comment_add', {
                id: this.id,
                sign: this.sign,
                data: data
            });
            if (res.status === 1) {
                this.$message.success('操作成功！')
            }
        },
    }
}
</script>

<style lang="scss">
@import "@/assets/css/consult/create.scss";
.comment-main{
    background-color: white;
    margin:20px auto 30px;
    overflow: hidden;
  }
.comment-main{
    .el-select {
      width: 100%;
      // max-width: 925px;
       .el-input{
        width: 100%;
      }
    }
  }
  .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;
      }
    }

  }

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