结算页面修改重新合并

uedxwg
Commit 4943c28427880bd5639ff5909e3621ed3e40fe1e 1 parent c33a5d82
Showing 3 changed files with 487 additions and 186 deletions
static/js/cart/order-ensure.js
static/sass/cart/_order-ensure.css
template/m.yohobuy.com/actions/cart/index/order-ensure.phtml
--- a/static/js/cart/order-ensure.js
View file @4943c28
+++ b/static/js/cart/order-ensure.js
View file @4943c28
@@ -6,25 +6,22 @@
 var $ = require('jquery'),
     lazyLoad = require('yoho.lazyload'),
-    Hammer = require('yoho.hammer'),
-    Handlebars = require('yoho.handlebars'),
     tip = require('../plugin/tip'),
     loading = require('../plugin/loading'),
     order = require('./order-info');
-var dispatchModeHammer,
-    dispatchTimeHammer,
-    $invoice = $('.invoice'),
-    $price = $('.price-cal'),
+var $invoice = $('.invoice'),
     $couponUse = $('.coupon-use.used'),
     $addressWrap = $('.address-wrap'),
     $coinCheck = $('.coin-check'),
     $coinUsed = $('.coin .used'),
+    $subBlock = $('.sub-block'),
     payType,
-    priceTmpl = Handlebars.compile($('#tmpl-price').html()),
     queryString = $.queryString(),
     orderInfo = order.orderInfo,
-    isSubmiting;
+    isSubmiting,
+    dispatchInfo,
+    total;
 require('../common');
