submit
This commit is contained in:
Phoenix
parent
c97d55b77a
commit
3480b40d32
63
package-lock.json
generated
63
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
})
|
||||
}
|
||||
|
||||
BIN
src/assets/images/zu1179@2x.png
Normal file
BIN
src/assets/images/zu1179@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 988 B |
@ -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>
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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: '登录' },
|
||||
|
||||
12
src/stores/userStore.js
Normal file
12
src/stores/userStore.js
Normal file
@ -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}
|
||||
});
|
||||
190
src/views/reg-details/index.vue
Normal file
190
src/views/reg-details/index.vue
Normal file
@ -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>
|
||||
@ -1,71 +1,125 @@
|
||||
<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 res=await upload_img( {
|
||||
const userStore = useUserStore()
|
||||
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="content2">
|
||||
<van-uploader :after-read="afterRead">
|
||||
<div class="wrap1">
|
||||
<div class="wrap1_1">
|
||||
<div class="wrap1_1_1">
|
||||
<img src="@/assets/images/zu1172@2x.png" alt="">
|
||||
<div class="one-content">
|
||||
<div class="content2">
|
||||
<van-uploader :after-read="(e)=>{afterRead(e,0)}">
|
||||
<div class="wrap1">
|
||||
<div class="wrap1_1">
|
||||
<div class="wrap1_1_1">
|
||||
<img :src="iDCardImage.front || defaultImage1" alt="">
|
||||
</div>
|
||||
<div class="wrap1_1_2">更换</div>
|
||||
</div>
|
||||
<div class="wrap1_1_2">更换</div>
|
||||
<div class="wrap1_2">上传身份证人像面</div>
|
||||
</div>
|
||||
<div class="wrap1_2">上传身份证人像面</div>
|
||||
</div>
|
||||
</van-uploader>
|
||||
</div>
|
||||
<div class="content3">
|
||||
<van-uploader>
|
||||
<div class="wrap1">
|
||||
<div class="wrap1_1">
|
||||
<div class="wrap1_1_1">
|
||||
<img src="@/assets/images/zu1172@2x.png" alt="">
|
||||
</van-uploader>
|
||||
</div>
|
||||
<div class="content3">
|
||||
<van-uploader :after-read="(e)=>{afterRead(e,1)}">
|
||||
<div class="wrap1">
|
||||
<div class="wrap1_1">
|
||||
<div class="wrap1_1_1">
|
||||
<img :src="iDCardImage.back || defaultImage1" alt="">
|
||||
</div>
|
||||
<div class="wrap1_1_2">更换</div>
|
||||
</div>
|
||||
<div class="wrap1_1_2">更换</div>
|
||||
<div class="wrap1_2">上传身份证国徽面</div>
|
||||
</div>
|
||||
<div class="wrap1_2">上传身份证国徽面</div>
|
||||
</div>
|
||||
</van-uploader>
|
||||
</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_2">某某某</div>
|
||||
<div class="wrap1_1_1">性别</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{
|
||||
margin-bottom: 54px;
|
||||
}
|
||||
.content6{
|
||||
.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%;
|
||||
height: 100%;
|
||||
width: 293px;
|
||||
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%;
|
||||
height: 100%;
|
||||
width: 293px;
|
||||
height: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,48 +1,77 @@
|
||||
<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>
|
||||
<div class="content1">
|
||||
<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>
|
||||
<div class="wrap2">上传近照</div>
|
||||
</div>
|
||||
</van-uploader>
|
||||
<div class="bottom-text">*点击相机上传/拍摄近照</div>
|
||||
</div>
|
||||
</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;
|
||||
.wrap1{
|
||||
padding: 16px 20px 10px 20px;
|
||||
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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user