x-forend/src/pages-sub/realname/index.vue

<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '实名认证',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<template>
  <view class="withdrawal-type-edit-page pb-100 min-h-screen">
    <template v-if="!realnameInfo">
      <view class="p-15 m-15 shadow-[0_0_10px_rgba(10,68,245,0.1)] rounded-10">
        <view class="flex items-center py-15 text-14">
          <image src="@/static/images/page-sub/realname/realname-type.png" class="w-20 h-20" />
          <view class="ml-8">证件类型</view>
          <view class="flex-1 text-right text-14">身份证</view>
        </view>
        <view class="flex items-center py-15 text-14">
          <image src="@/static/images/page-sub/realname/realname-name.png" class="w-20 h-20" />
          <view class="ml-8">真实姓名</view>
          <input
            class="flex-1 text-right text-14"
            placeholder-class=" text-#889BC6 text-right"
            type="text"
            placeholder="请输入真实姓名"
            v-model="form.realname"
          />
        </view>
        <view class="flex items-center py-15 text-14">
          <image src="@/static/images/page-sub/realname/realname-number.png" class="w-20 h-20" />
          <view class="ml-8">身份证号</view>
          <input
            class="flex-1 text-right text-14"
            placeholder-class=" text-#889BC6 text-right"
            type="text"
            placeholder="请输入身份证号"
            v-model="form.cardnum"
          />
        </view>
        <view class="py-15 text-14">
          <view class="flex items-center">
            <image src="@/static/images/page-sub/realname/realname-card.png" class="w-20 h-20" />
            <view class="ml-8">证件照片</view>
          </view>
          <view
            class="flex items-center justify-center mt-15 rounded-10 bg-#F1F9FC h-168 w-full"
            @click="onUploadZCardImage"
          >
            <view v-if="!zcardimage" class="text-center">
              <image src="@/static/images/page-sub/realname/upload-icon.png" class="w-40 h-40" />
              <view class="text-14 text-#999 mt-10">点击上传身份证正面</view>
            </view>
            <view v-else class="flex items-center">
              <image :src="zcardimage" class="w-315 h-168" mode="aspectFit" />
            </view>
          </view>
          <view
            class="flex items-center justify-center mt-15 rounded-10 bg-#F1F9FC h-168 w-full"
            @click="onUploadFCardImage"
          >
            <view v-if="!fcardimage" class="text-center">
              <image src="@/static/images/page-sub/realname/upload-icon.png" class="w-40 h-40" />
              <view class="text-14 text-#999 mt-10">点击上传身份证反面</view>
            </view>
            <view v-else class="flex items-center">
              <image :src="fcardimage" class="w-315 h-168" mode="aspectFit" />
            </view>
          </view>
        </view>
      </view>
      <view class="fixed bottom-0 left-0 right-0 pb-safe">
        <button class="btn-gradient text-white rounded-full m-15 text-16" @click="onSubmit">
          提交
        </button>
      </view>
    </template>

    <view v-else class="flex flex-col items-center">
      <template v-if="Number(realnameInfo.status) === 1">
        <image
          src="@/static/images/page-sub/realname/realname-checking.png"
          class="w-150 mx-auto h-150 block"
          mode="aspectFit"
        />
        <view class="text-center mt-15 text-14 text-#999">您的实名认证正在审核中，请耐心等待</view>
        <button
          class="btn-gradient px-30 text-white rounded-full m-15 text-16"
          @click="userStore.logout"
        >
          退出登录
        </button>
      </template>
      <template v-else-if="Number(realnameInfo.status) === 2">
        <image
          src="@/static/images/page-sub/realname/realname-success.png"
          class="w-150 h-150 block"
          mode="aspectFit"
        />
        <view class="text-center mt-15 text-14 text-#999">恭喜您，实名认证成功</view>
        <button class="btn-gradient px-30 text-white rounded-full m-15 text-16" @click="onGoHome">
          返回
        </button>
      </template>
      <template v-else>
        <image
          src="@/static/images/page-sub/realname/realname-checking.png"
          class="w-150 h-150 block"
          mode="aspectFit"
        />
        <view class="text-center mt-15 text-14 text-#999">您的实名认证审核未通过，请重新提交</view>
        <button
          @click="() => (realnameInfo = null)"
          class="btn-gradient px-30 text-white rounded-full m-15 text-16"
        >
          重新提交
        </button>
      </template>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getRealNameAuthAPI, realNameAuthAPI } from '@/service'
import { useUserStore } from '@/store'
import { showModal } from '@/utils'
import { ref } from 'vue'

const userStore = useUserStore()

const form = ref({
  realname: '',
  cardnum: '',
})

const onBack = () => {
  uni.navigateBack()
}

const onSubmit = async () => {
  if (!form.value.realname || !form.value.cardnum) {
    await showModal('请填写完整信息')
    return
  }
  if (!zcardimage.value || !fcardimage.value) {
    await showModal('请上传身份证照片')
    return
  }
  await realNameAuthAPI({
    ...form.value,
    zcardimage: zcardimage.value,
    fcardimage: fcardimage.value,
  })
  await showModal('提交成功,请耐心等待审核！')
  realnameInfo.value = await getRealNameAuthAPI().then((res) => {
    return res.data
  })
}

const onGoHome = () => {
  uni.reLaunch({
    url: '/',
  })
}

const { data: zcardimage, run: onUploadZCardImage } = useUpload()
const { data: fcardimage, run: onUploadFCardImage } = useUpload()

const realnameInfo = ref(null)
onLoad(async () => {
  realnameInfo.value = await getRealNameAuthAPI().then((res) => {
    return res.data
  })
})
</script>
<style lang="scss" scoped>
.withdrawal-type-edit-page {
  --wot-input-placeholder-color: #889bc6;
  --wot-cell-wrapper-padding: 0;
}
</style>