multpay.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport"
  6. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <title>精美时尚</title>
  8. <link href="css/global.css?v=bd05a1cd" rel="stylesheet"><link href="css/multpay.css?v=bd05a1cd" rel="stylesheet"></head>
  9. <body>
  10. <div class="maginfo">
  11. <img src='https://api.huoxingkandiqiu.com/upload/data/upload/1/2019/04/08/3e4fa30da716886c9183e3f9e1cb3243.jpg' mode='aspectFill' />
  12. <div>
  13. <span>NINE PERCENT(百分之九)
  14. 新偶像的诞生</span>
  15. </div>
  16. </div>
  17. <div class="members">
  18. <div class='dl'>
  19. <div class='dt'>
  20. <img class="avatar" src='https://7.jstyle.cn/1/2019/08/05/449ee8aaf309a298c1a5641c41430d0d.jpg' />
  21. <div class='info'>
  22. <span>明星</span>
  23. <div class='dymsg'><span class='ico-dingyue'></span>2000订阅</div>
  24. </div>
  25. </div>
  26. <div class='dd'>
  27. <div class='button' data-starid="1" node-act="subscribe">订阅</div>
  28. </div>
  29. </div>
  30. <div class='dl'>
  31. <div class='dt'>
  32. <img class="avatar" src='https://7.jstyle.cn/1/2019/08/05/449ee8aaf309a298c1a5641c41430d0d.jpg' />
  33. <div class='info'>
  34. <span>明星</span>
  35. <div class='dymsg'><span class='ico-dingyue'></span>2000订阅</div>
  36. </div>
  37. </div>
  38. <div class='dd'>
  39. <div class='button' data-starid="2" node-act="subscribe">订阅</div>
  40. </div>
  41. </div>
  42. <div class='dl'>
  43. <div class='dt'>
  44. <img class="avatar" src='https://7.jstyle.cn/1/2019/08/05/449ee8aaf309a298c1a5641c41430d0d.jpg' />
  45. <div class='info'>
  46. <span>明星</span>
  47. <div class='dymsg'><span class='ico-dingyue'></span>2000订阅</div>
  48. </div>
  49. </div>
  50. <div class='dd'>
  51. <div class='button' data-starid="3" node-act="subscribe">订阅</div>
  52. </div>
  53. </div>
  54. </div>
  55. <!-- 购买订阅弹层 -->
  56. <div class="mask fn-hide" id="buylayermask"></div>
  57. <div class="buy-layer" id="buylayer">
  58. <form bindsubmit='doBuy'>
  59. <div class="tit ">正在购买</div>
  60. <div class='msg' node-act="buytip">查看购买说明</div>
  61. <div class="list">
  62. <div class="item active" data-id="1">
  63. <span class='name'>购买1本</span>
  64. <span>¥8.00</span>
  65. </div>
  66. <div class="item" data-id="2">
  67. <span class='name'>购买1本</span>
  68. <span>¥8.00</span>
  69. </div>
  70. <div class="item" data-id="3">
  71. <span class='name'>购买1本</span>
  72. <span>¥8.00</span>
  73. </div>
  74. <div class="item" data-id="4">
  75. <span class='name'>购买1本</span>
  76. <span>¥8.00</span>
  77. </div>
  78. <div class="item" data-id="5">
  79. <span class='name'>购买1本</span>
  80. <span>¥8.00</span>
  81. </div>
  82. <div class="item" data-id="6">
  83. <span class='name'>购买1本</span>
  84. <span>¥8.00</span>
  85. </div>
  86. </div>
  87. <div class="btn-wrapper ">
  88. <div class="button cancel" node-act="hideBuy">取消</div>
  89. <div class="button primary " node-act="doBuy">确认</div>
  90. </div>
  91. </form>
  92. </div>
  93. <div class="mask fn-hide" id="buytip">
  94. <div class="buytip-layer layer ">
  95. <div class='buy-tit'>购买说明</div>
  96. <div class="p">
  97. 1、购买成功后可直接点击【阅读】 查看阅读内容; <br />
  98. 2、电子刊为虚拟商品,如无系统问题,购买后不可退换; <br />
  99. 3、如有其他使用问题可咨询在线客服。
  100. </div>
  101. <div class="btn-wrapper">
  102. <div class="button" node-act="hideTip">我知道了</div>
  103. </div>
  104. </div>
  105. </div>
  106. <div class="mask fn-hide" id="layer">
  107. <div class="layer read-layer">
  108. <div class="qrcode-wrap">
  109. <img src="images/qrcode.png" alt="" class="default" id="code">
  110. <p>长按识别小程序阅读电子刊</p>
  111. </div>
  112. <a href="javascript:;" class="btn-close" id="close"></a>
  113. </div>
  114. </div>
  115. <div id="pay"></div>
  116. <script type="text/javascript" src="js/global.js?v=bd05a1cd"></script><script type="text/javascript" src="js/multpay.js?v=bd05a1cd"></script></body>
  117. <script>
  118. let buyid = 1;
  119. let starid;
  120. var payStatus = false;
  121. $('#close').on('click', function () {
  122. $('#layer').hide();
  123. });
  124. $('[node-act="subscribe"]').on('click', function () {
  125. var url = $(this).data('src');
  126. $('#buylayer').addClass('slidein')
  127. $('#buylayermask').show();
  128. starid = $(this).data('starid');
  129. $.get(url, {star_id:starid}, function(t)
  130. {
  131. $('#buylayer').html(t);
  132. $('#buylayer').addClass('slidein')
  133. })
  134. })
  135. $('#buylayer').on('click','.list .item',function(){
  136. $(this).addClass('active').siblings().removeClass('active');
  137. buyid = $(this).data('id');
  138. })
  139. $('[node-act="hideBuy"]').on('click',function(){
  140. $('#buylayer').removeClass('slidein')
  141. $('#buylayermask').hide();
  142. })
  143. $('[node-act="doBuy"]').on('click',function(){
  144. console.log(buyid,starid)
  145. })
  146. $('[node-act="buytip"]').on('click', function () {
  147. $('#buytip').show()
  148. })
  149. $('[node-act="hideTip"]').on('click', function () {
  150. $('#buytip').hide()
  151. })
  152. function pay(url)
  153. {
  154. $.get(url, function(t) {
  155. $("#pay").html(t);
  156. payStatus = false;
  157. $('[node-act="doBuy"]').html('确认');
  158. })
  159. }
  160. </script>
  161. </html>