<template>
|
<div class="advance-auth">
|
<div class="router-view">
|
<section data-v-b78bf5cc="" class="container">
|
<section data-v-b78bf5cc="" class="header">
|
<i
|
data-v-b78bf5cc=""
|
class="el-icon"
|
style="font-size: 30px; --color: #fff"
|
><svg
|
data-v-b78bf5cc=""
|
xmlns="http://www.w3.org/2000/svg"
|
viewBox="0 0 1024 1024"
|
>
|
<path
|
fill="currentColor"
|
d="M224 480h640a32 32 0 1 1 0 64H224a32 32 0 0 1 0-64"
|
></path>
|
<path
|
fill="currentColor"
|
d="m237.248 512 265.408 265.344a32 32 0 0 1-45.312 45.312l-288-288a32 32 0 0 1 0-45.312l288-288a32 32 0 1 1 45.312 45.312z"
|
></path>
|
</svg>
|
</i>
|
<p data-v-b78bf5cc="" class="header-content">高級認證</p>
|
</section>
|
<section data-v-b78bf5cc="" class="content">
|
<p data-v-b78bf5cc="" class="content-title">高級認證照片</p>
|
<div data-v-b78bf5cc="" class="form">
|
<div
|
data-v-b78bf5cc=""
|
class="el-row"
|
element-loading-background="transparent"
|
>
|
<div data-v-b78bf5cc="" class="uploader-container">
|
<el-upload
|
data-v-b78bf5cc=""
|
class="avatar-uploader"
|
:action="`${nowUrl}/wap/public/uploadimg!execute.action`"
|
accept=".jpg,.jpeg,.png,.gif.JPG,.JPEG,.PNG,.GIF"
|
:show-file-list="false"
|
:on-success="handelDoucumentsFront"
|
:before-upload="(file) => beforeUpload(file, 0)"
|
:on-change="(file) => handleChange(file, 0)"
|
>
|
<span
|
data-v-b78bf5cc=""
|
class="avatar-uploader-icon1 avatar-uploader-icons"
|
></span>
|
<img
|
v-if="previewList[0]"
|
:src="previewList[0]"
|
class="preview-img"
|
/>
|
</el-upload>
|
<p data-v-b78bf5cc="" class="avatar-uploader__title">
|
身份證正面照
|
</p>
|
<p data-v-b78bf5cc="" class="avatar-uploader__desc">
|
請上傳身份證正面照
|
</p>
|
</div>
|
</div>
|
<div
|
data-v-b78bf5cc=""
|
class="el-row"
|
element-loading-background="transparent"
|
>
|
<div data-v-b78bf5cc="" class="uploader-container">
|
<el-upload
|
data-v-b78bf5cc=""
|
class="avatar-uploader"
|
:action="`${nowUrl}/wap/public/uploadimg!execute.action`"
|
accept=".jpg,.jpeg,.png,.gif.JPG,.JPEG,.PNG,.GIF"
|
:on-success="handelDoucumentsBack"
|
:show-file-list="false"
|
:before-upload="(file) => beforeUpload(file, 1)"
|
:on-change="(file) => handleChange(file, 1)"
|
>
|
<div class="upload-inner">
|
<span
|
data-v-b78bf5cc=""
|
class="avatar-uploader-icon1 avatar-uploader-icons"
|
></span>
|
<img
|
v-if="previewList[1]"
|
:src="previewList[1]"
|
class="preview-img"
|
/>
|
</div>
|
</el-upload>
|
<p data-v-b78bf5cc="" class="avatar-uploader__title">
|
身份證反面照
|
</p>
|
<p data-v-b78bf5cc="" class="avatar-uploader__desc">
|
請上傳身份證反面照
|
</p>
|
</div>
|
</div>
|
<div
|
data-v-b78bf5cc=""
|
class="el-row"
|
element-loading-background="transparent"
|
>
|
<div data-v-b78bf5cc="" class="uploader-container">
|
<el-upload
|
data-v-b78bf5cc=""
|
class="avatar-uploader"
|
action=""
|
:action="`${nowUrl}/wap/public/uploadimg!execute.action`"
|
accept=".jpg,.jpeg,.png,.gif.JPG,.JPEG,.PNG,.GIF"
|
:on-success="holdIdCardSuccess"
|
:show-file-list="false"
|
:before-upload="(file) => beforeUpload(file, 2)"
|
:on-change="(file) => handleChange(file, 2)"
|
>
|
<span
|
data-v-b78bf5cc=""
|
class="avatar-uploader-icon1 avatar-uploader-icons"
|
></span>
|
<img
|
v-if="previewList[2]"
|
:src="previewList[2]"
|
class="preview-img"
|
/>
|
</el-upload>
|
<p data-v-b78bf5cc="" class="avatar-uploader__title">
|
手持證件照片
|
</p>
|
<p data-v-b78bf5cc="" class="avatar-uploader__desc">
|
請上傳手持證件照片
|
</p>
|
</div>
|
</div>
|
</div>
|
</section>
|
<button data-v-b78bf5cc="" class="page-btn" @click="onSubmit">
|
提交審核
|
</button>
|
</section>
|
</div>
|
</div>
|
<footer-view></footer-view>
|
</template>
|
<script setup>
|
import { ref } from "vue";
|
import { ElMessage } from "element-plus";
|
import Axios2 from "@/api/my.js";
|
|
// 三张图片的文件和预览
|
const fileList = ref([null, null, null]);
|
const previewList = ref([null, null, null]);
|
|
//上传背面
|
const idBackImg = ref(null);
|
const idFrontImg = ref(null);
|
const handheldPhoto = ref(null);
|
function handelDoucumentsFront(res, file) {
|
const { path, httpUrl } = res.data;
|
console.log("上传成功", path);
|
// this.twoImg = httpUrl;
|
idFrontImg.value = path;
|
}
|
function handelDoucumentsBack(res, file) {
|
const { path, httpUrl } = res.data;
|
console.log("上传成功", path);
|
// this.twoImg = httpUrl;
|
idBackImg.value = path;
|
}
|
function holdIdCardSuccess(res, file) {
|
const { path, httpUrl } = res.data;
|
console.log("上传成功", path);
|
// this.twoImg = httpUrl;
|
handheldPhoto.value = path;
|
}
|
|
function beforeUpload(file, idx) {
|
console.log("beforeUpload", file, idx);
|
if (!file.type.startsWith("image/")) {
|
ElMessage.error("請選擇圖片文件");
|
return false;
|
}
|
fileList.value[idx] = file;
|
// 生成本地预览
|
const reader = new FileReader();
|
reader.onload = (ev) => {
|
previewList.value[idx] = ev.target.result;
|
};
|
reader.readAsDataURL(file);
|
// 阻止自动上传
|
return false;
|
}
|
function handleChange(file, idx) {
|
// 这里可以根据需要处理 file
|
}
|
// 提交
|
async function onSubmit() {
|
if (!fileList.value[0] || !fileList.value[1] || !fileList.value[2]) {
|
ElMessage.error("請上傳所有照片");
|
return;
|
}
|
const formData = new FormData();
|
formData.append("front", fileList.value[0]);
|
formData.append("back", fileList.value[1]);
|
formData.append("hand", fileList.value[2]);
|
Axios2.apply({
|
// nationality: this.nationality,
|
// idNumber: this.idNumber,
|
idName: "id/passpost",
|
// name: this.name,
|
idFrontImg: idFrontImg.value,
|
idBackImg: idBackImg.value,
|
handheldPhoto: handheldPhoto.value,
|
}).then((res) => {
|
if (res.code == "0") {
|
// 出来一个弹窗，显示已经提交成功
|
ElMessage.success("提交成功，請等待審核");
|
this.$parent.getIdentifyInfo();
|
}
|
});
|
}
|
</script>
|
<style scoped>
|
@import url("@/assets/css/my/index-0c4c93e2.css");
|
@import url("@/assets/css/my/index-a4ccec66.css");
|
|
.preview-img {
|
width: 300px;
|
height: 200px;
|
object-fit: cover;
|
margin-top: 8px;
|
border-radius: 6px;
|
border: 1px solid #eee;
|
}
|
.el-upload__input {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
opacity: 0;
|
cursor: pointer;
|
/* 不要用 display: none; */
|
}
|
.avatar-uploader {
|
position: relative;
|
display: inline-block;
|
}
|
.upload-inner {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
.avatar-uploader-icons {
|
display: block;
|
width: 100%;
|
height: 100%;
|
line-height: 120px;
|
text-align: center;
|
font-size: 32px;
|
color: #8c939d;
|
}
|
.preview-img {
|
position: absolute;
|
left: 0;
|
top: -8px;
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
border-radius: 6px;
|
border: 1px solid #eee;
|
z-index: 2;
|
}
|
</style>
|
