front/front-vue/src/views/service/credit/pdfShow.vue

<template>
    <div>
        <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->

      <!--   <el-dialog  :visible.sync="dialogVisible" width="80%" height="1080px;" :before-close="handleClose" append-to-body	> -->
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane v-for="item in pdfFileList" :key="item.value" label="合同信息" name="first"  style="height:780px;">
                    <embed :src="'data:application/pdf;base64,' + item.base64"  type="application/pdf" title="Embedded PDF" style="overflow: auto; width: 100%; height: 100%;"/>
                </el-tab-pane>
                <!-- <el-tab-pane label="申请协议" name="first"  style="height:780px;">
                    招采融信申请协议
                    编号：ZCRXKL-20210712001
                    本《供应链金融服务平台融信转让协议》（以下简称为“本协议”、“《融信转让
                    协议》”）由融信转让人、融信受让人于本协议约定的时间在北京市东城区签署：
                    融信转让人：B 供应商 2_TSCF 培训专用
                    住所：成都市高新区新园南二路一号
                    法定代表人：张健
                    融信受让人：B 供应商 1_TSCF 培训专用
                    住所：成都市高新区新园南二路一号
                    法定代表人：张健 鉴于：
                    (A) 融信反向保理平台由中粮资本科技有限责任公司建设并运营，向用户提供
                    应收账款管理、转让、融资等服务。
                    (B) 融信转让人与融信受让人（以下简称为“双方”）均为融信反向保理平台的
                    用户。
                    (C) 融信转让人现持有融信，享有融信项下的应收账款债权。
                    (D) 双方均同意使用融信反向保理平台的服务，现融信转让人拟将融信项下应
                    收账款债权全部或部分通过融信反向保理平台转让给融信受让人，融信受
                    因此，经双方协商一致，签订本协议，约定如下:
                </el-tab-pane>
                <el-tab-pane label="配置管理" name="second" style="height:780px;">
                    住所：成都市高新区新园南二路一号
                    法定代表人：张健
                    融信受让人：B 供应商 1_TSCF 培训专用
                    住所：成都市高新区新园南二路一号
                    法定代表人：张健 鉴于：
                    (A) 融信反向保理平台由中粮资本科技有限责任公司建设并运营，向用户提供
                    应收账款管理、转让、融资等服务。
                    (B) 融信转让人与融信受让人（以下简称为“双方”）均为融信反向保理平台的
                    用户。
                    (C) 融信转让人现持有融信，享有融信项下的应收账款债权。
                    (D) 双方均同意使用融信反向保理平台的服务，现融信转让人拟将融信项下应
                    收账款债权全部或部分通过融信反向保理平台转让给融信受让人，融信受
                    因此，经双方协商一致，签订本协议，约定如下:</el-tab-pane> -->

            </el-tabs>
            <span slot="footer" class="dialog-footer" style="float: right;">
                    <el-button type="primary" @click="selectType" size="mini">签署</el-button>
                    <el-button @click="closePdfShow" size="mini">取 消</el-button>
            </span>
            
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span> -->
        <!-- </el-dialog> -->
        <div>
             <!--选择签署意愿类型-->
            <el-dialog  :visible.sync="confirmIsShow" width="600px"  append-to-body :before-close = "cancelUpdate" center>
                <el-form ref="updateForm"  :disabled="false" :model="updateForm"  v-if="confirmIsShow" label-width="150px"  class="demo-form-inline" :inline="true">
                    <el-radio-group v-model="updateForm.radio">
                        <el-radio label="01">人脸</el-radio>
                        <el-radio label="02">短信</el-radio>
                    </el-radio-group>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="confirmSelect">确 定</el-button>
                    <el-button @click="cancelUpdate">取 消</el-button>
                </div>
            </el-dialog>
            <!--短信-->
            <el-dialog  :visible.sync="messageIsShow" width="800px"  append-to-body :before-close = "cancelMessage" center>
                <el-form ref="messageForm"  :disabled="false" :model="messageForm"  v-if="messageIsShow" label-width="150px"  class="demo-form-inline" :inline="true" @submit.native.prevent>
                        <el-form-item label="验证码" prop="validCode">
                            <el-input v-model="messageForm.validCode" style="width: 200px" maxlength="6"  oninput="value=value.replace(/[^\d]/g,'')"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button  v-show="messShow"  type="success" @click="send">点击获取验证码</el-button>
                            <el-button v-show="!messShow" type="success" disabled><span>{{timer}}</span>秒后重新获取</el-button>
                        </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="checkCode">确定</el-button>
                    <el-button @click="cancelMessage">取 消</el-button>
                </div>
            </el-dialog>
            <!--授权编号的短信框-->
            <el-dialog  :title="授权短信验证"  :visible.sync="projectIsShow" width="800px"  append-to-body :before-close = "cancelProject" center>
                <el-form ref="projectForm"  :disabled="false" :model="projectForm"  v-if="projectIsShow" label-width="150px"  class="demo-form-inline" :inline="true">
                        <el-form-item label="验证码" prop="code">
                            <el-input v-model="projectForm.code" style="width: 200px" maxlength="6"  oninput="value=value.replace(/[^\d]/g,'')"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button  v-show="proShow"  type="success" @click="proSend">点击获取验证码</el-button>
                            <el-button v-show="!proShow" type="success" disabled><span>{{proTimer}}</span>秒后重新获取</el-button>
                        </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="checkProCode">确定</el-button>
                    <el-button @click="cancelProject">取 消</el-button>
                </div>
            </el-dialog>
            <!--人脸二维码-->
            <el-dialog  :visible.sync="faceIsShow" width="500px"  append-to-body :before-close = "cancelFace" center>
                <img :src="'data:image/jpeg;base64,' + this.fileUrl" style="overflow: auto; width: 100%; height: 100%;"/>
            </el-dialog>
        </div>
    </div>
    
