VAVABUY/pages/user/verification.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar :title="t('实名认证')" fixed />
      <view class="form">
        <view class="form_item">
          <view class="item_label">
            <trans _t="证件类型" />
          </view>
          <view class="item_value flex">
            <Select iconColor="#adb8cc" :disabled="isDisabled" v-model:current="form.auth_type" :options="documentsList"
              isTran class="country_select" @select="countryChange" ref="countryRef" @selectClick="inputFocus">
              <template #text>
                <view class="select_label" style="color: var(--inputText)" v-if="form.auth_name">
                  {{ form.auth_name }}
                </view>
                <view class="select_label" v-else>
                  <trans _t="证件类型" />
                </view>
              </template>
            </Select>
          </view>
        </view>
        <view class="form_item">
          <view class="item_label">
            <trans _t="姓名" />
          </view>
          <view class="item_value">
            <Input :disabled="isDisabled" :placeholder="t('姓名')" border="surround" @focus="inputFocus"
              v-model="form.realname" />
          </view>
        </view>

        <view class="form_item">
          <view class="item_label">
            <trans _t="证件号码" />
          </view>
          <view class="item_value">
            <Input :disabled="isDisabled" :placeholder="t('证件号码')" border="surround" @focus="inputFocus"
              v-model="form.cardid" />
          </view>
        </view>
        <view class="form_item">
          <view class="item_label">
            <trans _t="上传证件正面照片" />
          </view>
          <view class="item_value">
            <imgUp :modelValue="form.card_front ? [form.card_front] : []" @update:modelValue="handleImageUrl"
              :disabled="isDisabled" />
          </view>
        </view>
        <view class="form_item">
          <view class="item_label">
            <trans _t="上传证件反面照片" />
          </view>
          <view class="item_value">
            <imgUp :modelValue="form.card_back ? [form.card_back] : []" @update:modelValue="handleBackImageUrl"
              :disabled="isDisabled" />
          </view>
        </view>
      </view>
      <view class="footer" v-if="!isDisabled">
        <view class="submit_btn" @click="submit">
          <trans _t="确认" />
        </view>
      </view>
    </view>
  </Theme>
</template>
<script setup>
import Navbar from '@/components/navbar';
import Select from "@/components/select"
import { reactive, ref, watch, nextTick } from 'vue';
import { t } from "@/locale";
import Input from "@/components/input";
import imgUp from '@/components/imgUp.vue';
import { USERS_LEVELAUTH, GET_USERS_LEVELAUTH } from '@/api'
import { Toast, Modal } from "@/utils"
import { useUserStore } from "@/store"

const useUser = useUserStore();
let userInfo = useUser.getuserInfo

const form = reactive({
  level: 2,
  auth_code: 0,
  auth_type: 'card',
  auth_name: t('身份证'),
  realname: '',
  cardid: '',
  card_back: '',
  card_front: '',
})
const provinceRef = ref(null)
const countryChange = (item) => {
  form.auth_code = item.code;
  form.auth_type = item.type;
  form.auth_name = item.name;
  provinceRef.value && provinceRef.value.close();
}
const documentsList = ref(
  [
    { code: 0, type: 'card', name: t('身份证') },
    { code: 1, type: 'driver', name: t('驾驶证') },
    { code: 2, type: 'passport', name: t('护照') },
  ]
)
const getDetail = async () => {
  try {
    const res = await GET_USERS_LEVELAUTH();
    if (res.data && res.data.auth_data) {
      form.realname = res.data.auth_data.realname;
      form.cardid = res.data.auth_data.cardid;
      form.card_back = res.data.auth_data.card_back;
      form.card_front = res.data.auth_data.card_front;
      form.auth_type = res.data.auth_data.auth_type;
      const correctDocument = documentsList.value.find(doc => doc.type === res.data.auth_data.auth_type);
      if (correctDocument) {
        form.auth_code = correctDocument.code;
        form.auth_name = correctDocument.name;
      } else {
        form.auth_code = 0;
        form.auth_name = t('身份证');
      }
    }
  } catch (error) { }
}
const isDisabled = ref(false)
const watchUserInfo = () => {
  watch(() => userInfo, (item) => {
    isDisabled.value = (item.auth_check === 2 || item.auth_level === 2);
    if (isDisabled.value) {
      getDetail()
    }
  }, { immediate: true })
}
watchUserInfo()
const handleImageUrl = (item) => {
  form.card_front = item.length ? item[0].url : ''
};
const handleBackImageUrl = (item) => {
  form.card_back = item.length ? item[0].url : ''
};
const inputFocus = () => {
  provinceRef.value && provinceRef.value.close();
}
const submit = () => {
  if (!form.realname) return Toast(t('请填写姓名'));
  if (!form.cardid) return Toast(t('请填写身份证号码'));
  if (!form.card_front) return Toast(t('上传身份证正面照片'));

  if (!form.card_back) return Toast(t('上传身份证反面照片'));
  Modal({ content: t('verification_text') }).then(() => {
    verificationAdd();
  });
}

