boss/pages/main/index/solution_detail.vue

<template>
  <div v-if="detailData">
    <el-row>
      <el-col :span="24">企业认证审核</el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="16">
        <el-image
          style="width: 50px; height: 50px"
          :src="detailData.verifying && detailData.verifying.icon_url"
          :fit="fit"></el-image>
      </el-col>
      <el-col :span="8">
        <el-button size="mini" @click="userinfo(detailData.verifying.uid)" type="info">用户信息</el-button>
        <el-button size="mini" @click="woinfo(detailData.verifying.uid)" type="info">主页</el-button>
        <el-button size="mini" @click="returnPage()" type="info">返回</el-button>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="19">
        企业认证
      </el-col>
      <el-col :span="5">
        <el-button size="mini">{{this.company_verify_status}}</el-button>
        <el-link @click="companyVerifyStatus(detailData.verifying.uid)" type="primary">查看详情</el-link>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="19">
        基本信息
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="2">
        <el-image
          style="width: 50px; height: 50px"
          :src="detailData.companyInfo.base.logo"
          :fit="fit"></el-image>
      </el-col>
      <el-col :span="22">
        {{detailData.companyInfo.applyInfo.name}}
        <br>
      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="2">
        企业联系人
      </el-col>
      <el-col :span="22">

      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="2">
        联系方式
      </el-col>
      <el-col :span="22">
        {{detailData.companyInfo.applyInfo.phone}}
      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="2">
        职位
      </el-col>
      <el-col :span="22">

      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="2">
        企业介绍
      </el-col>
      <el-col :span="22">
        {{detailData.companyInfo.description}}
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
      <el-row style="padding: 5px">
        该企业已认证解决方案
      </el-row>
      <el-row v-for="item in detailData.verifyList" :key="item.id"  style="padding: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
        <el-col :span="3">
          <el-image
            style="width: 100px; height: 100px"
            :src="item.images"
            :fit="fit"></el-image>
        </el-col>
        <el-col :span="15">
          <h3>{{item.title}}</h3>
          <br>
          <p>方案简介:{{item.description}}</p>
          <p>成功案例:{{item.successful_case_list}}</p>
        </el-col>
        <el-col :span="6">
          <p>当前状态 <el-button size="mini">{{item.status}}</el-button></p>
          <br>
          <p>
            修改状态
            <el-button size="mini" @click="updateStatus(item)" type="info">不通过 </el-button>
          </p>
        </el-col>
      </el-row>
    </el-row>
    <br>
    <div v-if="detailData.verifying.id">

      <el-row style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
      >
        <el-row style="padding: 5px">
          当前申请认证解决方案
        </el-row>
        <el-row style="padding: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
          <el-col :span="3">
            <el-image
              style="width: 100px; height: 100px"
              :src="detailData.verifying.images"
              :fit="fit"></el-image>
          </el-col>
          <el-col :span="15">
            <h3>{{detailData.verifying.title}}</h3>
            <br>
            <p>方案简介:{{detailData.verifying.description}}</p>
            <p>成功案例:{{detailData.verifying.successful_case_list}}</p>
          </el-col>
          <el-col :span="6">
            <p>当前状态:{{detailData.verifying.status}}</p>
          </el-col>
        </el-row>
      </el-row>
      <br>
      <el-row>
        <el-radio @change="refuse()" v-model="radio" label="3">拒绝</el-radio>
        <el-radio @change="pass()" v-model="radio" label="2">通过</el-radio>
      </el-row>
      <br>
      <el-row>
        <h4 style="border-bottom: solid 1px brown">邮件内容</h4>
        <el-row v-if="show" id="emailRefuseInfo">
          <p>Hi,{{detailData.verifying.nickname}},您好!</p>
          <p>谢谢您的申请</p>
          <p>您的解决方案 {{detailData.verifying.title}} 暂时不符合我们的认证标准,主要原因是:</p>
          <el-input v-model="reason" placeholder="请输入内容"></el-input>
          <p>您可以满足以上要求后,继续申请认证.</p>
          <p>谢谢您的支持!</p>
          <p>程序员客栈敬上:)</p>
        </el-row>
        <el-row v-else id="emailPassInfo">
          <p>Hi,{{detailData.verifying.nickname}},您好!</p>
          <p>恭喜您的解决方案 {{detailData.verifying.title}} 通过审核！</p>
          <p>谢谢您的支持!</p>
          <p>程序员客栈敬上:)</p>
        </el-row>
        <br>
        <el-button @click="sendEmail(detailData.verifying)" size="mini" type="primary">确定并发送邮件</el-button>
      </el-row>
    </div>
    <br>
    <el-row style="border-bottom: solid 3px green">
      审核记录
    </el-row>
    <br>
    <el-row v-for="item in detailData.audit_record" :key="item.id" style=" box-shadow: 0 2px 4px #ccc, 0 0 6px #ccc">
      <el-col :span="18" ><h4 style="border-bottom: solid 1px brown;padding: 10px">{{item.status_name}}</h4></el-col>
      <el-col :span="6" ><p style="border-bottom: solid 1px brown;padding: 10px">{{item.nickname}} {{item.audit_time}}</p></el-col>
      <p style="padding: 10px">邮件内容</p>
      <div v-html="item.audit_data" style="background-color: #ccc;padding: 10px">
        {{item.audit_data}}
      </div>
    </el-row>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                id: '',
                detailData: '',
                radio: '3',
                reason:'',
                company_verify_status: '未认证',
                show:true
            }
        },
        mounted() {
            this.id = this.$route.query.id
            this.getDetail()
        },
        methods: {
            async getDetail() {
                const id = this.id;
                const page = 1;
                const data = {
                    id,
                    page
                }
                let res = await this.$post("/api/admin/kaifawu/getDetail", data);
                if (res && res.status === 1) {
                    res.data.verifying = res.data.verifying || {}
                    this.detailData = res.data
                    switch(this.detailData.companyInfo.applyInfo.status){
                        case '0':
                            this.company_verify_status = '未申请';
                            break;
                        case '1':
                            this.company_verify_status = '申请中';
                            break;
                        case '2':
                            this.company_verify_status = '通过';
                            break;
                        case '3':
                            this.company_verify_status = '拒绝';
                            break;
                    }

                }
            },
            async userinfo(uid){
                let url = window.location.href;
                if(url.indexOf('dev')!=-1){
                    window.open(`https://dev.test.proginn.com/rooter/user/${uid}`)
                } else if(url.indexOf('local')!=-1){
                    window.open(`http://local.proginn.com/rooter/user/${uid}`)
                } else {
                    window.open(`https://proginn.com/rooter/user/${uid}`)
                }
            },
            async woinfo(uid){
                let url = window.location.href;
                if(url.indexOf('dev')!=-1){
                    window.open(`https://dev.test.proginn.com/wo/${uid}`)
                } else if(url.indexOf('local')!=-1){
                    window.open(`http://local.proginn.com/wo/${uid}`)
                } else {
                    window.open(`https://proginn.com/wo/${uid}`)
                }
            },
            async returnPage(){
                let url = window.location.href;
                window.open(`/main/solution/`,'_self')
            },
            async companyVerifyStatus(uid){
                let url = window.location.href;
                if(url.indexOf('dev')!=-1){
                    window.open(`https://dev.test.proginn.com/rooter/companyVerifyAuditItem?uid=${uid}`)
                } else if(url.indexOf('local')!=-1){
                    window.open(`http://local.proginn.com/rooter/companyVerifyAuditItem?uid=${uid}`)
                } else {
                    window.open(`https://proginn.com/rooter/companyVerifyAuditItem?uid=${uid}`)
                }
            },
            async updateStatus(item){
                const result = 3;
                const auditData = '您的解决方案'+item.title+'审核被拒绝!';
                const data ={
                    'id':item.id,
                    result,
                    auditData
                };
                let res = await this.$post("/api/admin/kaifawu/auditProvider", data);
                if (res && res.status === 1){
                    this.$message({
                        message: '修改成功!',
                        type: 'success'
                    });
                    this.getDetail()
                }
            },
            async sendEmail(item){
                const result = this.radio;
                let auditData = '';
                auditData = this.reason;
                if(this.show&&(this.reason.length==0)){
                    this.$message({
                        message: '请输入拒绝原因!',
                        type: 'warning'
                    });
                    return false;
                }

                const data ={
                    'id':item.id,
                    result,
                    auditData
                };

                let res = await this.$post("/api/admin/kaifawu/auditProvider", data);
                if (res && res.status === 1){
                    this.$message({
                        message: '修改成功!',
                        type: 'success'
                    });
                    this.getDetail()
                }
            },
            async refuse(){
              this.show = true;
            },
            async pass(){
                this.show = false;
            },
        }
    }
