-
Notifications
You must be signed in to change notification settings - Fork 1
/
pay.html
138 lines (120 loc) · 4.25 KB
/
pay.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>富士商城--微信支付页</title>
<link rel="icon" href="/assets/img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/webbase.css" />
<link rel="stylesheet" type="text/css" href="css/pages-weixinpay.css" />
</head>
<body>
<!--页面顶部白条条，由js动态加载-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<div class="top"></div>
<script type="text/javascript">$(".top").load("shortcut.html");</script>
<div class="cart py-container" id="payApp">
<!--logoArea-->
<div class="logoArea">
<div class="fl logo"><span class="title">收银台</span></div>
</div>
<!--主内容-->
<a href="payfail.html">支付失败演示页</a>
<a href="paysuccess.html">支付成功演示页</a>
<div class="checkout py-container pay">
<div class="checkout-tit">
<h4 class="fl tit-txt"><span class="success-icon"></span><span class="success-info">订单提交成功，请您及时付款！订单号：{{orderId}}</span></h4>
<span class="fr"><em class="sui-lead">应付金额：</em><em class="orange money">￥17,654</em>元</span>
<div class="clearfix"></div>
</div>
<div class="checkout-steps">
<div class="fl weixin">微信支付</div>
<div class="fl sao">
<p class="red">二维码已过期，刷新页面重新获取二维码。</p>
<div class="fl code">
<div id="qrcode"></div>
<div class="saosao">
<p>请使用微信扫一扫</p>
<p>扫描二维码支付</p>
</div>
</div>
<div class="fl phone">
</div>
</div>
<div class="clearfix"></div>
<p><a href="pay.html" target="_blank">> 其他支付方式</a></p>
</div>
</div>
</div>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script type="text/javascript">
$(function(){
$("ul.payType li").click(function(){
$(this).css("border","2px solid #E4393C").siblings().css("border-color","#ddd");
})
})
</script>
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/qrcode.js"></script>
<script type="text/javascript">
var payInfoVm = new Vue({
el:"#payApp",
data:{
fj,
orderId: ""
},
created() {
fj.verify().then(res => {
this.orderId = fj.getUrlParam("orderId")
fj.http.get("/order/order/url/" + this.orderId).then(({data}) => {
new QRCode("qrcode", {
text: data,
width: 256,
height: 256,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
})
// 开启定时任务，查询付款状态
const taskId = setInterval(() => {
fj.http.get("/order/order/state/" + this.orderId)
.then(resp => {
let i = resp.data;
if (i === 1) {
// 付款成功
clearInterval(taskId);
// 跳转到付款成功页
location.href = "/paysuccess.html?orderId=" + this.orderId;
} else if (i === 2) {
// 付款失败
clearInterval(taskId);
// 跳转到付款失败页
location.href = "/payfail.html";
}
})
}, 3000);
}).catch(() => {
window.location = "http://www.fuji.com/pay.html";
});
},
methods: {
},
components:{
shortcut: () => import("/js/pages/shortcut.js")
}
});
</script>
</body>
</html>