订单结算页面布局调整，订单页和详情页增加收起功能

pages/mobile/center/user/pay/_orderId.vue

@@ -44,7 +44,7 @@
                   </div>
                 </div>
               </div>
-              <div class="single-count text-ellipse"><span class="pay-price-title inline-block">小计：</span><span class="ol-price"><span>{{goods.currencyName | currencyFilter}}</span>{{goods.goods.currentPrice | priceFilter}}</span></div>
+              <div class="single-count text-ellipse"><span class="pay-price-title inline-block">小&nbsp;&nbsp;&nbsp;计：</span><span class="ol-price"><span>{{goods.currencyName | currencyFilter}}</span>{{goods.goods.currentPrice | priceFilter}}</span></div>
             </li>
           </ul>
           <div class="show-more-psgoods" v-if="item.goods.length > 3" @click="item.$expand = !item.$expand">
@@ -90,19 +90,18 @@
         </div>-->
         <div class="ps-operate-line ps-fare">
           <div class="text-ellipse">
-            <span class="pay-price-title inline-block">运费：</span><span class="ol-price"><span>{{payData.currency | currencyFilter}}</span>{{item.fare ? item.fare.fare : 0}}</span>
+            <span class="pay-price-title inline-block">运&nbsp;&nbsp;&nbsp;费：</span><span class="ol-price"><span>{{payData.currency | currencyFilter}}</span>{{item.fare ? item.fare.fare : 0}}</span>
           </div>
           <div class="text-ellipse">
-             <span class="pay-price-title inline-block">手续费：</span><span class="ol-price"><span>{{payData.currency | currencyFilter}}</span>0</span>
+             <span class="pay-price-title inline-block">手续费：</span>
+             <span class="ol-price"><span>{{payData.currency | currencyFilter}}</span>0<span class="inline-block tag" @click="showRemindStr = true">减免</span>
+             <i class="fa fa-exclamation-circle"></i></span>
             <!--（<span class="ol-price fare"><span>{{payData.currency | currencyFilter}}</span>{{getPoundage(item)}}</span>）-->
-            <span class="inline-block tag" @click="showRemindStr = true">减免</span>
-            <i class="fa fa-exclamation-circle"></i>
           </div>
         </div>
         <div class="ps-operate-line ps-price">
-          <span class="pay-price-title inline-block">合计：</span>
-          <span class="ol-price"><span>{{payData.currency | currencyFilter}}</span>
-          {{(item.goodsFarePrice || 0) | priceFilter}}</span>
+          <span class="pay-price-title inline-block">合&nbsp;&nbsp;&nbsp;计：</span>
+          <span class="ol-price"><span>{{payData.currency | currencyFilter}}</span>{{(item.goodsFarePrice || 0) | priceFilter}}</span>
         </div>
       </li>
     </ul>
@@ -1037,6 +1036,7 @@
                 text-align: right;
                 padding: 0 .21rem 0 .25rem;
                 .ol-price {
+                  width: 2.1rem;
                   font-size: .26rem;
                 }
               }
@@ -1057,7 +1057,7 @@
       }
     }
     .pay-price-title {
-      float: left;
+      /*float: left;*/
       font-size: .3rem;
     }
     .ps-operate-line {
@@ -1119,9 +1119,12 @@
       }
       &.ps-price {
         text-align: right;
-        padding-right: .31rem;
+        /*padding-right: .31rem;*/
         .inline-block {
+          display: inline-block;
+          width: 1.1rem;
           font-size: .26rem;
+          text-align: right;
         }
       }
       &.ps-fare {
@@ -1131,13 +1134,19 @@
           text-align: right;
           color: #333;
           .ol-price {
+            display: inline-block;
+            width: 2.3rem;
+            text-align: left;
             font-size: .26rem;
             span {
               font-size: .26rem;
             }
           }
           .pay-price-title {
-            font-size: .26rem;
+            display: inline-block;
+            width: 1.1rem;
+            font-size: .24rem;
+            text-align: right;
           }
           .fare {
             text-decoration: line-through;
@@ -1265,10 +1274,13 @@
       }
     }
     .ol-price {
+      display: inline-block;
+      width: 2.25rem;
       color: #f43938 !important;
       font-size: .32rem;
+      text-align: left;
       span {
-        font-size: .24rem;
+        font-size: .26rem;
       }
     }
     .buy-wrap {
@@ -1287,6 +1299,7 @@
         }
         .price {
           max-width: 3.6rem;
+          width: auto;
           vertical-align: top;
           span {
             margin-right: .08rem;

pages/mobile/order/details.vue

@@ -110,7 +110,8 @@
           </div>
         </li>
       </ul>
-      <div class="lookMorePro" @click="showItem = orderList.purchaseDetails.length" v-if="showItem === 3 && orderList.purchaseDetails && orderList.purchaseDetails.length > 3">查看剩余产品<img src="/images/mobile/user/icon-right.png"/></div>
+      <div class="lookMorePro" @click="showItem = orderList.purchaseDetails.length" v-if="showItem === 3 && orderList.purchaseDetails && orderList.purchaseDetails.length > 3">查看更多<i class="iconfont icon-arrow-down"></i></div>
+      <div class="lookMorePro" @click="showItem = 3" v-if="showItem === orderList.purchaseDetails.length && orderList.purchaseDetails && orderList.purchaseDetails.length > 3">收起<i class="iconfont icon-arrow-up"></i></div>
       <!--<div class="clearfix top-w-wrap">-->
         <!--<div class="name pull-left">订单备注</div>-->
         <!--<div class="detailsinfo pull-left">{{orderList.purchaseRemark || '无'}}</div>-->

pages/mobile/order/index.vue

@@ -107,7 +107,8 @@
             </div>
           </div>
         </div>
-        <div class="lookMorePro" @click="item.showItem = item.purchaseDetails.length" v-if="item.showItem === 3 && item.purchaseDetails && item.purchaseDetails.length > 3">查看更多<img src="/images/mobile/user/icon-right.png"/></div>
+        <div class="lookMorePro" @click="item.showItem = item.purchaseDetails.length" v-if="item.showItem === 3 && item.purchaseDetails && item.purchaseDetails.length > 3">查看更多<i class="iconfont icon-arrow-down"></i></div>
+        <div class="lookMorePro" @click="item.showItem = 3" v-if="item.showItem === item.purchaseDetails.length && item.purchaseDetails && item.purchaseDetails.length > 3">收起<i class="iconfont icon-arrow-up"></i></div>
         <div class="list-all-info clearfix">
           <!--共<span>{{item.batchQty}}</span>件商品&nbsp;&nbsp;-->
           <div>合计：<span class="pri"><a v-if="item.currency === 'RMB'" class="red">¥</a><a v-else class="red">$</a>{{item.ensurePrice }}</span>