sign-stream/src/views/upload-id-card/index.vue

<script setup>
import steps from '@/components/steps/index.vue'
import one from './content/one.vue'
import { useRoute, useRouter } from 'vue-router'
import two from './content/two.vue'
import three from './content/three.vue'
import complete from './content/complete.vue'
import { computed, ref, watch } from "vue";
import { storeToRefs } from "pinia";
import { useUserStore } from "@/stores/userStore.js";
import { showToast } from "vant";
import { check_id_card, save_register_info } from "@/apis/index.js";
const userStore = useUserStore()
const { idCardInfo, iDCardImage, recentPhoto, artworkFile, telNum, selectAddress, detailAddress, submitReturnData } = storeToRefs(userStore);
const route = useRoute()
const router = useRouter()
const active = ref(Number(route.params.active))
const buttons = ref([{ label: "下一步", type: "next" }])
const contentComputed = computed(() => {
  switch (active.value) {
    case 0:
      return one
    case 1:
      return two
    case 2:
      return three
    case 3:
      return complete
  }
})
const submitClick = async () => {

  const data = {
    artistName: idCardInfo.value.realName,
    gender: idCardInfo.value.sex === '男' ? 1 : 2,
    phoneNum: telNum.value,
    idCard: idCardInfo.value.iDNum,
    address: JSON.stringify(selectAddress.value.selectedOptions.map(item => {
      return {
        text: item.text,
        value: item.value
      }
    })),
    address1: detailAddress.value,
    idCardPhoto: iDCardImage.value.front,
    idCardBackPhoto: iDCardImage.value.back,
    artistPhoto: recentPhoto.value,
    artworkFile: artworkFile.value
  }
  const res = await save_register_info(data)
  if (res.status === 0) {
    submitReturnData.value = res.data.data
  }
}
watch(active, () => {
  switch (active.value) {
    case 0:
      buttons.value = [{ label: "下一步", type: "next" }]
      break
    case 1:
      buttons.value = [{ label: "上一步", type: "back" }, { label: "下一步", type: "next" }];
      break
    case 2:
      buttons.value = [{ label: "上一步", type: "back" }, { label: "提交", type: "submit" }]
      break
    case 3:
      buttons.value = [{ label: "完成", type: "finish" }]
      break
  }
}, {
  immediate: true
})
const stepsClick = async (item) => {
  switch (active.value) {
    case 0:

      if (!iDCardImage.value.front || !iDCardImage.value.back) {
        showToast({
          message: '请上传完整的身份证图片',
          className: 'particulars-detail-popup'
        });

        return
      }
      const res = await check_id_card({
        idCard: idCardInfo.value.iDNum
      })
      if (res.status === 0) {
      } else {
        return
      }
      active.value = 1
      router.replace(`/title-forward/upload-id-card/${1}`)
      break
    case 1:
      if (item.type === 'next') {
        if (!recentPhoto.value) {
          showToast({
            message: '请上传近照',
            className: 'particulars-detail-popup'
          });
          return;
        }
        if (selectAddress.value?.selectedOptions?.length < 3 || !selectAddress.value?.selectedOptions) {
          showToast({
            message: '请选择通讯地址',
            className: 'particulars-detail-popup'
          });
          return
        }
        if (!detailAddress.value) {
          showToast({
            message: '请输入详细地址',
            className: 'particulars-detail-popup'
          });
          return
        }
        active.value = 2
        router.replace(`/title-forward/upload-id-card/${2}`)
      } else if (item.type === 'back') {
        active.value = 0
        router.replace(`/title-forward/upload-id-card/${0}`)
      }
      break
    case 2:

      if (item.type === 'submit') {
        if (!artworkFile.value) {
          showToast({
            message: '请上传作品',
            className: 'particulars-detail-popup'
          });
          return;
        }
        submitClick()
        active.value = 3
        router.replace(`/title-forward/upload-id-card/${3}`)
      } else if (item.type === 'back') {
        active.value = 1
        router.replace(`/title-forward/upload-id-card/${1}`)
      }
      break
    case 3:
      if (item.type === 'finish') {
        router.push('/title-forward/reg-details')
      }
      break
  }
}
</script>
<template>
  <div class="container">
    <steps v-model:active="active" />
    <div class="content">
      <component :is="contentComputed" />
    </div>
    <div class="bottom-btn">
      <div class="item"
           @click="stepsClick(item)"
           v-for="item in buttons"
           :class="[item.type==='back'?'back':'']">
        {{ item.label }}
      </div>
    </div>
  </div>

</template>

<style scoped lang="scss">
.container {
  box-sizing: border-box;
  padding-top: 14px;
  padding-right: 21px;
  padding-left: 21px;

  .content {
    margin-top: 20px;
  }

  .bottom-btn {
    margin-top: 18px;
    margin-bottom: 38px;
    width: 100%;
    display: flex;
    justify-content: center;

    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 16px;
      border-radius: 20px;
      width: 142px;
      height: 32px;
      background-color: #2159c4;

      &.back {
        background-color: #24437e;
        margin-right: 30px;
      }
    }
  }
}
</style>