feat[litemall-wx]: 优化订单详情页面

litemall-wx/pages/ucenter/orderDetail/orderDetail.wxml

@@ -1,12 +1,18 @@
 <view class="container">
   <view class="order-info">
-    <view class="item">下单时间：{{orderInfo.addTime}}</view>
-    <view class="item">订单编号：{{orderInfo.orderSn}}</view>
-    <view class="item">订单留言：{{orderInfo.message}}</view>
+    <view class="item">
+      <view class="label">下单时间：</view>
+      <view class="txt">{{orderInfo.addTime}}</view>
+    </view>
+    <view class="item">
+      <view class="label">订单编号：</view>
+      <view class="txt">{{orderInfo.orderSn}}</view>
+    </view>
+    <view class="item">
+      <view class="label">订单留言：</view>
+      <view class="txt">{{orderInfo.message}}</view>
+    </view>
     <view class="item-c">
-      <view class="l">实付：
-        <text class="cost">￥{{orderInfo.actualPrice}}</text>
-      </view>
       <view class="r">
         <view class="btn active" bindtap="cancelOrder" wx:if="{{handleOption.cancel}}">取消订单</view>
         <view class="btn active" bindtap="payOrder" wx:if="{{handleOption.pay}}">去付款</view>
@@ -56,20 +62,20 @@
       <view class="total">
         <view class="t">
           <text class="label">商品合计：</text>
-          <text class="txt">￥{{orderInfo.goodsPrice}}</text>
+          <text class="txt">￥{{orderInfo.goodsPrice}}元</text>
         </view>
         <view class="t">
-          <text class="label">运费：</text>
-          <text class="txt">￥{{orderInfo.freightPrice}}</text>
+          <text class="label">订单运费：</text>
+          <text class="txt">￥{{orderInfo.freightPrice}}元</text>
         </view>
         <view class="t">
-          <text class="label">优惠：</text>
-          <text class="txt">￥-{{orderInfo.couponPrice}}</text>
+          <text class="label">订单优惠：</text>
+          <text class="txt">-￥{{orderInfo.couponPrice}}元</text>
         </view>
-      </view>
-      <view class="pay-fee">
-        <text class="label">实付：</text>
-        <text class="txt">￥{{orderInfo.actualPrice}}</text>
+        <view class="t">
+          <text class="label">订单实付：</text>
+          <text class="txt">￥{{orderInfo.actualPrice}}元</text>
+        </view>        
       </view>
     </view>
   </view>

litemall-wx/pages/ucenter/orderDetail/orderDetail.wxss

@@ -11,13 +11,13 @@ page {
   overflow: hidden;
 }
 
-.item {
-  padding-left: 31.25rpx;
-  height: 42.5rpx;
-  padding-bottom: 12.5rpx;
-  line-height: 30rpx;
-  font-size: 30rpx;
-  color: #666;
+.order-info .item {
+  height: 80rpx;
+  line-height: 80rpx;
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid #f4f4f4;
+  padding: 0 31.25rpx;
 }
 
 .item-c {
@@ -177,73 +177,34 @@ page {
 
 .order-bottom {
   margin-top: 20rpx;
-  padding-left: 31.25rpx;
+  padding: 0 31.25rpx;
   height: auto;
   overflow: hidden;
   background: #fff;
 }
 
-.order-bottom .address {
-  height: 128rpx;
-  padding-top: 25rpx;
-  border-top: 1px solid #f4f4f4;
-  border-bottom: 1px solid #f4f4f4;
-}
-
 .order-bottom .address .t {
-  height: 35rpx;
-  line-height: 35rpx;
-  margin-bottom: 7.5rpx;
-}
-
-.order-bottom .address .name {
-  display: inline-block;
-  height: 35rpx;
-  width: 140rpx;
-  line-height: 35rpx;
-  font-size: 30rpx;
-}
-
-.order-bottom .address .mobile {
-  display: inline-block;
-  height: 35rpx;
-  line-height: 35rpx;
-  font-size: 30rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid #f4f4f4;
 }
 
 .order-bottom .address .b {
-  height: 35rpx;
-  line-height: 35rpx;
+  height: 60rpx;
+  line-height: 60rpx;
   font-size: 30rpx;
-}
-
-.order-bottom .total {
-  height: 130rpx;
-  padding-top: 20rpx;
   border-bottom: 1px solid #f4f4f4;
+  text-align: right;
 }
 
 .order-bottom .total .t {
-  height: 30rpx;
-  line-height: 30rpx;
-  margin-bottom: 7.5rpx;
+  height: 80rpx;
+  line-height: 80rpx;
   display: flex;
-}
-
-.order-bottom .total .label {
-  width: 150rpx;
-  display: inline-block;
-  height: 35rpx;
-  line-height: 35rpx;
-  font-size: 30rpx;
-}
-
-.order-bottom .total .txt {
-  flex: 1;
-  display: inline-block;
-  height: 35rpx;
-  line-height: 35rpx;
-  font-size: 30rpx;
+  justify-content: space-between;
+  border-top: 1px solid #f4f4f4;
 }
 
 .order-bottom .pay-fee {
@@ -317,4 +278,4 @@ page {
 
 .order-express .acceptStation {
   font-size: 26rpx;
-}
+}