</script>

<style lang="scss" scoped>
  .header {
    display: flex;
  }
  .title-wrapper {
    display: flex;
    align-items: center;
  }
  .title {
    line-height: 27px;
    font-weight: bold;
    font-size: 18px;
    color: #101010;
  }
  .status {
    margin-left: 6px;
    line-height: 20px;
    font-size: 14px;
  }
  .salary {
    margin-top: 13px;
    line-height: 24px;
    font-size: 16px;
    color: #101010;
  }
  .skill {
    margin-top: 8px;
    line-height: 24px;
    font-size: 16px;
    color: #101010;
  }
  .experience {
    margin-top: 8px;
    line-height: 24px;
    font-size: 16px;
    color: #101010;
  }
  .owner-wrapper {
    margin-left: 100px;
    text-align: center;
  }
  .owner-img {
    width: 53px;
    height: 53px;
    border-radius: 50%;
  }
  .owner-name {
    margin-top: 8px;
    line-height: 20px;
    font-size: 14px;
    color: #3F51B5;
  }
  .description-wrapper {
    margin-top: 22px;
  }
  .description-title {
    line-height: 27px;
    font-weight: bold;
    font-size: 18px;
    color: #101010;
  }
  .description-content {
    margin-top: 16px;
    line-height: 24px;
    font-size: 16px;
    color: #101010;
  }
</style>