submit

package-lock.json

@@ -11,7 +11,9 @@
         "@vant/area-data": "^1.5.1",
         "@varlet/ui": "^2.22.2",
         "axios": "^1.6.7",
+        "dayjs": "^1.11.10",
         "normalize.css": "^8.0.1",
+        "pinia": "^2.1.7",
         "vant": "^4.8.4",
         "vue": "^3.3.11",
         "vue-router": "^4.2.5"
@@ -1352,6 +1354,50 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.7.tgz",
+      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkg-types": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.0.3.tgz",
@@ -2659,6 +2705,23 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pinia": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.7.tgz",
+      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.7",
+          "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.7.tgz",
+          "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+          "requires": {}
+        }
+      }
+    },
     "pkg-types": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.0.3.tgz",

package.json

@@ -12,7 +12,9 @@
     "@vant/area-data": "^1.5.1",
     "@varlet/ui": "^2.22.2",
     "axios": "^1.6.7",
+    "dayjs": "^1.11.10",
     "normalize.css": "^8.0.1",
+    "pinia": "^2.1.7",
     "vant": "^4.8.4",
     "vue": "^3.3.11",
     "vue-router": "^4.2.5"

src/apis/index.js

@@ -23,3 +23,10 @@ export const upload_img = (data) => {
         data
     })
 }
+export const scan_id_card = (data) => {
+    return request({
+        url: '/register/scan_id_card',
+        method: 'post',
+        data
+    })
+}

src/components/operateTitle/index.vue

