boss/pages/main/index/dev_check_detail.vue

<template>
  <section id="dev_check_detail">
    <template v-if="detail">
      <section class="title-box" style="border-top: 0; margin-top: 0;padding-top: 0;">
        <h1>{{detail.name}}-认证审核</h1>
        <el-button :type="btnStatus">{{detail.status_name}}</el-button>
      </section>
      <section v-if="detail" class="info-box">
        <section class="info-left" @click="goUser">
          <img class="avator" :src="userinfo.icon_url" alt="icon_url" />
          <span>{{userinfo.nickname}}</span>
          <a :href="`${host}/wo/${detail.uid}`" style="margin-top: 20px;" target="_blank">个人主页</a>
        </section>
        <section class="info-right">
          <div>职业方向：{{userinfo.occupation_name}}</div>
          <div>手机号码：{{userinfo.login_mobile}}</div>
          <div>微信账号：{{userinfo.weixin}}</div>
          <div style="margin-top: 20px;">审核费用：{{detail.cert_fee}}{{detail.cert_fee_name}}</div>
          <div>
            证书情况：{{detail.cert_no ? `${detail.cert_status_name}(${detail.cert_name})` : '无'}}
            <a
              v-if="detail.cert_no"
              :href="`${host}/cert/no/${detail.cert_no}`"
              target="_blank"
            >查看证书</a>
          </div>
        </section>
      </section>
      <section class="pass-ctrl">
        <el-input placeholder="输入备注" style="width: 200px;" v-model="remind"></el-input>
        <el-button @click="clickSave">保存</el-button>
        <el-button v-if="detail.status === '2'" type="danger" @click="clickCancel">撤销证书</el-button>
      </section>
      <section class="email-box">
        <h2>邮件内容</h2>
        <section class="email">
          <section v-html="email"></section>
          <section style="margin: 10px 0;" @change="changeStatus">
            <el-radio v-model="radio" :label="3">拒绝</el-radio>
            <el-radio v-model="radio" :label="2">通过</el-radio>
          </section>
          <el-button type="primary" @click="sendEmail">确认并发送邮件</el-button>
        </section>
      </section>
      <section class="log-box">
        <h2>审核记录</h2>
        <section v-for="log of logs" :key="log.id" class="log">
          <template v-if="log.content">
            <h4>备注</h4>
            <div>{{log.content}}</div>
          </template>
          <template v-else>
            <div class="log-status">
              <span>{{log.status_name}}</span>
              <span class="log-date">{{log.audit_date}}</span>
            </div>
            <h4>邮件内容</h4>
            <div v-html="(log.audit_data || {}).email"></div>
          </template>
        </section>
      </section>
    </template>
  </section>
</template>

<script>
export default {
  data() {
    return {
      email: "",
      remind: "",
      // 3是拒绝, 2是通过
      radio: 3,
      detail: null
    };
  },
  computed: {
    btnStatus() {
      let status = "info";
      switch (this.detail.status) {
        case "2":
          status = "success";
          break;
        case "3":
          status = "danger";
          break;
      }
      return status;
    },
    host() {
      return `https://${
        this.detail.current_env === "test" ? "dev.test" : "www"
      }.proginn.com`;
    },
    userinfo() {
      return (this.detail || {}).user_info;
    },
    logs() {
      return this.detail.cert_audit_log;
    }
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    goUser() {
      location.href = `${this.host}/rooter/user/${this.detail.uid}`;
    },
    async updateEmail() {
      let { audit_type, uid } = this.detail,
        res = await this.$post("/api/admin/audit/getEmail", {
          audit_type,
          audit_status: this.radio,
          uid
        });
      this.email = res.data.replace(
        /\<input/,
        '<input style="height: 40px; width: 200px;"'
      );
    },
    changeStatus() {
      console.log(this.radio);
      this.updateEmail();
    },
    reload() {
      setTimeout(() => {
        location.reload();
      }, 1000);
    },
    async sendEmail() {
      let status = this.radio,
        ctrl = "rejectCert",
        body = { user_cert_id: this.detail.id },
        input = document.querySelector('[name="reason"]');
      if (status === 3 && !input.value) {
        this.$message("请输入备注信息");
        return;
      }
      if (status === 2) ctrl = "approveCert";
      else body.reason = input.value;
      let res = await this.$post(`/api/admin/audit/${ctrl}`, body);
      console.log(res);
      if (res.status > 0)
        this.$message({
          message: res.info,
          type: "success"
        });
      this.reload();
    },
    async clickCancel() {
      let res = await this.$post("/api/admin/audit/cancelCert", {
        user_cert_id: this.detail.id
      });
      if (res.status > 0)
        this.$message({
          message: res.info,
          type: "success"
        });
      this.reload();
    },
    async clickSave() {
      let detail = this.detail,
        res = await this.$post("/api/admin/common/add_note", {
          object_type: detail.admin_note_type,
          object_id: detail.uid,
          content: this.remind
        });
      if (res.status > 0)
        this.$message({
          message: res.info,
          type: "success"
        });
      this.reload();
    },
    async getDetail() {
      let res = await this.$post(
        "/api/admin/cert/getUserDetail",
        this.$route.query
      );
      this.detail = res.data;
      this.updateEmail();
    }
  }
};
</script>

<style scoped>
#dev_check_detail {
  padding: 20px;
}
#dev_check_detail > section {
  border-top: 2px solid #d8d8d8;
  margin-top: 20px;
  padding-top: 20px;
}
.avator {
  width: 120px;
  height: 120px;
  margin-right: 20px;
}
.title-box {
  display: flex;
  align-items: center;
}
.info-box {
  display: flex;
}
.info-left,
.info-right {
  display: flex;
  flex-direction: column;
}
.info-left {
  cursor: pointer;
}
.log {
  position: relative;
  border: 1px solid #d8d8d8;
  margin-top: 10px;
  padding: 10px;
}
.log-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border: 1px dashed #d8d8d8;
}
</style>