Authored by lzhy

一件代发

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>
... ...