@@ -1,11 +1,30 @@
 <script setup>
 import { useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
+import {watch} from "vue";
 const router = useRouter();
 const goBack=()=>{
   router.go(-1)
 }
-import { useRoute } from 'vue-router';
 const route = useRoute();
+watch(route,()=>{
+if (route.path.includes('title-forward/upload-id-card')){
+switch (route.params.active){
+  case '0':
+    route.meta.title='上传身份证照片'
+    break;
+  case '1':
+    route.meta.title='添加近照'
+    break;
+  case '2':
+    route.meta.title='填写通讯录信息'
+    break;
+  case '4':
+    break;
+
+}
+}
+})
 </script>
 
 <template>

src/main.js

@@ -4,9 +4,11 @@ import App from './App.vue';
 import router from './router';
 import 'normalize.css';
 import 'vant/lib/index.css';
+import { createPinia } from 'pinia';
 
 const app = createApp(App);
-
+const pinia = createPinia();
+app.use(pinia);
 app.use(router);
 app.directive('no-space', {
     mounted(el) {

src/router/index.js

@@ -11,6 +11,11 @@ const routes = [
         name: 'title-forward',
         component: () => import('@/views/title-forward/index.vue'),
         children: [
+            {
+                path: 'reg-details',
+                meta: { title: '报名详情' },
+                component: () => import('@/views/reg-details/index.vue')
+            },
             {
                 path: 'logon',
                 meta: { title: '登录' },

src/stores/userStore.js

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia';
+import {ref} from "vue";
+
+export const useUserStore = defineStore('user', ()=>{
+const idCardInfo=ref({})
+const iDCardImage=ref({
+    front:'',
+    back:''
+})
+    const recentPhoto=ref('')
+    return {idCardInfo,iDCardImage,recentPhoto}
+});

src/views/reg-details/index.vue

@@ -0,0 +1,190 @@
+<script setup>
+import defaultImage1 from '@/assets/images/zu1172@2x.png';
+
+</script>
+
+<template>
+  <div class="container">
+    <div class="content1">
+      报名日期：2023年12月18日，09:33AM
+    </div>
+    <div class="content2">
+      <div class="wrap1">
+        <div class="wrap1_1">身份证人像面</div>
+        <div class="wrap1_2"><img class="wrap1_2_1" :src="defaultImage1">
+          <img class="wrap1_2_2" src="@/assets/images/zu1179@2x.png" alt="">
+        </div>
+      </div>
+      <div class="wrap1">
+        <div class="wrap1_1">身份证人像面</div>
+        <div class="wrap1_2"><img class="wrap1_2_1" :src="defaultImage1">
+          <img class="wrap1_2_2" src="@/assets/images/zu1179@2x.png" alt="">
+        </div>
+      </div>
+    </div>
+    <div class="content3">
+      <div class="wrap1">
+        <div class="wrap1_1">
+          <div class="wrap1_1_1">姓名</div>
+          <div class="wrap1_1_2">某某某</div>
+        </div>
+
+      </div>
+      <div class="wrap1">
+        <div class="wrap1_1">
+          <div class="wrap1_1_1">性别</div>
+          <div class="wrap1_1_2">男/女</div>
+        </div>
+
+      </div>
+      <div class="wrap1">
+        <div class="wrap1_1">
+          <div class="wrap1_1_1">身份证号码</div>
+          <div class="wrap1_1_2">2912301283123821801</div>
+        </div>
+      </div>
+      <div class="wrap1">
+        <div class="wrap1_1">
+          <div class="wrap1_1_1">身份证地址</div>
+          <div class="wrap1_1_2">玛纳斯曾经多少次收到款不错的撒纯
+            白色的长款保暖升级新款淑女款
+          </div>
+        </div>
+      </div>
+      <div class="wrap1">
+        <div class="wrap1_1">
+          <div class="wrap1_1_1">有效日期</div>
+          <div class="wrap1_1_2">2023年12月16日-2026年12月16日</div>
+        </div>
+      </div>
+    </div>
+    <div class="content4">
+      <div class="wrap1">近照</div>
+      <div class="wrap2">
+        <div class="wrap2_1"></div>
+        <div class="wrap2_2"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.container {
+  padding: 14px 22px 75px;
+
+  .content4 {
+    margin-top: 10px;
+    background-color: #fff;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px 22px 25px;
+
+    .wrap2 {
+      margin-top: 3px;
+      border-radius: 10px;
+      width: 100%;
+      height: 325px;
+      border: 3px solid #2159C4;
+    }
+
+    .wrap1 {
+      font-size: 10px;
+      color: #2159C4;
+    }
+  }
+
+  .content3 {
+    margin-top: 10px;
+    background-color: #fff;
+    overflow: hidden;
+    border-radius: 12px;
+
+    .wrap1 {
+      padding-left: 14px;
+      padding-right: 14px;
+
+      &:last-child .wrap1_1 {
+        border-bottom: none;
+      }
+
+      .wrap1_1 {
+        padding-top: 14px;
+        padding-bottom: 14px;
+        border-bottom: #BBC5E0 solid 1px;
+        display: flex;
+
+        .wrap1_1_2 {
+          padding-left: 10px;
+          color: #24437E;
+          font-size: 12px;
+        }
+
+        .wrap1_1_1 {
+          display: flex;
+          align-items: center;
+          flex-shrink: 0;
+          border-right: #BBC5E0 solid 1px;
+          width: 92px;
+          font-size: 12px;
+          color: #000;
+          padding-left: 10px;
+
+        }
+      }
+    }
+  }
+
+  .content2 {
+    margin-top: 10px;
+    background-color: #fff;
+    border-radius: 10px;
+    padding: 12px 22px 14px;
+    display: flex;
+    justify-content: space-between;
+
+    .wrap1 {
+      width: 136px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .wrap1_2 {
+        margin-top: 3px;
+        height: 79px;
+        position: relative;
+
+        .wrap1_2_2 {
+          width: 16px;
+          height: 16px;
+          position: absolute;
+          bottom: 5px;
+          right: 6px;
+        }
+
+        .wrap1_2_1 {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .wrap1_1 {
+        font-size: 10px;
+        color: #2159C4;
+      }
+    }
+  }
+
+  .content1 {
+    height: 46px;
+    background-color: #2159C4;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    color: #fff;
+  }
+}
+</style>

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

@@ -1,24 +1,59 @@
 <script setup>
-import {upload_img} from "@/apis/index.js";
+import {scan_id_card, upload_img} from "@/apis/index.js";
+import {useUserStore} from '@/stores/userStore.js'
+import defaultImage1 from '@/assets/images/zu1172@2x.png';
+import storage from "@/utils/storage.js";
+import {storeToRefs} from "pinia";
+import {ref} from "vue";
+import dayjs from "dayjs";
 
-const afterRead=async (file)=>{
+const userStore = useUserStore()
- const res=await upload_img( {
+const {idCardInfo,iDCardImage} = storeToRefs(userStore);
+const afterRead = async (file, num) => {
+  const res = await upload_img({
     file: file.file,
     source: "artwork",
     type: 'image'
   })
-  console.log(file,'file')
+  if (res.status === 0) {
+    if (num === 0) {
+      iDCardImage.value.front = res.data.ori_url
+    } else if (num === 1) {
+      iDCardImage.value.back = res.data.ori_url
+    }
+    await cardFace(res.data.ori_url, num)
+  }
+}
+const isWithinThreeMonths=(dateStr)=> {
+  const now = dayjs();
+  const targetDate = dayjs(dateStr);
+  const isEarlier = targetDate.isBefore(now);
+  const isWithinThreeMonths = now.diff(targetDate, 'month') < 3;
+  return isEarlier && isWithinThreeMonths;
+}
+const cardFace = async (img, num) => {
+  const res = await scan_id_card({
+    idCardUrl: img,
+    Side: num + 1
+  })
+  if (res.status === 0) {
+    if (res.data.iDNum) {
+      idCardInfo.value=res.data
+    }else if (res.data.expirationDate || res.data.issueDate) {
+      idCardInfo.value.expirationDate=res.data.expirationDate
+      idCardInfo.value.issueDate=res.data.issueDate
+    }
+  }
 }
 </script>
-
 <template>
-<div class="one-content">
+  <div class="one-content">
     <div class="content2">
-    <van-uploader :after-read="afterRead">
+      <van-uploader :after-read="(e)=>{afterRead(e,0)}">
         <div class="wrap1">
           <div class="wrap1_1">
             <div class="wrap1_1_1">
-            <img src="@/assets/images/zu1172@2x.png" alt="">
+              <img :src="iDCardImage.front || defaultImage1" alt="">
             </div>
             <div class="wrap1_1_2">更换</div>
           </div>
@@ -27,11 +62,11 @@ const afterRead=async (file)=>{
       </van-uploader>
     </div>
     <div class="content3">
-    <van-uploader>
+      <van-uploader :after-read="(e)=>{afterRead(e,1)}">
         <div class="wrap1">
           <div class="wrap1_1">
             <div class="wrap1_1_1">
-            <img src="@/assets/images/zu1172@2x.png" alt="">
+              <img :src="iDCardImage.back || defaultImage1" alt="">
             </div>
             <div class="wrap1_1_2">更换</div>
           </div>
@@ -39,33 +74,52 @@ const afterRead=async (file)=>{
         </div>
       </van-uploader>
     </div>
+<template v-if="isWithinThreeMonths(idCardInfo.expirationDate)">
   <div class="content4">
     <div class="wrap1">
       <div class="wrap1_1">
         <div class="wrap1_1_1">姓名</div>
-        <div class="wrap1_1_2">某某某</div>
+        <div class="wrap1_1_2">{{ idCardInfo.realName }}</div>
       </div>
 
     </div>
     <div class="wrap1">
       <div class="wrap1_1">
-        <div class="wrap1_1_1">姓名</div>
+        <div class="wrap1_1_1">性别</div>
-        <div class="wrap1_1_2">某某某</div>
+        <div class="wrap1_1_2">{{idCardInfo.sex}}</div>
+      </div>
+
+    </div>
+    <div class="wrap1">
+      <div class="wrap1_1">
+        <div class="wrap1_1_1">身份证号码</div>
+        <div class="wrap1_1_2">{{idCardInfo.iDNum}}</div>
+      </div>
+
+    </div>
+    <div class="wrap1">
+      <div class="wrap1_1">
+        <div class="wrap1_1_1">身份证地址</div>
+        <div class="wrap1_1_2">{{idCardInfo.path}}</div>
+      </div>
+    </div>
+    <div class="wrap1">
+      <div class="wrap1_1">
+        <div class="wrap1_1_1">有效日期</div>
+        <div class="wrap1_1_2">{{dayjs(idCardInfo.issueDate).format('YYYY年MM月DD日')}}-{{dayjs(idCardInfo.expirationDate).format('YYYY年MM月DD日')}}</div>
       </div>
 
     </div>
   </div>
   <div class="content5">*自动识别内容，请仔细核对</div>
   <div class="content6">证件即将过期，请尽快更新，否则将影响部分功能使用！</div>
+</template>
 
-</div>
+  </div>
 </template>
 
 <style scoped lang="scss">
-.one-content{
+.content6 {
-  margin-bottom: 54px;
-}
-.content6{
   margin-top: 5px;
   width: 100%;
   height: 46px;
@@ -77,35 +131,43 @@ const afterRead=async (file)=>{
   align-items: center;
   border-radius: 10px;
 }
-.content5{
+
+.content5 {
   text-align: right;
   font-size: 10px;
   color: #FFFFFF;
   margin-top: 8px;
 }
-.content4{
+
+.content4 {
   margin-top: 20px;
   background-color: #fff;
   overflow: hidden;
   border-radius: 12px;
-  .wrap1{
+
+  .wrap1 {
     padding-left: 14px;
     padding-right: 14px;
-    &:last-child .wrap1_1{
+
-      border-bottom:none;
+    &:last-child .wrap1_1 {
+      border-bottom: none;
     }
-    .wrap1_1{
+
+    .wrap1_1 {
       padding-top: 14px;
       padding-bottom: 14px;
       border-bottom: #BBC5E0 solid 1px;
       display: flex;
 
-      .wrap1_1_2{
+      .wrap1_1_2 {
         padding-left: 10px;
         color: #24437E;
         font-size: 12px;
       }
-      .wrap1_1_1{
+      .wrap1_1_1 {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
         border-right: #BBC5E0 solid 1px;
         width: 92px;
         font-size: 12px;
@@ -116,6 +178,7 @@ const afterRead=async (file)=>{
     }
   }
 }
+
 .content3 {
   .wrap1 {
     width: 332px;
@@ -126,16 +189,19 @@ const afterRead=async (file)=>{
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    .wrap1_2{
+
+    .wrap1_2 {
       margin-top: 3px;
       color: #2159C4;
       font-size: 12px;
     }
+
     .wrap1_1 {
       width: 293px;
       height: 170px;
       position: relative;
-      .wrap1_1_2{
+
+      .wrap1_1_2 {
         font-size: 14px;
         display: flex;
         justify-content: center;
@@ -149,18 +215,21 @@ const afterRead=async (file)=>{
         bottom: 12px;
         right: 12px;
       }
-      .wrap1_1_1{
+
+      .wrap1_1_1 {
         img {
-          width: 100%;
+          width: 293px;
-          height: 100%;
+          height: 170px;
         }
       }
 
     }
   }
 }
+
 .content2 {
   margin-bottom: 20px;
+
   .wrap1 {
     width: 332px;
     height: 220px;
@@ -170,16 +239,19 @@ const afterRead=async (file)=>{
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    .wrap1_2{
+
+    .wrap1_2 {
       margin-top: 3px;
       color: #2159C4;
       font-size: 12px;
     }
+
     .wrap1_1 {
       width: 293px;
       height: 170px;
       position: relative;
-      .wrap1_1_2{
+
+      .wrap1_1_2 {
         font-size: 14px;
         display: flex;
         justify-content: center;
@@ -193,10 +265,11 @@ const afterRead=async (file)=>{
         bottom: 12px;
         right: 12px;
       }
-      .wrap1_1_1{
+
+      .wrap1_1_1 {
         img {
-          width: 100%;
+          width: 293px;
-          height: 100%;
+          height: 170px;
         }
       }
 

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

@@ -1,17 +1,33 @@
 <script setup>
-
+import {upload_img} from "@/apis/index.js";
+import {useUserStore} from '@/stores/userStore.js'
+import {storeToRefs} from "pinia";
+import defaultImg from "@/assets/images/zu1171@2x.png"
+const userStore = useUserStore()
+const {recentPhoto} = storeToRefs(userStore);
+const afterRead = async (file) => {
+  const res = await upload_img({
+    file: file.file,
+    source: "artwork",
+    type: 'image'
+  })
+  if (res.status === 0) {
+    recentPhoto.value=res.data.ori_url
+  }
+}
 </script>
 
 <template>
   <div class="two-content">
-    <van-uploader>
+    <van-uploader :afterRead="afterRead">
       <div class="content1">
         <div class="wrap1">
           <div class="wrap1_1">
-            <img src="@/assets/images/zu1171@2x.png" alt="">
+            <img class="wrap1_1_1" v-if="recentPhoto" :src="recentPhoto">
+            <img  class="wrap1_1_2" v-else :src="defaultImg">
           </div>
         </div>
-
+        <div class="wrap2">上传近照</div>
       </div>
     </van-uploader>
     <div class="bottom-text">*点击相机上传/拍摄近照</div>
@@ -19,30 +35,43 @@
 </template>
 
 <style scoped lang="scss">
-.two-content{
+.two-content {
   margin-bottom: 115px;
 }
-.bottom-text{
+
+.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;
+  padding: 16px 20px 10px 20px;
-  .wrap1{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .wrap2 {
+    margin-top: 6px;
+    color: #2159C4;
+    font-size: 10px;
+  }
+
+  .wrap1 {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
     border: 2px solid #2159C4;
     border-radius: 10px;
     padding: 18px;
-    .wrap1_1{
+
+    .wrap1_1 {
       width: 100%;
       height: 100%;
       background-image: url("@/assets/images/zu1174@2x.png");
@@ -50,7 +79,11 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      img{
+      .wrap1_1_1{
+        width: 100%;
+        height: 100%;
+      }
+      .wrap1_1_2 {
         width: 75px;
         height: 75px;
       }

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

@@ -6,6 +6,11 @@ import two from './content/two.vue'
 import three from './content/three.vue'
 import complete from './content/complete.vue'
 import {computed, ref} from "vue";
+import {storeToRefs} from "pinia";
+import {useUserStore} from "@/stores/userStore.js";
+import {showToast} from "vant";
+const userStore = useUserStore()
+const {idCardInfo,iDCardImage,recentPhoto} = storeToRefs(userStore);
 const route = useRoute()
 const router = useRouter()
 const active = ref(Number(route.params.active))
@@ -25,11 +30,26 @@ const contentComputed = computed(() => {
 const stepsClick = (item) => {
   switch (active.value) {
     case 0:
+      if (!iDCardImage.value.front||!iDCardImage.value.back){
+        showToast({
+          message:'请上传完整的身份证图片',
+          className:'particulars-detail-popup'
+        });
+        return
+      }
+
       active.value=1
       router.replace(`/title-forward/upload-id-card/${1}`)
       buttons.value = [{label: "上一步", type: "back"}, {label: "下一步", type: "next"}]
       break
     case 1:
+      if (!recentPhoto.value){
+        showToast({
+          message:'请上传近照',
+          className:'particulars-detail-popup'
+        });
+        return;
+      }
       if (item.type === 'next') {
         active.value=2
         router.replace(`/title-forward/upload-id-card/${2}`)
@@ -86,6 +106,8 @@ const stepsClick = (item) => {
   }
 
   .bottom-btn {
+    margin-top: 18px;
+    margin-bottom: 38px;
     width: 100%;
     display: flex;
     justify-content: center;