diff --git a/app/Http/Web/Controllers/OrderController.php b/app/Http/Web/Controllers/OrderController.php
index 0614bcb9..90cd295b 100644
--- a/app/Http/Web/Controllers/OrderController.php
+++ b/app/Http/Web/Controllers/OrderController.php
@@ -7,6 +7,7 @@ use App\Services\Frontend\Order\OrderCancel as OrderCancelService;
 use App\Services\Frontend\Order\OrderConfirm as OrderConfirmService;
 use App\Services\Frontend\Order\OrderCreate as OrderCreateService;
 use App\Services\Frontend\Order\OrderInfo as OrderInfoService;
+use Phalcon\Mvc\View;
 
 /**
  * @RoutePrefix("/order")
@@ -25,6 +26,7 @@ class OrderController extends Controller
 
         $order = $service->handle($sn);
 
+        $this->view->setRenderLevel(View::LEVEL_ACTION_VIEW);
         $this->view->setVar('order', $order);
     }
 
diff --git a/app/Http/Web/Controllers/RefundController.php b/app/Http/Web/Controllers/RefundController.php
index 7c628033..02887c3b 100644
--- a/app/Http/Web/Controllers/RefundController.php
+++ b/app/Http/Web/Controllers/RefundController.php
@@ -7,6 +7,7 @@ use App\Services\Frontend\Refund\RefundCancel as RefundCancelService;
 use App\Services\Frontend\Refund\RefundConfirm as RefundConfirmService;
 use App\Services\Frontend\Refund\RefundCreate as RefundCreateService;
 use App\Services\Frontend\Refund\RefundInfo as RefundInfoService;
+use Phalcon\Mvc\View;
 
 /**
  * @RoutePrefix("/refund")
@@ -29,6 +30,7 @@ class RefundController extends Controller
 
         $confirm = $service->handle($sn);
 
+        $this->view->setRenderLevel(View::LEVEL_ACTION_VIEW);
         $this->view->setVar('order', $order);
         $this->view->setVar('confirm', $confirm);
     }
@@ -61,6 +63,7 @@ class RefundController extends Controller
 
         $refund = $service->handle($sn);
 
+        $this->view->setRenderLevel(View::LEVEL_ACTION_VIEW);
         $this->view->setVar('refund', $refund);
     }
 
diff --git a/app/Http/Web/Views/my/orders.volt b/app/Http/Web/Views/my/orders.volt
index e4dcf658..05c3ca26 100644
--- a/app/Http/Web/Views/my/orders.volt
+++ b/app/Http/Web/Views/my/orders.volt
@@ -20,6 +20,7 @@
             {% if pager.total_pages > 0 %}
                 <div class="order-list">
                     {% for item in pager.items %}
+                        {% set order_info_url = url({'for':'web.order.info'},{'sn':item.sn}) %}
                         <div class="order-card">
                             <div class="header">
                                 <span class="sn">编号：{{ item.sn }}</span>
@@ -30,7 +31,7 @@
                                 <div class="column price">{{ '￥%0.2f'|format(item.amount) }}</div>
                                 <div class="column status">{{ order_status(item.status) }}</div>
                                 <div class="column action">
-                                    <a class="layui-btn layui-btn-sm" href="javascript:">详情</a>
+                                    <a class="layui-btn layui-btn-sm btn-order-info" href="javascript:" data-url="{{ order_info_url }}">详情</a>
                                 </div>
                             </div>
                         </div>
@@ -41,4 +42,10 @@
         </div>
     </div>
 
+{% endblock %}
+
+{% block include_js %}
+
+    {{ js_include('web/js/my.js') }}
+
 {% endblock %}
\ No newline at end of file
diff --git a/app/Http/Web/Views/my/refunds.volt b/app/Http/Web/Views/my/refunds.volt
index eb169992..36fad6b0 100644
--- a/app/Http/Web/Views/my/refunds.volt
+++ b/app/Http/Web/Views/my/refunds.volt
@@ -20,6 +20,7 @@
             {% if pager.total_pages > 0 %}
                 <div class="order-list">
                     {% for item in pager.items %}
+                        {% set refund_info_url = url({'for':'web.refund.info'},{'sn':item.sn}) %}
                         <div class="order-card">
                             <div class="header">
                                 <span class="sn">编号：{{ item.sn }}</span>
@@ -30,7 +31,7 @@
                                 <div class="column price">{{ '￥%0.2f'|format(item.amount) }}</div>
                                 <div class="column status">{{ refund_status(item.status) }}</div>
                                 <div class="column action">
-                                    <a class="layui-btn layui-btn-sm" href="javascript:">详情</a>
+                                    <a class="layui-btn layui-btn-sm btn-refund-info" href="javascript:" data-url="{{ refund_info_url }}">详情</a>
                                 </div>
                             </div>
                         </div>
@@ -41,4 +42,10 @@
         </div>
     </div>
 
+{% endblock %}
+
+{% block include_js %}
+
+    {{ js_include('web/js/my.js') }}
+
 {% endblock %}
\ No newline at end of file
diff --git a/app/Http/Web/Views/order/info.volt b/app/Http/Web/Views/order/info.volt
index cdc4d141..b91d0d81 100644
--- a/app/Http/Web/Views/order/info.volt
+++ b/app/Http/Web/Views/order/info.volt
@@ -1,44 +1,43 @@
-{% extends 'templates/full.volt' %}
+{% extends 'templates/layer.volt' %}
 
 {% block content %}
 
     {{ partial('partials/macro_order') }}
 
-    <div class="layui-breadcrumb breadcrumb">
-        <a href="/">首页</a>
-        <a href="{{ url({'for':'web.my.orders'}) }}">我的订单</a>
-        <a><cite>订单详情</cite></a>
-        <a><cite>{{ order.subject }}</cite></a>
+    {% set order_pay_url = url({'for':'web.order.pay'},{'sn':order.sn}) %}
+    {% set refund_confirm_url = url({'for':'web.refund.confirm'},{'sn':order.sn}) %}
+
+    <table class="layui-table order-table" lay-size="lg">
+        <tr>
+            <td colspan="2">
+                订单金额：<span class="price">{{ '￥%0.2f'|format(order.amount) }}</span>
+                订单状态：<span class="status">{{ order_status(order.status) }}</span>
+            </td>
+        </tr>
+        <tr>
+            <td>{{ item_info(order) }}</td>
+            <td>{{ status_history(order.status_history) }}</td>
+        </tr>
+    </table>
+    <br>
+    <div class="text-center">
+        {% if order.status == 'pending' %}
+            <a class="layui-btn layui-bg-blue" href="{{ order_pay_url }}" target="_top">立即支付</a>
+        {% endif %}
+        {% if (order.item_type in ['course','package']) and (order.status == 'finished') %}
+            <a class="layui-btn layui-bg-blue" href="{{ refund_confirm_url }}">申请退款</a>
+        {% endif %}
     </div>
 
-    <div class="wrap">
-        <table class="layui-table kg-table order-table" lay-size="lg">
-            <tr>
-                <td>基本信息</td>
-                <td>订单金额</td>
-                <td>订单类型</td>
-                <td>订单状态</td>
-                <td>流转时间</td>
-            </tr>
-            <tr>
-                <td>{{ item_info(order) }}</td>
-                <td><span class="price">{{ '￥%0.2f'|format(order.amount) }}</span></td>
-                <td>{{ item_type(order.item_type) }}</td>
-                <td>{{ order_status(order.status) }}</td>
-                <td>{{ status_history(order.status_history) }}</td>
-            </tr>
-        </table>
-        <br>
-        <div class="text-center">
-            <a href="javascript:" class="kg-back layui-btn layui-bg-gray">返回上页</a>
-            {% if order.status == 'pending' %}
-                <a class="layui-btn layui-bg-blue" href="{{ url({'for':'web.order.pay'},{'sn':order.sn}) }}">立即支付</a>
-            {% endif %}
-            {% if (order.item_type in ['course','package']) and (order.status == 'finished') %}
-                <a class="layui-btn layui-bg-blue" href="{{ url({'for':'web.refund.confirm'},{'sn':order.sn}) }}">申请退款</a>
-            {% endif %}
-        </div>
-        <br>
-    </div>
+{% endblock %}
+
+{% block inline_js %}
+
+    <script>
+        layui.use(['jquery', 'layer'], function () {
+            var index = parent.layer.getFrameIndex(window.name);
+            parent.layer.iframeAuto(index);
+        });
+    </script>
 
 {% endblock %}
\ No newline at end of file
diff --git a/app/Http/Web/Views/order/pay.volt b/app/Http/Web/Views/order/pay.volt
index a42d0331..e2775dfe 100644
--- a/app/Http/Web/Views/order/pay.volt
+++ b/app/Http/Web/Views/order/pay.volt
@@ -16,8 +16,8 @@
         <div class="channel">
             {% set create_url = url({'for':'web.trade.create'}) %}
             {% set status_url = url({'for':'web.trade.status'}) %}
-            <a class="alipay pay-btn" href="javascript:" data-channel="alipay"></a>
-            <a class="wxpay pay-btn" href="javascript:" data-channel="wxpay"></a>
+            <a class="alipay btn-pay" href="javascript:" data-channel="alipay"></a>
+            <a class="wxpay btn-pay" href="javascript:" data-channel="wxpay"></a>
         </div>
         <div class="footer">
             <span class="tips">友情提示：请在12小时内完成支付，有问题请联系客服</span>
@@ -38,55 +38,8 @@
 
 {% endblock %}
 
-{% block inline_js %}
+{% block include_js %}
 
-    <script>
-        var $ = layui.jquery;
-        var layer = layui.layer;
-        var showQrLayer = function (title, content) {
-            layer.open({
-                type: 1,
-                id: 'pay-layer',
-                title: title,
-                content: content,
-                area: ['640px', '320px']
-            });
-        };
-        $('.pay-btn').on('click', function () {
-            var channel = $(this).data('channel');
-            var createUrl = $('input[name=trade_create_url]').val();
-            var statusUrl = $('input[name=trade_status_url]').val();
-            var forwardUrl = $('input[name=forward_url]').val();
-            var orderSn = $('input[name=order_sn]').val();
-            var $qrBox = $('#' + channel + '-qr-box');
-            var $snInput = $('input[name=' + channel + '_trade_sn]');
-            var qrTitle = channel === 'alipay' ? '支付宝扫码支付' : '微信扫码支付';
-            var qrHtml = $qrBox.html();
-            if (qrHtml.length === 0) {
-                var postData = {order_sn: orderSn, channel: channel};
-                $.post(createUrl, postData, function (res) {
-                    qrHtml = '<div class="qrcode"><img src="' + res.qrcode_url + '" alt="支付二维码"></div>';
-                    showQrLayer(qrTitle, qrHtml);
-                    $qrBox.html(qrHtml);
-                    $snInput.html(res.sn);
-                    var interval = setInterval(function () {
-                        var queryData = {sn: res.sn};
-                        $.get(statusUrl, queryData, function (res) {
-                            if (res.status === 'finished') {
-                                clearInterval(interval);
-                                var html = '<div class="success-tips">支付成功</div>';
-                                $('#pay-layer').html(html);
-                                setTimeout(function () {
-                                    window.location.href = forwardUrl;
-                                }, 5000);
-                            }
-                        });
-                    }, 3000)
-                });
-            } else {
-                showQrLayer(qrTitle, qrHtml);
-            }
-        });
-    </script>
+    {{ js_include('web/js/order.pay.js') }}
 
 {% endblock %}
\ No newline at end of file
diff --git a/app/Http/Web/Views/partials/macro_order.volt b/app/Http/Web/Views/partials/macro_order.volt
index 7bbac80d..fac79670 100644
--- a/app/Http/Web/Views/partials/macro_order.volt
+++ b/app/Http/Web/Views/partials/macro_order.volt
@@ -1,39 +1,36 @@
 {%- macro item_info(order) %}
     {% if order.item_type == 'course' %}
         {% set course = order.item_info.course %}
-        {% set course_url = url({'for':'web.course.show','id':course.id}) %}
         <div class="order-item">
-            <p>课程名称：<a href="{{ course_url }}" target="_blank">{{ course.title }}</a></p>
+            <p>课程名称：<span>{{ course.title }}</span></p>
             <p>市场价格：<span class="price">{{ '￥%0.2f'|format(course.market_price) }}</span>会员价格：<span class="price">{{ '￥%0.2f'|format(course.vip_price) }}</span></p>
-            <p>学习期限：{{ date('Y-m-d H:i:s',course.study_expiry_time) }}<span class="space"></span>退款期限：{{ date('Y-m-d H:i:s',course.refund_expiry_time) }}</p>
+            <p>学习期限：<span>{{ date('Y-m-d',course.study_expiry_time) }}</span>退款期限：<span>{{ date('Y-m-d',course.refund_expiry_time) }}</span></p>
         </div>
     {% elseif order.item_type == 'package' %}
         {% set courses = order.item_info.courses %}
         {% for course in courses %}
-            {% set course_url = url({'for':'web.course.show','id':course.id}) %}
             <div class="order-item">
-                <p>课程名称：<a href="{{ course_url }}" target="_blank">{{ course.title }}</a></p>
+                <p>课程名称：<span>{{ course.title }}</span></p>
                 <p>市场价格：<span class="price">{{ '￥%0.2f'|format(course.market_price) }}</span>会员价格：<span class="price">{{ '￥%0.2f'|format(course.vip_price) }}</span></p>
-                <p>学习期限：{{ date('Y-m-d H:i:s',course.study_expiry_time) }}<span class="space"></span>退款期限：{{ date('Y-m-d H:i:s',course.refund_expiry_time) }}</p>
+                <p>学习期限：<span>{{ date('Y-m-d',course.study_expiry_time) }}</span>退款期限：<span>{{ date('Y-m-d',course.refund_expiry_time) }}</span></p>
             </div>
         {% endfor %}
     {% elseif order.item_type == 'vip' %}
         {% set vip = order.item_info.vip %}
         <div class="order-item">
-            <p>商品名称：{{ order.subject }}</p>
+            <p>商品名称：<span>{{ order.subject }}</span></p>
             <p>商品价格：<span class="price">{{ '￥%0.2f'|format(order.amount) }}</span></p>
         </div>
     {% elseif order.item_type == 'reward' %}
         {% set course = order.item_info.course %}
         {% set reward = order.item_info.reward %}
-        {% set course_url = url({'for':'web.course.show','id':course.id}) %}
         <div class="order-item">
-            <p>课程名称：<a href="{{ course_url }}" target="_blank">{{ course.title }}</a></p>
+            <p>课程名称：<span>{{ course.title }}</span></p>
             <p>赞赏金额：<span class="price">{{ '￥%0.2f'|format(reward.price) }}</span></p>
         </div>
     {% elseif order.item_type == 'test' %}
         <div class="order-item">
-            <p>商品名称：{{ order.subject }}</p>
+            <p>商品名称：<span>{{ order.subject }}</span></p>
             <p>商品价格：<span class="price">{{ '￥%0.2f'|format(order.amount) }}</span></p>
         </div>
     {% endif %}
@@ -53,20 +50,6 @@
     {% endfor %}
 {%- endmacro %}
 
-{%- macro item_type(value) %}
-    {% if value == 'course' %}
-        课程
-    {% elseif value == 'package' %}
-        套餐
-    {% elseif value == 'vip' %}
-        会员
-    {% elseif value == 'reward' %}
-        赞赏
-    {% elseif value == 'test' %}
-        测试
-    {% endif %}
-{%- endmacro %}
-
 {%- macro order_status(value) %}
     {% if value == 'pending' %}
         待支付
diff --git a/app/Http/Web/Views/refund/confirm.volt b/app/Http/Web/Views/refund/confirm.volt
index 86a5ab2b..d31a6459 100644
--- a/app/Http/Web/Views/refund/confirm.volt
+++ b/app/Http/Web/Views/refund/confirm.volt
@@ -1,50 +1,43 @@
-{% extends 'templates/full.volt' %}
+{% extends 'templates/layer.volt' %}
 
 {% block content %}
 
     {%- macro item_info(confirm) %}
         {% if confirm.item_type == 'course' %}
             {% set course = confirm.item_info.course %}
-            {% set course_url = url({'for':'web.course.show','id':course.id}) %}
+            {% set expiry_flag = course.refund_expiry_time < time() ? '（已过期）' : '' %}
             <div class="order-item">
-                <p>课程名称：<a href="{{ course_url }}" target="_blank">{{ course.title }}</a></p>
-                <p>退款期限：{{ date('Y-m-d H:i:s',course.refund_expiry_time) }}</p>
+                <p>课程名称：<span>{{ course.title }}</span></p>
+                <p>退款期限：<span>{{ date('Y-m-d H:i:s',course.refund_expiry_time) }} {{ expiry_flag }}</span></p>
                 <p>退款金额：<span class="price">{{ '￥%0.2f'|format(course.refund_amount) }}</span>退款比例：<span class="price">{{ 100 * course.refund_percent }}%</span></p>
             </div>
         {% elseif confirm.item_type == 'package' %}
             {% set courses = confirm.item_info.courses %}
             {% for course in courses %}
-                {% set course_url = url({'for':'web.course.show','id':course.id}) %}
+                {% set expiry_flag = course.refund_expiry_time < time() ? '（已过期）' : '' %}
                 <div class="order-item">
-                    <p>课程名称：<a href="{{ course_url }}" target="_blank">{{ course.title }}</a></p>
-                    <p>退款期限：{{ date('Y-m-d H:i:s',course.refund_expiry_time) }}</p>
+                    <p>课程名称：<span>{{ course.title }}</span></p>
+                    <p>退款期限：<span>{{ date('Y-m-d H:i:s',course.refund_expiry_time) }} {{ expiry_flag }}</span></p>
                     <p>退款金额：<span class="price">{{ '￥%0.2f'|format(course.refund_amount) }}</span>退款比例：<span class="price">{{ 100 * course.refund_percent }}%</span></p>
                 </div>
             {% endfor %}
         {% endif %}
     {%- endmacro %}
 
-    <div class="layui-breadcrumb breadcrumb">
-        <a href="/">首页</a>
-        <a href="{{ url({'for':'web.my.orders'}) }}">我的订单</a>
-        <a><cite>确认退款</cite></a>
-        <a><cite>{{ order.subject }}</cite></a>
-    </div>
-
-    <div class="wrap">
-        <table class="layui-table kg-table order-table" lay-size="lg">
-            <tr>
-                <td>订单编号：{{ order.sn }}</td>
-                <td>订单金额</td>
-                <td>退款金额</td>
-            </tr>
-            <tr>
-                <td>{{ item_info(confirm) }}</td>
-                <td><span class="price">{{ '￥%0.2f'|format(order.amount) }}</span></td>
-                <td><span class="price">{{ '￥%0.2f'|format(confirm.refund_amount) }}</span></td>
-            </tr>
-        </table>
-        <br>
+    <table class="layui-table order-table" lay-size="lg">
+        <tr>
+            <td>退款项目</td>
+            <td>退款金额</td>
+            <td>订单金额</td>
+        </tr>
+        <tr>
+            <td>{{ item_info(confirm) }}</td>
+            <td><span class="price">{{ '￥%0.2f'|format(confirm.refund_amount) }}</span></td>
+            <td><span class="price">{{ '￥%0.2f'|format(order.amount) }}</span></td>
+        </tr>
+    </table>
+    <br>
+    {% if confirm.refund_amount > 0 %}
         <form class="layui-form layui-form-pane" method="post" action="{{ url({'for':'web.refund.create'}) }}">
             <div class="layui-form-item layui-form-text">
                 <label class="layui-form-label">退款原因</label>
@@ -54,11 +47,23 @@
             </div>
             <br>
             <div class="layui-form-item text-center">
-                <button type="button" class="kg-back layui-btn layui-bg-gray">返回上页</button>
                 <button class="layui-btn" lay-submit="true" lay-filter="go">申请退款</button>
                 <input type="hidden" name="order_sn" value="{{ order.sn }}">
             </div>
         </form>
-    </div>
+    {% else %}
+        <div class="text-center">没有符合条件的退款项目</div>
+    {% endif %}
+
+{% endblock %}
+
+{% block inline_js %}
+
+    <script>
+        layui.use(['jquery', 'layer'], function () {
+            var index = parent.layer.getFrameIndex(window.name);
+            parent.layer.title('申请退款', index);
+        });
+    </script>
 
 {% endblock %}
\ No newline at end of file
diff --git a/app/Http/Web/Views/refund/info.volt b/app/Http/Web/Views/refund/info.volt
index 4ce387ec..71055291 100644
--- a/app/Http/Web/Views/refund/info.volt
+++ b/app/Http/Web/Views/refund/info.volt
@@ -1,41 +1,30 @@
-{% extends 'templates/full.volt' %}
+{% extends 'templates/layer.volt' %}
 
 {% block content %}
 
     {{ partial('partials/macro_refund') }}
 
-    <div class="layui-breadcrumb breadcrumb">
-        <a href="/">首页</a>
-        <a href="{{ url({'for':'web.my.refunds'}) }}">我的退款</a>
-        <a><cite>退款详情</cite></a>
-        <a><cite>{{ refund.subject }}</cite></a>
-    </div>
+    {% set cancel_url = url({'for':'web.refund.cancel'}) %}
 
-    <div class="wrap">
-        <table class="layui-table kg-table order-table" lay-size="lg">
-            <tr>
-                <td>退款项目</td>
-                <td>订单金额</td>
-                <td>退款金额</td>
-                <td>退款状态</td>
-                <td>流转时间</td>
-            </tr>
-            <tr>
-                <td>{{ refund.subject }}</td>
-                <td><span class="price">{{ '￥%0.2f'|format(refund.order.amount) }}</span></td>
-                <td><span class="price">{{ '￥%0.2f'|format(refund.amount) }}</span></td>
-                <td>{{ refund_status(refund.status) }}</td>
-                <td>{{ status_history(refund.status_history) }}</td>
-            </tr>
-        </table>
-        <br>
-        <div class="text-center">
-            <button class="kg-back layui-btn layui-bg-gray">返回上页</button>
-            {% if refund.status == 'approved' %}
-                <button class="kg-refund layui-btn" data-sn="{{ refund.sn }}" data-url="{{ url({'for':'web.refund.cancel'}) }}">取消退款</button>
-            {% endif %}
-        </div>
-        <br>
+    <table class="layui-table order-table" lay-size="lg">
+        <tr>
+            <td colspan="2">
+                订单金额：<span class="price">{{ '￥%0.2f'|format(refund.order.amount) }}</span>
+                退款金额：<span class="price">{{ '￥%0.2f'|format(refund.amount) }}</span>
+                退款状态：<span class="status">{{ refund_status(refund.status) }}</span>
+            </td>
+        </tr>
+        <tr>
+            <td>{{ refund.subject }}</td>
+            <td>{{ status_history(refund.status_history) }}</td>
+        </tr>
+    </table>
+    <br>
+    <div class="text-center">
+        <button class="layui-btn layui-bg-gray btn-close">关闭窗口</button>
+        {% if refund.status == 'approved' %}
+            <button class="kg-refund layui-btn" data-sn="{{ refund.sn }}" data-url="{{ cancel_url }}">取消退款</button>
+        {% endif %}
     </div>
 
 {% endblock %}
@@ -43,30 +32,30 @@
 {% block inline_js %}
 
     <script>
-        var $ = layui.jquery;
-        var layer = layui.layer;
-        $('.kg-refund').on('click', function () {
-            var url = $(this).data('url');
-            var data = {sn: $(this).data('sn')};
-            var tips = '确定要取消退款吗？';
-            layer.confirm(tips, function () {
-                $.ajax({
-                    type: 'POST',
-                    url: url,
-                    data: data,
-                    success: function (res) {
-                        layer.msg(res.msg, {icon: 1});
-                        setTimeout(function () {
-                            window.location.href = '/my/refunds';
-                        }, 1500);
-                    },
-                    error: function (xhr) {
-                        var json = JSON.parse(xhr.responseText);
-                        layer.msg(json.msg, {icon: 2});
-                    }
-                });
-            }, function () {
+        layui.use(['jquery', 'layer'], function () {
 
+            var $ = layui.jquery;
+            var layer = layui.layer;
+            var index = parent.layer.getFrameIndex(window.name);
+
+            parent.layer.iframeAuto(index);
+
+            $('.kg-refund').on('click', function () {
+                layer.confirm('确定要取消退款吗？', function () {
+                    $.ajax({
+                        type: 'POST',
+                        url: $(this).data('url'),
+                        data: {sn: $(this).data('sn')},
+                        success: function (res) {
+                            layer.msg(res.msg, {icon: 1});
+                            setTimeout(function () {
+                                parent.window.location.href = '/my/refunds';
+                            }, 1500);
+                        }
+                    });
+                }, function () {
+
+                });
             });
         });
     </script>
diff --git a/public/static/web/css/common.css b/public/static/web/css/common.css
index 002d3cf8..29ea2a50 100644
--- a/public/static/web/css/common.css
+++ b/public/static/web/css/common.css
@@ -1405,18 +1405,39 @@ body {
     margin-right: 30px;
 }
 
-.kg-table p {
+.order-table {
+    margin: 0;
+}
+
+.order-table p {
     line-height: 1.8em;
 }
 
+.order-table span {
+    margin-right: 10px;
+}
+
 .order-table .price {
     color: red;
 }
 
+.order-item {
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #e6e6e6;
+}
+
+.order-item:last-child {
+    padding-bottom: 0;
+    margin-bottom: 0;
+    border-bottom: none;
+}
+
 .order-card {
     padding: 15px;
     margin-bottom: 20px;
     background-color: white;
+    color: #666;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 
@@ -1430,17 +1451,6 @@ body {
     margin-right: 10px;
 }
 
-.order-card .header .sn {
-    color: #666;
-}
-
-.order-card .header .time {
-    color: #666;
-}
-
-.order-card .body {
-}
-
 .order-card .column {
     float: left;
     line-height: 40px;
diff --git a/public/static/web/js/my.js b/public/static/web/js/my.js
new file mode 100644
index 00000000..a5154ba4
--- /dev/null
+++ b/public/static/web/js/my.js
@@ -0,0 +1,45 @@
+layui.use(['jquery', 'layer', 'helper'], function () {
+
+    var $ = layui.jquery;
+    var layer = layui.layer;
+    var helper = layui.helper;
+
+    /**
+     * 订单详情
+     */
+    $('.btn-order-info').on('click', function () {
+        var url = $(this).data('url');
+        layer.open({
+            type: 2,
+            title: '订单详情',
+            content: [url, 'no'],
+            area: '800px',
+            offset: '200px'
+        });
+    });
+
+    /**
+     * 退款详情
+     */
+    $('.btn-refund-info').on('click', function () {
+        var url = $(this).data('url');
+        layer.open({
+            type: 2,
+            title: '退款详情',
+            content: [url, 'no'],
+            area: '800px',
+            offset: '200px'
+        });
+    });
+
+    if ($('#tab-courses').length > 0) {
+        var $tabCourses = $('#tab-courses');
+        helper.ajaxLoadHtml($tabCourses.data('url'), $tabCourses.attr('id'));
+    }
+
+    if ($('#tab-users').length > 0) {
+        var $tabUsers = $('#tab-users');
+        helper.ajaxLoadHtml($tabUsers.data('url'), $tabUsers.attr('id'));
+    }
+
+});
\ No newline at end of file
diff --git a/public/static/web/js/order.pay.js b/public/static/web/js/order.pay.js
new file mode 100644
index 00000000..0f21193c
--- /dev/null
+++ b/public/static/web/js/order.pay.js
@@ -0,0 +1,52 @@
+layui.use(['jquery', 'layer'], function () {
+
+    var $ = layui.jquery;
+    var layer = layui.layer;
+
+    $('.btn-pay').on('click', function () {
+        var channel = $(this).data('channel');
+        var createUrl = $('input[name=trade_create_url]').val();
+        var statusUrl = $('input[name=trade_status_url]').val();
+        var forwardUrl = $('input[name=forward_url]').val();
+        var orderSn = $('input[name=order_sn]').val();
+        var $qrBox = $('#' + channel + '-qr-box');
+        var $snInput = $('input[name=' + channel + '_trade_sn]');
+        var qrTitle = channel === 'alipay' ? '支付宝扫码支付' : '微信扫码支付';
+        var qrHtml = $qrBox.html();
+        if (qrHtml.length === 0) {
+            var postData = {order_sn: orderSn, channel: channel};
+            $.post(createUrl, postData, function (res) {
+                qrHtml = '<div class="qrcode"><img src="' + res.qrcode_url + '" alt="支付二维码"></div>';
+                showQrLayer(qrTitle, qrHtml);
+                $qrBox.html(qrHtml);
+                $snInput.html(res.sn);
+                var interval = setInterval(function () {
+                    var queryData = {sn: res.sn};
+                    $.get(statusUrl, queryData, function (res) {
+                        if (res.status === 'finished') {
+                            clearInterval(interval);
+                            var html = '<div class="success-tips">支付成功</div>';
+                            $('#pay-layer').html(html);
+                            setTimeout(function () {
+                                window.location.href = forwardUrl;
+                            }, 5000);
+                        }
+                    });
+                }, 3000)
+            });
+        } else {
+            showQrLayer(qrTitle, qrHtml);
+        }
+    });
+
+    function showQrLayer(title, content) {
+        layer.open({
+            type: 1,
+            id: 'pay-layer',
+            title: title,
+            content: content,
+            area: ['640px', '320px']
+        })
+    }
+
+});
\ No newline at end of file