ucard-back-front/src/views/components/KycAuth/index.vue

<template>
  <div>
    <div v-if="dialogInfoTradingAdd" class="crm_verified_info_mask" @click="close"></div>
    <div id="TradingDetailedInfoAdd" class="InfoBox" :class="{ active: dialogInfoTradingAdd }">
      <div class="header">
        <div>
          <span class="title">{{ $t('Ucard.KycAuth.b2') }}</span>
        </div>
        <span class="close crm-cursor" @click="close"
          ><el-icon><Close /></el-icon
        ></span>
      </div>
      <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
        <el-form-item :label="$t('Ucard.KycAuth.item8') + '：'">
          <el-input v-model="form.cId" disabled placeholder=""></el-input>
        </el-form-item>
        <el-form-item :label="$t('Ucard.KycAuth.item9') + '：'">
          <el-input
            v-model="form.lastName"
            disabled
            placeholder="姓"
            style="width: 45%; display: inline-block"
          ></el-input>
          <el-input
            v-model="form.firstName"
            disabled
            placeholder="名"
            style="width: 45%; display: inline-block; margin-left: 10px"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('Ucard.KycAuth.item10') + '：'">
          <el-input v-model="form.email" disabled placeholder=""></el-input>
        </el-form-item>
        <el-form-item :label="$t('Ucard.KycAuth.item11') + '：'">
          <el-input v-model="form.mobile" disabled placeholder=""></el-input>
        </el-form-item>
        <!-- <el-form-item prop="uniqueId" :label="$t('Ucard.KycAuth.item7') + '：'">
          <el-input
            disabled
            size="small"
            v-model="form.uniqueId"
            :placeholder="$t('Placeholder.Input')"
          ></el-input>
        </el-form-item> -->
        <el-form-item prop="cardTypeId" :label="$t('Ucard.KycAuth.item1') + '：'">
          <el-select v-model="form.cardTypeId" size="small" :placeholder="$t('Placeholder.Choose')">
            <el-option
              v-for="(item, index) in currencyList"
              :key="index"
              :value="item.cardTypeId"
              :label="item.cardName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span class="btn crm-cursor" @click="confirm"
        ><span>{{ $t('Btn.Confirm') }}</span></span
      >
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive, watch, computed, inject } from 'vue'
  import Config from '@/config/index'
  import Service from '@/service/ucard'
  import { useI18n } from 'vue-i18n'

  const { t } = useI18n()
  const { Code } = Config
  const pigeon = inject('pigeon')
  const Session = inject('session')

  // Props
  const props = defineProps({
    dialogInfoTradingAdd: {
      type: Boolean,
      default: false,
    },
    addType: {
      default: '',
    },
    editor: {
      default: '',
    },
    myInfo: {
      default: '',
    },
    formList: {
      default: '',
    },
  })

  // Emits
  const emit = defineEmits(['closeAdd', 'confirmToReload'])

  // Refs
  const formRef = ref(null)
  const loading = ref(false)
  const currencyList = ref([])
  const isOk = ref(false)

  // Reactive data
  const form = reactive({})
  const pagerInfo = reactive({ row: 10, current: 1, pageTotal: 0, rowTotal: 0 })
  const received = reactive({ receivedCurrency: '', receivedAmount: '', exchangeRate: '' })

  // Rules
  const rules = reactive({
    uniqueId: [
      {
        required: true,
        message: t('Placeholder.Input'),
        trigger: 'blur',
      },
    ],
    cardTypeId: [
      {
        required: true,
        message: t('Placeholder.Input'),
        trigger: 'blur',
      },
    ],
  })

  // Computed
  const AccessToken = computed(() => {
    return {
      'Access-Token': Session.Get('access_token'),
    }
  })

  // Methods
  // 提交KYC认证
  const kycSubmit = async () => {
    loading.value = true
    try {
      let res = await Service.kycSubmit(form)
      if (res.code == Code.StatusOK) {
        pigeon.MessageOK(t('Msg.SearchSuccess'))
        searchFunc()
      } else {
        pigeon.MessageError(res.msg)
      }
    } finally {
      loading.value = false
    }
  }

  // 获取卡片类型列表
  const cardTypesList = async () => {
    let res = await Service.cardTypesList({
      page: {
        current: pagerInfo.current,
        row: pagerInfo.row,
      },
    })
    if (res.code == Code.StatusOK) {
      currencyList.value = res.data
    } else {
      pigeon.MessageError(res.msg)
    }
  }

  //关闭
  const close = () => {
    emit('closeAdd', false)
  }

  //提交成功后回调
  const confirmToReload = () => {
    emit('confirmToReload', true)
  }

  //提交
  const confirm = () => {
    formRef.value.validate((valid) => {
      if (valid) {
        kycSubmit()
      } else {
        return false
      }
    })
  }

  const searchFunc = () => {
    // 这里需要根据实际情况实现搜索功能
  }

  // Watchers
  watch(
    () => props.formList,
    (form) => {
      Object.assign(form, {
        uniqueId: form.uniqueId || form.cId || '',
        lastName: form.lastName || '',
        firstName: form.firstName || '',
        email: form.email || '',
        mobile: form.mobile || form.phone || '',
        signaturePhoto: '',
        currency: '',
        activePhoto: '',
      })
    }
  )

  watch(
    () => props.addType,
    () => {
      cardTypesList()
    }
  )
</script>

<style lang="scss" scoped>
  .crm_verified_info_mask {
    position: fixed;
    z-index: 9999 !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
  }
  .InfoBox {
    width: 450px;
    height: 100%;
    padding: 15px 0;
    border-radius: 2px;
    box-sizing: border-box;
    box-shadow: 0px 3px 5px 0px rgba(49, 49, 49, 0.35);
    position: fixed;
    background-color: #ffffff;
    z-index: 10000 !important;
    overflow: hidden;
    overflow-y: auto;
    top: 0;
    right: -455px;
    transition: all 0.6s;
  }
  .InfoBox.active {
    right: 0;
  }
  .imgs {
    width: 100%;
    height: 100%;
    position: relative;
    .el-upload-list__item-actions {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
</style>