实战练习
时间：2020-04-16 15:37:37
收藏：0
阅读：97
<template>
<div>
<!-- 可信电子文档在线验证 -->
<div class="inline">
<img src="../../static/images/logo.png" alt="" style=‘position:absolute;top:50px;left:50px;‘>
<div v-show="detail">
<div class="title">
<p>验证您的电子文档信息是否真实有效，是否被篡改</p>
<p style="color:#7B89A6;">
Verify that if your electronic document information is authentic ,and if tampered
</p>
</div>
<el-form :model="form">
<el-form-item label="" :label-width="formLabelWidth">
<el-upload
id="img"
ref="uploadPdf"
action="/api/sign/rejectSign.action"
:limit=‘limitNum‘
:auto-upload="false"
accept=".pdf,.PDF"
:before-upload="beforeUploadFile"
:on-exceed="exceedFile"
:on-success="handleSuccess"
:on-error="handleError">
<el-button size="small" plain>上传PDF电子文档</el-button>
</el-upload>
</el-form-item>
<el-form-item>
<el-tooltip placement=‘top-start‘ effect="light">
<div slot="content" class="content">
<div class="img">
<img :src=‘src‘ alt="">
</div>
<div style="border-top:1px solid #eee;height:2px;"></div>
<div class="yzm" style="">
<span class="first" @click=‘changePic‘>看不清？换一张</span>
<span>字母区分大小写</span>
</div>
</div>
<el-input v-model="input" placeholder="图片验证码"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item>
<el-button class="small" size="small" type="primary" @click="uploadFile">在线验证</el-button>
</el-form-item>
</el-form>
</div>
<!-- 电子文档验证结果-签章成功 -->
<div class="result" v-show="correct">
<p class="header">电子文档验证结果</p>
<div class="information">
<img src="../../static/images/完成.png" alt="">
<p style="color:#6CD08E;font-size:16px;margin-top:10px;margin-bottom:15px;">
验证通过！该电子文档已签名且所有签名都有效！
</p>
<p style="color:#999">该文档的签发部门和签发时间为：</p>
<div style="border-top:1px solid #eee;height:5px;margin-top:8px;"></div>
<p style="color:#000;">{{docName}}第1页（共{{pages}}页）</p>
<p style="color:#000;">{{signatureName}}<span>于{{signedontime}}签发</span></p>
<div style="position:absolute;top:192px;left:388px;">
<img style="width:150px;" src="../../static/images/验证成功.png" alt="">
</div>
</div>
<div class="button">
<el-button size=‘mini‘ @click="view" class="left">查看详情</el-button>
<el-button size=‘mini‘ @click="goback" class="right">返回</el-button>
</div>
</div>
<!-- 电子文档验证结果-签章成功 -->
<div class="result" v-show="correct1">
<p class="header">电子文档验证结果</p>
<div class="information">
<img src="../../static/images/完成.png" alt="">
<p style="color:#6CD08E;font-size:16px;margin-top:10px;margin-bottom:15px;">
验证通过！该电子文档签名控制部分有效！
</p>
<p style="color:#999">该文档的签发部门和签发时间为：</p>
<div style="border-top:1px solid #eee;height:5px;margin-top:8px;"></div>
<p style="color:#000;">{{docName}}第1页（共{{pages}}页）</p>
<p style="color:#000;">{{signatureName}}<span>于{{signedontime}}签发</span></p>
<div style="position:absolute;top:192px;left:388px;">
<img style="width:150px;" src="../../static/images/验证成功.png" alt="">
</div>
</div>
<div class="button">
<el-button size=‘mini‘ @click="view1" class="left">查看详情</el-button>
<el-button size=‘mini‘ @click="goback" class="right">返回</el-button>
</div>
</div>
<!-- 电子文档验证结果详情 -->
<div class="style" v-show="success">
<p class="header">电子文档验证结果详情</p>
<div class="infor">
<div>
<p>验证结果</p>
<span>1.该文档签名有效。</span>
<span>2.自应用本签名以来，文档未被修改。</span>
</div>
<div style="border-bottom:1px solid #eee;border-top:1px solid #eee">
<p>签章信息</p>
<span>1.签发部门：{{signer}}</span>
<span>2.签名时间{{signedontime}}</span>
<!-- <span>3.时间戳：{{timestamptime}}</span>
<span>4.证书机构：{{o}}</span> -->
</div>
<div>
<p>电子文档信息</p>
<span>1.文档名称：{{docName}}</span>
<span>2.该文档的拥有者为{{userName}}</span>
</div>
</div>
<div class="button">
<el-button size=‘mini‘ @click="goto" class="right">返回</el-button>
</div>
</div>
<!-- 电子文档验证结果详情 -->
<div class="style" v-show="success1">
<p class="header">电子文档验证结果详情</p>
<div class="infor">
<div>
<p>验证结果</p>
<span>1.该文档签名有效。</span>
<span>2.由于文档控制的文档修订版次尚未被更改，但在其后，文档已被更改。</span>
</div>
<div style="border-bottom:1px solid #eee;border-top:1px solid #eee">
<p>签章信息</p>
<span>1.签发部门：{{signer}}</span>
<span>2.签名时间{{signedontime}}</span>
<!-- <span>3.时间戳：{{timestamptime}}</span>
<span>4.证书机构：{{o}}</span> -->
</div>
<div>
<p>电子文档信息</p>
<span>1.文档名称：{{docName}}</span>
<span>2.该文档的拥有者为{{userName}}</span>
</div>
</div>
<div class="button">
<el-button size=‘mini‘ @click="goto1" class="right">返回</el-button>
</div>
</div>
<!-- 电子文档验证结果-签章失败 -->
<div class="result" v-show="defeated">
<p class="header">电子文档验证结果</p>
<div class="information">
<img src="../../static/images/失败.png" alt="">
<p style="color:red;font-size:16px;margin-top:10px;margin-bottom:15px;">
验证未通过！该电子文档经验证无效！
</p>
<p style="color:#999">{{message}}</p>
<div style="border-top:1px solid #eee;height:5px;margin-top:8px;"></div>
<div style="position:absolute;top:192px;left:388px;">
<img style="width:150px;" src="../../static/images/验证失败.png" alt="">
</div>
</div>
<div class="button">
<el-button size=‘mini‘ class="right" @click="goback">返回</el-button>
</div>
</div>
</div>
<!-- 可信电子文档验证指南 -->
<div class="fingerpost">
<div class="title">
<span class="left">可信电子文档验证指南</span>
<span class="right">Trusted Electronic Document Validation Guide</span>
</div>
<div class=‘body‘>
<div class="introduce">
可信电子文档，是具有电子签章的PDF版文件。采用了国密算法和国际加密算法相结合的双重数字签名，不仅有力保证了文件的可信度和不可篡改性，而且使得文件具有更强的安全性和自主性。
用户可通过Adobe阅读器打开电子文档，点击“电子印章”，就可以获得文件签名验证状态，查询数字证书的签名属性、签发时间等信息。同时可通过可信电子文档在线验证平台进行有效验证。
</div>
<div class="process">
<p>在线验证流程：</p>
<img src="../../static/images/流程.png" alt="">
</div>
</div>
<div class="footer">
<p>查询结果</p>
<ul>
<li>
<img src="../../static/images/是否篡改.png" alt="">
<div>文档信息是否被篡改</div>
</li>
<li>
<img src="../../static/images/是否有效.png" alt="">
<div>签章是否有效</div>
</li>
<li>
<img src="../../static/images/签章部门.png" alt="">
<div>签章部门</div>
</li>
<li>
<img src="../../static/images/签章时间.png" alt="">
<div>签章时间</div>
</li>
<li>
<img src="../../static/images/时间戳.png" alt="">
<div>时间戳</div>
</li>
<div class="null"></div>
</ul>
</div>
</div>
<el-dialog
:visible.sync="dialogVisible"
width="20%"
:before-close="handleClose">
<img src="../../static/images/加载.png" v-show="loding" alt="">
<img src="../../static/images/提示.png" v-show="prompt" alt="">
<span>{{msg}}</span>
</el-dialog>
</div>
</template>
<script>
import axios from ‘axios‘
export default {
data () {
return {
dialogVisible: false,
detail:true,
success:false,
success1:false,
defeated:false,
correct:false,
correct1:false,
loding:true,
prompt:false,
signedontime:‘‘,
timestamptime:‘‘,
o:‘‘,
signer:‘‘,
message:‘‘,
msg:‘‘,
input: ‘‘,
limitNum: 1,
formLabelWidth: ‘80px‘,
src:‘‘,
param:‘‘,
docName:‘‘,
signatureName:‘‘,
pages:‘‘,
userName:‘‘,
}
},
created(){
this.src = ‘http://kxzzdy.xauat.edu.cn/randCodeImage?randCodeType=6&width=180&heigth=100&fontSize=20‘;
},
methods:{
changePic: function(){
this.src=‘http://kxzzdy.xauat.edu.cn/randCodeImage?randCodeType=6&width=180&heigth=100&fontSize=20&r=‘+ Math.ceil(Math.random()*10);
},//上传移除事件
beforeRemove(file,fileList){
return true;
},
// 文件超出个数限制时的钩子s
exceedFile(files, fileList) {
// this.$notify.warning({
// title: ‘警告‘,
// message: `只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`
// });
},
// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
beforeUploadFile(file) {
// let extension = file.name.substring(file.name.lastIndexOf(‘.‘)+1)
// alert(extension);
// let size = file.size / 1024 / 1024
// if(extension !== ‘pdf‘ || extension!==‘PDF‘) {
// this.$notify.warning({
// title: ‘警告‘,
// message: `PDF的文件`
// });
// }
this.param=new FormData();
this.param.append("file",file);
return false;
},
// 文件上传成功时的钩子
handleSuccess(res, file, fileList) {
// this.$notify.success({
// title: ‘成功‘,
// message: `文件上传成功`
// });
},
// 文件上传失败时的钩子
handleError(err, file, fileList) {
// this.$notify.error({
// title: ‘错误‘,
// message: `文件上传失败`
// });
},
uploadFile() {
this.msg = ‘正在验证中...‘;
this.loding = true;
this.prompt = false;
if(this.input !== ‘‘){
this.dialogVisible = true;
}
this.$refs.uploadPdf.submit();
this.param.append("randCode",this.input);
let config={headers:{‘Content-Type‘:‘multipart/form-data‘}};
axios.post(‘http://kxzzdy.xauat.edu.cn/sign/rejectSign.action‘,this.param,config)
.then(rs=>{
if(rs.data.code == 1){
this.dialogVisible = false;
if(rs.data.data.sign.code == 1000){
let data=JSON.parse(rs.data.data.sign.data);
// console.log(rs.data.data.Other.docName,666);
this.docName = rs.data.data.Other.docName;
this.signatureName = rs.data.data.Other.signatureName;
this.pages = rs.data.data.Other.pages;
this.userName = rs.data.data.Other.userName;
if(data.length>0){
let d = data[data.length-1];
this.signedontime = d.signedontime;
this.timestamptime = d.timestamptime;
this.o = d.o;
this.signer = d.signer;
//验签通过未被篡改
if(d.integrityflag){
// alert(‘验签通过，未被篡改‘);
this.detail = false;
this.correct = true;
//验签通过已被篡改
}else{
// alert(‘验签通过，已被篡改‘);
this.detail = false;
this.correct1 = true;
// this.defeated = true;
}
}else{
//非法文档
}
}else if(rs.data.data.sign.code == 2002){
let data=JSON.parse(rs.data.data.sign.data);
// console.log(data);
if(data.length>0){
//验签失败未被篡改
if(data[data.length-1].integrityflag){
// alert(‘验签失败未被篡改‘);
this.detail = false;
this.defeated = true;
//验签失败已被篡改
}else{
// alert(‘验签失败已被篡改‘);
this.detail = false;
this.defeated = true;
}
this.message=rs.data.data.sign.msg;
}else if(data.length==0||rs.data.data.sign.msg.indexOf("不含数字签名")>=0){
//可识别的非法文档
// alert(‘可识别的非法文档‘);
//非法文档
this.detail = false;
this.defeated = true;
this.message=rs.data.data.sign.msg;
}else{
//非法文档
this.detail = false;
this.defeated = true;
this.message=rs.data.data.sign.msg;
// alert(‘未知非法文档‘);
}
}
///this.detail = false;
//this.success = true;
}else if(rs.data.code == 0){
this.msg=‘请检查输入的验证码是否正确‘;
this.loding = false;
this.prompt = true;
}
this.changePic();
});
this.input = ‘‘;
},
goback:function(){
this.defeated = false;
this.correct = false;
this.detail = true;
},
goto:function(){
this.success = false;
this.correct = true;
},
goto1:function(){
this.success1 = false;
this.correct = true;
},
view:function(){
this.correct = false;
this.success = true;
},
view1:function(){
this.correct = false;
this.success1 = true;
},
}
}
</script>
<style lang=‘less‘>
.inline{
background: url(‘../../static/images/bg.jpg‘) no-repeat center;
background-size: 100%;
height:905px;
.title{
padding-top:288px;
color:#fff;
}
.el-form{
width: 50%;
margin:0 25%;
margin-top:40px;
margin-bottom:207px;
border:1px solid #fff;
background: #2727274a;
padding-top:60px;
.el-form-item__content{
margin-left:0 !important;
.el-upload{
width:100%;
.el-button{
width:80%;
text-align:left;
height:50px;
border-radius:0px;
font-size:20px;
padding:0 20px;
}
.el-button.is-plain:hover{
color:#29497C;
border-color:#fff;
}
}
.el-input{
width:80%;
.el-input__inner{
height:50px;
border-radius:0px;
font-size:20px;
padding:0 20px;
}
}
}
.small{
margin-top:30px;
}
}
.result{
width:38%;
margin:0 31%;
background: #fff;
position:absolute;
top:315px;
// background: url(‘../../static/images/验证成功.png‘) no-repeat;
.information{
width:42%;
margin:0 28%;
img{
width:70px;
}
p{
width:90%;
padding:0 8%;
text-align:left;
font-size:14px;
margin-top:0;
margin-bottom:0;
span{
color:#999;
}
}
}
}
.header{
color:#191299;
font-size:24px;
margin-bottom:40px;
margin-top:30px;
// font-weight:bold;
}
.button{
margin-top:40px;
margin-bottom:60px;
.el-button{
width:110px;
font-size:18px;
padding-top:8px;
padding-bottom:8px;
}
.left{
background: #F4BA32;
color:#fff;
border-color:#F4BA32;
}
.right{
border-color:#4745A9;
color:#4745A9;
}
}
.style{
width:38%;
margin:0 31%;
background: #fff;
position:absolute;
top:315px;
.infor{
div{
width:42%;
margin:0 28%;
padding-bottom:10px;
p,span{
width:90%;
padding:0 8%;
text-align:left;
}
p{
font-size:20px;
color:#000;
margin-top:10px;
margin-bottom:15px;
}
span{
display:inline-block;
font-size:14px;
color:#959595;
}
}
}
.button{
margin-bottom:20px;
}
}
}
.content{
text-align:center;
.img{
height:100px;
img{
width:90%;
height:100px;
}
}
.yzm{
padding-top:15px;
text-align:center;
.first{
color:#68A0F5;
}
.first:hover{
cursor: pointer;
}
}
}
.fingerpost{
.title{
height:50px;
line-height:50px;
width:100%;
font-size:20px;
span{
display:inline-block;
color: #fff;
width:50%;
}
.left{
background: #003D90;
float:left;
}
.right{
background: #F4AD13;
float:right;
}
}
.body{
padding-top:50px;
.introduce{
width:60%;
margin:0 20%;
text-align:left;
}
.process{
margin-top:70px;
p{
color:#F4AD13;
font-size:24px;
margin-bottom:50px;
margin-bottom:50px;
}
}
}
.footer{
margin-top:70px;
padding-top:10px;
background:#003D90;
height:310px;
p{
color:#F4AD13;
font-size:24px;
margin-bottom:50px;
margin-bottom:40px;
}
ul{
width:40%;
margin:0 30%;
padding:0;
li{
float:left;
list-style: none;
width:33%;
color:#548DDC;
div{
padding:12px 0;
}
}
.null{
clear:both; //清除子元素给父元素带来的浮动
}
}
}
}
</style>
<style>
.el-upload-list{
width:80%;
margin:0 10% !important;
position:absolute;
top:0px;
}
.el-upload-list__item{
height:50px;
line-height:50px;
background:#fff;
}
.el-upload-list__item:first-child{
margin-top:0px !important;
}
.el-upload-list__item .el-icon-close{
top:15px !important;
font-size:20px;
}
.el-upload-list__item-name{
text-align:left;
font-size:20px;
margin-left:12px;
height:50px;
line-height:50px;
}
.el-icon-document{
display:none;
}
.el-button--primary{
background-color:#F4AD13;
border-color:#F4AD13;
padding:20px 50px !important;
font-size:24px !important;
}
.el-button--primary:hover{
background-color:#F4AD13;
border-color:#F4AD13;
}
.el-tooltip__popper.is-light{
width:200px;
height:130px;
left:595px !important;
border-radius: 0;
border-color:#fff;
position:absolute;
}
.el-message{
top:500px !important;
background-color: #272727b8;
border:none;
color:#fff;
height:60px;
border-radius: 0px;
}
.el-dialog__header{
display:none;
}
.el-dialog__body{
background:#2727274a;
color:#fff;
padding:20px;
margin-top:500px;
}
</style>
评论（0）