pay.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title>精美时尚</title>
  7. <link href="css/global.css?v=099b487e" rel="stylesheet"><link href="css/pay.css?v=099b487e" rel="stylesheet"></head>
  8. <body>
  9. <div class="container">
  10. <div class="novip-card"></div>
  11. <div class="payform">
  12. <dl>
  13. <dt>确认会员手机号</dt>
  14. <dd>
  15. <input type="number" id="mobile"/>
  16. <input type="hidden" id="open" value="1"/>
  17. </dd>
  18. </dl>
  19. <dl>
  20. <dt>选择开通时长</dt>
  21. <dd id="package">
  22. <div class="time-option active" data-price="100" data-package="1">
  23. <span>1个月<i></i></span>
  24. <span><i>¥</i><b>100</b>¥180</span>
  25. </div>
  26. <div class="time-option" data-price="200" data-package="2">
  27. <span>6个月</span>
  28. <span><i>¥</i><b>200</b>¥180</span>
  29. </div>
  30. <div class="time-option" data-price="300" data-package="3">
  31. <span>1年</span>
  32. <span><i>¥</i><b>300</b>¥180</span>
  33. </div>
  34. </dd>
  35. </dl>
  36. <dl>
  37. <dt>选择支付方式</dt>
  38. <dd class="no-padding" id="paytype">
  39. <div class="paytype-option active" data-type="wechat">
  40. <span><i class="icon-wechat"></i>微信支付</span>
  41. <span class="icon-checkbox"></span>
  42. </div>
  43. <div class="paytype-option" data-type="alipay" style="display:none;">
  44. <span><i class="icon-alipay"></i>支付宝支付</span>
  45. <span class="icon-checkbox"></span>
  46. </div>
  47. </dd>
  48. </dl>
  49. </div>
  50. </div>
  51. <div id="pay"></div>
  52. <button class="button fixed-button" id="submit">确认支付</button>
  53. <div class="tiplayer" style="display: none;">
  54. <div class="pay-result">
  55. <h3>订单信息</h3>
  56. <p>VIP会员1年: <em>¥300</em></p>
  57. <div class="btns">
  58. <a href="#" id="unpay">未支付</a>
  59. <a href="#" id="ypay">我已支付</a>
  60. </div>
  61. </div>
  62. </div>
  63. <script type="text/javascript" src="js/global.js?v=099b487e"></script><script type="text/javascript" src="js/pay.js?v=099b487e"></script></body>
  64. <script>
  65. function pay(self, url,mobile,type)
  66. {
  67. var html = self.html();
  68. //self.unbind('click');
  69. self.html('支付中...');
  70. $.getJSON(url + '&json=1', {mobile:mobile,type:type}, function(t) {
  71. self.html(html);
  72. if (t.status == 1) {
  73. //$('.tiplayer').show();
  74. $("#pay").html(t.data);
  75. } else {
  76. submit();
  77. //$('.tiplayer').hide();
  78. alert(t.msg);
  79. }
  80. })
  81. }
  82. $(function(){
  83. var oPackage = {
  84. price: 100,
  85. package: 1,
  86. url:''
  87. },oPayType = "wechat";
  88. $('#package').on('click','[data-package]',function(){
  89. $(this).addClass('active').siblings().removeClass('active');
  90. oPackage.price = $(this).data('price');
  91. oPackage.name = $(this).data('name');
  92. oPackage.package = $(this).data('package');
  93. oPackage.url = $(this).data('url');
  94. $('#submit').html('确认支付¥' + oPackage.price);
  95. })
  96. $('#paytype').on('click','[data-type]',function(){
  97. $(this).addClass('active').siblings().removeClass('active');
  98. oPayType = $(this).data('type')
  99. })
  100. function submit()
  101. {
  102. var open = $('#open').val();
  103. if (open == 2) {
  104. $('.tiplayer').show();
  105. //实时检测是否支付成功
  106. /*
  107. setInterval(function()
  108. {
  109. var url = $('#open').attr('data-url');
  110. var order_id = $('#open').attr('data-order_id');
  111. var buy_id = $('#open').attr('data-buy_id');
  112. $.getJSON(url + '&json=1', {order_id:order_id,buy_id:buy_id}, function(t) {
  113. if (t.data == 1) {
  114. location.href = $('#ypay').attr('href');
  115. }
  116. })
  117. }, 1000);
  118. */
  119. }
  120. $('#submit').unbind('click').bind('click', function(){
  121. var mobile = $("#mobile").val();
  122. if(!/1\d{10}/.test(mobile)){
  123. alert("手机号码不正确");
  124. return;
  125. }
  126. //console.log(mobile,oPackage,oPayType)
  127. $('.pay-result p').html('VIP会员'+oPackage.name+': <em>¥'+oPackage.price+'</em>');
  128. pay($(this), oPackage.url, mobile, oPayType);
  129. })
  130. }
  131. submit();
  132. $('.active').click();
  133. })
  134. </script>
  135. </html>