liveh5-nuxt/app/pages/realAuth/index.vue

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'
import {userUpdate} from "@/api/auth/index.js";
import {message} from '@/components/x-message/useMessage.js'
import detail from './components/detail.vue'
import {authStore} from "@/stores/auth/index.js";
const router = useRouter();
const route = useRoute();
const showPicker = ref(false);
const {userInfo}= authStore()
const birthdayDate = ref([])
const showBirthdayPicker = ref(false)
const minDate = new Date(1950, 0, 1)
const maxDate = new Date(2025, 12, 31)
const active=ref(0)
const { t } = useI18n()
const form=ref({
  idNum: "",
  realName: "",
  sex:'',
  birthDate:'',
  userExtend: {
    address: "",
    bankName: "",
    bankNo: ""
  }
})
const form1=ref({
  idNum:'',
  realName:''
})
const columns=ref([
  { text: t('realAuth.male'), value: 1 },
  { text: t('realAuth.female'), value: 2 },
])
const onConfirm = ({ selectedValues, selectedOptions }) => {
form.value.sex=selectedValues?.[0]
  showPicker.value = false
}
const onBirthdayConfirm = (value) => {
  form.value.birthDate=value.selectedValues.join('-')
  showBirthdayPicker.value = false
}

function isFormComplete(obj) {
  for (const key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      if (!isFormComplete(obj[key])) {
        return false;
      }
    } else if (obj[key] === "") {
      return false;
    }
  }
  return true;
}
const statusCode=ref(0)
const confirm=async ()=>{
  const thatForm=active.value===0?form1.value:form.value
  if (isFormComplete(thatForm)){
   const res=await userUpdate(thatForm)
    if (res.status===0){
      userInfo.value=res.data
      message.success('提交成功')
      statusCode.value=1
    }
  }else {
    message.error('请填写身份证相关信息')
  }
}

const goHome=()=>{
  router.push('/')
}
definePageMeta({
  title: '实名认证',
  i18n: 'realAuth.title',
})
</script>

<template>
  <div class="px-[31px] bg-[url('@/static/images/asdfsdd.png')] bg-cover w-100vw flex-grow-1 pt-[46px] relative flex flex-col">
    <van-tabs v-if="statusCode===0" v-model:active="active" animated swipeable>
      <van-tab :title="$t('realAuth.cnTab')" class="pt-[80px]">
        <template v-if="statusCode===0">
          <div class="text-[#BDBDBD] text-[16px] mb-[34px]">{{ $t('realAuth.cnTabDesc') }}</div>
          <div class="mb-[100px]">
            <div class="border-b-[1.7px] mt-[8px]">
              <van-field v-model="form1.idNum" :label="$t('realAuth.idCard')" clearable
                         :placeholder="$t('realAuth.idCardPlaceholder')"></van-field>
            </div>
            <div class="border-b-[1.7px] mt-[8px]">
              <van-field v-model="form1.realName" :label="$t('realAuth.name')" clearable :placeholder="$t('realAuth.namePlaceholder')"></van-field>
            </div>
          </div>
        </template>
      </van-tab>
      <van-tab :title="$t('realAuth.otherTab')" class="pt-[80px]">
        <div class="text-[#BDBDBD] text-[16px] mb-[34px]">{{ $t('realAuth.otherTabDesc') }}</div>
        <div class="mb-[100px]">
          <div class="border-b-[1.7px] mt-[8px]">
            <van-field :label="$t('realAuth.name')" clearable :placeholder="$t('realAuth.namePlaceholder')"></van-field>
          </div>
          <div class="border-b-[1.7px] mt-[8px]">
            <van-field :modelValue="columns.find(x=>x.value===form.sex)?.text" is-link readonly name="picker" :label="$t('realAuth.gender')"
              @click="showPicker = true" />
          </div>
          <div class="border-b-[1.7px] mt-[8px]">
            <van-field v-model="form.birthDate" is-link readonly name="birthdayPicker" :label="$t('realAuth.birthday')"
              :placeholder="$t('realAuth.birthdayPlaceholder')" @click="showBirthdayPicker = true" />

          </div>
          <div class="border-b-[1.7px] mt-[8px]">
            <van-field v-model="form.userExtend.address" :label="$t('realAuth.adress')" clearable
              :placeholder="$t('realAuth.adressPlaceholder')"></van-field>
          </div>
          <div class="border-b-[1.7px] mt-[8px]">
            <van-field v-model="form.userExtend.bankName" :label="$t('realAuth.bank')" clearable :placeholder="$t('realAuth.bankPlaceholder')"></van-field>
          </div>
          <div class="border-b-[1.7px] mt-[8px]">
            <van-field v-model="form.userExtend.bankNo" :label="$t('realAuth.bankCard')" clearable
              :placeholder="$t('realAuth.bankCardPlaceholder')"></van-field>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <van-tabs v-else-if="statusCode===1" v-model:active="active" animated swipeable>
      <van-tab :title="$t('realAuth.cnTab')" class="pt-[80px]">
        <detail :type="active"></detail>
      </van-tab>
      <van-tab :title="$t('realAuth.otherTab')" class="pt-[80px]">
        <detail :type="active"></detail>
      </van-tab>
    </van-tabs>
    <div class="flex justify-between" v-if="statusCode===0">
      <van-button style="width: 151px;height: 48px" color="#E9F1F8">
        <div class="text-#2B53AC text-16px">{{ $t('realAuth.cancel') }}</div>
      </van-button>
      <van-button @click="confirm" style="width: 151px;height: 48px" color="#2B53AC">
        <div class="text-#FFFFFF text-16px">{{ $t('realAuth.confirm') }}</div>
      </van-button>
    </div>
    <div v-else class="mt-auto pb-94px">
      <van-button color="#E9F1F8" @click="goHome" style="color: #2B53AC;font-weight: 600" block>去首页</van-button>
    </div>
    <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
      <van-picker :columns="columns"  @confirm="onConfirm" @cancel="showPicker = false" />
    </van-popup>
    <van-popup v-model:show="showBirthdayPicker" destroy-on-close position="bottom">
      <van-date-picker v-model="birthdayDate" :min-date="minDate" :max-date="maxDate"
        @cancel="showBirthdayPicker = false" @confirm="onBirthdayConfirm" />
    </van-popup>
  </div>
</template>

<style scoped>
:deep(.van-tabs__line) {
  height: 2px;
  width: 107px;
}

:deep(.van-cell) {
  padding-left: 0;
}
</style>