订单列表

 import Vue from 'vue';
-import {get} from 'lodash';
+import { get } from 'lodash';
 import App from './app.vue';
-import {createRouter} from './router';
-import {createStore} from './store';
+import { createRouter } from './router';
+import { createStore } from './store';
 import 'filters';
 import 'directives';
 import titleMixin from './mixins/title';
@@ -12,7 +12,7 @@ import reportError from 'report-error';
 import ReportApp from './common/report-app';
 
 Vue.use(lazyload, {
-  preLoad: 2
+  preLoad: 2,
 });
 Vue.use(pluginCore);
 Vue.mixin(titleMixin);
@@ -21,7 +21,7 @@ export function createApp(context) {
   const router = createRouter();
   const store = createStore(context);
 
-  const reportApp = new ReportApp(store.$context.env);
+  const reportApp = new ReportApp('');
 
   const app = new Vue({
     router,
@@ -59,11 +59,11 @@ export function createApp(context) {
         reportApp.report(type, pt || 'BUSINESS', pn, params, get(user, 'uid'));
       },
       reportAppStart() {
-        this.reportApp('', 'BUSINESS_PLAN_A_ENTER', {locfun: 'mounted'});
-      }
+        this.reportApp('', 'BUSINESS_PLAN_A_ENTER', { locfun: 'mounted' });
+      },
     },
-    render: h => h(App)
+    render: h => h(App),
   });
 
-  return {app, router, store};
+  return { app, router, store };
 }

@@ -173,7 +173,6 @@ export default {
     background: #fff;
     border: 1px solid #ccc;
     line-height: 1.4;
-    width: 224px;
     margin-right: 20px;
     white-space: nowrap;
     border-radius: 40px;

@@ -48,16 +48,14 @@
           <span class="label">订单编号:</span>
           <span>{{ orderDetail.orderCode }}</span>
         </p>
-        <p>
+        <p v-if="orderDetail.paymentStr">
           <span class="label">支付方式:</span>
           <span>{{ orderDetail.paymentStr }}</span>
         </p>
       </div>
     </div>
     <!-- 操作 -->
-    <div v-if="actionList.length" class="actions">
-      <order-actions :order="orderDetail" />
-    </div>
+    <detail-footer />
   </div>
 </template>
 
@@ -70,6 +68,7 @@ import OrderActions from "../components/order-actions";
 import AddressInfo from "./components/address-info";
 import OrderItemInfo from "./components/order-detail-item";
 import DetailHeader from "./components/header";
+import DetailFooter from "./components//detail-footer";
 
 const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
   "order/orderDetail"
@@ -80,7 +79,8 @@ export default {
     OrderItemInfo,
     Button,
     OrderActions,
-    DetailHeader
+    DetailHeader,
+    DetailFooter
   },
   asyncData({ store, router }) {
     // store.dispatch("order/orderDetail/fetchOrderDetail", router.params);

 <template>
-  <div v-if="actionList.length" class="actions-wrapper">
-    <div class="action-tip-wrapper">
-      <div v-if="statusDetail.status === 0" class="earnest-price-tip">
-        <p>{{ orderDetail.earnestMoneyStr }}</p>
-        <p>{{ statusDetail.statuStr }}</p>
-      </div>
-    </div>
+  <div v-if="actionList.length" class="footer-wrapper">
+    <slot
+      name="tip"
+      :orderDetail="orderDetail"
+      :statusDetail="statusDetail"
+    ></slot>
     <order-actions class="detail-actions" :order="orderDetail" />
   </div>
 </template>
 
 <script>
+import { createNamespacedHelpers } from "vuex";
+
 const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
   "order/orderDetail"
 );
@@ -22,15 +23,17 @@ export default {
     OrderActions
   },
   computed: {
-    ...mapState(["orderDetail"])
+    ...mapState(["orderDetail"]),
+    ...mapGetters(["actionList", "statusDetail"])
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.actions-wrapper {
+.footer-wrapper {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: center;
   position: absolute;
   bottom: 0;
   left: 0;
@@ -43,6 +46,7 @@ export default {
 
   .detail-actions {
     margin-top: 0;
+    flex: 1;
   }
 }
 </style>
\ No newline at end of file

@@ -62,7 +62,14 @@
       </div>
     </div>
     <!-- 操作 -->
-    <detail-footer />
+    <detail-footer>
+      <template #tip="{orderDetail, statusDetail}">
+        <div v-if="statusDetail.status === 0">
+          <p class="earnest-price">{{ orderDetail.earnestMoneyStr }}</p>
+          <p>{{ statusDetail.statuStr }}</p>
+        </div>
+      </template>
+    </detail-footer>
   </div>
 </template>
 
@@ -94,12 +101,7 @@ export default {
   },
   computed: {
     ...mapState(["orderDetail"]),
-    ...mapGetters([
-      "lastExpressInfo",
-      "priceInfo",
-      "actionList",
-      "statusDetail"
-    ])
+    ...mapGetters(["lastExpressInfo", "priceInfo", "statusDetail"])
   },
   methods: {
     ...mapActions(["fetchOrderDetail"])
@@ -122,6 +124,11 @@ export default {
     padding: 40px 0;
   }
 
+  .earnest-price {
+    font-size: 28px;
+    color: #d0021b;
+  }
+
   .logistics-info {
     display: flex;
     align-items: center;