欢迎光临
我的个人博客网站

前端微信点金计划

<!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直接可用,有其他需要可自行到官网查询

赞(0) 打赏
未经允许不得转载:张拓的天空 » 前端微信点金计划
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