hongshan
/
fuxi-insight-server


			
				
					
						
						
							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>