订单确认

@@ -17,6 +17,20 @@
         <span>{{ info.refundAmount }}</span>
       </p>
     </div>
+    <div v-if="isPlatformFee" class="price-info">
+      <p class="price-item">
+        <span>{{ info.orderPriceDesc }}</span>
+        <span>{{ info.orderPrice }}</span>
+      </p>
+      <p class="price-item">
+        <span>{{ info.penaltyDesc }}&nbsp;&nbsp;({{ info.penaltyRate }})</span>
+        <span>{{ info.penaltyAmount }}</span>
+      </p>
+      <p class="price-item">
+        <span>{{ info.refundDesc }}</span>
+        <span>{{ info.refundAmount }}</span>
+      </p>
+    </div>
   </div>
 </template>
 
@@ -25,7 +39,19 @@ export default {
   props: {
     info: {
       type: Object,
-      default: {}
+      default: function() {
+        return {};
+      }
+    },
+    isPlatformFee: {
+      type: Boolean,
+      default: false
+    },
+    platformFeeInfo: {
+      type: Object,
+      default: function() {
+        return {};
+      }
     }
   },
   computed: {
@@ -35,7 +61,7 @@ export default {
         const regexp = /#\*(.*?)\*#/;
         return confirmDesc.split(regexp);
       } else {
-        return [desc];
+        return [confirmDesc];
       }
     }
   }

+<template>
+  <div class="platform-fee-info-wrapper">
+    <div class="price-info">
+      <p class="price-item">
+        <span>{{ platformFeeInfo.orderPriceDesc }}</span>
+        <span>{{ platformFeeInfo.orderPrice }}</span>
+      </p>
+      <p class="price-item">
+        <span
+          >{{ platformFeeInfo.penaltyDesc }}&nbsp;&nbsp;({{
+            platformFeeInfo.penaltyRate
+          }})</span
+        >
+        <span>{{ platformFeeInfo.penaltyAmount }}</span>
+      </p>
+      <p class="price-item">
+        <span>{{ platformFeeInfo.refundDesc }}</span>
+        <span>{{ platformFeeInfo.refundAmount }}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    platformFeeInfo: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.platform-fee-info-wrapper {
+  display: flex;
+  padding: 0 40px;
+  color: #000;
+
+  .confrim-info {
+    font-size: 28px;
+    text-align: center;
+    flex: 1;
+
+    span {
+      color: #d0021b;
+    }
+
+    & > :first-child,
+    & > :last-child {
+      color: #000;
+      padding-left: 10px;
+    }
+
+    // p {
+    //   display: inline-block;
+    //   text-align: left;
+    //   max-width: 100%;
+    // }
+  }
+
+  .price-info {
+    flex: 1;
+
+    .price-item {
+      display: flex;
+      justify-content: space-between;
+
+      .penalty {
+        color: #d0021b;
+      }
+    }
+  }
+}
+</style>
+

 <template>
-  <router-link :to="toLinkParam">
+  <router-link :to="toLinkParam" class="detial-item-wrapper">
     <div class="order-item-wrapper">
       <div class="item-img">
         <image-format
@@ -47,6 +47,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.detial-item-wrapper {
+  display: block;
+}
+
 .order-item-wrapper {
   display: flex;
 

@@ -27,7 +27,9 @@
         <!-- 价格信息 -->
         <div class="price-info item-wrapper">
           <p>
-            <span class="label">平台费用:<i class="tip"></i></span>
+            <span class="label platform-fee"
+              >平台费用:<i @click="onPlatformFee" class="tip"></i
+            ></span>
             <span>{{ platformFee.amount }}</span>
           </p>
           <p class="delivery-fee">
@@ -107,6 +109,7 @@ import DetailFooter from "./components//detail-footer";
 import OrderActions from "../components/order-actions";
 
 import orderActionMixin from "./mixins/order-action";
+import PlatformFeeInfo from "../components/platform-fee-info";
 
 const STORE_PATH = "order/orderDetail";
 
@@ -151,7 +154,26 @@ export default {
     ])
   },
   methods: {
-    ...mapActions(["fetchOrderDetail"])
+    ...mapActions(["fetchOrderDetail"]),
+    onPlatformFee() {
+      this.$createDialog(
+        {
+          type: "alert",
+          title: "平台费用",
+          confirmBtn: { text: "我知道了" }
+        },
+        createElement => {
+          return [
+            createElement(PlatformFeeInfo, {
+              props: {
+                platformFeeInfo: { orderPriceDesc: "1341234123" }
+              },
+              slot: "content"
+            })
+          ];
+        }
+      ).show();
+    }
   }
 };
 </script>
@@ -232,6 +254,12 @@ export default {
   .price-info {
     font-size: 28px;
 
+    .platform-fee {
+      line-height: 1;
+      display: flex;
+      align-items: center;
+    }
+
     .tip {
       width: 60px;
       height: 30px;

 {
   "name": "xianyu-ufo-app-web",
-  "version": "0.0.2-beta-12",
+  "version": "0.0.2-beta-13",
   "private": true,
   "description": "Xianyu Project With Express",
   "repository": {