@@ -71,7 +68,7 @@ isLimitGood() && (function() {
     var data = getQueryParam();
-    data['type'] = 'limitcode';
+    data.type = 'limitcode';
     a.push(data);
     orderInfo('skuList', JSON.stringify(a));
@@ -82,42 +79,36 @@ if (queryString.cartType || queryString.carttype || !orderInfo('cartType')) {
     orderInfo('cartType', queryString.cartType || queryString.carttype || 'ordinary');
 }
-function dispacthTapEvt(e) {
-    var $cur = $(e.target).closest('li');
+// function dispacthTapEvt(e) {
+//     var $cur = $(e.target).closest('li');
-    if ($cur.length === 0 || $cur.hasClass('chosed')) {
-        return;
-    }
-
-    $cur.siblings('li.chosed').removeClass('chosed');
-    $cur.addClass('chosed');
-}
-
-dispatchModeHammer = new Hammer(document.getElementsByClassName('dispatch-mode')[0]);
-dispatchModeHammer.on('tap', dispacthTapEvt);
+//     if ($cur.length === 0 || $cur.hasClass('chosed')) {
+//         return;
+//     }
-dispatchTimeHammer = new Hammer(document.getElementsByClassName('dispatch-time')[0]);
-dispatchTimeHammer.on('tap', dispacthTapEvt);
+//     $cur.siblings('li.chosed').removeClass('chosed');
+//     $cur.addClass('chosed');
+// }
 $('.checkbox').on('touchstart', function() {
     var $this = $(this);
-    if ($this.hasClass('icon-cb-checked')) {
-        $this.removeClass('icon-cb-checked').addClass('icon-checkbox');
+    if ($this.hasClass('icon-cb-radio')) {
+        $this.removeClass('icon-cb-radio').addClass('icon-radio');
         return;
     }
-    if ($this.hasClass('icon-checkbox')) {
-        $this.removeClass('icon-checkbox').addClass('icon-cb-checked');
+    if ($this.hasClass('icon-radio')) {
+        $this.removeClass('icon-radio').addClass('icon-cb-radio');
     }
 });
 $invoice.on('touchend', '.checkbox', function() {
     var $this = $(this);
-    if ($this.hasClass('icon-cb-checked')) {
+    if ($this.hasClass('icon-cb-radio')) {
         $invoice.addClass('focus');
     }
-    if ($this.hasClass('icon-checkbox')) {
+    if ($this.hasClass('icon-radio')) {
         $invoice.removeClass('focus');
     }
 });
@@ -138,12 +129,10 @@ function orderCompute() {
             skuList: isLimitGood() ? orderInfo('skuList') : undefined
         }
     }).then(function(res) {
-        var priceHtml;
-
         if ($.type(res) !== 'object') {
             window.location.reload();
         } else {
-            if (res.last_order_amount) {
+            if (typeof res.last_order_amount !== undefined) {
                 res.last_order_amount = (+res.last_order_amount).toFixed(2);
             }
             if (res.use_yoho_coin) {
@@ -152,12 +141,18 @@ function orderCompute() {
                 $coinCheck.find('em').show();
                 $coinUsed.show();
             }
-            priceHtml = priceTmpl({
-                cartPayData: res.promotion_formula_list,
-                price: res.last_order_amount
-            });
-
-            $price.html(priceHtml);
+            total = '';
+            if (res.promotion_formula_list) {
+                $.each(res.promotion_formula_list, function(index, value) {
+                    total += '<li>' +
+                            '<p>' + value.promotion + '</p>' +
+                            '<span>' + value.promotion_amount + '</span>' +
+                            '</li>';
+                });
+                $('.price-cost span').html('¥' + res.last_order_amount);
+                $('.bill span').html('¥' + res.last_order_amount);
+                $('.total').html(total);
+            }
         }
     }).fail(function() {
         window.location.reload();
@@ -170,10 +165,6 @@ function submitOrder() {
     var invoiceText = $invoice.find('[name="invoice-title"]').val() || orderInfo('invoiceText'),
         msg = $('#msg').find('input').val() || orderInfo('msg');
-    if (orderInfo('deliveryId') === 2 && !$addressWrap.data('support')) {
-        tip.show('当前地址不支持顺丰快递');
-        return;
-    }
     if (isSubmiting) {
         return false;
     }
@@ -248,17 +239,8 @@ if (!orderInfo('addressId')) {
 }
 $('.dispatch-mode').on('touchend', 'li', function() {
-    var $defaultMode = $('.dispatch-mode [data-id="1"]');
-
-    if (!$addressWrap.data('support') && $(this).data('id') === 2) {
-        dispacthTapEvt({
-            target: $defaultMode
-        });
-        tip.show('当前地址不支持顺丰快递');
-    } else {
-        orderInfo('deliveryId', $(this).data('id'));
-        orderCompute();
-    }
+    orderInfo('deliveryId', $(this).data('id'));
+    orderCompute();
 });
 $('.dispatch-time').on('touchend', 'li', function() {
@@ -268,7 +250,7 @@ $('.dispatch-time').on('touchend', 'li', function() {
 $('.coin').on('touchend', function() {
     var $this = $(this);
-    if ($this.find('.checkbox').hasClass('icon-cb-checked')) {
+    if ($this.find('.checkbox').hasClass('icon-cb-radio')) {
         orderInfo('yohoCoin', $this.data('yoho-coin'));
         $this.find('.can-use').hide();
     } else {
@@ -283,7 +265,7 @@ $('.coin').on('touchend', function() {
 $invoice.on('touchend', '.checkbox', function(e) {
     var $this = $(this);
-    orderInfo('invoice', $this.hasClass('icon-cb-checked'));
+    orderInfo('invoice', $this.hasClass('icon-cb-radio'));
     e.preventDefault();
     e.stopPropagation();
 });
@@ -304,9 +286,61 @@ $('.pay-mode').on('click', 'li', function() {
     orderInfo('paymentTypeId', $this.data('pay-id'));
     orderInfo('paymentType', $this.data('pay-type'));
     payType = $this.data('pay-type');
-    submitOrder();
 });
 $('form').on('submit', function() {
     return false;
 });
+
+// xwg 2016/3/21 13:22
+$('.dispatch').on('touchend', 'h3', function() {
+    if ($(this).siblings('ul').is(':hidden')) {
+        $('.dispatch h3').removeClass('border-none');
+        $(this).addClass('border-none');
+        $('.down').removeClass('hide');
+        $('.up').addClass('hide');
+        $('.up', this).removeClass('hide');
+        $('.down', this).addClass('hide');
+        $('.dispatch ul').hide();
+        $(this).siblings('ul').show();
+    } else {
+        $(this).removeClass('border-none');
+        $('.down', this).removeClass('hide');
+        $('.up', this).addClass('hide');
+        $(this).siblings('ul').hide();
+    }
+});
+
+$subBlock.on('touchstart', 'li', function() {
+    $.each($(this).parents('ul').find('i'), function() {
+        $(this).parents('ul').find('i').removeClass('icon-cb-radio').addClass('icon-radio');
+    });
+    $(this).parents('ul').hide();
+    $('.down').removeClass('hide');
+    $('.up').addClass('hide');
+    $('.dispatch h3').removeClass('border-none');
+    dispatchInfo = $(this).find('span').html();
+    $(this).parents('.sub-block').find('h3 span').html(dispatchInfo);
+    if ($(this).find('i').hasClass('icon-cb-radio')) {
+        $(this).find('i').addClass('icon-radio');
+    } else if ($(this).find('i').hasClass('icon-radio')) {
+        $(this).find('i').addClass('icon-cb-radio');
+    }
+});
+
+
+$('.bill a').on('touchstart', function() {
+    orderInfo('paymentTypeId', $('.delivery-id .icon-cb-radio').data('id'));
+    orderInfo('paymentType', $('.payment-type .icon-cb-radio').data('id'));
+
+    payType = $('.payment-type .icon-cb-radio').data('id');
+    submitOrder();
+});
+
+function phoneHidden(phone) {
+    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+}
+
+$('.info-phone').html(phoneHidden($('.info-phone').html()));
+
+
--- a/static/sass/cart/_order-ensure.css
View file @4943c28
+++ b/static/sass/cart/_order-ensure.css
View file @4943c28
@@ -10,91 +10,350 @@
     }
     .title {
-        font-size: 26px;
-        font-weight: bold;
+        font-size: 32px;
+        color: #444;
     }
-
-    .address-wrap {
+    /*xwg 2016-3-19 10:53*/
+    .price-cost{
+        span{
+            color: #f00;
+        }
+    }
+    .border-none{
+        border-bottom:none !important;
+    }
+    .boys{
+        background:resolve('shopping-cart/boys.png') bottom left repeat-x #fff;
+    }    
+    .girls{
+        background:resolve('shopping-cart/girls.png') bottom left repeat-x #fff;
+    }    
+    .kids{
+        background:resolve('shopping-cart/kids.png') bottom left repeat-x #fff;
+    }    
+    .life-style{
+        background:resolve('shopping-cart/lifeStyle.png') bottom left repeat-x #fff !important;
+    }
+    .not-address{
+        position: relative;
+        i{
+            position: absolute;
+            left: 16px;
+            top: 0%;
+            font-size: 44px;
+        }
+        .choose{
+            display: block;
+            color: #000;
+            height: 64px;
+            overflow: hidden;
+            position: static;
+            padding-left:40px;
+            font-size: 32px;
+            line-height: 82px;
+            span{ 
+                position: absolute;
+                right: 20px;
+                top: 28px;
+                font-size: 32px;
+            }
+        }
+    }
+    .address{
         display: block;
         position: relative;
         margin-top: 0;
         border-top: none;
+        padding-bottom:.8rem;
+        .info{
+            width: 90%;
+            height: auto;
+            overflow: hidden;
+            padding-left: 10%;
+            padding-bottom: 12px;
+            position: relative;
+            span{
+                display: inline-block;
+            }
+            i{
+                position: absolute;
+                left: 0;
+                top: 0%;
+                font-size: 44px;
+            }
+        }
+        .info-name{
+            width: 48%;
+            height: 40px;
+            font-size: 32px;
+            overflow: hidden; 
+            text-overflow:ellipsis;
+            white-space:nowrap;
+        }
+        .info-phone{
+            width: 48%;
+            font-size: 24px;
+            text-align: right;
+        }
+        .info-address{
+            width: 100%;
+            font-size: 24px;
+            line-height: 38px;
+        }
+        .rest{
+            position: absolute;
+            right: 32px;
+            bottom:20px;
+            color: #f00;
+            font-size: 24px;
+            span{
+                font-size: 24px;
+            }
+        }
+    }
+    .dispatch{
+        padding:0%;
+        margin:0;
+        .sub-block{
+            color: #444;
+            &:last-child h3{
+                border-bottom:none;
+            }  
+            h3{
+                width: 95%;
+                height: 80px;
+                overflow: hidden;
+                line-height: 80px;
+                font-size: 32px;
+                margin-left: 5%;
+                border-bottom:1px solid #e0e0e0;
+                .hide{
+                    display: none !important;
+                }
+                p{
+                    display: inline-block;
+                    height: 80px;
+                    overflow: hidden; 
+                    text-overflow:ellipsis;
+                    white-space:nowrap;
+                }
+                i{
+                    font-size: 36px;
+                    margin-left: 8px;
+                    height: 80px;
+                    display: inline-block;
+                    overflow: hidden; 
+                    text-overflow:ellipsis;
+                    white-space:nowrap;
+                }
+                span{
+                    display: inline-block;
+                    width: 65%;
+                    height: 80px;
+                    text-align: right;
+                    font-size: 28px;
+                    overflow: hidden; 
+                    text-overflow:ellipsis;
+                    white-space:nowrap;
+                }
+            }
+            ul{
+                width: 90%;
+                height:auto;
+                overflow: hidden;
+                line-height: 80px;
+                font-size: 28px;
+                background: #e0e0e0;
+                padding-left:10%;
+                display: none;
+                padding-bottom: 8px;
+                .right{
+                    float: right;
+                    margin-right: 40px;
+                }
+                li{
+                    border-bottom:1px solid #fff;
+                    &:last-child{
+                        border-bottom:none;
+                    }
+                }
+            }
+        }
-        > .iconfont {
+    }
+    .goods-num{
+        width: 100%;
+        height: 52px;
+        color: #b0b0b0;
+        background:#fff;
+        padding:20px 0;
+        text-align: right;
+        font-size: 28px;
+        line-height: 52px;
+        span{
+            padding-right:20px;
+            color: #f00;
+        }
+    }
+    .bill{
+        position: fixed;
+        background:#fff;
+        left: 0;
+        bottom: 0;
+        width: 96%;
+        height: 100px;
+        overflow: hidden;
+        line-height: 100px;
+        font-size: 28px;
+        padding-left: 4%;
+        span{
+            color: #f00;
+        }
+        a{
             position: absolute;
-            color: #bcbcbc;
             right: 20px;
-            top: 50%;
-            margin-top: -8px;
+            top: 10px;
+            background:#d0021b;
+            display: inline-block;
+            color: #fff;
+            width: 25%;
+            height: 80px;
+            overflow: hidden;
+            border-radius: 10px;
+            line-height: 80px;
+            text-align: center;
+            font-size: 30px;
         }
-        .infos {
-            font-weight: bold;
-            font-size: 24px;
-            padding-right: 55px;
+    }
+    .price-cal{
+        margin-bottom: 90px;
+        font-size: 28px;
+        position: relative;
+        span{
+            position: absolute;
+            right: 28px;
+            text-align: right;
         }
-
-        .per-info {
-            float: right;
+        li{
+            font-size: 28px;
+            p{
+                display: inline-block;
+            }
+            span{
+                display: inline-block;
+            }
         }
+    }
-        .address {
-            display: block;
-            margin-top: 20px;
-            color: #bcbcbc;
-            font-weight: normal;
-        }
+.order-good {
+    position: relative;
+    padding: 20px 0;
+    margin-left: 34px;
+    height: 160px;
+    border-bottom: 1px solid #e0e0e0;
+    font-size: 26px;
+
+    &:last-child {
+        border-bottom: none;
     }
-    .dispatch .title {
-        margin-bottom: 10px;
+    .thumb-wrap {
+        position: relative;
+        float: left;
+        width: 120px;
+        height: 160px;
     }
-    .dispatch .sub-block:first-child {
-        border-bottom: 1px solid #f7f7f7;
-        margin-bottom: 15px;
+    .thumb {
+        width: 100%;
+        height: 100%;
     }
-    .dispatch-mode li,
-    .dispatch-time li {
-        float: left;
-        padding: 10px 20px;
-        margin-right: 15px;
-        margin-bottom: 15px;
-        border: 1px solid #c9c9c9;
-        color: #676767;
-        font-size: 26px;
+    .tag {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        color: #fff;
+        text-align: center;
+        font-size: 12px;
-        &.chosed {
-            border-color: #000;
-            background: resolve('shopping-cart/black-right.png') no-repeat;
-            background-size: 30px;
-            background-position: bottom right;
+        &:before {
+            display: block;
+            line-height: 1;
+            transform:scale(0.833);
         }
     }
-    .goods {
-        margin-right: -20px;
+    .gift-tag {
+        height: 25px;
+        background: #a1ce4e;
-        .price-wrap {
-            position: static;
-            text-align: left;
+        &:before {
+            content: '赠品';
+        }
+    }
-            .price {
-                color: #444;
-            }
+    .advance-buy-tag {
+        height: 25px;
+        background: #eb76aa;
-            .count {
-                display: inline;
-                margin-left: 20px;
-            }
+        &:before {
+            content: '加价购';
         }
+    }
+
+    .deps {
+        margin-left: 135px;
+    }
+
+    .name {
+        font-size: 28px;
+        max-width: 70%;
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
-        .name {
-            max-width: 400px;
+    .row:nth-child(2) {
+        height: 45px;
+        line-height: 45px;
+
+        > span {
+            margin-right: 15px;
         }
     }
+    .color, .size {
+        color: #b6b6b6;
+    }
+
+    .price-wrap {
+        position: absolute;
+        top: 20px;
+        right: 30px;
+        text-align: right;
+    }
+
+    .price {
+        color: #e01;
+    }
+
+    .count {
+        display: block;
+        color: #999;
+        text-align: right;
+        line-height: 45px;
+    }
+
+    .appear-date {
+        color: #f00;
+    }
+}
     .sale-invoice {
         margin-top: -20px;
         font-size: 24px;
@@ -114,12 +373,12 @@
             padding: 5px 15px;
             background: #f00;
             color: #fff;
-            border-radius: 10PX;
+            border-radius(10px;
             margin-left: 20px;
         }
         .coupon-use {
-            box-sizing: border-box;
+            box-sizing(border-box;
             position: relative;
             float: right;
             padding-right: 30px;
@@ -186,7 +445,7 @@
     .block {
         input, textarea {
             box-sizing: border-box;
-            margin: 20px 0;
+            margin: 20px) 0;
             padding: 0 12px;
             width: 100%;
             height: 72px;
@@ -196,7 +455,7 @@
             line-height: 1;
             outline: 0;
             border: 0;
-            border-radius: 4PX;
+            border-radius(4px;
         }
         textarea {
             padding: 12px;
@@ -246,7 +505,6 @@
         line-height: 100px;
         margin-top: 10px;
         font-size: 34px;
-
         em {
             color: #f00;
         }
@@ -261,7 +519,7 @@
             height: 88px;
             line-height: 88px;
             margin-bottom: 28px;
-            border-radius: 5PX;
+            border-radius(5px;
             font-size: 32px;
             color: #fff;
             text-align: center;
--- a/template/m.yohobuy.com/actions/cart/index/order-ensure.phtml
View file @4943c28
+++ b/template/m.yohobuy.com/actions/cart/index/order-ensure.phtml
View file @4943c28
 {{> layout/header}}
 <div class="order-ensure-page yoho-page">
     {{# orderEnsure}}
-    <a class="address-wrap block" data-id="{{addressId}}" data-support="{{isSupport}}" href="/cart/index/selectAddress">
-        <p class="infos">
-            收货地址
-            <span class="per-info">{{name}} {{phoneNum}}</span>
-            <span class="address">{{addressInfo}}</span>
-        </p>
-        <span class="iconfont">&#xe614;</span>
-    </a>
-
+    {{#if addressInfo}}
+    <div class="address block address-wrap {{#if pageHeader.boys}} boys{{/if}}{{#if pageHeader.girls}} girls{{/if}}{{#if pageHeader.kids}} kids{{/if}}{{#if pageHeader.lifeStyle}} life-style{{/if}}" data-id ="{{addressId}}">
+        <div class="info">
+            <span class="info-name">{{name}}</span>
+            <span class="info-phone">{{phoneNum}}</span>
+            <a href="/cart/index/selectAddress"><span class="info-address">{{addressInfo}}</span></a>
+            <i class="iconfont">&#xe637;</i>
+        </div>
+        <a class="rest" href="/cart/index/selectAddress">其他地址<span class="iconfont">&#xe614;</span></a>
+    </div>
+    {{^}}
+        <div class="address block address-wrap not-address">
+            <i class="iconfont">&#xe637;</i>
+            <a class="choose" href="/cart/index/selectAddress">请选择收货地址<span class="iconfont">&#xe614;</span></a>
+        </div>
+    {{/if}}
     <section class="dispatch block">
-        <div class="sub-block">
-            <h3 class="title">配送方式</h3>
-            <ul class="dispatch-mode clearfix">
+        <div class="sub-block payment-type">
+            <h3>
+                <p>支付方式</p>
+                <span>在线支付(推荐)</span>
+                <i class="iconfont down">&#xe616;</i>
+                <i class="iconfont hide up">&#xe615;</i>
+            </h3>
+            <ul>
+                {{#each paymentWay}}
+                    {{#if isSupport}}
+                    <li {{#if recommend}}class="chosed"{{/if}}>
+                        <span>{{name}}</span>
+                        <i class="right iconfont {{#if recommend}}icon-cb-radio{{else}}icon-radio{{/if}}"  data-id="{{paymentType}}"></i>
+                    </li>
+                    {{/if}}
+                {{/each}}
+            </ul>
+        </div>
+        <div class="sub-block delivery-id">
+            <h3>
+                <p>配送方式</p>
                 {{#each dispatchMode}}
-                <li {{#if isSelected}}class="chosed"{{/if}} data-id="{{id}}">{{name}}</li>
+                    {{#if isSelected}}<span>{{name}}：运费¥{{cost}}</span>{{/if}}
+                {{/each}}
+                <i class="iconfont down">&#xe616;</i>
+                <i class="iconfont hide up">&#xe615;</i>
+            </h3>
+            <ul class="dispatch-mode">
+                {{#each dispatchMode}}
+                <li {{#if isSelected}}class="chosed"{{/if}} data-id="{{id}}">
+                    <span>{{name}}：运费¥{{cost}}</span>
+                    <i class="right iconfont {{#if isSelected}}icon-cb-radio{{else}}icon-radio{{/if}}"></i>
+                </li>
                 {{/each}}
             </ul>
         </div>
-
-        <div class="sub-block">
-            <h3 class="title">送货时间</h3>
-            <ul class="dispatch-time clearfix">
+        <div class="sub-block dispatch-time">
+            <h3>
+                <p>送货时间</p>
+                <span>工作日、双休日和节假日均送货</span>
+                <i class="iconfont down">&#xe616;</i>
+                <i class="iconfont hide up">&#xe615;</i>
+            </h3>
+            <ul>
                 {{#each dispatchTime}}
-                <li {{#if isSelected}}class="chosed"{{/if}} data-id="{{id}}">{{name}}</li>
+                <li {{#if isSelected}}class="chosed"{{/if}} data-id="{{id}}">
+                    <span>{{name}}</span>
+                    <i class="right iconfont radio {{#if isSelected}}icon-cb-radio{{else}}icon-radio{{/if}}" ></i>
+                </li>
                 {{/each}}
             </ul>
         </div>
     </section>
-
-    <section class="block">
-        <h3 class="title">商品</h3>
-        <div class="goods">
+    <section class="block" style="margin-bottom: 0;">
             {{#each goods}}
             {{> me/order/good}}
             {{/each}}
-        </div>
     </section>
+    <div class="goods-num">共{{num}}件商品  合计<span>¥{{goodsPrice}}</span></div>
     <section class="block">
         <ul class="sale-invoice">
@@ -46,10 +85,6 @@
                 <a href="{{#if isLimit}}javascript:void(0);{{else}}/cart/index/selectCoupon{{/if}}">
                     <span class="title">优惠券</span>
                     {{# coupon}}
-                    <!--<span class="coupon-count">
-                        {{count}}张可用
-                    </span>-->
-
                     {{#if couponName}}
                     <span class="used coupon-use" data-name="{{couponName}}">
                         {{couponName}}
@@ -74,13 +109,13 @@
                 {{#if useYohoCoin}}
                 <span class="coin-check">
-                    <em>- ¥ {{useYohoCoin}}</em>
-                    <i class="iconfont checkbox icon-cb-checked"></i>
+                    <!-- <em>- ¥ {{useYohoCoin}}</em> -->
+                    <i class="iconfont checkbox icon-cb-radio"></i>
                 </span>
                 {{else}}
                 <span class="coin-check">
-                    <em style="display: none;">- ¥ {{useYohoCoin}}</em>
-                    <i class="iconfont checkbox icon-checkbox"></i>
+                    <!-- <em style="display: none;">- ¥ {{useYohoCoin}}</em> -->
+                    <i class="iconfont checkbox icon-radio"></i>
                 </span>
                 {{/if}}
                 {{^}}
@@ -93,7 +128,7 @@
             {{#if invoice}}
             <li class="invoice {{#if needInvoice}}focus{{/if}}">
                 <span class="title">发票</span>
-                <span class="iconfont checkbox {{#if needInvoice}}icon-cb-checked{{else}}icon-checkbox{{/if}}"></span>
+                <span class="iconfont checkbox {{#if needInvoice}}icon-cb-radio{{else}}icon-radio{{/if}}"></span>
                 <form id="invoice">
                     <input type="text" name="invoice-title" value="{{invoiceText}}" maxlength="30" placeholder="发票抬头">
                     <label>
@@ -113,50 +148,24 @@
             <input type="text" name="msg" value="{{msg}}" maxlength="40" placeholder="留言">
         </form>
     </section>
-
-    <section class="price-cal block">
+    <section  class="price-cal block">
         <ul class="total">
             {{#cartPayData}}
             <li>
-                <span>{{promotion}}</span>
-                &nbsp;&nbsp;{{promotion_amount}}
+                <p>{{promotion}}</p>
+                <span>{{promotion_amount}}</span>
             </li>
             {{/cartPayData}}
-            <li class="cost">
-                应付金额： <em>¥{{price}}</em>
-            </li>
         </ul>
+        <div class="price-cost">
+            实付金额
+            <span>¥{{price}}</span>
+        </div>
     </section>
-
-    <ul class="pay-mode">
-        {{# paymentWay}}
-        {{#if isSupport}}
-        <li class="{{#if recommend}}default{{/if}}" data-pay-type="{{paymentType}}" data-pay-id="{{id}}">
-            <span class="iconfont">
-                {{#if recommend}}
-                &#xe62f;
-                {{else}}
-                &#xe62e;
-                {{/if}}
-            </span>
-            {{name}}
-        </li>
-        {{/if}}
-        {{/ paymentWay}}
-    </ul>
+    <div class="bill">
+        您需要支付：<span>¥{{price}}</span>
+        <a href="#">提交订单</a>
+    </div>
     {{/ orderEnsure}}
 </div>
-<script id="tmpl-price" type="text/tmpl">
-    <ul class="total">
-    \{{#cartPayData}}
-    <li>
-    <span>\{{promotion}}</span>
-    &nbsp;&nbsp;\{{promotion_amount}}
-    </li>
-    \{{/cartPayData}}
-    <li class="cost">
-    应付金额： <em>¥\{{price}}</em>
-    </li>
-    </ul>
-</script>
-{{> layout/footer}}
+{{> layout/footer}}