pay-back

@@ -3,7 +3,7 @@
  * @Author: Targaryen
  * @Author: Targaryen
  * @Date: 2017-01-04 15:17:51
  * @Date: 2017-01-04 15:17:51
  * @Last Modified by: Targaryen
  * @Last Modified by: Targaryen
- * @Last Modified time: 2017-01-17 16:02:22
+ * @Last Modified time: 2017-02-09 10:50:07
  */
  */
 
 
 'use strict';
 'use strict';
@@ -70,7 +70,8 @@ const payCenter = (req, res) => {
 
 
         let responseData = {
         let responseData = {
             pageHeader: headerModel.setNav({
             pageHeader: headerModel.setNav({
-                navTitle: '支付中心'
+                navTitle: '支付中心',
+                backUrl: 'javascript:void(0);'
             }),
             }),
             module: 'cart',
             module: 'cart',
             page: 'pay',
             page: 'pay',

@@ -32,7 +32,7 @@
     </div>
     </div>
     <div class="loading-toast hide"></div>
     <div class="loading-toast hide"></div>
 </div>
 </div>
-<!-- TODO richTip -->
+{{> rich_tip}}
 <input type="hidden" class="order-code" value="{{orderCode}}">
 <input type="hidden" class="order-code" value="{{orderCode}}">
 <input type="hidden" class="order-total" value="{{orderTotal}}">
 <input type="hidden" class="order-total" value="{{orderTotal}}">
 <script>_ozprm="orderid={{orderCode}}&ordertotal={{orderTotal}}";</script>
 <script>_ozprm="orderid={{orderCode}}&ordertotal={{orderTotal}}";</script>

+<!-- 结算提示框 -->
+<div id="yoho-order-bg" class="yoho-order-bg">
+    <div class="order-tip-box">
+        <div class="order-tip-msg">
+        </div>
+        <div class="order-tip-btn-group">
+        </div>
+    </div>
+</div>
+<!-- /结算提示框 -->

@@ -17,6 +17,8 @@ var loading = require('../plugin/loading'),
     tip = require('../plugin/tip'),
     tip = require('../plugin/tip'),
     Hammer = require('yoho-hammer');
     Hammer = require('yoho-hammer');
 
 
+var richTip = require('../plugin/rich-tip');
+
 
 
 // 点击微信显示加载
 // 点击微信显示加载
 var $loadingToast = $('.loading-toast');
 var $loadingToast = $('.loading-toast');
@@ -34,6 +36,24 @@ var appIconPosition = {
     bank: '-4rem'
     bank: '-4rem'
 };
 };
 
 
+$('.nav-back').on('touchend', function() {
+    richTip.show(
+        ['超过支付时效后订单会被取消，', '请尽快到我的订单完成支付哦！'],
+        [
+            {
+                href: '/home/orders',
+                text: '确认离开',
+                class: ''
+            },
+            {
+                href: '',
+                text: '继续支付',
+                class: 'order-tip-btnred'
+            }
+        ]
+    );
+});
+
 require('../common');
 require('../common');
 
 
 lazyLoad($('img.lazy'));
 lazyLoad($('img.lazy'));

+/**
+ * Created by yoho on 2016/11/22.
+ */
+var $ = require('yoho-jquery');
+
+var $tip = $('#yoho-order-bg'),
+    $tipMsg = $tip.find('.order-tip-msg'),
+    $tipBtns = $tip.find('.order-tip-btn-group');
+
+var touchCallback,
+    params;
+
+function setCallback(t, p) {
+    touchCallback = t;
+    params = p;
+}
+
+/**
+ * 跳转还是消失控制
+ */
+(function() {
+    $tip.on('touchend', function(event) {
+        if ('SPAN' === event.target.tagName) {
+            if (touchCallback) {
+                touchCallback(params);
+            }
+
+            touchCallback = null;
+            params = null;
+
+            setTimeout(function() {
+                $tip.hide();
+            }, 200);
+        } else if ('A' === event.target.tagName){
+            setTimeout(function() {
+                $tip.hide();
+            }, 200);
+        } else {
+            $tip.hide();
+        }
+    });
+}());
+
+/**
+ * 显示提示
+ */
+function show(con, btn) {
+    var content = '',
+        buttons = '';
+
+    if (con && $.isArray(con)) {
+        $.each(con, function(key, value) {
+            content += '<p>' + value + '</p>';
+        });
+    }
+
+    if (btn && $.isArray(btn) && btn.length === 1) {
+        if (!btn[0].href) {
+            buttons += '<a class="order-tip-btn1 ' + btn[0].class
+                + '"><span>' + btn[0].text
+                + '</span></a>';
+        } else {
+            buttons += '<a href="' + btn[0].href
+                + '" class="order-tip-btn1 ' + btn[0].class
+                + '">' + btn[0].text
+                + '</a>';
+        }
+    }
+
+    if (btn && $.isArray(btn) && btn.length > 1) {
+         $.each(btn, function(key, value) {
+             if (!value.href) {
+                 buttons += '<a class="' + value.class
+                     + '"><span>' + value.text
+                     + '</span></a>';
+             } else {
+                 buttons += '<a href="' + value.href
+                     + '" class="' + value.class
+                     + '">' + value.text
+                     + '</a>';
+             }
+        });
+    }
+    
+    $tipMsg.html(content);
+    $tipBtns.html(buttons);
+    $tip.show();
+}
+
+exports.setCallback = setCallback;
+exports.show = show;

@@ -119,3 +119,81 @@ button {
     background-position-x: 40%;
     background-position-x: 40%;
     background-size: 132px !important;
     background-size: 132px !important;
 }
 }
+
+/* rich-tip */
+.yoho-order-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: rgba(0,0,0,.7);
+    z-index:4;
+    display: none;
+
+    .order-tip-box {
+        background-color: #fff;
+        margin-left: auto;
+        margin-right: auto;
+        border-radius: 10px;
+        width: 420px;
+        margin-top: 400px;
+        vertical-align: center;
+        position: relative;
+
+        .order-tip-msg {
+            font-size: 1.1em;
+            padding: 40px 20px;
+            text-align: center;
+
+            p:last-child {
+                margin-bottom: 50px;
+            }
+        }
+
+        .order-tip-btn-group {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 60px;
+            line-height: 60px;
+
+            a {
+                width: 209px;
+                box-shadow: none;
+                background-color: #fff;
+                font-size: 1.2em;
+                text-align: center;
+                float: left;
+                display: inline-block;
+
+                span {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            a:first-child {
+                border-top: 1px solid #ccc;
+                border-right: 1px solid #ccc;
+                border-radius: 0 0 0 8px;
+            }
+
+            a:last-child {
+                border-top: 1px solid #ccc;
+                border-radius: 0 0 8px 0;
+            }
+
+            .order-tip-btnred {
+                color: #d0021b;
+            }
+
+            .order-tip-btn1 {
+                width: 418px;
+                border-right: none;
+                border-radius: 0 0 8px 8px!important;
+            }
+        }
+    }
+}