smart-switch-ui/src/views/ss/riskInfo/components/RiskInfoVerifyDialog.vue

<template>
  <el-drawer :visible.sync="visible" size="1300px" :with-header="false" @open="onOpen">
    <el-form label-position="top" :model="detail" ref="form" :rules="rules" class="app-container" v-loading="loading">
      <el-row :gutter="16">
        <el-col :span="16">
          <el-scrollbar style="height: calc(100vh - 40px);">
            <el-row style="padding: 1em;overflow: hidden">
              <form-col :span="span * 2" label="风控信息">
                <el-descriptions border :column="2">
                  <el-descriptions-item label="风控用户">
                    {{detail.userName | defaultValue}}
                  </el-descriptions-item>
                  <el-descriptions-item label="风控类型">
                    <dict-tag :value="detail.riskType" :options="dict.type.risk_type"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="风控原因">
                    {{detail.riskReason | defaultValue}}
                  </el-descriptions-item>
                  <el-descriptions-item label="所需材料">
                    <dict-tag :value="detail.riskSubmitType" :options="dict.type.risk_submit_type"/>
                  </el-descriptions-item>
                </el-descriptions>
              </form-col>
              <form-col :span="span * 2" label="实名认证" v-if="detail.riskSubmitType.includes(RiskSubmitType.REAL_NAME)">
                <el-descriptions border>
                  <el-descriptions-item label="姓名">{{detail.realName | defaultValue}}</el-descriptions-item>
                  <el-descriptions-item label="身份证">{{detail.realIdCard | defaultValue}}</el-descriptions-item>
                  <el-descriptions-item label="人脸图片">
                    <image-preview :src="detail.realFace" :width="50" :height="50"/>
                  </el-descriptions-item>
                </el-descriptions>
              </form-col>
              <form-col :span="span" label="身份证正面" v-if="detail.riskSubmitType.includes(RiskSubmitType.ID_CARD)">
                <image-preview :src="detail.idCardFront" width="90%" :height="200"/>
              </form-col>
              <form-col :span="span" label="身份证反面" v-if="detail.riskSubmitType.includes(RiskSubmitType.ID_CARD)">
                <image-preview :src="detail.idCardBack" width="90%" :height="200"/>
              </form-col>
              <form-col :span="span" label="手持身份证" v-if="detail.riskSubmitType.includes(RiskSubmitType.ID_CARD_HAND)">
                <image-preview :src="detail.idCardHand" width="90%" :height="200"/>
              </form-col>
              <form-col :span="span" label="营业执照" v-if="detail.riskSubmitType.includes(RiskSubmitType.BUSINESS_LICENCE)">
                <image-preview :src="detail.businessLicence" width="90%" :height="200"/>
              </form-col>
              <form-col :span="span * 2" label="使用场景视频" v-if="detail.riskSubmitType.includes(RiskSubmitType.VIDEO)">
                <video :src="detail.video" width="100%" height="300px" style="background-color:#000000;" controls/>
              </form-col>
              <form-col :span="span * 2" label="责任视频" v-if="detail.riskSubmitType.includes(RiskSubmitType.DUTY_VIDEO)">
                <video :src="detail.dutyVideo" width="100%" height="300px" style="background-color:#000000;" controls/>
                视频提示：{{detail.riskVideoWords | defaultValue}}
              </form-col>
            </el-row>
          </el-scrollbar>
        </el-col>
        <el-col :span="8">
          <el-card>
            <el-row>
              <form-col label="审核意见" prop="verifyRemark">
                <el-input
                  v-model="detail.verifyRemark"
                  placeholder="请输入审核意见"
                  type="textarea"
                  show-word-limit
                  maxlength="200"
                  :autosize="{minRows: 3, maxRows: 10}"
                />
              </form-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-button type="success" plain icon="el-icon-check" @click="onVerify(true)">通过</el-button>
              <el-button type="danger" plain icon="el-icon-close" @click="onVerify(false)">驳回</el-button>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
  </el-drawer>
</template>

<script>
import { getRiskInfo, verifyRiskInfo } from '@/api/ss/riskInfo'
import VideoPreview from '@/components/VideoPreview/index.vue'
import { RiskSubmitType } from '@/utils/constants'
import UserLink from '@/components/Business/SmUser/UserLink.vue'

export default {
  name: "RiskInfoVerifyDialog",
  dicts: ['risk_submit_type', 'risk_type'],
  components: { UserLink, VideoPreview },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    infoId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      detail: {
        riskSubmitType: []
      },
      span: 12,
      rules: {
        verifyRemark: [
          { required: true, message: '请输入审核意见', trigger: 'blur' }
        ]
      },
      loading: false,
    }
  },
  computed: {
    RiskSubmitType() {
      return RiskSubmitType
    },
    visible: {
      set(val) {
        this.$emit('update:show', val);
      },
      get() {
        return this.show;
      }
    }
  },
  methods: {
    onOpen() {
      this.getDetail();
    },
    getDetail() {
      this.loading = true;
      getRiskInfo(this.infoId).then(res => {
        this.detail = res.data;
      }).finally(() => {
        this.loading = false;
      })
    },
    onVerify(pass) {
      this.$confirm(`确定要${pass ? '通过' : '驳回'}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(c => {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.loading = true;
            verifyRiskInfo({infoId: this.detail.infoId, pass: pass, verifyRemark: this.detail.verifyRemark}).then(res => {
              if (res.code === 200) {
                this.$modal.msgSuccess("操作成功");
                this.visible = false;
                this.$emit('success');
              }
            }).finally(() => {
              this.loading = false;
            })
          }
        })
      })

    }
  }
}
</script>