submit

src/components/steps/index.vue

@@ -1,7 +1,8 @@
 <script setup>
-import {ref,defineProps} from "vue";
+import {ref,defineModel} from "vue";
-const active = ref(0)
 const steps=ref([{label:'第一步',value:0},{label:'第二步',value:1},{label:'第三步',value:2},{label:'完成',value:3}])
+const active = defineModel('active',{default:0})
+
 </script>
 
 <template>

src/router/index.js

@@ -17,7 +17,7 @@ const routes = [
                 component: () => import('@/views/logon/index.vue')
             },
             {
-                path: 'upload-id-card',
+                path: 'upload-id-card/:active',
                 meta: { title: '上传身份证' },
                 component: () => import('@/views/upload-id-card/index.vue')
             }

src/views/logon/index.vue

@@ -20,7 +20,7 @@ const sendCode = async () => {
   }, 1000);
 };
 const goRouter=()=>{
-  router.push('/title-forward/upload-id-card')
+  router.push(`/title-forward/upload-id-card/${0}`)
 }
 onBeforeUnmount(() => {
   clearInterval(countdownInterval.value);

src/views/upload-id-card/content/one.vue

@@ -55,6 +55,7 @@
   }
 }
 .content2 {
+  margin-bottom: 20px;
   .wrap1 {
     width: 332px;
     height: 220px;

src/views/upload-id-card/content/three.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { ref } from 'vue';
+import { areaList } from '@vant/area-data';
+
+
+</script>
+
+<template>
+<div>
+<!--  <van-area title="标题" :area-list="areaList" />-->
+  <div class="content-address">
+    <div class="wrap1">通讯地址</div>
+    <div class="wrap2"></div>
+    <div class="wrap3">
+      省-市-区
+    </div>
+    <div class="wrap4">
+      <img src="@/assets/images/zzz766@3x.png" alt="">
+    </div>
+  </div>
+  <div class="detail-address">
+      <div class="wrap1">详细地址</div>
+      <div class="wrap2">
+     <textarea rows="4" cols="50" placeholder="在此输入详细地址">
+</textarea>
+      </div>
+  </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+.detail-address{
+  margin-top: 18px;
+  padding: 16px 16px 12px 14px;
+  width: 332px;
+  height: 205px;
+  background-color: #fff;
+  border-radius: 12px;
+  box-sizing: border-box;
+  .wrap2{
+    height: 155px;
+    background-color: #F0F0F0;
+    box-sizing: border-box;
+    border-radius: 12px;
+    overflow: hidden;
+    textarea{
+      width: 100%;
+      box-sizing: border-box;
+      padding: 11px 17px 11px 17px;
+      background-color: #F0F0F0;
+      border: none;
+
+      &::placeholder{
+        color: #CECECE;
+        font-size: 12px;
+      }
+      &:focus{
+        font-size: 12px;
+        outline: none;
+        border: none;
+      }
+    }
+  }
+  .wrap1{
+    color: #000;
+    font-size: 12px;
+    margin-bottom: 6px;
+    padding-left: 10px;
+  }
+}
+.content-address{
+  box-sizing: border-box;
+  width: 332px;
+  height: 45px;
+  border-radius: 12px;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  padding: 13px 21px 11px 26px;
+  .wrap4{
+    margin-left: auto;
+    img{
+      width: 32.11px;
+      height: 16px;
+    }
+  }
+  .wrap3{
+    margin-left: 12px;
+    color: #CECECE;
+    font-size: 12px;
+  }
+  .wrap1{
+    color: #000;
+    font-size: 12px;
+  }
+  .wrap2{
+    margin-left: 34px;
+    background-color: #BBC5E0;
+    width: 1px;
+    height: 20.93px;
+  }
+
+}
+</style>

src/views/upload-id-card/content/two.vue

@@ -0,0 +1,57 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+    <van-uploader>
+    <div class="content1">
+        <div class="wrap1">
+          <div class="wrap1_1">
+            <img src="@/assets/images/zu1171@2x.png" alt="">
+          </div>
+        </div>
+
+    </div>
+    </van-uploader>
+    <div class="bottom-text">*点击相机上传/拍摄近照</div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.bottom-text{
+  text-align: right;
+  margin-top: 8px;
+  color: #FFFFFF;
+  font-size: 12px;
+}
+.content1 {
+  box-sizing: border-box;
+  width: 332px;
+  height: 377px;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 16px 20px 28px 20px;
+  .wrap1{
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border: 2px solid #2159C4;
+    border-radius: 10px;
+    padding: 18px;
+    .wrap1_1{
+      width: 100%;
+      height: 100%;
+      background-image: url("@/assets/images/zu1174@2x.png");
+      background-size: cover;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img{
+        width: 75px;
+        height: 75px;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,16 +1,65 @@
 <script setup>
 import steps from '@/components/steps/index.vue'
-import one from './one/index.vue'
+import one from './content/one.vue'
-import {ref} from "vue";
+import { useRoute, useRouter } from 'vue-router'
-const active = ref(0)
+import two from './content/two.vue'
-const buttons = ref([{label: "下一步", type: "show"}])
+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: "finish"}]
+      } 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" />
+    <steps v-model:active="active"/>
-    <component :is="one"/>
+    <div class="content">
+      <component :is="contentComputed"/>
+    </div>
     <div class="bottom-btn">
-      <div class="item" v-for="(item,index) in buttons">
+      <div class="item" @click="stepsClick(item)" v-for="item in buttons"
+           :class="[item.type==='back'?'back':'']">
         {{ item.label }}
       </div>
     </div>
@@ -24,22 +73,33 @@ const buttons = ref([{label: "下一步", type: "show"}])
   padding-top: 14px;
   padding-right: 21px;
   padding-left: 21px;
-.bottom-btn{
+
-  width: 100%;
+  .content {
-  display: flex;
+    margin-top: 20px;
-  justify-content: center;
+  }
-  .item{
+
+  .bottom-btn {
+    width: 100%;
     display: flex;
     justify-content: center;
-    align-items: center;
-    color: #fff;
-    font-size: 16px;
-    border-radius: 20px;
-    width: 142px;
-    height: 32px;
-    background-color: #2159C4;
-  }
 
-}
+    .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>

vite.config.js

@@ -3,6 +3,9 @@ import vue from '@vitejs/plugin-vue'
 import path from 'path'
 import Components from 'unplugin-vue-components/vite';
 import { VantResolver } from '@vant/auto-import-resolver';
+import { VarletUIResolver } from 'unplugin-vue-components/resolvers'
+import autoImport from 'unplugin-auto-import/vite'
+
 // https://vitejs.dev/config/
 export default defineConfig({
   server:{
@@ -15,5 +18,9 @@ export default defineConfig({
   },
   plugins: [vue(),Components({
     resolvers: [VantResolver()],
-  }),],
+  }),Components({
+    resolvers: [VarletUIResolver(),  autoImport({
+      resolvers: [VarletUIResolver({ autoImport: true })]
+    })],
+  })],
 })