menduner/src/views/recruit/enterprise/informationManagement/informationSettingsComponents/authentication.vue

<template>
  <div v-if="authentication" class="ml-3">
    <div class="topTip" v-if="info.status === '0'">审核中，请耐心等待</div>
    <div v-if="info.status === '1'">
      <v-icon color="primary">mdi-check-circle</v-icon>
      已通过实名认证
    </div>
    <div class="topTip" v-if="info.status === '2'">
      认证已被驳回，原因：{{ info.reason }}
    </div>
    <div class="box mt-5">
      <div>姓名：{{ info.name }}</div>
      <div class="my-5">身份证号：{{ maskNumber(info.identityNo) }}</div>
      <div class="d-flex" v-if="info.status !== '1'">
        <span>国徽照</span>
        <div class="ml-10" style="width: 120px; height: 120px;">
          <v-img :src="info.backUrl" width="120" height="120" rounded alt=""/>
        </div>
      </div>
      <div class="d-flex mt-5" v-if="info.status !== '1'">
        <span>人像照</span>
        <div class="ml-10" style="width: 120px; height: 120px;">
          <v-img :src="info.frontUrl" width="120" height="120" rounded alt=""/>
        </div>
      </div>
    </div>
    <v-btn v-if="info.status === '2'" class="buttons mt-5" color="primary" @click="handleAgain">重新认证</v-btn>
  </div>

  <div v-else>
    <div class="topTip" v-if="info.status !== '2'">为了您在平台有更好的操作体验，请进行实名认证</div>
    <div class="d-flex align-center justify-center flex-column mt-5">
      <CtForm ref="CtFormRef" :items="formItems" style="width: 300px;">
        <template #backUrl="{ item }">
          <div class="color-666 font-size-14 mr-5">{{ item.label }}</div>
          <Img :value="item.value" @success="val => item.value = val" @delete="item.value = ''"></Img>
        </template>
        <template #frontUrl="{ item }">
          <div class="mt-5 d-flex">
            <div class="color-666 font-size-14 mr-5">{{ item.label }}</div>
            <Img :value="item.value" @success="val => item.value = val" @delete="item.value = ''"></Img>
          </div>
        </template>
      </CtForm>
      <v-btn class="buttons mt-5" color="primary" @click="handleSave">{{ $t('common.submit') }}</v-btn>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'authentication-page'})
import { ref } from 'vue'
import { isValidIdCard18, maskNumber } from '@/utils/validate'
import { getEnterpriseAuth, saveEnterpriseAuth } from '@/api/recruit/enterprise/information'
import Snackbar from '@/plugins/snackbar'

// 是否已实名
const info = ref({})
const authentication = ref(false)
const CtFormRef = ref()
const query = ref({})

const formItems = ref({
  options: [
    {
      type: 'text',
      key: 'name',
      value: '',
      label: '真实姓名 *',
      rules: [v => !!v || '请输入您的真实姓名']
    },
    {
      type: 'text',
      key: 'identityNo',
      value: '',
      label: '身份证号码 *',
      rules: [
        value => {
          if (!value) {
            return '请输入您的身份证号码'
          }
          return true
        },
        value => {
          if (!isValidIdCard18(value)) {
            return '请输入正确的身份证号码'
          }
          return true
        }
      ]
    },
    {
      slotName: 'backUrl',
      key: 'backUrl',
      value: '',
      label: '身份证-国徽照 *',
      rules: [v => !!v || '请上传']
    },
    {
      key: 'frontUrl',
      slotName: 'frontUrl',
      value: '',
      label: '身份证-人像照 *',
      rules: [v => !!v || '请上传']
    }
  ]
})

const getData = async () => {
  const data = await getEnterpriseAuth()
  if (!data) return authentication.value = false
  authentication.value = true
  info.value = data
}
getData()

const handleAgain = () => {
  formItems.value.options.forEach(item => {
    item.value = info.value[item.key]
  })
  query.value.id = info.value.id
  authentication.value = false
}

// 提交实名认证
const handleSave = async () => {
  const { valid } = await CtFormRef.value.formRef.validate()
  if (!valid) return
  formItems.value.options.forEach(item => {
    query.value[item.key] = item.value
  })
  if (!query.value.backUrl || !query.value.frontUrl) return Snackbar.warning('请上传您的身份证照片')

  await saveEnterpriseAuth(query.value)
  Snackbar.success('提交成功')
  query.value = {}
  getData()
}
</script>

<style scoped lang="scss">
.topTip {
  background-color: #fff6ec;
  color: var(--v-error-base);
  padding: 12px 20px;
  margin: 10px 0 40px;
  font-size: 14px;
}
.box {
  background-color: #f7f8fa;
  border-radius: 6px;
  color: var(--color-666);
  font-size: 14px;
  padding: 25px;
}
.upload {
  width: 120px;
  height: 120px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
</style>