上一个页面打开页面传递蚕食
function(e) {
if("detail_find" === e.event) {
layer.open({
type: 2,
title: '查看进度',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['100%', '100%'],
content: 'list_current.html',
success:function(layero, index){
var iframe = window['layui-layer-iframe' + index];
iframe.setdata(e.data);
}
});
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>留言板</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
<link rel="stylesheet" href="../../layuiadmin/style/template.css" media="all">
</head>
<style type="text/css">
.layui-col-md12{
padding: 15px;
}
.layui-elem-quote{
padding: 8px 5px;
}
.z_info{
width: 100%;
float: left;
padding:0 20px;
}
.z_info_line{
float: left;
width: 100%;
line-height: 20px;
margin: 6px auto;
}
.z_info_line span{
font-weight: bold;
}
.moneyall{
font-size: 18px!important;
color: #FF9800!important;
}
#steps {
height: 150px;
box-sizing: border-box;
padding-left: 10px;
}
.steppart{
position: absolute;
top: -28px;
left: -5px;
z-index: 99999999;
font-weight: bold;
}
.step-item {
display: inline-block;
line-height: 26px;
position: relative;
background: #ffffff;
margin-top: 30px;
}
.step-item-tail {
width: 100%;
padding: 0 10px;
position: absolute;
left: 0;
top: 13px;
}
.step-item-tail i {
display: inline-block;
width: 100%;
height: 1px;
vertical-align: top;
background: #c2c2c2;
position: relative;
}
.layui-elem-quote{
border-left: 5px solid #1E9FFF!important;
}
.step-item-tail-done {
background: #1E9FFF !important;
}
.step-item-head {
position: relative;
display: inline-block;
height: 26px;
width: 26px;
text-align: center;
vertical-align: top;
color: #1E9FFF;
border: 1px solid #1E9FFF;
border-radius: 50%;
background: #ffffff;
}
.step-item-head.step-item-head-active {
background: #1E9FFF!important;
border: 1px solid #1E9FFF!important;
color: #ffffff!important;
}
.step-item-head.none{
background: #aaaaaa;
border: 1px solid #aaaaaa;
}
.step-item-main {
background: #ffffff;
display: block;
position: absolute;
height: 52px;
width: 100%;
}
.step-item-main-title {
font-weight: bolder;
color: #aaaaaa;
}
.step-item-main-desc {
color: #aaaaaa;
height: 26px;
width: 100%;
}
.tipsmoneytxt{
color: #FF9800;
font-size: 16px;
font-weight: bold;
}
.txt_explian{
margin-top: 20px;
}
</style>
<body>
<div class="layui-fluid layadmin-message-fluid">
<div class="layui-main">
<div class="layui-col-md12">
<div id="steps">
<div class="step-item" style="width: 32%;">
<div class="steppart">确认提交</div>
<div class="step-item-tail">
<i class="step-item-tail-done"></i>
</div>
<div class="step-item-head none" id="stepshead1">
<i class="layui-icon"></i>
</div>
<div class="step-item-main">
<div class="step-item-main-title" id="stepsname1">
<span id="namespan"></span>提交
</div>
<div class="step-item-main-desc" id="stepstime1">
</div>
</div>
</div>
<div class="step-item" style="width: 32%;">
<div class="steppart">确认付款</div>
<div class="step-item-tail">
<i class="step-item-tail-done"></i>
</div>
<div class="step-item-head none" id="stepshead2">
<i class="layui-icon"></i>
</div>
<div class="step-item-main">
<div class="step-item-main-title" id="steppart2">
</div>
<div class="step-item-main-desc" id="stepstime2">
</div>
</div>
</div>
<div class="step-item" style="width: 32%;">
<div class="steppart" id="haserror">
已完成
</div>
<div class="step-item-head none" id="stepshead4">
<i class="layui-icon"></i>
</div>
<div class="step-item-main">
<div class="step-item-main-title" id="steppart4">
</div>
<div class="step-item-main-desc" id="stepstime4">
</div>
</div>
</div>
</div>
<blockquote class="layui-elem-quote layui-text">
佣金概览
</blockquote>
<div class="z_info">
<div class="z_info_line">
名称：<span id="name"></span>
</div>
<div class="z_info_line">
分类：<span id="companyname">休息休息分公司</span>
</div>
<div class="z_info_line">
应发总计：<span class="moneyall"><span id="commission"></span>元，共<span id="count1"></span>人，共<span id="count2"></span>笔</span>
</div>
</div>
<div class="layui-inline layui-card-body" style="margin: 10px 0px;">
<a type="button" class="layui-btn layui-btn-primary" data-type='Detailed' >明细下载</a>
<a type="button" class="layui-btn layui-btn-primary" data-type='eform_down' >电子确认单下载</a>
</div>
<blockquote class="layui-elem-quote layui-text">
打款凭证
</blockquote>
<div class="layui-card-body">
<div class="layui-inline">
<span style="width: 800px!important;float: left; font-size: 16px;">
发放佣金：<span id="allyong"></span>元 共<span id="allcount1"></span>笔; 共<span id="allcount2"></span>人
<span class="tipsmoneytxt">使用余额<span id="yongjinyuer"></span>元，打款<span id="yongjindakuan"></span>元</span>
</span>
</div>
</div>
<div class="layui-card-body">
<div class="layui-inline">
<span style="width: 800px!important;float: left;font-size: 16px;">
服务费：<span id="fuwufei"></span>元； 税费<span id="suifei"></span>元； 共计<span id="allmoney"></span>元
<span class="tipsmoneytxt">使用余额<span id="fuwuyuer"></span>元，打款<span id="fuwudakuan"></span>元</span>
</span>
<!-- <a class="layui-btn layui-btn-primary" data-type='fuwu_down'>凭证下载</a> -->
</div>
</div>
<div class="layui-card-body">
<div class="layui-inline">
<a class="layui-btn layui-btn-primary" data-type='yongjin_down' id="pingzheng_down">凭证下载</a>
</div>
</div>
<blockquote class="layui-elem-quote layui-text">
发放结果
</blockquote>
<div class="layui-inline">
<div class="txt_explian" style="margin-left: 20px;">
请等待
</div>
</div>
<div class="layui-inline">
<a class="layui-btn layui-btn-primary layui-hide" style="margin-left: 30px;" data-type='yichang_down' id="yichang_down">异常详细信息下载</a>
</div>
<div class="layui-inline">
<a class="layui-btn layui-btn-primary layui-hide" style="margin-left: 30px;" data-type='fafang_down' id="fafang_down">佣金发放凭证</a>
</div>
</div>
</div>
</div>
</div>
<script src="../../layuiadmin/layui/layui.js"></script>
<script>
var data
function setdata(d) {
data=d
}
var token;
layui.config({
base: '../../layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index','cookie'], function() {
var $ = layui.$,
layer = layui.layer,
cookie=layui.cookie,
token=cookie.get("token");
$.ajax({
type: 'POST',
url: layui.setter.req_url + 'generalBackstage/showGrantProgressInfo?grantCommissionId='+data.grantid,
contentType: 'application/x-www-form-urlencoded',
headers:{
'token':token
},
dataType: 'json',
success: function(result) {
var jsondata = result.data.grantProgressInfo;
$('#namespan').html(jsondata.account);//名称
$('#name').html(jsondata.name);//名称
$('#companyname').html(jsondata.ename);//名称
$('#commission').html(jsondata.commission);//应发总计
$('#count1').html(jsondata.count);//共几笔,共几人
$('#count2').html(jsondata.count);//共几笔,共几人
$('#allyong').html(jsondata.commission);//共几笔,共几人
$('#allcount1').html(jsondata.count);//共几笔,共几人
$('#allcount2').html(jsondata.count);//共几笔,共几人
$('#yongjinyuer').html(jsondata.comusebalance);//佣金使用余额
$('#yongjindakuan').html(jsondata.compayamount);//佣金打款金额
$('#fuwuyuer').html(jsondata.serusebalance);//服务费和税费使用余额
$('#fuwudakuan').html(jsondata.serpayamount);//服务费和税费打款金额
$('#fuwufei').html(jsondata.servicefee);//服务费
$('#suifei').html(jsondata.taxfee);//税费
let total_money=Number(jsondata.servicefee) + Number(jsondata.taxfee)
$('#allmoney').html(total_money.toFixed(2));//总计多少钱
if(jsondata.state ===2 || jsondata.state ===1){ //待确认付款
//时间更新
$('#stepstime1').html(jsondata.createtime);//创建时间
$('#steppart2').html("");//创建时间
//样式处理
$("#stepshead1").addClass("step-item-head-active");
$("#stepshead1 .layui-icon").addClass("layui-icon-ok");
//时间处理
$('#stepstime1').html(jsondata.createtime);//创建时间
$('#stepstime2').html(jsondata.confirmtime);//确认时间
}else if(jsondata.state ===3){
//样式处理
$("#stepshead1").addClass("step-item-head-active");
$("#stepshead2").addClass("step-item-head-active");
$("#stepshead1 .layui-icon").addClass("layui-icon-ok");
$("#stepshead2 .layui-icon").addClass("layui-icon-ok");
//时间处理
$('#stepstime1').html(jsondata.createtime);//创建时间
$('#stepstime2').html(jsondata.confirmtime);//确认时间
}else if(jsondata.state ===5){ //已完成
$('#steppart2').html("平台已确认");//创建时间
$('#steppart4').html("完成打款");//创建时间
//样式处理
$("#stepshead1").addClass("step-item-head-active");
$("#stepshead2").addClass("step-item-head-active");
$("#stepshead3").addClass("step-item-head-active");
$("#stepshead4").addClass("step-item-head-active");
$("#stepshead1 .layui-icon").addClass("layui-icon-ok");
$("#stepshead2 .layui-icon").addClass("layui-icon-ok");
$("#stepshead3 .layui-icon").addClass("layui-icon-ok");
$("#stepshead4 .layui-icon").addClass("layui-icon-ok");
//时间处理
$('#stepstime1').html(jsondata.createtime);//创建时间
$('#stepstime4').html(jsondata.finishtime);//确认时间
$('#stepstime2').html(jsondata.confirmtime);
$('#stepstime3').html("已完成处理");//确认时间
$('.txt_explian').html("已发放完成").addClass("layui-badge layui-btn-lg layui-bg-blue");
$('#fafang_down').removeClass("layui-hide");
}else if(jsondata.state ===6){ //有异常
$('#steppart2').html("平台已确认");//创建时间
$('#steppart4').html("平台提交异常");//创建时间
//样式处理
$("#stepshead1").addClass("step-item-head-active");
$("#stepshead2").addClass("step-item-head-active");
$("#stepshead3").addClass("step-item-head-active");
$("#stepshead4").addClass("step-item-head-active");
$("#stepshead1 .layui-icon").addClass("layui-icon-ok");
$("#stepshead2 .layui-icon").addClass("layui-icon-ok");
$("#stepshead3 .layui-icon").addClass("layui-icon-ok");
$("#stepshead4 .layui-icon").addClass("layui-icon-close");
$('#stepstime1').html(jsondata.createtime);//创建时间
$('#stepstime2').html(jsondata.confirmtime);//创建时间
$('#stepstime4').html(jsondata.finishtime);//确认时间
$('#stepstime3').html("已完成处理");//确认时间
$('#haserror').html("已完成,有异常").css("color","red");
$('.txt_explian').html("处理为异常单").addClass("layui-badge layui-btn-lg layui-bg-red");
$('#yichang_down').removeClass("layui-hide");
}
}
})
//自定义事件
if(data.totalamount==0){
$("#pingzheng_down").addClass("layui-hide");
}
var active={
yongjin_down: function() {
$.ajax({
url: layui.setter.req_url+"generalBackstage/downloadCommissionAndServiceFeeTaxVoucher",
type: 'post',
data:{
grantCommissionId:data.grantid
},
headers:{
'token':token
},
success: function(res) {
if(res.code==200){
if(res.data.commissionVoucher.length>0){
downloadIamge(res.data.commissionVoucher[0],"佣金凭证.png");
}else{
layer.msg("暂无佣金凭证");
}
if(res.data.serviceFeeTaxVoucher.length>0){
downloadIamge(res.data.serviceFeeTaxVoucher[0],"税费凭证.png")
}else{
layer.msg("暂无税费凭证");
}
}else{
layer.msg(res.msg);
}
}
});
},
yichang_down:function(){
echang_down(token,data.grantid);
},
fafang_down:function(){
fafang_down(token,data.grantid);
},
Detailed:function(){
Detailed(token,data.grantid);
},
eform_down:function(){
eform_down(token,data.grantid);
},
};
$('.layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
var forceDownload = function(blob, filename) {
var a = document.createElement('a');
a.download = filename;
a.href = blob;
a.click();
};
function Detailed(mytoken,id){
var url=layui.setter.req_url +"generalBackstage/downloadCommissionDetails?grantCommissionId="+id;
var filename="下载明细.xlsx";
if (!filename) filename = url.split('\\').pop().split('/').pop();
fetch(url, {
headers: new Headers({
"token":mytoken
}),
method: 'POST',
mode: 'cors'
})
.then(response=>response.blob())
.then(blob => {
let blobUrl = window.URL.createObjectURL(blob);
forceDownload(blobUrl, filename);
})
.catch(e => console.error(e));
};
function eform_down(mytoken,id){
var url=layui.setter.req_url +"generalBackstage/downloadConfirmationSheet?grantCommissionId="+id;
var filename="电子确认单下载.xlsx";
if (!filename) filename = url.split('\\').pop().split('/').pop();
fetch(url, {
headers: new Headers({
token:mytoken
}),
method: 'POST',
mode: 'cors'
})
.then(response => response.blob())
.then(blob => {
let blobUrl = window.URL.createObjectURL(blob);
forceDownload(blobUrl, filename);
})
.catch(e => console.error(e));
};
function echang_down(mytoken,id){
//layer.msg("电子确认单下载");
var url=layui.setter.req_url +"generalBackstage/downloadExceptionVoucher?grantCommissionId="+id;
var filename="异常详细信息.xlsx";
if (!filename) filename = url.split('\\').pop().split('/').pop();
fetch(url, {
headers: new Headers({
token:mytoken
}),
method: 'POST',
mode: 'cors'
})
.then(response => response.blob())
.then(blob => {
let blobUrl = window.URL.createObjectURL(blob);
forceDownload(blobUrl, filename);
})
.catch(e => console.error(e));
};
function fafang_down(mytoken,id){
//layer.msg("电子确认单下载");
var url=layui.setter.req_url +"generalBackstage/downloadNoExceptionVoucher?grantCommissionId="+id;
var filename="佣金发放凭证.xlsx";
if (!filename) filename = url.split('\\').pop().split('/').pop();
fetch(url, {
headers: new Headers({
token:mytoken
}),
method: 'POST',
mode: 'cors'
})
.then(response => response.blob())
.then(blob => {
let blobUrl = window.URL.createObjectURL(blob);
forceDownload(blobUrl, filename);
})
.catch(e => console.error(e));
};
function downloadIamge(imgsrc, name) {//下载图片地址和图片名
let image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
let a = document.createElement("a"); // 生成一个a元素
let event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "photo"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = imgsrc;
}
</script>
</body>
</html>
网友评论