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";
import XVanDate from '@/components/x-van-date/index.vue'
import XVanSelect from '@/components/x-van-select/index.vue'
const router = useRouter();
const { locale } = useI18n()
const {userInfo}= authStore()
const active=ref(locale.value==='zh-CN'?0:1)
const { t } = useI18n()
const form=ref({
  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 },
])
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
  thatForm.userExtend.isMainland=active.value===0?1:0
  if (isFormComplete(thatForm)){
   const res=await userUpdate(thatForm)
    if (res.status===0){
      userInfo.value=res.data
      message.success(t('realAuth.success_mess'))
      statusCode.value=1
    }
  }else {
    message.error(t('realAuth.cnTabDesc'))
  }
}

const goHome=()=>{
  router.push('/')
}
definePageMeta({
  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 v-model="form.realName" :label="$t('realAuth.name')" clearable :placeholder="$t('realAuth.namePlaceholder')"></van-field>
          </div>
          <div class="border-b-[1.7px] mt-[8px]">
            <x-van-select v-model="form.sex" :placeholder="$t('realAuth.text1')" :label="$t('realAuth.gender')" :columns="columns"/>
          </div>
          <div class="border-b-[1.7px] mt-[8px]">
            <x-van-date v-model="form.birthDate" :label="$t('realAuth.birthday')" :placeholder="$t('realAuth.birthdayPlaceholder')"/>
          </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>{{ $t('home.go_home')}}</van-button>
    </div>
  </div>
</template>

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

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