| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <link rel="stylesheet" type="text/css" href="css/mui.min.css">
- <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
- <link rel="stylesheet" type="text/css" href="css/style.css" />
- <style>
- .head {height: 60px;}
- #head {line-height: 60px;}
- .icon-songhuo{font-size: 15px;padding-left: 22px;}
- .icon-songhuo:before{font-size: 18px;color: #24cae9;position: absolute;left: 0;width: 20px;height: 18px;}
- .try_price{color: #f1436c;}
- .mui-table-view .mui-media .mui-media-body{height: 41px;line-height: 41px;color: #333;}
- .mui-table-view .mui-media .mui-media-body>span{color: #f1436c;}
- .my-table-view-try{border-top: .6em solid #f0f0f0;border-bottom: .6em solid #f0f0f0;padding: 10px 0;}
- .mui-table-view-cell:after,.mui-table-view:before,.mui-table-view:after,.mui-input-group .mui-input-row:after,.mui-input-group:before,.mui-input-group:after{display: none;}
- .mui-table-view-cell>a:not(.mui-btn){margin: -15px -15px;}
- .mui-table-view-cell>a .mui-pull-right{color: #999;font-size: 14px;}
- #btn_pay{color: #fff;padding: 10px 0;font-size: 18px;background: #24cae9;}
- .mui-content-padded{margin: 10px 13px;}
- .tips{padding: 20px 10px;background: #24cae9;text-align: center;color: #fff;}
- .icon-yanse,.icon-youhui,.icon-fuxuankuang,.icon-jiage,.icon-songhuo{font-size: 15px;padding-left: 22px;}
- .icon-yanse:before,.icon-fuxuankuang:before,.icon-youhui:before,.icon-jiage:before,.icon-songhuo:before{font-size: 18px;color: #24cae9;position: absolute;left: 0;width: 20px;height: 18px;}
- .point-time {content: "";position: absolute;width: 12px;height: 12px;top: 3px;left: 22px;background: #ccc;margin-left: -4px;border-radius: 50%;}
- .point-blue{color: #ccc;}
- .my-active .point-time {background-color:#01c0b5;}
- .my-active .point-blue{color:#fff;position: relative;background: #01c0b5;padding: 3px 10px;border-radius:25px;}
- .my-active .point-blue:before {position: absolute;content: "\00a0";width: 0px;height: 0px;border-width: 3px 6px 3px 0;border-style: solid;border-color: transparent #01c0b5 transparent transparent;top: 6px;left:-5px;}
- .mui-btn-block.mui-active,.btn-pull-code.mui-active{background-color: #c8c8c8 !important;}
- .content {width: 100%;margin:0 auto;}
- .content article {position: relative;}
- .content article section {padding: 0 0 20px 0;position: relative;}
- .content article section:before {content: "";width: 1px;top: 17px;bottom:0;left: 23px;background: #ccc;position: absolute;}
- .content article section:last-child:before {bottom:0;}
- .content article section time {display: block;}
- .content article section time > span {display: block;margin-left: 45px;color:#ccc;font-size: 12px;}
- .content article section aside {color: #3a3a38;margin-left:45px;margin-right: 5px;}
- .content article section aside p{margin-bottom: 0;font-size:13px;}
- .content article section aside .things{color:#222;margin-top: 5px;}
- .content article section:last-child:before {display: none;}
- .content article .my-active time > span{color: #333;}
- .ul-addres{padding-left: 24px;color: #333;font-size:12px;}
- </style>
- <script>
- // 屏蔽分享
- window.hiddenAllWechatMenu = true;
- </script>
- </head>
- <body style="background: #fff;">
- <div class="loading-bg">
- <div class="mui-loading">
- <div class="mui-spinner">
- </div>
- 加载中...
- </div>
- </div>
- <div class="mui-content" style="background: #fff;">
- <div class="tips more">
- <h3>试用订单详情</h3>
- </div>
- <ul class="mui-table-view">
- <li class="mui-table-view-cell">
- 试用订单号<span class="mui-pull-right" id="postNum"></span>
- </li>
- <li class="mui-table-view-cell">
- 试用商品<span class="mui-pull-right" id="proName"></span>
- </li>
- <li class="mui-table-view-cell">
- 商品价格<span class="mui-pull-right ft-12">试用期内体验价<span class="try_price">0元</span>，<!-- <s class="mui-h6" id="cost_price"></s> --> <span class="try_price" id="try_price"></span></span>
- </li>
- <li style="padding: 10px 0 0 10px;">
- <span class="iconfont icon-youhui">支付优惠</span>
- </li>
- <li class="mui-table-view-cell" style="display:none">
- <span>试用价格：<span class="try_price">0元</span></span><br/>
- <img width="100%" src="images/cp-zeng.jpg" />
- <br/><span class="try_price">产品试用未购买，不给予开发票</span>
- </li>
- </ul>
- <ul class="mui-table-view my-table-view-try">
- <li class="mui-table-view-cell">
- <a>
- <span class="iconfont icon-songhuo">送货信息</span>
- <ul class="ul-addres">
- <!-- <li>收 货 人：林林</li>
- <li>手 机 号：15999999999</li>
- <li>详细地址：广东省深圳市福田区莲花街道特区报业大厦12B</li> -->
- </ul>
- </a>
- </li>
- </ul>
- <ul class="mui-table-view" id="ul-status">
- <li class="mui-table-view-cell">
- 订单状态
- </li>
- <li style="padding: 0;">
- <div class="content">
- <article>
- <section id="statu1">
- <span class="point-time"></span>
- <time>
- <span><span class="point-blue">待派送</span></span>
- </time>
- </section>
- <section id="statu2">
- <span class="point-time"></span>
- <time>
- <span><span class="point-blue">派送中</span><span id="sendName"></span></span>
- </time>
- </section>
- <section id="statu3">
- <span class="point-time"></span>
- <time>
- <span><span class="point-blue">待支付</span></span>
- </time>
- </section>
- <section id="statu4">
- <span class="point-time"></span>
- <time>
- <span><span class="point-blue">试用暂停</span></span>
- </time>
- </section>
- <section id="statu5">
- <span class="point-time"></span>
- <time>
- <span><span class="point-blue">支付完成</span></span>
- </time>
- </section>
- </article>
- </div>
- </li>
- <li class="mui-table-view-cell">
- 试用时间：剩余<span class="try_price" id="time_out"></span>
- </li>
- </ul>
- <div class="mui-content-padded">
- <button type="button" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="正在请求数据，请稍后" class="mui-btn mui-btn-block mui-btn-outlined mui-active" id="btn_pay" disabled="disabled">立即支付</button>
- </div>
- </div>
- <script type="text/javascript" src="js/mui.min.js"></script>
- <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
- <script type="text/javascript" src="js/main.js"></script>
- <script type="text/javascript" src="js/page/wechat-utils-1.0.js"></script>
- <script type="text/javascript">
- var postNum='';
- var isPay = true; // 是否在请求支付，false表示正在请求,true可以请求
- var istry=true;
- mui.ready(function(){
- $.ajax({
- type: 'post',
- url: base_path+'/probation/getProbationOrderDetail',
- data: {"orderId":getParam("orderId")},
- dataType: 'json',
- timeout: 15000,
- xhrFields: {
- withCredentials: true
- },
- crossDomain: true,
- success: function(dt) {
- if (dt.isRedirect) {
- location.href = dt.redirectURL;
- } else {
- //console.log(dt);
- if(dt.status) {
- postNum=dt.data.probationOrderid;
- $("#postNum").text(dt.data.probationOrderid);
- $("#try_price").text("试用价¥"+accDiv(dt.data.probationYetAmount, 100));
- //$("#cost_price").text("原价¥"+accDiv(dt.data.probationAmount, 100));
- if (dt.data.probationPostNum != "" && dt.data.probationPostFirm != "") {
- $(".ul-addres").html('<li>收 件 人：'+dt.data.probationReceiveName+'</li><li>手 机 号：'+dt.data.probationReceiveTel+'</li><li>详细地址：'+dt.data.probationAddressInfo+'</li><li>快递单号：' + dt.data.probationPostNum + '</li><li>快递公司：上门送货</li>');
- } else {
- $(".ul-addres").html('<li>收 件 人：'+dt.data.probationReceiveName+'</li><li>手 机 号：'+dt.data.probationReceiveTel+'</li><li>详细地址：'+dt.data.probationAddressInfo+'</li>');
- }
- if(dt.data.probationSendName!=""){
- $("#sendName").html('（派送员：'+dt.data.probationSendName+' 手机:<a href="tel:'+dt.data.probationSendTel+'">'+dt.data.probationSendTel+'</a>）');
- }
- var proColor='';
- switch (dt.data.probationColorType){
- case 1:
- proColor="品蓝";
- break;
- case 2:
- proColor="品黑";
- break;
- case 3:
- proColor="苹果绿";
- break;
- case 4:
- proColor="西瓜红";
- break;
- default:
- break;
- }
- $("#proName").html(dt.data.probationProductName+'('+proColor+')');
- //console.log(new Date().getTime())
- $(".content #statu"+dt.data.probationStatus).addClass("my-active");
- if(dt.data.probationStatus==3){
- addTimer('time_out', dt.data.probationRemainingTime/ 1000);
- $("#btn_pay").removeAttr("disabled").removeClass("mui-active");
- mui('body').on('tap', '#btn_pay', function() {
- var th=this;
- //console.log("立即支付");
- mui(this).button('loading');
- if(isPay){
- isPay = false; //锁定请求
- $.ajax({
- type: 'post',
- url: base_path+'/probation/pay',
- data: {"orderId":postNum},
- dataType: 'json',
- timeout: 15000,
- success: function(dt) {
- if (dt.isRedirect) {
- location.href = dt.redirectURL;
- } else {
- //console.log(dt);
- if(dt.status) {
- var obj = JSON.parse("{" + dt.data.info + "}");
- WeixinJSBridge.invoke('getBrandWCPayRequest', obj, function(res) {
- if(res.err_msg == 'get_brand_wcpay_request:ok') {
- $.ajax({
- type: 'post',
- url: base_path+'/probation/check_probation_pay_success',
- data: {"orderId":postNum},
- dataType: 'json',
- timeout: 15000,
- xhrFields: {
- withCredentials: true
- },
- crossDomain: true,
- success: function(data) {
- //console.log(data);
- if(data.status) {
- if(data.data==5){
- mui.alert("支付成功", '', function() {
- mui.openWindow({url: base_path+'/probation/try_order?orderId='+postNum});
- });
- }else{
- mui.alert(data.message, '', function() {
- mui(th).button('reset');
- });
- }
- } else {
- mui(th).button('reset');
- mui.alert(data.message);
- }
- },
- error: function(xhr, type, errorThrown) {
- //异常处理；
- console.log(xhr);
- mui(th).button('reset');
- mui.alert("请检查网络或刷新页面重试！");
- }
- });
- } else {
- isPay = true;
- mui(th).button('reset');
- mui.alert("对不起，支付失败!请稍后重试!");
- }
- });
- } else {
- mui(th).button('reset');
- mui.alert(dt.message);
- }
- }
- },
- error: function(xhr, type, errorThrown) {
- //异常处理；
- console.log(xhr);
- mui(th).button('reset');
- mui.alert("请检查网络或刷新页面重试！");
- }
- });
- }else{
- mui.alert("正在请求支付中~~请稍后!");
- return;
- }
- });
- }else if(dt.data.probationStatus==1){
- $("#time_out").parent().hide();
- $("#btn_pay").removeAttr("disabled").removeClass("mui-active").text("取消订单");
- mui('body').on('tap', '#btn_pay', function() {
- var th=this;
- //console.log("取消订单");
- var btnArray = ['否', '是'];
- mui.confirm('确认取消试用订单？', '温馨提示', btnArray, function(e) {
- if (e.index == 1) {
- mui(th).button('loading');
- if(istry){
- istry = false; //锁定请求
- $.ajax({
- type: 'post',
- url: base_path+'/probation/userCancelOrder',
- data: {"orderId":postNum},
- dataType: 'json',
- timeout: 15000,
- xhrFields: {
- withCredentials: true
- },
- crossDomain: true,
- success: function(dt) {
- if (dt.isRedirect) {
- location.href = dt.redirectURL;
- } else {
- //console.log(dt);
- if(dt.resultCode=="200") {
- location.reload(true);
- } else {
- mui(th).button('reset');
- mui.alert(dt.returnMsg.returnMsg);
- }
- }
- },
- error: function(xhr, type, errorThrown) {
- //异常处理；
- console.log(xhr);
- mui(th).button('reset');
- mui.alert("请检查网络或刷新页面重试！");
- }
- });
- }else{
- mui.alert("正在请求取消订单中~~请稍后!");
- return;
- }
- } else {
- mui(th).button('reset');
- }
- });
- });
- }else if(dt.data.probationStatus==0){
- $("#time_out").parent().hide();
- $("#ul-status").hide();
- $("#btn_pay").text("订单已取消");
- }else{
- $("#time_out").parent().hide();
- }
- } else {
- mui.alert(dt.message);
- }
- }
- },
- error: function(xhr, type, errorThrown) {
- //异常处理；
- console.log(xhr);
- mui.alert("请检查网络或刷新页面重试！");
- }
- });
- //console.log("页面加载完毕")
- document.querySelector('.loading-bg').style.display='none';
- });
- var addTimer = function() {
- var list = [],
- interval;
- return function(id, time) {
- if(!interval)
- interval = setInterval(go, 1000);
- list.push({
- ele: document.getElementById(id),
- time: time
- });
- }
- function go() {
- for(var i = 0; i < list.length; i++) {
- list[i].ele.innerHTML = getTimerString(list[i].time ? list[i].time -= 1 : 0);
- if(!list[i].time)
- list.splice(i--, 1);
- }
- }
- function getTimerString(time) {
- d = Math.floor(time / 86400),
- h = Math.floor((time % 86400) / 3600),
- m = Math.floor(((time % 86400) % 3600) / 60),
- s = Math.floor(((time % 86400) % 3600) % 60);
- if(time > 0)
- return d + "天" + h + "时" + m + "分" + s+"秒";
- else return "试用已结束";
- }
- }();
- </script>
- </body>
- </html>
|
