实战练习

<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>