订单页面bug修改

uedxwg
Commit 73485b3ae48bf13aec5334df479722064575b4d5 1 parent 66f11708
Showing 6 changed files with 93 additions and 25 deletions
static/js/cart/order-ensure.js
static/js/cart/select-address.js
static/js/me/address.js
static/js/me/order-detail.js
static/sass/cart/_order-ensure.scss
template/m.yohobuy.com/actions/cart/index/order-ensure.phtml
--- a/static/js/cart/order-ensure.js
View file @73485b3
+++ b/static/js/cart/order-ensure.js
View file @73485b3
@@ -92,22 +92,22 @@ function dispacthTapEvt(e) {
 $('.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');
     }
 });
@@ -251,7 +251,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 {
@@ -266,7 +266,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();
 });
@@ -306,16 +306,17 @@ $('.dispatch').on('touchend', 'h3', function() {
     }
 });
-$subBlock.on('touchstart', 'i', function() {
+$subBlock.on('touchstart', 'li', function() {
+    console.log($(this).hasClass('icon-radio'));
     $.each($(this).parents('ul').find('i'), function() {
-        $(this).removeClass('icon-cb-radio').addClass('icon-radio');
+        $(this).parents('ul').find('i').removeClass('icon-cb-radio').addClass('icon-radio');
     });
-    dispatchInfo = $(this).siblings('span').html();
+    dispatchInfo = $(this).find('span').html();
     $(this).parents('.sub-block').find('h3 span').html(dispatchInfo);
-    if ($(this).hasClass('icon-cb-radio')) {
-        $(this).addClass('icon-radio');
-    } else if ($(this).hasClass('icon-radio')) {
-        $(this).addClass('icon-cb-radio');
+    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');
     }
 });
@@ -332,3 +333,9 @@ function phoneHidden(phone) {
 $('.info-phone').html(phoneHidden($('.info-phone').html()));
+$subBlock.each(function() {
+    if ($('ul li', this).length === 1) {
+        $('h3 i', this).hide();
+    }
+});
+
--- a/static/js/cart/select-address.js
View file @73485b3
+++ b/static/js/cart/select-address.js
View file @73485b3
@@ -46,5 +46,5 @@ function phoneHidden(phone) {
 }
 $('.tel').each(function(index) {
-    $('.tel').eq(index).html(phoneHidden($('.tel').html()));
+    $('.tel').eq(index).html(phoneHidden($('.tel').eq(index).html()));
 });
--- a/static/js/me/address.js
View file @73485b3
+++ b/static/js/me/address.js
View file @73485b3
@@ -79,3 +79,11 @@ $action.on('touchstart', 'a,span', function() {
 }).on('touchend touchcancel', 'a,span', function() {
     $(this).css('background', 'transparent');
 });
+
+function phoneHidden(phone) {
+    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+}
+
+$('.tel').each(function(index) {
+    $('.tel').eq(index).html(phoneHidden($('.tel').eq(index).html()));
+});
--- a/static/js/me/order-detail.js
View file @73485b3
+++ b/static/js/me/order-detail.js
View file @73485b3
@@ -87,3 +87,10 @@ optHammer.on('tap', function(e) {
         });
     }
 });
+
+function phoneHidden(phone) {
+    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+}
+
+$('.name-phone span').html(phoneHidden($('.name-phone span').html()));
+
--- a/static/sass/cart/_order-ensure.scss
View file @73485b3
+++ b/static/sass/cart/_order-ensure.scss
View file @73485b3
@@ -26,6 +26,28 @@
     .lifeStyle{
         background:image-url('shopping-cart/lifeStyle.png') bottom left repeat-x #fff;
     }