</template>


<script>
import {sendMessage,checkCode,faceAuth,checkFaceAuth,contractSigning} from "@/api/service/credit/message";
import {cfcaProjectNo,projectSendMessage,checkProCode} from "@/api/service/credit/cfcaProject";
import {getCreditDetail} from "@/api/service/credit/credit";
export default {
    props : ['pdfFileList','zfiId', 'parent'],
    data() {
        return {
            activeName: "first",
            dialogVisible: false,
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                name: "",
                region: "",
                date1: "",
                date2: "",
                delivery: false,
                type: [],
                resource: "",
                desc: "",
            },
            formLabelWidth: "120px",
             //展示选择意愿
            confirmIsShow:false,
            //意愿
            updateForm:{},
            //意愿类型
            zfpAuthTypeInit:'',
            zfpAuthType:'',
            //短信展示
            messageIsShow:false,
            //短信
            messageForm:{validCode:""},
            //人脸二维码
            fileUrl:"",
            //控制人脸二维码是否展示
            faceIsShow:false,
            //人脸验证结果
            faceResult:"",
            //人脸识别结果传参
            authForm:{},
            //控制短信验证码倒计时是否展示
            messShow:true,
            timer:60,
            openFile:false,
            wordUrl: "",
            show:false,
            heid:false,
            auth_timer : null,
            //融资方审批状态
            zfiSupplierStatus:'',
            //核心审批状态
            zfiCoreStatus:'',
            //平台审批状态
            zfiPlatformStatus:'',
            //融信状态
            zfiStatus:'',
            //盖章文件
            creditSealList:[],
            //生成授权编号的短信框
            projectIsShow:false,
            //短信
            projectForm:{code:""},
            //控制倒计时是否展示
            proShow:true,
            //时间
            proTimer:60,
            //项目编号
            projectCode:"",
            //融信信息
            financeData:{},
            //接收方
            receiveName:"",
            //开立方
            openName:""
        };
    },
    created() {
         getCreditDetail(this.zfiId).then((response) => {
             if(response.data){
                //融信状态
                 this.zfiStatus = response.data.financeInf.zfiStatus;
                 //融资方审批状态
                 this.zfiSupplierStatus =  response.data.financeInf.zfiSupplierStatus;
                 //平台审批状态
                 this.zfiPlatformStatus =  response.data.financeInf.zfiPlatformStatus;
                 //核心审批状态
                 this.zfiCoreStatus = response.data.financeInf.zfiCoreStatus;
                //意愿类型
                this.zfpAuthType = response.data.zfpAuthType;
                this.zfpAuthTypeInit = response.data.zfpAuthType;
                //融信信息
                this.financeData = response.data.financeInf;
                //接收方
                this.receiveName = response.data.receiveName;
                //开立方
                this.openName = response.data.openName;
             }
        })
        this.dialogVisible = true;
        for(var i = 0 ; i < this.pdfFileList.length; i++){
            var base64 = this.pdfFileList[i].base64;
            <embed src="data:application/pdf;base64,"  type="application/pdf" title="Embedded PDF" style="overflow: auto; width: 100%; height: 100%;"/>
        } 
    },
    methods: {
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        selectChildType(){
            this.$parent.selectType();
        },
            //取消选择意愿
    cancelUpdate(){
        this.confirmIsShow = false;
        this.resetUpdate();
    },
    //关闭短信
    cancelMessage(){
        this.messageIsShow = false;
        this.resetMessage();
    },
    //关闭短信
    cancelProject(){
        this.projectIsShow = false;
        this.resetProject();
    },
    //关闭二维码
    cancelFace(){
        this.faceIsShow = false;
    },
    resetUpdate() {
        this.updateForm = {
            radio:""
        };
        //意愿类型还原为全部
        this.zfpAuthType = this.zfpAuthTypeInit;
        this.resetForm("updateForm");

        this.messShow = true;
        clearInterval(this.auth_timer);
        this.timer = 60;

        this.proShow = true;
        clearInterval(this.auth_pro_timer);
        this.proTimer = 60;
    },
    resetMessage() {
        this.messageForm = {
            validCode:""
        };
        this.resetForm("messageForm");
    },
    resetProject(){
         this.projectForm = {
            code:""
        };
        this.resetForm("projectForm");
    },
    //选择类型
    selectType(){
        //查询当前企业是否存在企业授权编号
        cfcaProjectNo().then((response) => {
            //存在授权编号
            if(response.data.scyCfcaAuthNumber){
                 /**
                 * 申请确权：融资审批通过+核心通过+平台通过+融信待确权||
                 * 核心开立:核心审批通过+其余状态为空
                 * 融资开立:融资通过+平台通过+其余状态为空
                 * 
                 */
                this.resetUpdate();
                //调用人脸
                if( (this.zfiSupplierStatus == '01' && this.zfiCoreStatus == '01' && this.zfiPlatformStatus == '01' && this.zfiStatus == '00') ||
                    (this.zfiCoreStatus == '01' && (this.zfiSupplierStatus == '' || this.zfiSupplierStatus == null || this.zfiSupplierStatus == 'null') && (this.zfiPlatformStatus == '' || this.zfiPlatformStatus == null || this.zfiPlatformStatus == 'null') && (this.zfiStatus == '' || this.zfiStatus == null || this.zfiStatus == 'null'))||
                    (this.zfiSupplierStatus == '01' && this.zfiPlatformStatus == '01' && (this.zfiCoreStatus == '' || this.zfiCoreStatus == null || this.zfiCoreStatus == 'null') && (this.zfiStatus == '' || this.zfiStatus == null || this.zfiStatus == 'null'))){
                    //选择签署意愿
                    if(this.zfpAuthType == "00"){
                            this.confirmIsShow = true;
                        }else{
                            this.checking();
                        }

                }else{
                    //直接盖章
                    this.contractSigning();     
                }
            }else{
               //不存在授权编号
               //发送短信验证码认证
                this.projectIsShow = true;

            }
        });
       
    },
    //确认选择
    confirmSelect(){
            if(!this.updateForm.radio){
                this.$message({
                    message: '请选择签署意愿类型',
                    type: 'warning'
                });
                return;
            }

            this.confirmIsShow = false;
            this.zfpAuthType = this.updateForm.radio;
            //调用人脸识别或者短信验证
            this.checking();
    },
    //去签署
    checking(){
        //人脸
        if(this.zfpAuthType == '01'){
          //调用人脸识别生成二维码
          faceAuth().then((response) => {
                if(response.data){
                    //获取二维码
                    this.fileUrl = response.data.fileUrl;
                    //获取源流水号
                    var originalTxSN = response.data.originalTxSN;
                    this.faceIsShow = true;
                    //每10秒查证人脸识别结果
                    var timeInterval = window.setInterval(() => {
                            setTimeout(() => {
                               //源流水不为空并且结果为空
                               if(originalTxSN && !this.faceResult){
                                    this.authForm.originalTxSN = originalTxSN;
                                    //调用查证方法
                                    checkFaceAuth(this.authForm).then((res) => {
                                        //认证结果
                                        this.faceResult = res.data.Verification;
                                        //成功
                                        if(this.faceResult == '20'){
                                            this.msgSuccess("验证成功");
                                            //关闭验证码
                                            this.faceIsShow = false;
                                            //关闭定时
                                            window.clearInterval(timeInterval);
                                            //调用盖章
                                            this.contractSigning();
                                        }else if(this.faceResult == '30'){
                                            this.$message({
                                                message: "验证失败",
                                                type: 'warning'
                                            });
                                            //关闭验证码
                                            this.faceIsShow = false;
                                            window.clearInterval(timeInterval);
                                        }
                                    });
                               }
                            }, 0)
                         },10000)
                }
            });

        }else if(this.zfpAuthType == '02'){//短信
            this.messageIsShow = true;
        }

    },
    //发送短信验证码
    send(){

            //发送
            sendMessage().then((response) => {
                if(response.data){
                    //手机号
                    var newIphone = response.data.newIphone;
                    //结果
                    var result = response.data.result;
                    this.messShow = false;
                    this.auth_timer = window.setInterval(() => {
                        this.messShow = false;
                        setTimeout(() => {
                                this.timer--;
                                if(this.timer <= 0 ){
                                    this.messShow = true;
                                    clearInterval(this.auth_timer);
                                }
                            }, 0)
                        },1000)
                    //成功
                    if("20" == result){
                        this.$message({
                            message: "已向经办人手机号为"+newIphone+"发送短信验证码,请注意查收",
                            type: 'warning'
                        });
                    }else if("10" == result){//失败
                        this.$message({
                            message: "短信发送失败",
                            type: 'warning'
                        });
                    }

                }
            });

    },

    //生成项目授权编号发送短信
    proSend(){
        //发送
        projectSendMessage().then((response) => {
            if(response.data){
                //手机号
                var newIphone = response.data.newIphone;
                //结果
                var result = response.data.result;
                //项目编号
                this.projectCode = response.data.projectCode;
                this.proShow = false;
                this.auth_pro_timer = window.setInterval(() => {
                    this.proShow = false;
                    setTimeout(() => {
                            this.timer--;
                            if(this.timer <= 0 ){
                                this.proShow = true;
                                clearInterval(this.auth_pro_timer);
                            }
                        }, 0)
                    },1000)
                //成功
                if("60000000" == result){
                    this.$message({
                        message: "已向经办人手机号为"+newIphone+"发送短信验证码,请注意查收",
                        type: 'warning'
                    });
                }else{//失败
                    this.$message({
                        message: "短信发送失败",
                        type: 'warning'
                    });
                }

            }
        });
    },
    //校验验证码是否正确
    checkCode(){
            if(!this.messageForm.validCode){
                     this.$message({
                        message: "请输入验证码",
                        type: 'warning'
                    });
                    return;
            }
            //校验验证码
            checkCode(this.messageForm).then((response) => {
                if(response.data){
                    //结果
                    var verification = response.data.verification;
                    //匹配
                    if("20" == verification){
                        //进行下一步-- 盖章
                         this.contractSigning();
                    }else if("30" == verification){//不匹配
                         this.$message({
                            message: "验证有误,请重新输入",
                            type: 'warning'
                        });
                    }

                }
        });
    },
    //盖章
    contractSigning(){
            const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        background: 'rgba(0, 0, 0,0)'
                    });
            contractSigning(this.financeData).then((response) => {
                loading.close();
                //确权：状态为待确权
                if(this.zfiStatus == '00'){
                     this.msgSuccess("确权成功，融信已提交,"+this.receiveName+"签收");
                }else if(this.zfiStatus == '01' && this.zfiCreateType == '0'){//签收
                     this.msgSuccess("恭喜您成功签收一笔融信");
                }else if(this.zfiCreateType == '1' && this.zfiCoreStatus == '01' && !this.zfiStatus){//核心开立
                    this.msgSuccess("开立成功，融信已提交"+this.receiveName+"签收");
                }else if(this.zfiCreateType == '2' && this.zfiPlatformStatus == '01' && this.zfiSupplierStatus == '01' && !this.zfiStatus){
                    //融资开立盖章
                    this.msgSuccess("开立成功,待:"+this.openName+"确权；确权结果请留意待办事项与站内消息");
                }
                if(this.zfpAuthType == '02'){
                    //关闭短信验证
                    this.messageIsShow = false;
                }else if(this.zfpAuthType == '01'){
                    //关闭人脸二维码
                    this.faceIsShow = false;
                }
                this.$store.dispatch(
                    "tagsView/delView",
                    this.$route
                );
                this.$router.go(-1);
            }).catch((response) => {
                loading.close();
            });
    },
    //校验授权编号验证码
    checkProCode(){
            if(!this.projectForm.code){
                     this.$message({
                        message: "请输入验证码",
                        type: 'warning'
                    });
                    return;
            }
            //项目编号
            this.projectForm.projectCode = this.projectCode;
            //校验验证码
            checkProCode(this.projectForm).then((response) => {
                if(response.data){
                    //结果
                    var verification = response.data.verification;
                    //匹配
                    if("60000000" == verification){
                        /**
                         * 申请确权：融资审批通过+核心通过+平台通过+融信待确权||
                         * 核心开立:核心审批通过+其余状态为空
                         * 融资开立:融资通过+平台通过+其余状态为空
                         * 
                         */
                        this.resetUpdate();
                        //调用人脸
                        if( (this.zfiSupplierStatus == '01' && this.zfiCoreStatus == '01' && this.zfiPlatformStatus == '01' && this.zfiStatus == '00') ||
                            (this.zfiCoreStatus == '01' && (this.zfiSupplierStatus == '' || this.zfiSupplierStatus == null || this.zfiSupplierStatus == 'null') && (this.zfiPlatformStatus == '' || this.zfiPlatformStatus == null || this.zfiPlatformStatus == 'null') && (this.zfiStatus == '' || this.zfiStatus == null || this.zfiStatus == 'null'))||
                            (this.zfiSupplierStatus == '01' && this.zfiPlatformStatus == '01' && (this.zfiCoreStatus == '' || this.zfiCoreStatus == null || this.zfiCoreStatus == 'null') && (this.zfiStatus == '' || this.zfiStatus == null || this.zfiStatus == 'null'))){
                            //选择签署意愿
                            if(this.zfpAuthType == "00"){
                                    this.confirmIsShow = true;
                                }else{
                                    this.checking();
                                }

                        }else{
                            //直接盖章
                            this.contractSigning();     
                        }
                    }else {//不匹配
                         this.$message({
                            message: "验证有误,请重新输入",
                            type: 'warning'
                        });
                    }

                }
        });
    },
    closePdfShow(){
        this.parent.closePdfShow();
    }

    },
};
</script>