一件代发

+import ReturnedListTable from './returned-list-table';
+import ReturnedGoodsInfo from './returned-goods-info';
+import ModalReject from './modal-reject';
+
+export { ReturnedListTable, ReturnedGoodsInfo, ModalReject };

+<template>
+  <Modal v-model="showModal" :title="title" width="600">
+    <div class="deliver-modal">
+      <div class="deliver-info">
+        <Row class-name="info-row">
+          <Col span="5" class-name="info-col">拒绝原因*：</Col>
+          <Col span="19">
+            <Select v-model="rejectReason">
+              <Option v-for="(item, idx) in refuseReasonList" :key="idx" :value="item.id">
+                {{ item.reason }}
+              </Option>
+            </Select>
+          </Col>
+        </Row>
+      </div>
+    </div>
+    <div slot="footer">
+      <Button type="text" size="large" @click="hide">取消</Button>
+      <Button type="primary" size="large" :loading="showLoading" @click="submit()">提交</Button>
+    </div>
+  </Modal>
+</template>
+
+<script>
+export default {
+  name: 'ModalReject',
+  data() {
+    return {
+      rejectReason: 0,
+      title: '商家驳回售后申请',
+      showModal: false,
+      showLoading: false,
+      refuseReasonList: [],
+    };
+  },
+  methods: {
+    show(refuseReasonList) {
+      this.showModal = true;
+      this.refuseReasonList = refuseReasonList;
+    },
+    hide() {
+      this.showLoading = false;
+      this.showModal = false;
+    },
+    //提交
+    submit() {
+      this.showLoading = true;
+      this.$emit('submitReject', this.rejectReason);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.deliver-modal {
+  padding: 30px;
+
+  .info-row {
+    line-height: 40px;
+  }
+
+  .info-tip {
+    margin-top: 20px;
+    color: #f00;
+    text-align: center;
+  }
+
+  .ivu-modal {
+    width: 50%;
+  }
+}
+</style>

+<template>
+  <table cellspacing="0" cellpadding="0" class="order-table">
+    <thead>
+      <tr>
+        <template v-for="(cols, index) in tableCols">
+          <th :key="index" :style="'width:' + cols.width">{{ cols.title }}</th>
+        </template>
+      </tr>
+    </thead>
+    <tbody>
+      <template v-for="(item, index) in tableData">
+        <tr :key="index">
+          <td colspan="12" style="text-align: left">
+            <span>订单号：{{ item.orderCode }}</span>
+            <span>父订单号：{{ item.parentOrderCode }}</span>
+            <span>创建时间：{{ item.createTime }}</span>
+          </td>
+        </tr>
+        <template v-for="(goods, key) in item.returnedGoodsListBoArray">
+          <tr :key="key">
+            <td>
+              <img
+                :src="
+                  'http://shopmanage.yohobuy.com/platform/product/getRemoteImageUrlBySku?sku_id=' +
+                    goods.productSku +
+                    '&size=40x60'
+                "
+              />
+            </td>
+            <td style="text-align: left">
+              <p>{{ goods.prodcutName }}</p>
+              <p>{{ goods.prodcutCode }}</p>
+              <p>尺码：{{ goods.sizeName }} 颜色：{{ goods.colorName }}</p>
+            </td>
+            <td>{{ goods.lastPrice }}</td>
+            <td>{{ goods.buyNums }}</td>
+            <td>{{ goods.productSkn }}</td>
+            <td>{{ goods.productSku }}</td>
+            <template v-if="key == 0">
+              <td :rowspan="item.returnedGoodsListBoArray.length">{{ item.consigneeName }}</td>
+              <td :rowspan="item.returnedGoodsListBoArray.length">{{ item.paymentStatus }}</td>
+              <td :rowspan="item.returnedGoodsListBoArray.length">{{ item.realAmount }}</td>
+              <td :rowspan="item.returnedGoodsListBoArray.length">{{ item.orderStatus }}</td>
+              <td :rowspan="item.returnedGoodsListBoArray.length">
+                <i-button type="default" size="small" @click="goToDetail(item.orderCode)">查看订单</i-button>
+                <i-button type="primary" size="small" @click="goToHandle(item.id, item.orderCode)">处理</i-button>
+              </td>
+            </template>
+          </tr>
+        </template>
+      </template>
+    </tbody>
+  </table>
+</template>
+
+<script>
+export default {
+  name: 'ReturnedListTable',
+  props: ['tableData'],
+  data() {
+    return {
+      tableCols: [
+        { title: '图片', width: '8%' },
+        { title: '商品信息', width: '20%' },
+        { title: '单价', width: '8%' },
+        { title: '数量', width: '5%' },
+        { title: 'SKN', width: '5%' },
+        { title: 'SKU', width: '5%' },
+        { title: '收货人', width: '5%' },
+        { title: '支付状态', width: '5%' },
+        { title: '实收金额', width: '5%' },
+        { title: '订单状态', width: '5%' },
+        { title: '操作', width: '10%' },
+      ],
+    };
+  },
+  methods: {
+    goToDetail(code) {
+      this.$router.push({
+        name: 'order.detail',
+        params: {},
+        query: {
+          orderCode: code,
+        },
+      });
+    },
+    goToHandle(operateId, code) {
+      this.$router.push({
+        name: 'order.returned.operate',
+        params: {},
+        query: {
+          id: operateId,
+          orderCode: code,
+        },
+      });
+    },
+  },
+};
+</script>
+<style lang="scss">
+table.order-table {
+  width: 100%;
+  height: auto;
+  thead {
+    background: #000000;
+    th {
+      padding: 8px 0;
+      border: 1px solid #cccccc;
+      color: #ffffff;
+      text-align: center;
+    }
+  }
+  tbody {
+    tr {
+      height: 35px;
+      td {
+        border: 1px solid #cccccc;
+        border-top: none;
+        border-right: none;
+        text-align: center;
+        padding: 5px;
+        span {
+          margin-left: 10px;
+          margin-right: 20px;
+        }
+      }
+      td:last-child {
+        border-right: 1px solid #cccccc;
+      }
+    }
+  }
+}
+</style>