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

<template>
  <div v-if="authentication" class="ml-3">
    <div>
      <v-icon color="primary">mdi-check-circle</v-icon>
      已通过实名认证
    </div>
    <div class="box mt-5">
      <div>姓名：史迪奇</div>
      <div class="mt-5">身份证号：4******************8</div>
    </div>
    <v-btn color="primary" class="half-button mt-5" @click="authentication = !authentication">解绑</v-btn>
  </div>
  <div v-else>
    <div class="topTip">为了您在平台有更好的操作体验，请进行实名认证</div>
    <div class="d-flex align-center justify-center flex-column">
      <CtForm ref="CtFormRef" :items="formItems" style="width: 300px;">
        <template #idCardImg1="{ item }">
          <div class="color-666 font-size-14 mr-5">{{ item.label }}</div>
          <Img @success="val => item.value = val" @delete="item.value = ''"></Img>
        </template>
        <template #idCardImg2="{ item }">
          <div class="mt-5 d-flex">
            <div class="color-666 font-size-14 mr-5">{{ item.label }}</div>
            <Img @success="val => item.value = val" @delete="item.value = ''"></Img>
          </div>
        </template>
      </CtForm>
      <v-btn class="buttons mt-5" color="primary" @click="authentication = !authentication">{{ $t('common.submit') }}</v-btn>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'authentication-page'})
import { ref } from 'vue'

// 是否已实名
const authentication = ref(true)
const CtFormRef = ref()

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

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