|
|
|
@@ -0,0 +1,192 @@ |
|
|
|
<template> |
|
|
|
<div class="home_wrapper"> |
|
|
|
<div class="header"> |
|
|
|
<div class="return_btn" @click="onClickLeft"></div> |
|
|
|
<p>身份核验</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 未认证--> |
|
|
|
<div class="list_main"> |
|
|
|
<p class="userName">万小云 <span class="noCheck">待认证</span></p> |
|
|
|
<p class="id_card">371006598754784267</p> |
|
|
|
<img class="img_block" src="../../assets/images/sunVillage_info/check_icon_02.png" alt=""> |
|
|
|
<p class="text_block">上传或拍摄人像图进行认证</p> |
|
|
|
<p class="btn_block">验证</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 已认证--> |
|
|
|
<div class="list_main"> |
|
|
|
<p class="userName">万小云 |
|
|
|
<span class="yesCheck">已认证<span class="yesTime">2023.10.05</span></span> |
|
|
|
</p> |
|
|
|
<p class="id_card">371006598754784267</p> |
|
|
|
|
|
|
|
<van-uploader v-model="fileList" :max-count="1" multiple :after-read="afterRead" @delete="deleteFile1" /> |
|
|
|
|
|
|
|
<!-- <img class="img_block" src="../../assets/images/sunVillage_info/check_icon_02.png" alt="">--> |
|
|
|
|
|
|
|
<p class="text_block">您已认证，<span>3</span>秒后进入页面...</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import Cookies from "js-cookie"; |
|
|
|
import {attachmentUpload} from "@/api/sunVillage_info/fixedAssets"; |
|
|
|
export default { |
|
|
|
name: "identityCheck", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
fileList:[], |
|
|
|
openPic:[], |
|
|
|
openPic2:[], |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
deleteFile1(detail){ |
|
|
|
this.openPic2.splice(detail.index,1) |
|
|
|
// this.form.openPic.splice(index,1); |
|
|
|
}, |
|
|
|
afterRead(file) { |
|
|
|
this.$toast.loading({ |
|
|
|
message: "上传中...", |
|
|
|
forbidClick: true, |
|
|
|
duration: 0, |
|
|
|
}); |
|
|
|
console.log(file instanceof Array) |
|
|
|
if (file instanceof Array){//判断是否为数组，单张图片为array，多张为数组，数组返回true否则为false |
|
|
|
file.map(res=>{ |
|
|
|
this.openPic.push(res.file); |
|
|
|
let params1 = new FormData(); |
|
|
|
params1.append("file", res.file); |
|
|
|
attachmentUpload(params1).then((r1) => { |
|
|
|
this.openPic2.push(r1.fileName); |
|
|
|
}) |
|
|
|
}) |
|
|
|
}else{ |
|
|
|
this.openPic.push(file); |
|
|
|
let params1 = new FormData(); |
|
|
|
params1.append("file", file.file); |
|
|
|
//提交方法 |
|
|
|
attachmentUpload(params1).then((r1) => { |
|
|
|
this.openPic2.push(r1.fileName); |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
|
|
|
/deep/ .van-uploader{ |
|
|
|
margin: 6vh 0 2vh 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
} |
|
|
|
/deep/ .van-uploader__upload{ |
|
|
|
margin: 0; |
|
|
|
border-radius: 50%; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
/deep/ .van-uploader__preview-image{ |
|
|
|
margin: 0; |
|
|
|
border-radius: 50%; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.home_wrapper{ |
|
|
|
width: 100vw; |
|
|
|
min-height: 100vh; |
|
|
|
background-image:linear-gradient(#29c379, #f1f2f2, #f1f2f2, #f1f2f2); |
|
|
|
.header{ |
|
|
|
text-align: center; |
|
|
|
position: relative; |
|
|
|
height: 110px; |
|
|
|
line-height: 110px; |
|
|
|
color: #ffffff; |
|
|
|
font-size: 16PX; |
|
|
|
} |
|
|
|
.return_btn { |
|
|
|
width: 24px; |
|
|
|
height: 43.2px; |
|
|
|
background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat; |
|
|
|
background-size: 20px 36px; |
|
|
|
position: absolute; |
|
|
|
left: 38px; |
|
|
|
top: 36px; |
|
|
|
} |
|
|
|
|
|
|
|
.list_main{ |
|
|
|
padding:3vh 2vh 10vh; |
|
|
|
background: #ffffff; |
|
|
|
width: 94%; |
|
|
|
margin: 25px auto 0; |
|
|
|
border-radius: 15PX; |
|
|
|
box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1); |
|
|
|
.userName{ |
|
|
|
font-size: 16PX; |
|
|
|
line-height: 1; |
|
|
|
.noCheck{ |
|
|
|
font-size: 14PX; |
|
|
|
color: #ffffff; |
|
|
|
padding: 2PX 10PX 2PX 20PX; |
|
|
|
border-radius: 5PX; |
|
|
|
background: #bdbdbd url("../../assets/images/sunVillage_info/check_icon_01.png") no-repeat left center; |
|
|
|
background-position-x: 5PX; |
|
|
|
background-size: 12PX; |
|
|
|
} |
|
|
|
.yesCheck{ |
|
|
|
font-size: 14PX; |
|
|
|
color: #ffffff; |
|
|
|
padding: 2PX 1PX 2PX 20PX; |
|
|
|
border-radius: 5PX; |
|
|
|
background: #2fc57a url("../../assets/images/sunVillage_info/check_icon_03.png") no-repeat left center; |
|
|
|
background-position-x: 5PX; |
|
|
|
background-size: 12PX; |
|
|
|
.yesTime{ |
|
|
|
padding: 1PX 10PX; |
|
|
|
background: #ccf8d6; |
|
|
|
color: #2fc57a; |
|
|
|
margin-left: 10PX; |
|
|
|
margin-top: 1PX; |
|
|
|
border-radius: 5PX; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.id_card{ |
|
|
|
font-size: 16PX; |
|
|
|
margin-top: 15PX; |
|
|
|
} |
|
|
|
.img_block{ |
|
|
|
width: 30vw; |
|
|
|
margin: 4vh auto 1vh; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
.text_block{ |
|
|
|
font-size: 14PX; |
|
|
|
color: #a7a6a6; |
|
|
|
text-align: center; |
|
|
|
span{ |
|
|
|
font-size: 18PX; |
|
|
|
color: #30c67a; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
.btn_block{ |
|
|
|
display: inline-block; |
|
|
|
font-size: 14PX; |
|
|
|
color: #ffffff; |
|
|
|
border-radius: 5vh; |
|
|
|
padding: 1vh 5vh; |
|
|
|
box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1); |
|
|
|
background-image:linear-gradient(to right,#30c67a, #51e872); |
|
|
|
margin: 4vh 0 0 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
