订单类表操作

+<template>
+  <div class="actions-wrapper">
+    <Button
+      v-for="action in actionList"
+      :key="action.code"
+      @click="() => onAction(action)"
+    >
+      {{ action.text }}
+    </Button>
+  </div>
+</template>
+
+<script>
+import { orderActionsMap } from "../../../../constants/order-constants";
+
+export default {
+  props: {
+    actionList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    onAction(action) {
+      if (action.name === orderActionsMap.DEL_ORDER.name) {
+        this.createDialog({
+          type: "confirm",
+          content: "确认删除订单？",
+          confirmBtn: { text: "确定" },
+          cancelBtn: { text: "取消" }
+        });
+      }
+    },
+    createDialog(options) {
+      const {
+        confirmBtn,
+        cancelBtn,
+        onConfirm,
+        onCancle,
+        content,
+        ...config
+      } = options;
+      this.$createDialog(config, createElement => {
+        return [
+          createElement(
+            "a",
+            {
+              class: {
+                "cube-dialog-btn border-top-1px action-confirm": true
+              },
+              slot: "btns",
+              on: {
+                click: () => {
+                  console.log("--------btn------");
+                }
+              }
+            },
+            confirmBtn.text
+          ),
+          createElement(
+            "a",
+            {
+              class: {
+                "cube-dialog-btn border-top-1px action-cancel": true
+              },
+              slot: "btns"
+            },
+            cancelBtn.text
+          ),
+          createElement(
+            "p",
+            {
+              class: {
+                "action-dialog-content": true
+              },
+              slot: "content"
+            },
+            content
+          )
+        ];
+      }).show();
+    },
+    onActionConfirm() {}
+  }
+};
+</script>
+
+<style lang="scss">
+.action-dialog-content {
+  text-align: center;
+  color: #000;
+}
+
+.action-confirm {
+  color: #d0021b;
+}
+
+.action-cancel {
+  color: #000;
+}
+</style>
+
+<style lang="scss" scoped>
+.actions-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 40px;
+
+  button {
+    font-size: 24px;
+    padding: 24px 64px 22px 64px;
+    color: #999;
+    letter-spacing: 0;
+    border-radius: 0;
+    background: #fff;
+    border: 1px solid #ccc;
+    line-height: 1.3;
+    width: 224px;
+    margin-right: 20px;
+    white-space: nowrap;
+  }
+
+  & :last-child {
+    background: #002b47;
+    color: #fff;
+    border: 1px solid #002b47;
+    margin-right: 0;
+  }
+}
+</style>
\ No newline at end of file

@@ -44,11 +44,13 @@ export default {
   .item-img {
     width: 180px;
     height: 180px;
-    display: inline-block;
-    text-align: center;
+    justify-content: center;
+    display: flex;
+    align-items: center;
 
     & > img {
-      height: 100%;
+      max-height: 100%;
+      max-width: 100%;
     }
   }
 

@@ -56,8 +56,9 @@ export default {
   .item-img {
     width: 180px;
     height: 180px;
-    display: inline-block;
-    text-align: center;
+    justify-content: center;
+    display: flex;
+    align-items: center;
 
     & > img {
       max-height: 100%;

@@ -10,17 +10,11 @@
       <ul class="list-wrapper">
         <li v-for="order in orderList" :key="order.orderCode">
           <order-list-item :order="order" />
-          <div class="actions">
-            <Button
-              v-for="action in order.buttons"
-              :key="action.code"
-              @click="onAction"
-            >
-              {{ action.text }}
-            </Button>
-          </div>
+          <!-- 订单操作 -->
+          <order-actions :actionList="order.buttons" />
         </li>
       </ul>
+      <Modal v-model="isShowModal" @on-sure="() => {}"></Modal>
     </scroll>
   </div>
 </template>
@@ -30,6 +24,8 @@ import { Button, Scroll } from "cube-ui";
 import { createNamespacedHelpers } from "vuex";
 import OrderListItem from "./components/order-list-item";
 import StatusNav from "./components/status-nav";
+import Modal from "../components/confirm/modal";
+import OrderActions from "../components/order-actions";
 
 const { mapActions, mapState } = createNamespacedHelpers("order/orderList");
 
@@ -38,10 +34,12 @@ export default {
     Button,
     Scroll,
     OrderListItem,
-    StatusNav
+    StatusNav,
+    Modal,
+    OrderActions
   },
   computed: {
-    ...mapState(["orderList", "pullUpLoad"]),
+    ...mapState(["orderList", "pullUpLoad", "isShowModal"]),
     options: function() {
       return {
         pullUpLoad: this.pullUpLoad
@@ -62,8 +60,7 @@ export default {
     ...mapActions(["fetchOrderList"]),
     fetchMore() {
       this.fetchOrderList(this.$route.params);
-    },
-    onAction() {}
+    }
   },
   watch: {
     $route() {
@@ -91,32 +88,6 @@ export default {
         border-bottom: 0;
       }
     }
-
-    .actions {
-      display: flex;
-      justify-content: flex-end;
-      margin-top: 40px;
-
-      button {
-        font-size: 24px;
-        padding: 24px 64px 22px 64px;
-        color: #999;
-        letter-spacing: 0;
-        border-radius: 0;
-        background: #fff;
-        border: 1px solid #ccc;
-        line-height: 1.3;
-        width: 224px;
-        margin-right: 20px;
-      }
-
-      & :last-child {
-        background: #002b47;
-        color: #fff;
-        border: 1px solid #002b47;
-        margin-right: 0;
-      }
-    }
   }
 }
 </style>
\ No newline at end of file

@@ -12,6 +12,8 @@ export default function() {
       // 当前查询订单状态
       currentStatus: 1,
       routerParam: {},
+
+      isShowModal: false,
     },
     mutations: {
       setOrderList(state, res) {

@@ -165,7 +165,7 @@ module.exports = {
     },
   },
 
-  // 买家删除订单
+  // 卖家删除订单
   '/api/seller/order/delete': {
     auth: true,
     ufo: true,

@@ -68,42 +68,42 @@ export const buyerOrderStatusList = [
 
 // 订单操作
 // ts IOrderAction[]
-export const orderActions = [
-  {
+export const orderActionsMap = {
+  DEL_ORDER: {
     code: 'del_order',
     name: 'DEL_ORDER',
     text: '删除',
   },
-  { code: 'buy_again', name: 'BUY_AGAIN', text: '再次购买' },
-  {
+  BUY_AGAIN: { code: 'buy_again', name: 'BUY_AGAIN', text: '再次购买' },
+  SHOW_DETAIL: {
     code: 'show_detail',
     name: 'SHOW_DETAIL',
     text: '查看详情',
   },
-  {
+  SHOW_EXPRESS: {
     code: 'show_express',
     name: 'SHOW_EXPRESS',
     text: '查看物流',
   },
-  {
+  CONFIRM_DELIVERY: {
     code: 'confirm_delivery',
     name: 'CONFIRM_DELIVERY',
     text: '确认收货',
   },
-  {
+  SOLD_AGAIN: {
     code: 'sold_again',
     name: 'SOLD_AGAIN',
     text: '再次出售',
   },
-  {
+  NOT_SOLD: {
     code: 'not_sold',
     confirmTips: '您确定不卖此商品吗？',
     name: 'NOT_SOLD',
     text: '不卖了',
   },
-  {
+  PAY_EARNESTMONEY: {
     code: 'pay_earnestMoney',
     name: 'PAY_EARNESTMONEY',
     text: '支付保证金',
   },
-];
+};