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,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),
    address1:detailAddress.value,
    idCardPhoto:iDCardImage.value.front,
    idCardBackPhoto:iDCardImage.value.back,
    artistPhoto:recentPhoto.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;
        }
        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 === 'next') {
        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}`)

      }else if (item.type === 'submit'){
        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
        }
        submitClick()
        active.value=3
        router.replace(`/title-forward/upload-id-card/${3}`)
      }
      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>