前端微信点金计划
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="referrer" content="origin">
<meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<title>支付完成</title>
</head>
<body>
<div class="col_box">
<div class="col">
<div class="lab">礼物名称</div>
<div id="p_name" class="ct">{$gift_name}</div>
</div>
<div class="col">
<div class="lab">赠送人</div>
<div id="zsr" class="ct">{$order.reward_nick_name}</div>
</div>
<div class="col">
<div class="lab">购买数量</div>
<div id="count" class="ct">{$order.gift_num}</div>
</div>
<div class="col">
<div class="lab">实付金额</div>
<div id="price" class="ct price">¥{$order.money}</div>
</div>
<div class="col">
<div class="lab">打赏时间</div>
<div id="dssj" class="ct">{$order.add_time}</div>
</div>
</div>
<div class="col_box2">
<div class="btn1" id="toOrder">
返回
</div>
</div>
</body>
</html>
//微信jsapi，展示商户小票页面和跳出小票页面
<script type="text/javascript" charset="UTF-8" src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js"></script>
<script type="text/javascript">
window.onload=function(){
var mchData ={action:'onIframeReady',displayStyle:'SHOW_CUSTOM_PAGE'};
var postData = JSON.stringify(mchData);
parent.postMessage(postData,'https://payapp.weixin.qq.com');
};
//跳转外部链接
document.getElementById("toOrder").onclick = function () {
let mchData = {
action: 'jumpOut',
jumpOutUrl: "https://qr.cnzhuoyue.cn/xuanIndex/dist/index.html#/dashang?player_id={$order.player_id}" //跳转的页面 https
};
let postData = JSON.stringify(mchData);
parent.postMessage(postData, 'https://payapp.weixin.qq.com');
};
</script>
<style>
body {
font-family: PingFang SC, "Helvetica Neue", Arial, sans-serif;
}
.col_box2{
text-align: center;
margin-top: 40px;
display: flex;
justify-content: center;
height: 30px;
line-height: 30px;
color: #fff;
}
.btn1{
width: 40%;
background: #9c3;
border-radius: 10px;
}
.order_box .bussiness_avt img {
width: 68px;
height: 68px;
border-radius: 100%;
border: 1px solid #E0E0E0;
}
.b_name {
font-size: 14px;
font-weight: 500;
color: #333333;
margin-top: 6px;
}
.col_box {
margin-top: 35px;
}
.col_box .col {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
font-size: 14px;
color: #333;
margin-bottom: 14px;
}
.col .ct.price {
color: #E61515
}
.btns {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
margin-top: 31px;
}
.btns .btn {
width: 147px;
height: 35px;
line-height: 35px;
font-size: 14px;
border-radius: 39px;
border: 1px solid #CD2314;
box-sizing: border-box;
color: #CD2314;
}
.btns .btn.detail {
background: linear-gradient(270deg, #D51010 0%, #EF4D2D 100%);
color: #fff;
}
</style>
js直接可用,有其他需要可自行到官网查询
