uniapp-im-shop/pages/my-index/wallet/real-id.vue

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { ref, reactive } from 'vue'
  import CardInput from '../components/card-input.vue'
  import { useUI } from '@/utils/use-ui'
  import { navigateBack } from '@/utils/router'
  import { getUserIdCard, addUserIdCard } from '@/api/my-index'
  import { validateIdCard } from '@/utils/validate'

  const { showToast } = useUI()

  const loading = ref(true)
  /** 身份证状态：0 新增 1 等待审核 2 编辑 3 不可以修改和新增 */
  const stateData = ref(0)
  const formData = reactive({
    // 修改id
    id: '',
    // 正面
    front: '',
    // 背面
    back: '',
    // 姓名
    realName: '',
    // 身份证号码
    idCard: '',
    frontList: [],
    backList: []
  })

  const getData = async () => {
    loading.value = true
    const res = await getUserIdCard()
    if (res?.data) {
      formData.id = res.data.id
      formData.front = res.data.idCardFrontUrl
      formData.back = res.data.idCardBackUrl
      formData.realName = res.data.realName
      formData.idCard = res.data.idCardNumber
      formData.frontList = [{ url: res.data.idCardFrontUrl }]
      formData.backList = [{ url: res.data.idCardBackUrl }]
      stateData.value = res.data.status
    } else {
      stateData.value = 0
    }

    loading.value = false
  }

  const onAddCode = async () => {
    if (!formData.front) {
      showToast('请上传身份证人像面')
      return
    }
    if (!formData.back) {
      showToast('请上传身份证国徽面')
      return
    }
    if (!formData.realName) {
      showToast('请输入姓名')
      return
    }
    const codeData = validateIdCard(formData.idCard)
    if (!codeData.valid) {
      showToast(codeData.message)
      return
    }

    const data = {
      id: formData.id,
      idCardFrontUrl: formData.front,
      idCardBackUrl: formData.back,
      realName: formData.realName,
      idCardNumber: formData.idCard
    }

    await addUserIdCard(data, stateData.value === 0 ? 'post' : 'put')
    await showToast(`添加成功`, 'success')
    navigateBack()
  }

  onLoad(() => {
    getData()
  })
</script>

<template>
  <view v-if="!loading" class="real-id">
    <view v-if="[0, 2, 3].includes(stateData)">
      <!-- 说明 -->
      <text class="top-text">*为保证您的账户安全,请先完成实名认证</text>
      <CardInput :is-input="false" title="收款码">
        <view class="qrcode-box">
          <cb-file-picker
            v-model="formData.front"
            v-model:list="formData.frontList"
            :readonly="stateData === 3"
            isFront
          ></cb-file-picker>
          <cb-file-picker
            v-model="formData.back"
            v-model:list="formData.backList"
            :readonly="stateData === 3"
            isBack
          ></cb-file-picker>
        </view>
      </CardInput>

      <CardInput
        v-model="formData.realName"
        title="姓名"
        placeholder="请输入姓名"
        :disabled="stateData === 3"
      ></CardInput>

      <CardInput
        v-model="formData.idCard"
        title="身份证号"
        placeholder="请输入身份证号"
        :disabled="stateData === 3"
      ></CardInput>

      <!-- 底部按钮 -->
      <bottom-view v-if="stateData !== 3">
        <cb-button @click="onAddCode">
          确认{{ formData.id ? '修改' : '添加' }}
        </cb-button>
      </bottom-view>
    </view>
    <view v-else class="wait-view">
      <image
        src="/static/images/my-index/date-icon.png"
        mode="heightFix"
        class="icon-img"
      ></image>
      <text>等待审核</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '../styles/index.scss';

  .real-id {
    padding: 32rpx 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-style: normal;
    text-transform: none;
    .top-text {
      display: block;
      font-weight: 500;
      font-size: 24rpx;
      color: #999999;
      margin-bottom: 32rpx;
    }

    .qrcode-box {
      display: flex;
      justify-content: space-between;
    }
  }

  .wait-view {
    margin-top: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .icon-img {
      height: 60rpx;
    }
    text {
      margin-top: 20rpx;
      display: block;
      font-weight: 500;
      font-size: 30rpx;
      color: #999999;
      margin-bottom: 32rpx;
    }
  }
</style>