+    .not-address{
+        position: relative;
+        i{
+            position: absolute;
+            left: 20rem / $pxConvertRem;
+            top: 28rem / $pxConvertRem;
+            font-size: 32rem / $pxConvertRem;
+        }
+        .choose{
+            display: block;
+            color: #000;
+            position: static;
+            padding-left:40rem / $pxConvertRem;
+            font-size: 32rem / $pxConvertRem;
+            span{ 
+                position: absolute;
+                right: 20rem / $pxConvertRem;
+                top: 28rem / $pxConvertRem;
+                font-size: 32rem / $pxConvertRem;
+            }
+        }
+    }
     .address{
         display: block;
         position: relative;
@@ -45,13 +67,17 @@
             i{
                 position: absolute;
                 left: 0;
-                top: 20%;
+                top: 16rem / $pxConvertRem;
                 font-size: 48rem / $pxConvertRem;
             }
         }
         .info-name{
             width: 48%;
+            height: 40rem / $pxConvertRem;
             font-size: 32rem / $pxConvertRem;
+            overflow: hidden; 
+            text-overflow:ellipsis;
+            white-space:nowrap;
         }
         .info-phone{
             width: 48%;
@@ -63,7 +89,7 @@
             font-size: 24rem / $pxConvertRem;
             line-height: 38rem / $pxConvertRem;
         }
-        > a{
+        .rest{
             position: absolute;
             right: 32rem / $pxConvertRem;
             bottom:20rem / $pxConvertRem;
@@ -92,16 +118,29 @@
                 border-bottom:1px solid #e0e0e0;
                 p{
                     display: inline-block;
+                    height: 80rem / $pxConvertRem;
+                    overflow: hidden; 
+                    text-overflow:ellipsis;
+                    white-space:nowrap;
                 }
                 i{
                     font-size: 36rem / $pxConvertRem;
                     margin-left: 8rem / $pxConvertRem;
+                    height: 80rem / $pxConvertRem;
+                    display: inline-block;
+                    overflow: hidden; 
+                    text-overflow:ellipsis;
+                    white-space:nowrap;
                 }
                 span{
                     display: inline-block;
                     width: 65%;
+                    height: 80rem / $pxConvertRem;
                     text-align: right;
                     font-size: 28rem / $pxConvertRem;
+                    overflow: hidden; 
+                    text-overflow:ellipsis;
+                    white-space:nowrap;
                 }
             }
             ul{
--- a/template/m.yohobuy.com/actions/cart/index/order-ensure.phtml
View file @73485b3
+++ b/template/m.yohobuy.com/actions/cart/index/order-ensure.phtml
View file @73485b3
 {{> layout/header}}
 <div class="order-ensure-page yoho-page">
     {{# orderEnsure}}
+    {{#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>
-            <span class="info-address">{{addressInfo}}</span>
+            <a href="/cart/index/selectAddress"><span class="info-address">{{addressInfo}}</span></a>
             <i class="iconfont">&#xe637;</i>
         </div>
-        <a href="/cart/index/selectAddress">其他地址<span class="iconfont">&#xe614;</span></a>
+        <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 payment-type">
             <h3>
@@ -18,10 +25,10 @@
                 <i class="iconfont">&#xe616;</i>
             </h3>
             <ul>
-                {{#each dispatchMode}}
+                {{#each paymentWay}}
                 <li {{#if isSelected}}class="chosed"{{/if}}>
                     <span>{{name}}</span>
-                    <i class="right iconfont {{#if isSelected}}icon-cb-radio{{else}}icon-radio{{/if}}"  data-id="{{id}}"></i>
+                    <i class="right iconfont {{#if recommend}}icon-cb-radio{{else}}icon-radio{{/if}}"  data-id="{{paymentType}}"></i>
                 </li>
                 {{/each}}
             </ul>
@@ -146,13 +153,13 @@
             {{/cartPayData}}
         </ul>
         <div class="price-cost">
-            实付金额：
+            实付金额
             <span>¥{{price}}</span>
         </div>
     </section>
     <div class="bill">
-        您需要支付<span>¥{{price}}</span>
-        <a href="#">结算</a>
+        您需要支付：<span>¥{{price}}</span>
+        <a href="#">提交</a>
     </div>
     {{/ orderEnsure}}
 </div>