订单详情

+<template>
+  <div class="address-wrapper">
+    <i class="address-icon"></i>
+    <div>
+      <p class="consignee">{{ userAddress.consignee }}</p>
+      <p class="area">{{ userAddress.area }}</p>
+      <p class="mobile">{{ userAddress.mobile }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from "vuex";
+const { mapGetters } = createNamespacedHelpers("order/orderDetail");
+
+export default {
+  computed: {
+    ...mapGetters(["userAddress"])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.address-wrapper {
+  display: flex;
+  align-items: center;
+
+  .consignee {
+    font-size: 32px;
+    font-weight: bold;
+  }
+
+  .area {
+    color: #999;
+    margin: 12px 0;
+  }
+
+  .mobile {
+    font: 28px;
+  }
+
+  .address-icon {
+    width: 48px;
+    height: 48px;
+    display: block;
+    background-size: contain;
+    margin-right: 40px;
+    background-image: url("~statics/image/order/addr-icon@3x.png");
+  }
+}
+</style>

-<template>
-  <div class="logistics-wrapper">
-    <p>{{ userAddress.consignee }}</p>
-    <p>{{ userAddress.area }}</p>
-    <p>{{ userAddress.mobile }}</p>
-  </div>
-</template>
-
-<script>
-import { createNamespacedHelpers } from "vuex";
-const { mapGetters } = createNamespacedHelpers("order/orderDetail");
-
-export default {
-  computed: {
-    ...mapGetters(["userAddress"])
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

@@ -7,43 +7,47 @@
         <p class="status-desc">{{ statusDetail.detailDesc }}</p>
         <p class="status-desc">{{ statusDetail.detailDesc }}</p>
       </div>
       </div>
       <!-- 物流信息 -->
       <!-- 物流信息 -->
-      <div class="logistics item-wrapper">
-        <div class="detail">
-          <p>{{ lastExpressInfo.acceptRemark }}</p>
-          <p>{{ lastExpressInfo.createTimeStr }}</p>
+      <div class="logistics-info item-wrapper">
+        <div class="content">
+          <i class="logistics-icon"></i>
+          <div class="info">
+            <p>{{ lastExpressInfo.acceptRemark }}</p>
+            <p>{{ lastExpressInfo.createTimeStr }}</p>
+          </div>
         </div>
         </div>
+        <i class="right-icon"></i>
       </div>
       </div>
       <!-- 地址信息 -->
       <!-- 地址信息 -->
-      <logistic-info class="item-wrapper" />
+      <address-info class="item-wrapper" />
       <!-- 商品信息 -->
       <!-- 商品信息 -->
       <order-item-info class="item-wrapper" />
       <order-item-info class="item-wrapper" />
       <!-- 价格信息 -->
       <!-- 价格信息 -->
       <div class="price-info item-wrapper">
       <div class="price-info item-wrapper">
         <p>
         <p>
-          <span>商品金额:</span>
-          <span>{{ priceInfo.goodPrice }}</span>
+          <span class="label">商品金额:</span>
+          <span>¥{{ priceInfo.goodPrice }}</span>
         </p>
         </p>
-        <p>
-          <span>运费:</span>
-          <span>{{ priceInfo.feePrice }}</span>
+        <p class="delivery-fee">
+          <span class="label">运费:</span>
+          <span>¥{{ priceInfo.feePrice }}</span>
         </p>
         </p>
         <p>
         <p>
-          <span>实际金额:</span>
-          <span>{{ priceInfo.realPayPrice }}</span>
+          <span class="label">实际金额:</span>
+          <span class="pay-price">¥{{ priceInfo.realPayPrice }}</span>
         </p>
         </p>
       </div>
       </div>
       <!-- 交易信息 -->
       <!-- 交易信息 -->
       <div class="trade-info item-wrapper">
       <div class="trade-info item-wrapper">
         <p>
         <p>
-          <span>创建时间:</span>
+          <span class="label">创建时间:</span>
           <span>{{ orderDetail.createTime }}</span>
           <span>{{ orderDetail.createTime }}</span>
         </p>
         </p>
         <p>
         <p>
-          <span>订单编号:</span>
+          <span class="label">订单编号:</span>
           <span>{{ orderDetail.orderCode }}</span>
           <span>{{ orderDetail.orderCode }}</span>
         </p>
         </p>
         <p>
         <p>
-          <span>支付方式:</span>
+          <span class="label">支付方式:</span>
           <span>{{ orderDetail.paymentStr }}</span>
           <span>{{ orderDetail.paymentStr }}</span>
         </p>
         </p>
       </div>
       </div>
@@ -59,7 +63,7 @@
 
 
 <script>
 <script>
 import { createNamespacedHelpers } from "vuex";
 import { createNamespacedHelpers } from "vuex";
-import LogisticInfo from "./components/logistics-info";
+import AddressInfo from "./components/address-info";
 import OrderItemInfo from "./components/order-detail-item";
 import OrderItemInfo from "./components/order-detail-item";
 import { Button } from "cube-ui";
 import { Button } from "cube-ui";
 
 
@@ -68,12 +72,12 @@ const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
 );
 );
 export default {
 export default {
   components: {
   components: {
-    LogisticInfo,
+    AddressInfo,
     OrderItemInfo,
     OrderItemInfo,
     Button
     Button
   },
   },
   asyncData({ store, router }) {
   asyncData({ store, router }) {
-    store.dispatch("order/orderDetail/fetchOrderDetail", router.params);
+    // store.dispatch("order/orderDetail/fetchOrderDetail", router.params);
   },
   },
   mounted() {
   mounted() {
     this.fetchOrderDetail(this.$route.params);
     this.fetchOrderDetail(this.$route.params);
@@ -101,6 +105,7 @@ export default {
   height: 100vh;
   height: 100vh;
   overflow-x: hidden;
   overflow-x: hidden;
   overflow-y: auto;
   overflow-y: auto;
+  font-size: 24px;
 
 
   .item-wrapper {
   .item-wrapper {
     border-top: 1px solid #eee;
     border-top: 1px solid #eee;
@@ -117,15 +122,79 @@ export default {
     }
     }
 
 
     .status-desc {
     .status-desc {
-      font-size: 24px;
       color: #999;
       color: #999;
       letter-spacing: 0;
       letter-spacing: 0;
       margin-top: 30px;
       margin-top: 30px;
     }
     }
   }
   }
 
 
-  .logistics {
+  .logistics-info {
     margin-top: 40px;
     margin-top: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .content {
+      display: flex;
+      align-items: center;
+
+      .info :last-child {
+        color: #999;
+        margin-top: 12px;
+      }
+    }
+
+    .logistics-icon,
+    .right-icon {
+      width: 48px;
+      height: 48px;
+      display: block;
+      background-size: contain;
+    }
+
+    .logistics-icon {
+      margin-right: 40px;
+      background-image: url("~statics/image/order/logistics-icon@3x.png");
+    }
+
+    .right-icon {
+      background-image: url("~statics/image/order/right-arrow-icon@3x.png");
+    }
+  }
+
+  .price-info {
+    font-size: 28px;
+
+    & > p {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    & > p:first-child {
+      color: #999;
+    }
+
+    .delivery-fee {
+      margin: 12px 0;
+      color: #999;
+    }
+
+    .pay-price {
+      color: #d0021b;
+    }
+  }
+
+  .trade-info {
+    font-size: 28px;
+
+    & > :first-child + p {
+      margin: 20px 0;
+    }
+  }
+
+  .label {
+    font-size: 28px;
+    margin-right: 12px;
   }
   }
 
 
   .actions {
   .actions {

@@ -27,7 +27,7 @@ export default function() {
       async fetchOrderDetail({ commit }, { owner, code } = {}) {
       async fetchOrderDetail({ commit }, { owner, code } = {}) {
         const res = await this.$api.get('/api/order/detail', {
         const res = await this.$api.get('/api/order/detail', {
           tabType: owner,
           tabType: owner,
-          orderCode: code,
+          orderCode: +code,
 
 
           // Todo 删除
           // Todo 删除
           uid: 600043484,
           uid: 600043484,