<template>
|
<el-container>
|
<el-header height="80px">
|
<page-header></page-header>
|
</el-header>
|
<el-main>
|
<el-carousel :interval="8000" height="250px" class="slider-area">
|
<el-carousel-item style="background:url(https://auod-bucket-wms.oss-ap-southeast-2.aliyuncs.com/Upload/Site/slider3.jpg);background-position-y: -150px;">
|
<div class="container">
|
<div class="slide-content-wrapper">
|
<div class="slide-content">
|
<h2>上传身份证号 </h2>
|
<p>请在发货后12小时内上传收货人身份证正反两面清晰扫描件，以便及时办理相关通关手续。 </p>
|
</div>
|
</div>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
|
<!-- Cowork Start -->
|
<section class="container cowork-area">
|
<el-row>
|
<el-col :span="6" :xs="24" class="card-left hidden-xs-only">
|
<div class="search-box">
|
<div class="title">货物追踪查询</div>
|
</div>
|
<div class="search-region">
|
<div class="title">运单号：</div>
|
<el-input v-model="waybillcode" class="w-100pc margin-bottom-10"></el-input>
|
<el-button type="primary" @click="onWaySearch()">查询</el-button>
|
</div>
|
|
</el-col>
|
<el-col :span="18" :xs="24" class="card-main">
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
<el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
|
<el-breadcrumb-item>上传身份证号码</el-breadcrumb-item>
|
</el-breadcrumb>
|
<div class="split-line"></div>
|
<div class="remark">
|
<p>
|
根据中华人民共和国海关最新规定，办理海关入境清关手续时需要提交收件人身份证明，证明包裹物品数量合理及系个人自用，海关相关规定请参考 《中华人民共和国海关对进出境快件监管办法》第二十二条。
|
</p>
|
<p>
|
请在发货后12小时内上传收货人身份证正反两面清晰扫描件，以便及时办理相关通关手续。
|
</p>
|
<p>
|
除了在此上传身份证，也可以将身份证扫描件发送至邮箱
|
<a href="mailto:cs@auod.com.au">cs@auod.com.au</a><br> 邮件内容中请注明运单号、身份证号、收件人姓名，邮件附件需要正反两面的身份证扫描件。
|
</p>
|
<p class="color-red bold">
|
微信上传请加微信公众号：AUOD澳德物流
|
</p>
|
<img src="/static/user/card/card.png" style="width:100%;">
|
</div>
|
|
<div class="margin-top-30">
|
<el-steps :active="step" finish-status="success" align-center>
|
<el-step title="选择身份证图片"></el-step>
|
<el-step title="开始识别信息"></el-step>
|
<el-step title="提交完成"></el-step>
|
</el-steps>
|
<div class="split-line"></div>
|
<div :class="{hidden:hiddenStep1}" class="step1">
|
<el-row class="upload-region">
|
<el-col :span="12" :xs="24" class="align-center">
|
<el-upload :show-file-list="false" :http-request="uploadHttp1" :before-upload="beforeAvatarUpload" class="card-uploader" action="">
|
<img v-if="positiveServerUrl" :src="positiveServerUrl+'?x-oss-process=style/600'" class="card" />
|
<div v-else>
|
<i class="el-icon-plus card-uploader-icon"></i>
|
<div class="text">上传身份证正面</div>
|
</div>
|
</el-upload>
|
</el-col>
|
<el-col :span="12" :xs="24" class="align-center">
|
<el-upload :show-file-list="false" :http-request="uploadHttp2" :before-upload="beforeAvatarUpload" class="card-uploader" action="">
|
<img v-if="negativeServerUrl" :src="negativeServerUrl+'?x-oss-process=style/600'" class="card">
|
<div v-else>
|
<i class="el-icon-plus card-uploader-icon"></i>
|
<div class="text">上传身份证反面</div>
|
</div>
|
</el-upload>
|
</el-col>
|
</el-row>
|
<el-row class="uplaod-footer">
|
<el-button type="primary" @click="startCardValueInner">开始识别身份证</el-button>
|
</el-row>
|
</div>
|
<div :class="{hidden:hiddenStep2}" class="step2">
|
<el-form ref="form" :model="formData" :label-position="labelPostion" label-width="100px" class="margin-top-30">
|
<el-alert :closable="false" title="请确认以下信息正确无误！" type="error" class="margin-top-20 margin-bottom-20">
|
</el-alert>
|
<el-form-item label="收件人姓名">
|
<el-input v-model="formData.userName" :disabled="true" class="w-300"></el-input>
|
</el-form-item>
|
<el-form-item label="身份证号码">
|
<el-input v-model="formData.cardId" :disabled="true" class="w-300"></el-input>
|
</el-form-item>
|
<el-form-item v-if="labelPostion==='top'" label="有效期限">
|
<el-col :span="11" :xs="24">
|
<el-date-picker v-model="formData.date1" :disabled="true" type="date" placeholder="开始日期" class="w-300"></el-date-picker>
|
</el-col>
|
<el-col :span="2" :xs="24" class="line align-center">-</el-col>
|
<el-col :span="11" :xs="24">
|
<el-date-picker v-if="isdate2" v-model="formData.date2" :disabled="true" type="date" placeholder="结束日期" class="w-300"></el-date-picker>
|
</el-col>
|
<el-input v-if="isEnddate2" v-model="formData.date2" :disabled="true" class="w-300"></el-input>
|
</el-form-item>
|
<el-form-item v-else label="有效期限" class="w-550">
|
<el-col :span="11">
|
<el-date-picker v-model="formData.date1" :disabled="true" type="date" placeholder="开始日期" style="width: 100%;"></el-date-picker>
|
</el-col>
|
<el-col :span="2" class="line align-center">-</el-col>
|
<el-col :span="11">
|
<el-date-picker v-if="isdate2" v-model="formData.date2" :disabled="true" type="date" placeholder="结束日期" style="width: 100%;"></el-date-picker>
|
</el-col>
|
<el-input v-if="isEnddate2" v-model="formData.date2" :disabled="true" class="w-60"></el-input>
|
</el-form-item>
|
<el-form-item label="运单号">
|
<el-input v-model="formData.wayBillCode" class="w-300"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="warning" @click="onGo1">上一步</el-button>
|
<el-button type="primary" @click="onSubmit">确认提交</el-button>
|
<el-button>取消</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div :class="{hidden:hiddenStep3}" class="step3">
|
<div class="step3-finished">
|
<i class="el-icon-yrt-yduigouxuan icon"></i>
|
</div>
|
<div class="text">上传完成</div>
|
<el-button type="primary" @click="reStartCard">重新上传身份证信息</el-button>
|
</div>
|
</div>
|
|
</el-col>
|
</el-row>
|
</section>
|
<!-- Cowork End -->
|
</el-main>
|
<el-footer height="auto">
|
<!-- Footer Start -->
|
<page-footer></page-footer>
|
<!-- Footer End -->
|
</el-footer>
|
</el-container>
|
</template>
|
|
<script>
|
import pageHeader from "./components/header.vue";
|
import pageFooter from "./components/footer.vue";
|
var moment = require("moment");
|
import "element-ui/lib/theme-chalk/display.css";
|
import ossClient from "@/utils/aliyun.oss.client";
|
|
export default {
|
components: {
|
pageHeader,
|
pageFooter
|
},
|
data() {
|
return {
|
BASE_API: process.env.BASE_API, // 域名地址
|
// 身份证正面URL
|
positiveServerUrl: null,
|
// 身份证反面URL
|
negativeServerUrl: null,
|
// 识别数据
|
formData: {},
|
// 步骤
|
step: 1,
|
// step1隐藏
|
hiddenStep1: false,
|
// step2隐藏
|
hiddenStep2: true,
|
// step3隐藏
|
hiddenStep3: true,
|
waybillcode: null,
|
isdate2: false,
|
isEnddate2: false,
|
screenWidth: document.body.clientWidth // 屏幕尺寸
|
};
|
},
|
computed: {
|
// 表单标签显示位置
|
labelPostion: function() {
|
if (window.screenWidth <= 480) {
|
return "top";
|
} else {
|
return "left";
|
}
|
}
|
},
|
mounted() {
|
const that = this;
|
window.onresize = () => {
|
return (() => {
|
window.screenWidth = document.body.clientWidth;
|
that.screenWidth = window.screenWidth;
|
if (window.screenWidth <= 480) {
|
this.labelPostion = "top";
|
}
|
})();
|
};
|
},
|
methods: {
|
// 国内识别
|
startCardValueInner() {
|
if (!this.positiveServerUrl) {
|
this.$message.error("身份证正面不能为空");
|
return;
|
}
|
|
if (!this.negativeServerUrl) {
|
this.$message.error("身份证反面不能为空");
|
return;
|
}
|
|
var url = "/api/user/IdCardDistinguishByUrl";
|
var params = {
|
code: this.positiveServerUrl,
|
name: this.negativeServerUrl
|
};
|
// 采用国内域名访问，使用ajax3，澳洲无法访问
|
this.common.ajax3(
|
url,
|
params,
|
res => {
|
res = this.common.objectToCase(res);
|
if (res.result) {
|
var idCardInfo_front = JSON.parse(res.dynamic.front);
|
var idCardInfo_back = JSON.parse(res.dynamic.back);
|
if (idCardInfo_front.image_status === "normal" && idCardInfo_back.image_status === "normal") {
|
this.formData.userName = idCardInfo_front.words_result.姓名.words;
|
this.formData.cardId = idCardInfo_front.words_result.公民身份号码.words;
|
var startYear = idCardInfo_back.words_result.签发日期.words.substr(0, 4);
|
var startMonth = idCardInfo_back.words_result.签发日期.words.substr(4, 2);
|
var startDay = idCardInfo_back.words_result.签发日期.words.substr(6, 2);
|
var endYear = idCardInfo_back.words_result.失效日期.words.substr(0, 4);
|
var endMonth = idCardInfo_back.words_result.失效日期.words.substr(4, 2);
|
var endDay = idCardInfo_back.words_result.失效日期.words.substr(6, 2);
|
|
this.formData.date1 = startYear + "-" + startMonth + "-" + startDay;
|
if (endYear === "长期") {
|
this.formData.date2 = endYear;
|
this.isEnddate2 = true;
|
} else {
|
this.formData.date2 = endYear + "-" + endMonth + "-" + endDay;
|
this.isdate2 = true;
|
}
|
|
this.step = 2;
|
this.hiddenStep1 = true;
|
this.hiddenStep2 = false;
|
this.hiddenStep3 = true;
|
} else {
|
this.$message.error(
|
"身份证不正确：" + idCardInfo_front.image_status + ", " + idCardInfo_back.image_status
|
);
|
}
|
} else {
|
this.$message.error("未获取到身份证信息，请手工输入身份证信息");
|
this.step = 2;
|
this.hiddenStep1 = true;
|
this.hiddenStep2 = false;
|
this.hiddenStep3 = true;
|
this.isdate2 = true;
|
}
|
},
|
true
|
);
|
},
|
// 澳洲识别
|
startCardValue() {
|
if (!this.positiveServerUrl) {
|
this.$message.error("身份证正面不能为空");
|
return;
|
}
|
|
if (!this.negativeServerUrl) {
|
this.$message.error("身份证反面不能为空");
|
return;
|
}
|
|
var url = "/api/tms/userSys/client/idCardUpload";
|
var params = {
|
positiveServerUrl: this.positiveServerUrl,
|
negativeServerUrl: this.negativeServerUrl
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
if (res.result) {
|
var idCardInfo_front = res.data.front;
|
var idCardInfo_back = res.data.back;
|
if (idCardInfo_front.image_status === "normal" && idCardInfo_back.image_status === "normal") {
|
this.formData.userName = idCardInfo_front.words_result.姓名.words;
|
this.formData.cardId = idCardInfo_front.words_result.公民身份号码.words;
|
var startYear = idCardInfo_back.words_result.签发日期.words.substr(0, 4);
|
var startMonth = idCardInfo_back.words_result.签发日期.words.substr(4, 2);
|
var startDay = idCardInfo_back.words_result.签发日期.words.substr(6, 2);
|
var endYear = idCardInfo_back.words_result.失效日期.words.substr(0, 4);
|
var endMonth = idCardInfo_back.words_result.失效日期.words.substr(4, 2);
|
var endDay = idCardInfo_back.words_result.失效日期.words.substr(6, 2);
|
|
this.formData.date1 = startYear + "-" + startMonth + "-" + startDay;
|
if (endYear === "长期") {
|
this.formData.date2 = endYear;
|
this.isEnddate2 = true;
|
} else {
|
this.formData.date2 = endYear + "-" + endMonth + "-" + endDay;
|
this.isdate2 = true;
|
}
|
|
this.step = 2;
|
this.hiddenStep1 = true;
|
this.hiddenStep2 = false;
|
this.hiddenStep3 = true;
|
} else {
|
this.$message.error(
|
"身份证不正确：" + idCardInfo_front.image_status + ", " + idCardInfo_back.image_status
|
);
|
}
|
} else {
|
this.$message.error("未获取到身份证信息，请手工输入身份证信息");
|
this.step = 2;
|
this.hiddenStep1 = true;
|
this.hiddenStep2 = false;
|
this.hiddenStep3 = true;
|
this.isdate2 = true;
|
}
|
},
|
true
|
);
|
},
|
// 返回第一步
|
onGo1() {
|
this.step = 1;
|
this.hiddenStep1 = false;
|
this.hiddenStep2 = true;
|
this.hiddenStep3 = true;
|
},
|
// 保存数据
|
onSubmit() {
|
var endDate = "";
|
if (!this.formData.date1) {
|
this.$message.error("开始日期不能为空");
|
return;
|
}
|
if (!this.formData.date2) {
|
this.$message.error("结束日期不能为空");
|
return;
|
}
|
const startDate = moment(this.formData.date1).format("YYYY-MM-DD");
|
if (this.formData.date2 === "长期") {
|
endDate = this.formData.date2;
|
} else {
|
endDate = moment(this.formData.date2).format("YYYY-MM-DD");
|
}
|
var url = "/api/tms/userSys/client/addIdCard";
|
var params = {
|
userName: this.formData.userName,
|
cardId: this.formData.cardId,
|
positiveServerUrl: this.positiveServerUrl,
|
negativeServerUrl: this.negativeServerUrl,
|
startDate: startDate,
|
endDate: endDate,
|
wayBillCode: this.formData.wayBillCode,
|
creator: "pc"
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.step = 2;
|
this.hiddenStep1 = true;
|
this.hiddenStep2 = true;
|
this.hiddenStep3 = false;
|
}
|
},
|
true
|
);
|
},
|
// 重新上传
|
reStartCard() {
|
this.step = 1;
|
this.hiddenStep1 = false;
|
this.hiddenStep2 = true;
|
this.hiddenStep3 = true;
|
this.positiveServerUrl = null;
|
this.negativeServerUrl = null;
|
this.formData = {};
|
},
|
onWaySearch() {
|
if (this.waybillcode !== null) {
|
location.href = "/user.html#/way-search/" + this.waybillcode;
|
}
|
},
|
// 上传至阿里云
|
/**
|
* 阿里云OSS上传
|
*/
|
uploadHttp1({ file }) {
|
const fileName = `Upload/Temp/${this.common.formatDate(
|
new Date(),
|
"YYYY-MM-DD"
|
)}/${new Date().valueOf()}-${this.common.getGUID()}.jpg`; // 定义唯一的文件名
|
ossClient(this.common.uploadConf)
|
.put(fileName, file, {
|
ContentType: "image/jpeg"
|
})
|
.then(({ res, url, name }) => {
|
if (res && res.status === 200) {
|
this.positiveServerUrl = res.requestUrls[0];
|
}
|
})
|
.catch(() => {
|
this.$message.error(`网络超时请检查网络后重试`);
|
});
|
},
|
uploadHttp2({ file }) {
|
const fileName = `Upload/Temp/${this.common.formatDate(
|
new Date(),
|
"YYYY-MM-DD"
|
)}/${new Date().valueOf()}-${this.common.getGUID()}.jpg`; // 定义唯一的文件名
|
ossClient(this.common.uploadConf)
|
.put(fileName, file, {
|
ContentType: "image/jpeg"
|
})
|
.then(({ res, url, name }) => {
|
if (res && res.status === 200) {
|
this.negativeServerUrl = res.requestUrls[0];
|
}
|
})
|
.catch(() => {
|
this.$message.error(`网络超时请检查网络后重试`);
|
});
|
},
|
/**
|
* 图片限制
|
*/
|
beforeAvatarUpload(file) {
|
// if (this.positiveServerUrl && this.negativeServerUrl) {
|
// this.positiveServerUrl = null;
|
// this.negativeServerUrl = null;
|
// }
|
|
const names = file.name.split(".");
|
const isJPEG = names[names.length - 1] === "jpeg";
|
const isJPG = names[names.length - 1] === "jpg";
|
const isPNG = names[names.length - 1] === "png";
|
const isLt5MB = file.size / 1024 / 1024 < 5;
|
if (!isJPG && !isJPEG && !isPNG) {
|
this.$message.error("上传图片只能是 JPEG/JPG/PNG 格式!");
|
}
|
if (!isLt5MB) {
|
this.$message.error("单张图片大小不能超过 5MB!");
|
}
|
return (isJPEG || isJPG || isPNG) && isLt5MB;
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
@import "@/styles/user.scss";
|
</style>
|
|
<style lang="scss" scoped>
|
.el-header {
|
background-color: white;
|
padding: 10px;
|
}
|
.el-main {
|
background-color: white;
|
padding: 0px;
|
.slide-content-wrapper {
|
display: inline-table;
|
width: 100%;
|
margin-top: 50px;
|
}
|
.slide-content {
|
display: table-cell;
|
text-align: center;
|
vertical-align: middle;
|
}
|
.slide-content h2 {
|
color: #fff;
|
font-family: "Playfair Display", serif;
|
font-size: 40px;
|
font-weight: 400;
|
margin-bottom: 20px;
|
text-transform: capitalize;
|
-webkit-animation-delay: 0.7s;
|
animation-delay: 0.7s;
|
-webkit-animation-duration: 1s;
|
animation-duration: 1s;
|
-webkit-animation-fill-mode: both;
|
animation-fill-mode: both;
|
-webkit-animation-name: fadeOutDown;
|
animation-name: fadeOutDown;
|
}
|
.slide-content p {
|
color: #fff;
|
font-family: "Lato", sans-serif;
|
font-size: 20px;
|
font-weight: 400;
|
margin-bottom: 30px;
|
-webkit-animation-delay: 0.8s;
|
animation-delay: 0.8s;
|
-webkit-animation-duration: 1s;
|
animation-duration: 1s;
|
-webkit-animation-fill-mode: both;
|
animation-fill-mode: both;
|
-webkit-animation-name: fadeOutDown;
|
animation-name: fadeOutDown;
|
}
|
.slide-content .banner-btn {
|
-webkit-animation-delay: 1.2s;
|
animation-delay: 1.2s;
|
-webkit-animation-duration: 1s;
|
animation-duration: 1s;
|
-webkit-animation-fill-mode: both;
|
animation-fill-mode: both;
|
-webkit-animation-name: fadeOutDown;
|
animation-name: fadeOutDown;
|
}
|
.slider-area .el-carousel__item.is-active .slide-content h2,
|
.slider-area .el-carousel__item.is-active .slide-content p,
|
.slider-area .el-carousel__item.is-active .banner-btn {
|
-webkit-animation-name: fadeInUp;
|
animation-name: fadeInUp;
|
}
|
.slider-area .el-carousel__item.is-active .banner-btn {
|
-webkit-animation-name: fadeInUp;
|
animation-name: fadeInUp;
|
}
|
|
.card-left {
|
padding: 20px 20px 50px;
|
border-right: 1px solid #e4e7ed;
|
.search-box {
|
border-bottom: 2px solid #e4e7ed;
|
padding-top: 2px;
|
padding-bottom: 13px;
|
margin-bottom: 10px;
|
position: relative;
|
&:after {
|
content: " ";
|
position: absolute;
|
bottom: -2px;
|
width: 100px;
|
border-bottom: 2px solid #409eff;
|
}
|
}
|
.search-region {
|
.title {
|
padding: 10px 0;
|
}
|
}
|
}
|
.card-main {
|
padding: 20px 20px 50px;
|
.remark {
|
line-height: 1.8;
|
font-size: 14px;
|
}
|
.upload-region {
|
margin-top: 30px;
|
/deep/ .card-uploader .el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
.text {
|
margin-bottom: 30px;
|
color: #888;
|
}
|
}
|
/deep/ .card-uploader .el-upload:hover {
|
border-color: #409eff;
|
}
|
.card-uploader-icon {
|
font-size: 58px;
|
color: #8c939d;
|
width: 300px;
|
height: 150px;
|
line-height: 170px;
|
text-align: center;
|
}
|
.card {
|
width: 178px;
|
height: 178px;
|
display: block;
|
}
|
}
|
.uplaod-footer {
|
margin-top: 50px;
|
text-align: center;
|
}
|
.step3 {
|
margin-top: 50px;
|
text-align: center;
|
.step3-finished {
|
width: 80px;
|
height: 80px;
|
border-radius: 40px;
|
background-color: #409eff;
|
display: inline-block;
|
|
padding: 13px;
|
.icon {
|
font-size: 60px;
|
color: white;
|
}
|
}
|
.text {
|
font-size: 14px;
|
color: #888;
|
padding: 10px 30px 100px;
|
}
|
}
|
}
|
}
|
.el-footer {
|
padding: 0;
|
}
|
/* 手机屏 */
|
@media screen and (max-width: 480px) {
|
.container {
|
padding-left: 0px;
|
padding-right: 0px;
|
}
|
.el-main {
|
.card-left {
|
padding: 20px 20px 10px;
|
}
|
.card-main {
|
padding: 20px 20px 50px;
|
border-left: 0px solid #e4e7ed;
|
}
|
}
|
}
|
</style>
|
