Merge branch 'feature/yohoCoinUse' into release/5.2

yyq
Commit 24674ab90c85bb4f67e540542c40da1c51550a18 2 parents 5663fa65 19e25358
Showing 5 changed files with 174 additions and 69 deletions
apps/cart/models/easypay.js
apps/cart/views/action/order-ensure.hbs
apps/cart/views/partial/order-tpl.hbs
public/js/cart/easypay.page.js
public/scss/cart/_order-ensure.css
--- a/apps/cart/models/easypay.js
View file @24674ab
+++ b/apps/cart/models/easypay.js
View file @24674ab
@@ -12,7 +12,7 @@ const crypto = global.yoho.crypto;
 const easypayApi = require('./easypay-api');
-const handelViewPrice = list => {
+const _handelViewPrice = list => {
     if (list) {
         _.forEach(list, val => {
             if (val.promotion === '商品金额') {
@@ -26,6 +26,36 @@ const handelViewPrice = list => {
     }
 };
+const _handelUseYohoCoin = (info) => {
+    let resData = {};
+    let limitCoin = _.get(info, 'yoho_coin_pay_rule.num_limit', 0);
+
+    if (info) {
+        Object.assign(resData, {
+            yoho_coin: info.yoho_coin,
+            use_yoho_coin: info.use_yoho_coin,
+            total_yoho_coin_num: info.total_yoho_coin_num,
+            yoho_coin_pay_rule: info.yoho_coin_pay_rule,
+            canUseCoinNum: _.round(info.yoho_coin * 100),
+            usedCoinNum: _.round(info.use_yoho_coin * 100)
+        });
+
+        if (!resData.canUseCoinNum) {
+            let coinErrorTip = '';
+
+            if (info.total_yoho_coin_num > limitCoin) {
+                coinErrorTip = '抱歉，您的订单实付款不满足有货币使用条件';
+            } else {
+                coinErrorTip = `抱歉，您的有货币不足，有货币满${limitCoin}个方可使用`;
+            }
+
+            resData.coinErrorTip = coinErrorTip;
+        }
+    }
+
+    return resData;
+};
+
 const _handelPaymentInfo = (d) => {
     let resData = {};
@@ -81,14 +111,14 @@ const _handelPaymentInfo = (d) => {
     };
     if (d.shopping_cart_data && d.shopping_cart_data.promotion_formula_list) {
-        handelViewPrice(d.shopping_cart_data.promotion_formula_list);
+        _handelViewPrice(d.shopping_cart_data.promotion_formula_list);
     }
     Object.assign(resData, {
         paymentWay: d.payment_way,
         deliveryTime: d.delivery_time,
         deliveryWay: d.delivery_way,
-        shoppingCartData: d.shopping_cart_data,
+        shoppingCartData: Object.assign(d.shopping_cart_data, _handelUseYohoCoin(d)),
         invoices: d.invoices
     });
@@ -142,8 +172,10 @@ const getOrderComputeData = (uid, cartType, params) => {
             }
             if (_.has(result, 'data.promotion_formula_list')) {
-                handelViewPrice(result.data.promotion_formula_list);
+                _handelViewPrice(result.data.promotion_formula_list);
             }
+
+            result.data = Object.assign(_handelUseYohoCoin(result.data), result.data);
         }
         return result;
     });
--- a/apps/cart/views/action/order-ensure.hbs
View file @24674ab
+++ b/apps/cart/views/action/order-ensure.hbs
View file @24674ab
@@ -268,23 +268,37 @@
                 <span id="use-coin" class="use-coin coin-trigger">使用有货币支付</span>
                 <div class="using-coin coin-trigger hide">
-                    <ul>
+                    <ul id="using-coin-cont">
+                        {{#if coinErrorTip}}
+                            <li><span class="red">{{coinErrorTip}}</span></li>
+                        {{/if}}
                         <li>
-                            使用有货币：<input id="coin-used" class="coin-used" type="text" data-max="{{hasCoin}}">个
-                        </li>
-                        <li class="coin-sum-row">
-                            您目前有有货币<em>{{hasCoin}}</em>个
+                            有货币满<span class="red">{{yoho_coin_pay_rule.num_limit}}</span>个即可使用，每次使用有货币为<span class="red">{{yoho_coin_pay_rule.num_limit}}</span>的整数倍
+
+                            <i class="iconfont help-icon">&#xe628;</i>
+                            <div class="coin-tip-help">
+                                <p>有货币使用条件：</p>
+                                <p>
+                                    1.订单金额大于20元（含）<br>
+                                    2.有货币数量大于{{yoho_coin_pay_rule.num_limit}}个（含） <br>
+                                    3.有货币支付不得超过每笔订单应付金额的{{yoho_coin_pay_rule.max_pay_rate_desc}}
+                                </p>
+                                <p>备注：使用有货币数量为{{yoho_coin_pay_rule.num_limit}}的整数倍，100有货币抵1元</p>
+                            </div>
                         </li>
-                        <li class="coin-tip-row">
-                            <span id="coin-tip" class="coin-tip vhide"></span>
+                        <li>您当前共有有货币 <span class="red">{{total_yoho_coin_num}}</span> 个，可用 <span class="red">{{canUseCoinNum}}</span> 个</li>
+                        <li>
+                            <p{{#if coinErrorTip}} class="coin-use-hide"{{/if}}>本次使用有货币<span class="red">{{canUseCoinNum}}</span>个，抵扣 <span class="red">¥{{yoho_coin}}</span></p>
                         </li>
                     </ul>
                     <p class="btns">
                         <span id="coin-sure" class="coin-sure sure-btn">确定</span>
                         <span id="coin-cancel" class="coin-cancel cancel-btn">取消</span>
+                        <a href="/help/?category_id=87" class="coin-help" target="_blank">有货币使用规则?</a>
                     </p>
                 </div>
+                <input id="coin-used" type="hidden" data-coin="{{usedCoinNum}}" data-max={{canUseCoinNum}}>
             </li>
         </ul>
     </div>
--- a/apps/cart/views/partial/order-tpl.hbs
View file @24674ab
+++ b/apps/cart/views/partial/order-tpl.hbs
View file @24674ab
@@ -101,6 +101,30 @@
     \{{/each}}
 </script>
+<script id="yoho-coin-tpl" type="text/html">
+    \{{#if coinErrorTip}}
+        <li><span class="red">\{{coinErrorTip}}</span></li>
+    \{{/if}}
+    <li>
+        有货币满<span class="red">\{{yoho_coin_pay_rule.num_limit}}</span>个即可使用，每次使用有货币为<span class="red">\{{yoho_coin_pay_rule.num_limit}}</span>的整数倍
+
+        <i class="iconfont help-icon">&#xe628;</i>
+        <div class="coin-tip-help">
+            <p>有货币使用条件：</p>
+            <p>
+                1.订单金额大于20元（含）<br>
+                2.有货币数量大于\{{yoho_coin_pay_rule.num_limit}}个（含） <br>
+                3.有货币支付不得超过每笔订单应付金额的\{{yoho_coin_pay_rule.max_pay_rate_desc}}
+            </p>
+            <p>备注：使用有货币数量为\{{yoho_coin_pay_rule.num_limit}}的整数倍，100有货币抵1元</p>
+        </div>
+    </li>
+    <li>您当前共有有货币 <span class="red">\{{total_yoho_coin_num}}</span> 个，可用 <span class="red">\{{canUseCoinNum}}</span> 个</li>
+    <li>
+        <p\{{#if coinErrorTip}} class="coin-use-hide"\{{/if}}>本次使用有货币<span class="red">\{{canUseCoinNum}}</span>个，抵扣 <span class="red">¥\{{yoho_coin}}</span></p>
+    </li>
+</script>
+
 <script id="promotion-list-tpl" type="text/html">
     \{{#each promotion_formula_list}}
         <li class="promotion-item\{{#isEqual promotion '运费'}} fregit-promotion\{{/isEqual}}">
--- a/public/js/cart/easypay.page.js
View file @24674ab
+++ b/public/js/cart/easypay.page.js
View file @24674ab
@@ -13,19 +13,11 @@ var $pdUsed = $('#pay-delivery-used');
 var $balance = $('#balance-detail');
 var couponsTpl = Hbs.compile($('#coupons-tpl').html());
+var coinTpl = Hbs.compile($('#yoho-coin-tpl').html());
 var promotionTpl = Hbs.compile($('#promotion-list-tpl').html());
 var $coin = $('#coin-used');
-var $coinTip = $('#coin-tip');
 var $coinSure = $('#coin-sure');
-var coinMax = +$coin.data('max');
-var coinStatus = {
-    err: '请输入一个正整数',
-    max: '您的有货币不足',
-    success: '抵扣',
-    maxUse: '您最多使用',
-    muPostfix: '个有货币'
-};
 var queryInfo;
 var pkgCache = {};
@@ -67,16 +59,18 @@ function updateUsedPdShow(info) {
 }
 // 订单计算
-function compute() {
-    var coinUsed = $coin.data('coin');
+// 传有货币数量则使用有货币，否者不使用，更改订单总价有货币使用数量重置为0
+function compute(coin) {
     var d = {
         cartType: window.queryString().type,
         deliveryWay: $('input[name="delivery-way-radio"]:checked').val(),
         paymentType: $('#payment-way').data('id'),
-        coin: coinUsed ? parseInt(coinUsed, 10) : 0
+        coin: coin ? parseInt(coin, 10) : 0
     };
     var couponCode = $('#coupons-sure').data('coupons');
+    $coin.data('coin', d.coin);
+
     if (couponCode) {
         d.couponCode = couponCode;
     }
@@ -106,6 +100,9 @@ function compute() {
             res = data.data;
+            // update yoho coin using
+            $('#using-coin-cont').html(coinTpl(res));
+
             // update last order amount
             $('#sum-row em').html(res.last_order_amount);
@@ -178,63 +175,32 @@ if ($('#use-coupons').length) {
 }
 // 有货币
+if ($coin) {
+    $coin.data($coin.data()); // 防止人为页面更改有货币使用数量
+}
+
 $('#use-coin, #coin-sure, #coin-cancel').click(function() {
     $('.coin-trigger').toggleClass('hide');
 });
-$coin.on('propertychange input', function() {
-    var c = $.trim($coin.val());
-    var err = true;
-
-    if (c === '') {
-
-        // 输入框为空，确定按钮不可点
-        $coinTip.addClass('vhide');
-        $coinTip.text(coinStatus.err);
-        return;
-    } else if (!/^[1-9]\d*$/.test(c)) {
-
-        // 验证输入不为正整数
-        $coinTip.text(coinStatus.err);
-    } else if (+c > coinMax) {
-
-        // 有货币不足
-        $coinTip.text(coinStatus.max);
-    } else if (+c > $('#sum-row').data('amount') * 100) {
-
-        // 输入的有货币大于订单额度
-        $coinTip.text(coinStatus.maxUse + ($('#sum-row').data('amount') * 100) + coinStatus.muPostfix);
-    } else {
-        err = false;
-        $coinTip.text(coinStatus.success + (c / 100).toFixed(2) + '元');
-
-        // 已使用面板的数据显示更新
-        // $coinUsed.html(c);
-        // $coinDeduction.html((c / 100).toFixed(2));
-    }
-
-    if (err) {
-        $coinSure.addClass('disable');
-        $coinTip.removeClass('vhide');
-    } else {
-        $coinSure.removeClass('disable');
-        $coinTip.addClass('vhide');
-    }
-});
-
 $coinSure.click(function() {
-    if ($coinSure.hasClass('disable')) {
+    var data = $coin.data();
+
+    if ($coinSure.hasClass('disable') ||
+        data.coin === data.max) {
         return;
     }
-    $coin.data('coin', $.trim($coin.val()));
     // coin change trigger compute
-    compute();
+    compute(data.max);
 });
 $('#coin-cancel').click(function() {
-    $coin.val('').data('coin', '');
-    $coinTip.addClass('vhide').text('');
+    var data = $coin.data();
+
+    if (data.coin * 1 === 0) {
+        return;
+    }
     // coin cancel trigger compute
     compute();
@@ -242,7 +208,7 @@ $('#coin-cancel').click(function() {
 // 结算信息列表中修改有货币按钮
 $('.balance-detail').on('click', '.modify-coin', function() {
-    $('.coin-trigger').filter('.use-coin').addClass('hide').end().filter('.using-coin').removeClass('hide');
+    $('#use-coin').trigger('click');
 });
 // delivery way change trigger compute
--- a/public/scss/cart/_order-ensure.css
View file @24674ab
+++ b/public/scss/cart/_order-ensure.css
View file @24674ab
@@ -492,6 +492,75 @@
         }
     }
+    .using-coin {
+        text-align: left;
+
+        li {
+            padding-bottom: 10px;
+        }
+        
+        .red {
+            color: #db6976;
+        }
+
+        .help-icon {
+            float: right;
+            cursor: pointer;
+
+            &:hover + .coin-tip-help {
+                display: block;
+            }
+        }
+
+        .coin-tip-help {
+            width: 310px;
+            padding: 6px;
+            border: 1px solid #000;
+            background-color: #fff;
+            position: absolute;
+            margin-left: 56px;
+            margin-top: 10px;
+            display: none;
+        }
+
+        .coin-use-hide {
+            color: #d4d4d4;
+        }
+
+        .coin-box {
+            display: inline-block;
+            width: 70px;
+            height: 24px;
+            line-height: 24px;
+            text-align: center;
+            border: 1px solid #d4d4d4;
+            margin: 0 6px;
+        }
+
+        .btns {
+            margin-top: 10px;
+            text-align: left;
+
+            span {
+                padding: 4px 14px;
+                cursor: pointer;
+                border: 1px solid #ccc;
+            }
+
+            .sure-btn {
+                color: #fff;
+                background-color: #000;
+                border-color: #000;
+                margin-right: 20px;
+            }
+
+            .coin-help {
+                float: right;
+                color: #5291f7;
+            }
+        }
+    }
+
     .coin-sum-row,
     .coin-tip-row {
         padding: 10px 0;