285 lines
12 KiB
Vue
285 lines
12 KiB
Vue
<template>
|
||
<div class="order_detail_wrapper">
|
||
<el-main v-loading="loading">
|
||
<el-card>
|
||
<el-descriptions title="订单信息" :column="2" border label-class-name="my-label" contentClassName="my-content">
|
||
<template v-slot:extra>
|
||
<el-button @click="$router.back()">返回</el-button>
|
||
</template>
|
||
<el-descriptions-item label="订单号">{{ orderDetail.orderSn }}</el-descriptions-item>
|
||
<el-descriptions-item label="用户昵称">{{ orderDetail.nickName }}</el-descriptions-item>
|
||
<el-descriptions-item label="用户手机号">{{ orderDetail.phone }}</el-descriptions-item>
|
||
<el-descriptions-item label="下单时间">{{ parseTime(orderDetail.createTime, '') }}</el-descriptions-item>
|
||
<el-descriptions-item label="支付方式">{{ getPayType(orderDetail) }}</el-descriptions-item>
|
||
<el-descriptions-item label="支付时间">{{ parseTime(orderDetail.payTime, '') }}</el-descriptions-item>
|
||
<el-descriptions-item label="订单状态">{{ getOrderStatus(orderDetail) }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-card>
|
||
<el-card>
|
||
<template v-slot:header>
|
||
<div style="font-size: 16px; font-weight: bold">售后信息</div>
|
||
</template>
|
||
<el-table :data="refundInfoList">
|
||
<el-table-column label="售后单号" prop="id" width="150"></el-table-column>
|
||
<el-table-column label="售后类型" prop="applyRefundType" width="80">
|
||
<template v-slot="{ row }">
|
||
<span>{{ getAftersaleType(row) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="申请售后时间" prop="applyRefundTime" width="180">
|
||
<template v-slot="{ row }">
|
||
<span>
|
||
{{ parseTime(row.applyRefundTime, '') }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="退款金额" prop="refundAmount">
|
||
<template v-slot="scope">
|
||
￥<span>{{ scope.row.refundAmount }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="申请原因" prop="reason"></el-table-column>
|
||
<el-table-column label="凭证" prop="proofPics">
|
||
<template v-slot="{ row }">
|
||
<el-image class="small-img circle-img" :src="row.proofPics" :preview-src-list="[row.proofPics]" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="申请状态" prop="refundStatus" width="110">
|
||
<template v-slot="{ row }">
|
||
<span>{{ getAftersaleStatus(row) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="平台拒绝理由" prop="remark"></el-table-column>
|
||
<el-table-column label="退货快递号" prop="refundWaybillCode"></el-table-column>
|
||
<el-table-column label="操作">
|
||
<template v-slot="scope">
|
||
<el-button text type="primary" icon="Edit" @click="handleWatch(scope.row)">查看</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
<el-card>
|
||
<el-descriptions title="收货信息" :column="2" border label-class-name="my-label" contentClassName="my-content">
|
||
<el-descriptions-item label="收货人姓名">{{ addressInfo.name }}</el-descriptions-item>
|
||
<el-descriptions-item label="收货人手机号">{{ addressInfo.userPhone }}</el-descriptions-item>
|
||
<el-descriptions-item label="收货区域">{{ addressInfo.area }}</el-descriptions-item>
|
||
<el-descriptions-item label="详细地址">{{ getHiddenDetailAddress(addressInfo.address) }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-card>
|
||
<el-card>
|
||
<template v-slot:header>
|
||
<div style="font-size: 16px; font-weight: bold">商品信息</div>
|
||
</template>
|
||
<el-table :data="products">
|
||
<el-table-column label="商品图片" prop="pic">
|
||
<template v-slot="{ row }"><el-image class="small-img circle-img" :src="row.pic" :preview-src-list="[row.pic]" /></template>
|
||
</el-table-column>
|
||
<el-table-column label="商品ID" prop="productId"></el-table-column>
|
||
<el-table-column label="商品名称" prop="productName"></el-table-column>
|
||
<el-table-column label="商品规格" align="center" prop="spData" width="180">
|
||
<template v-slot="scope">
|
||
<div v-for="(item, key) in JSON.parse(scope.row.spData)">{{ key }}：{{ item }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="价格" prop="salePrice"></el-table-column>
|
||
<el-table-column label="购买数量" prop="buyNum"></el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
<el-card>
|
||
<el-descriptions title="物流信息" :column="3" border label-class-name="my-label" contentClassName="my-content">
|
||
<el-descriptions-item label="发货时间">{{ parseTime(orderDetail.deliveryTime, '') }}</el-descriptions-item>
|
||
<el-descriptions-item label="快递单号">{{ orderDetail.expressNo }}</el-descriptions-item>
|
||
<el-descriptions-item label="物流公司">{{ orderDetail.expressNo ? '顺丰速运' : '' }}</el-descriptions-item>
|
||
<!-- <el-descriptions-item label="物流公司">{{ orderDetail.expressName }}</el-descriptions-item>-->
|
||
</el-descriptions>
|
||
</el-card>
|
||
<!-- 售后详细信息 -->
|
||
<el-dialog title="售后详细信息" v-model:visible="open" width="1100px" append-to-body>
|
||
<el-descriptions :column="2" border label-class-name="my-label" contentClassName="my-content">
|
||
<el-descriptions-item label="售后单号">{{ refundInfoDetail.id }}</el-descriptions-item>
|
||
<el-descriptions-item label="售后类型">{{ getAftersaleType(refundInfoDetail) }}</el-descriptions-item>
|
||
<el-descriptions-item label="申请售后时间">{{ parseTime(refundInfoDetail.applyRefundTime, '') }}</el-descriptions-item>
|
||
<el-descriptions-item label="退款金额">￥{{ refundInfoDetail.refundAmount }}</el-descriptions-item>
|
||
<el-descriptions-item label="申请原因">{{ refundInfoDetail.reason }}</el-descriptions-item>
|
||
<el-descriptions-item label="具体描述">{{ refundInfoDetail.description }}</el-descriptions-item>
|
||
<el-descriptions-item label="凭证">
|
||
<el-image class="small-img circle-img" :src="refundInfoDetail.proofPics" :preview-src-list="[refundInfoDetail.proofPics]" />
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="申请状态">{{ getAftersaleStatus(refundInfoDetail) }}</el-descriptions-item>
|
||
<el-descriptions-item label="平台拒绝理由">{{ refundInfoDetail.remark }}</el-descriptions-item>
|
||
<el-descriptions-item label="退货快递号">{{ refundInfoDetail.refundWaybillCode }}</el-descriptions-item>
|
||
<el-descriptions-item label="物流公司">{{ getExpressName(refundInfoDetail.refundWpCode) }}</el-descriptions-item>
|
||
<el-descriptions-item label="物流进度">
|
||
<el-popover placement="left" width="300" trigger="hover" popper-class="popperOptions">
|
||
<el-timeline-item v-for="(activity, index) in aliLogisticsInfoList" :key="index" :timestamp="activity.time">
|
||
{{ activity.context }}
|
||
</el-timeline-item>
|
||
<template v-slot:reference>
|
||
<span>{{ refundInfoDetail.logistics }}</span>
|
||
</template>
|
||
</el-popover>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-dialog>
|
||
</el-main>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getOmsAftersale } from '@/api/oms/aftersale';
|
||
import { getConfigKey2 } from '@/api/system/config';
|
||
|
||
export default {
|
||
name: 'OmsAftersaleDetail',
|
||
data() {
|
||
return {
|
||
products: [],
|
||
orderDetail: {},
|
||
addressInfo: {},
|
||
// aliLogisticsInfoList: [],
|
||
refundInfoList: [],
|
||
loading: false,
|
||
experssList: [],
|
||
open: false,
|
||
refundInfoDetail: {},
|
||
aliLogisticsInfoList: [],
|
||
orderSaleStatusMap: [],
|
||
orderTypeMap: [],
|
||
orderAfterSaleMap: [],
|
||
orderAftersaleMap: []
|
||
};
|
||
},
|
||
async created() {
|
||
this.getExpressData();
|
||
const { id } = this.$route.query;
|
||
this.queryDetail(id).then((expressNo) => {
|
||
// this.getLogistic(expressNo)
|
||
});
|
||
const orderSaleStatusMap = await this.getDictionaryByKey('oms_order_status');
|
||
const orderTypeMap = await this.getDictionaryByKey('oms_order_type');
|
||
const orderAfterSaleMap = await this.getDictionaryByKey('oms_aftersale_type');
|
||
const orderAftersaleMap = await this.getDictionaryByKey('oms_aftersale_status');
|
||
this.orderSaleStatusMap = orderSaleStatusMap;
|
||
this.orderTypeMap = orderTypeMap;
|
||
this.orderAfterSaleMap = orderAfterSaleMap;
|
||
this.orderAftersaleMap = orderAftersaleMap;
|
||
},
|
||
computed: {
|
||
orderStatusMap() {
|
||
const obj = this.orderSaleStatusMap.map((item) => [item.value, item.label]);
|
||
const map = new Map(obj);
|
||
return map;
|
||
},
|
||
payTypeMap() {
|
||
const obj = this.orderTypeMap.map((item) => [item.value, item.label]);
|
||
const map = new Map(obj);
|
||
return map;
|
||
},
|
||
aftersaleTypeMap() {
|
||
const obj = this.orderAfterSaleMap.map((item) => [item.value, item.label]);
|
||
const map = new Map(obj);
|
||
return map;
|
||
},
|
||
aftersaleStatusMap() {
|
||
const obj = this.orderAftersaleMap.map((item) => [item.value, item.label]);
|
||
const map = new Map(obj);
|
||
return map;
|
||
},
|
||
expressMap() {
|
||
const obj = this.experssList.map((item) => [item.expressCode, item.expressName]);
|
||
return new Map(obj);
|
||
}
|
||
},
|
||
methods: {
|
||
getExpressData() {
|
||
getConfigKey2('express-set-key').then((res) => {
|
||
if (res.data && res.data.configValue) {
|
||
this.experssList = JSON.parse(res.data.configValue);
|
||
} else {
|
||
this.experssList = [];
|
||
}
|
||
});
|
||
},
|
||
queryDetail(id) {
|
||
this.loading = true;
|
||
return new Promise((resolve) =>
|
||
getOmsAftersale(id).then((res) => {
|
||
const { productList, addressInfo, refundInfoList } = res;
|
||
this.orderDetail = res;
|
||
this.products = productList;
|
||
this.refundInfoList = refundInfoList;
|
||
this.addressInfo = addressInfo || {};
|
||
this.loading = false;
|
||
})
|
||
);
|
||
},
|
||
getOrderStatus(row) {
|
||
return this.orderStatusMap.get(row.status + '');
|
||
},
|
||
getPayType(row) {
|
||
return this.payTypeMap.get(row.payType + '');
|
||
},
|
||
getAftersaleType(row) {
|
||
return this.aftersaleTypeMap.get(row.applyRefundType + '');
|
||
},
|
||
getAftersaleStatus(row) {
|
||
return this.aftersaleStatusMap.get(row.refundStatus + '');
|
||
},
|
||
getExpressName(name) {
|
||
return this.expressMap.get(name);
|
||
},
|
||
handleWatch(row) {
|
||
this.refundInfoDetail = row;
|
||
if (this.refundInfoDetail.allLogistics) {
|
||
this.aliLogisticsInfoList = JSON.parse(refundInfoDetail.allLogistics);
|
||
}
|
||
this.open = true;
|
||
},
|
||
cancel() {
|
||
this.open = false;
|
||
this.refundInfoDetail = {};
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="stylus">
|
||
.order_detail_wrapper
|
||
> .el-card + .el-card
|
||
margin-top 1rem
|
||
|
||
.el-form-item
|
||
margin-bottom 0
|
||
|
||
.el-form-item__content, .el-form-item__label
|
||
line-height 2
|
||
|
||
.my-label
|
||
width 100px
|
||
.my-content
|
||
width 400px
|
||
.popperOptions[x-placement^=left] .popper__arrow::after{
|
||
border-left-color: #565D6B;
|
||
}
|
||
.popperOptions[x-placement^=right] .popper__arrow::after{
|
||
border-right-color: #565D6B;
|
||
}
|
||
.popperOptions[x-placement^=bottom] .popper__arrow::after{
|
||
border-bottom-color: #565D6B;
|
||
}
|
||
.popperOptions[x-placement^=top] .popper__arrow::after{
|
||
border-top-color: #565D6B;
|
||
}
|
||
.popperOptions{
|
||
background-color: #565D6B;
|
||
color: #FFFFFF;
|
||
border: #565D6B;
|
||
}
|
||
.el-timeline-item__content {
|
||
color: #fff;
|
||
}
|
||
.el-timeline-item__timestamp {
|
||
color: #fff;
|
||
}
|
||
</style>
|