liveh5-nuxt/app/pages/collectCode/signature/personal-Info/index.vue

<script setup>
import { useI18n } from "vue-i18n";
import XVanSelect from "@/components/x-van-select/index.vue";
import XVanDate from "@/components/x-van-date/index.vue";
import { codeAuthStore } from "@/stores-collect-code/auth/index.js";
import { message } from "@/components/x-message/useMessage.js";
import { fddInfo, offlineQrcode } from "~/api-collect-code/goods/index.js";
import { signOffline } from "~/api/goods/index.js";
const { formData, number, auctionArtworkUuid, qrUid, qrData } = codeAuthStore();
definePageMeta({
  layout: "default",
  i18n: "menu.profile",
});

const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const columns = ref([
  { text: t("realAuth.male"), value: 1 },
  { text: t("realAuth.female"), value: 2 },
]);
const columns1 = ref([
  { text: t("realAuth.idTypeString"), value: 1 },
  { text: t("realAuth.passport"), value: 2 },
  { text: t("realAuth.other"), value: 3 },
]);
const goCountryRegion = () => {
  router.push({
    path: "/countryRegion",
  });
};
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 getData = async () => {
  const res = await offlineQrcode({
    qrUid: qrUid.value,
  });
  if (res.status === 0) {
    qrData.value = res.data;
  }
};
const initData = async () => {
  if (route.query.number) {
    number.value = Number(route.query.number);
  }
  if (route.query.qrUid) {
    qrUid.value = route.query.qrUid;
  }
  //扫付款码进来才有的步骤
  if (number.value == 2) {
    await getData();
    if (qrData.value.payStatus === 4) {
      router.replace("/collectCode/payment");
    }
  }

  if (route.query.zone) {
    formData.value.countryCode = route.query.zone;
  } else {
    formData.value.countryCode = "86";
  }
};
const nextClick = async () => {
  //扫号牌
  if (number.value == 2) {
    if (
      !formData.value.phone ||
      !formData.value.countryCode ||
      !formData.value.userName
    ) {
      message.warning("请填写完整信息");
      return;
    }
    router.push("/collectCode/signature/protocol");
  }
};
initData();
</script>

<template>
  <div
    class="w-[100vw] bg-[url('@/static/images/asdfsdd.png')] h-screen-nav bg-cover pt-77px flex-grow-1 flex flex-col"
  >
    <div class="text-16px text-#191919 font-bold mb-40px px-34px">
      {{ $t("personal.title") }}
    </div>
    <div class="grow-1 px-34px">
      <van-field
        v-model="formData.phone"
        type="tel"
        :label-width="161"
        :label="$t('personal.text')"
        class="mb-10px"
        :placeholder="$t('realAuth.phonePlaceholder')"
      >
        <template #label>
          <div class="flex">
            <div class="mr-41px whitespace-nowrap">
              {{ $t("profile.phone") }}
            </div>
            <div @click="goCountryRegion">
              <span class="mr-13px">+ {{ formData.countryCode }}</span>
              <van-icon name="arrow-down" class="text-#777777" />
            </div>
          </div>
        </template>
      </van-field>
      <van-field
        :label="$t('profile.name')"
        v-model="formData.userName"
        class="mb-10px"
        :placeholder="$t('realAuth.namePlaceholder')"
      />
      <template v-if="number === 1">
        <x-van-select
          v-model="formData.gender"
          :label="$t('realAuth.gender')"
          :columns="columns"
        />
        <x-van-date
          :label="$t('realAuth.birthday')"
          v-model="formData.birthday"
        />
        <van-field
          :label="$t('realAuth.adress')"
          v-model="formData.address"
          class="mb-10px"
          :placeholder="$t('realAuth.adressPlaceholder')"
        />
        <van-field
          :label="$t('realAuth.bank')"
          v-model="formData.bankName"
          class="mb-10px"
          :placeholder="$t('realAuth.bankPlaceholder')"
        />
        <van-field
          :label="$t('realAuth.bankCard')"
          v-model="formData.bankNo"
          class="mb-10px"
          :placeholder="$t('realAuth.bankCardPlaceholder')"
        />
        <x-van-select
          v-model="formData.cardType"
          :label="$t('realAuth.idTye')"
          :columns="columns1"
        />
        <van-field
          :label="$t('realAuth.idCard')"
          v-model="formData.cardId"
          class="mb-10px"
          :placeholder="$t('realAuth.idCardPlaceholder')"
        />
      </template>
    </div>
    <div class="h-81px bg-#fff flex justify-center pt-7px border-t shrink-0">
      <van-button
        color="#2B53AC"
        class="w-213px van-btn-h-38px"
        @click="nextClick"
        >{{ $t("personal.next") }}</van-button
      >
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.van-cell.van-field) {
  padding-left: 0;
}
</style>