123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273 |
- <!-- 支付页 -->
- <!DOCTYPE html>
- <html>
- <head>
- <%- include('components/meta-head.html') %>
- <link rel="stylesheet" href="/css/insight.css" />
- <script src="/js/jquery-1.11.3.min.js"></script>
- <script src="/js/qrcode.min.js"></script>
- </head>
- <body class="sticky">
- <%- include('components/site-header.html') %>
- <div class="container gray">
- <div class="wrapper">
- <div class="bread-crumb">
- <a href="/">伏羲学堂</a>
- <span><%= course.title%></span>
- </div>
- <div class="detail">
- <div class="figure">
- <% if(course.detailvideo) {%>
- <div class="video">
- <video
- src="<%= course.detailvideo %>"
- poster="<%= course.detailimg %>"
- controls
- id="detail_video"
- ></video>
- <div class="button">
- <svg xmlns="http://www.w3.org/2000/svg" class="play xg-icon-play" width="28" height="40" viewBox="3 -4 28 40">
- <path fill="#fff" transform="scale(0.0320625 0.0320625)" d="M576,363L810,512L576,661zM342,214L576,363L576,661L342,810z"></path>
- </svg>
- </div>
- </div>
- <% }else{%>
- <img src="<%= course.detailimg %>" alt="" />
- <% }%>
- </div>
- <div class="content">
- <h2><%= course.title%></h2>
- <div class="price-area">
- <div class="price">
- <b><%= course.price%></b><del>¥<%= course.oprice%></del>
- </div>
- <div class="sales">
- <div class="p8"><%= course.discountmsg%></div>
- </div>
- </div>
- </div>
- </div>
- <div class="pay-order">
- <div class="header">
- 支付方式
- </div>
- <ul class="pay-types">
- <li class="selected">
- <i class="wx-icon"></i>
- 微信支付
- </li>
- </ul>
- <div class="header">
- 推荐码
- </div>
- <form action="/api/inviter" method="POST" id="inviter" autocomplete="off" class="inviter">
- <input type="text" name="code" placeholder="请输入推荐码" id="input_code" maxlength="4" onfocus="this.placeholder=''" onblur="this.placeholder='请输入推荐码'"/>
- <input type="hidden" id="cid" name="cid" value="<%= course.id %>" />
- <button type="submit" id="submit_code" disabled>验证</button>
- </form>
- <div class="err-msg" id="err_msg"></div>
- <div class="order-bills">
- <div class="content">
- <ul class="check-list">
- <li>
- <span>商品原价:</span>
- <span>¥ <%= course.oprice%></span>
- </li>
- <li>
- <span>优惠:</span>
- <span>- ¥ <%= course.discount%></span>
- </li>
- <li id="code_sales_item" style="display:none">
- <span>推荐码优惠:</span>
- <span id="code_price">- ¥ 0</span>
- </li>
- <li>
- <span>应付:</span>
- <span id="real_price"><%= course.price%></span>
- </li>
- </ul>
- <div class="clearfix">
- <div class="button" id="paying"><%= parseFloat(course.price) ? "立即购买":"免费领取" %></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="pay-dialog" id="dialog">
- <div class="content">
- <span class="close-button">×</span>
- <h3>微信支付</h3>
- <div class="qrcode" id="qrcode"></div>
- <div class="pay-type">请使用微信扫描二维码支付 请在<span id="minutes">10</span><span id="seconds">00</span>内支付完成</div>
- <div class="price-info" id="price_info"><%= course.price%></div>
- <!-- <div class="footer">
- <span class="radio checked"></span>
- 同意并接受《<a href="/">伏羲碳惠-会员支付协议</a>》
- </div> -->
- </div>
- </div>
- <div class="warning-msg" id="warning">
- <div class="warning-pop">
- <div class="header">
- 提示
- <span class="close-button" onclick="$('#warning').hide()">×</span>
- </div>
- <div class="content">
- 请点击"验证“按钮,校验推荐码是否有效
- </div>
- <div class="footer clearfix">
- <button type="button" onclick="$('#warning').hide()">确定</button>
- </div>
- </div>
- </div>
- <%- include('components/site-footer.html') %>
- <script src="/js/video.js"></script>
- <script>
- var courseId = "<%- course.id %>"
- var coursePrice = "<%- course.price %>"
- var orderPay = {
- init: function(){
- orderPay.getQrCode()
- },
- countdown: function(){
- orderPay.timeout -= 1000
- if(orderPay.timeout <= 0){
- clearTimeout(orderPay.timer)
- orderPay.toResult()
- return false
- }
- $('#minutes').html(orderPay.transferTime('m'))
- $('#seconds').html(orderPay.transferTime('s'))
- orderPay.timer = setTimeout(orderPay.countdown, 1E3)
- },
- transferTime: function(type){
- let time = 0
- if(type == 'm'){
- time = parseInt((orderPay.timeout % 36E5 ) / 6E4)
- }else{
- time = (orderPay.timeout % 6E4 ) / 1E3
- }
- return (time + '').length == 1 ? '0' + time : time
- },
- show: function(){
- if(!$('#submit_code')[0].disabled && $('#err_msg').is(":hidden")){
- return $('#warning').fadeIn()
- }
- $('#dialog').fadeIn()
- if(!orderPay.orderId){
- orderPay.getQrCode()
- }
- },
- hide: function(){
- $('#dialog').hide()
- },
- checkCode: function (e){
- if(orderPay.checking){
- return false
- }
- e.preventDefault()
- orderPay.checking = true
- $.ajax({
- url: '/api/inviter',
- type: 'POST',
- data: {
- code: $('#input_code').val(),
- cid: $('#cid').val(),
- },
- success: function (res){
- orderPay.checking = false
- if(res.code){
- $('#code_sales_item').hide()
- return $('#err_msg').addClass('error').html(res.msg)
- }
- $('#input_code').attr('disabled','disabled');
- $('#submit_code')[0].disabled=true
- $('#err_msg').addClass('success').html('推荐成功,已更新优惠价格')
- $('#code_price').html('- ¥ ' + res.data.discountPrice)
- $('#real_price').html(res.data.price)
- $('#price_info').html(res.data.price)
- $('#code_sales_item').show()
- },
- error: function(err){
- orderPay.checking = false
- return alert('网络异常,请稍后重试!')
- }
- })
- },
- createQrCode: function(url){
- var qrcode = new QRCode(document.querySelector("#qrcode"), {
- text: url,
- width: 214,
- height: 214,
- colorDark : "#000000",
- colorLight : "#ffffff",
- correctLevel : QRCode.CorrectLevel.H
- });
- // orderPay.connentSSE()
- orderPay.timeout = 6E5
- orderPay.countdown()
- },
- toResult: function (){
- location.href = '/result/' + orderPay.orderId
- },
- connentSSE: function (){
- var source = new EventSource("/sse?oid=" + orderPay.orderId)
- source.onmessage = function(event) {
- orderPay.toResult()
- }
- },
- getQrCode: function(){
- var data = {
- cid: courseId
- }
- var code= $('#input_code').val()
- if(code){
- data.code = code
- }
- $.ajax({
- url: '/api/order',
- type: 'post',
- data,
- success: function(res){
- if(res && res.data){
- orderPay.orderId = res.data.id
- orderPay.imgurl = res.data.url
- orderPay.connentSSE()
- res.data.url && orderPay.createQrCode(res.data.url)
-
- }else{
- alert('服务异常,请稍后重试!')
- }
- },
- error: function(errMsg){
- console.error(errMsg)
- alert('服务异常,请稍后重试!')
- }
- })
- }
- }
-
- function toggleDisabled (){
- if($('#err_msg').hasClass('error') || $('#err_msg').hasClass('success')){
- $('#err_msg')[0].className = 'err-msg'
- // $('#code_sales').hide()
- // $('#real_price').html(coursePrice)
- // $('#price_info').html(coursePrice)
- }
- $('#submit_code')[0].disabled = $(this).val().length == 4 ? false : true
- }
- $(function(){
- $('#paying').on('click', orderPay.show)
- $('#dialog').on('click', '.close-button', orderPay.hide)
- $('#input_code').on('input', toggleDisabled)
- $('#inviter').on('submit', orderPay.checkCode)
- })
- </script>
- </body>
- </html>
|