const verificationAdd = async () => {
  try {
    const res = await USERS_LEVELAUTH({ ...form });
    Toast(res.msg, 1000).then(() => {
      setTimeout(() => {
        uni.navigateBack();
      }, 1000);
    })
    // Toast(res.msg);
    // nextTick(() => {
    //   useUser.getUserInfo();
    //   watchUserInfo()
    //   uni.navigateBack();
    // })
  } catch (error) {
    Toast(error.msg);
    close();
  }
}

</script>
<style lang="less" scoped>
@import url('@/style.less');

.wrap {
  background: var(--bg);
  min-height: 100vh;
  padding: 24rpx;

  .form {
    &_item {
      margin-top: 24rpx;

      &:first-child {
        margin-top: 0;
      }

      .item_label {
        font-weight: 700;
        color: var(--text);
        .size(28rpx);
        line-height: 60rpx;
        white-space: nowrap;
        padding-right: 24rpx;
        height: 64rpx;
        width: fit-content;
        position: relative;

        &::before {
          content: '*';
          color: #f56c6c;
          margin-right: 8rpx;
        }
      }

      ._required {
        &::before {
          content: '';
          margin-right: 0rpx;
        }
      }

      .item_value {
        column-gap: 24rpx;
        flex: 1;

        /deep/ .u-input {
          border-radius: 16rpx;
          padding: 0 24rpx !important;
          background-color: var(--bg);

          .u-input__content {
            display: unset;
          }
        }

        /deep/ .u-select {
          flex: 1;
          height: 32px;
          padding: 0 24rpx;
          border-radius: 16rpx;
          background-color: var(--bg);
          border-color: var(--borderColor) !important;
          box-shadow: 0 0 0 1px var(--borderColor) inset;

          .u-select__label {
            margin: 0;
            line-height: 32px;

            .select_label {
              flex: 1;
              color: #adb8cc;
              .size(28rpx);
              .ellipsis();
              width: 100%;
            }

            .u-select__options {
              width: 80vw;
            }
          }
        }

        .country_select,
        .province_select {
          /deep/ .u-select__options {
            width: 80vw;

            .u-select__options_item {
              .size(24rpx);
              height: 80rpx;
              line-height: 80rpx;
              padding: 0 64rpx;

              .u-select__item_text {
                color: var(--inputText);
              }
            }

            .active {
              .u-select__item_text {
                font-weight: 700;
                color: var(--primary) !important;
              }
            }
          }
        }

        .province_select {
          /deep/ .u-select__options {
            width: 300rpx;
          }
        }
      }

      .labels {
        margin-top: 24rpx;
        .ver();
        gap: 24rpx;

        &_item {
          border: 1px solid #7d8fb3;
          border-radius: 8rpx;
          color: #7d8fb3;
          padding: 0 28rpx;
          line-height: 64rpx;
          .size(24rpx);
        }

        .labels_active {
          background-color: var(--black);
          border: 1px solid var(--black);
          color: var(--light);
        }
      }
    }
  }

  .submit_btn {
    height: 38px;
    padding: 16rpx 30rpx;
    background-color: var(--black);
    color: var(--light);
    .flex_center();
    border-radius: 16rpx;
    .size(24rpx);
    margin-top: 20rpx;
  }
}
</style>