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 {computed, ref} from "vue";
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
  }
})
const stepsClick = (item) => {
  switch (active.value) {
    case 0:
      active.value=1
      router.replace(`/title-forward/upload-id-card/${1}`)
      buttons.value = [{label: "上一步", type: "back"}, {label: "下一步", type: "next"}]
      break
    case 1:
      if (item.type === 'next') {
        active.value=2
        router.replace(`/title-forward/upload-id-card/${2}`)
        buttons.value = [{label: "上一步", type: "back"}, {label: "提交", type: "submit"}]
      } else if (item.type === 'back') {
        active.value=0
        router.replace(`/title-forward/upload-id-card/${0}`)
        buttons.value = [{label: "下一步", type: "next"}]
      }
      break
    case 2:
      if (item.type === 'next') {
        active.value=3
        router.replace(`/title-forward/upload-id-card/${3}`)
        buttons.value = [{label: "上一步", type: "back"}, {label: "提交", type: "submit"}]
      } else if (item.type === 'back') {
        active.value=1
        router.replace(`/title-forward/upload-id-card/${1}`)
        buttons.value = [{label: "上一步", type: "back"}, {label: "下一步", type: "next"}]
      }
      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 {
    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>