187 lines
7.6 KiB
Vue
187 lines
7.6 KiB
Vue
<template>
|
||
<div class="order_detail_wrapper">
|
||
<el-main v-loading="loading">
|
||
<el-card class="mt10">
|
||
<template v-slot:header>
|
||
<div class="clearfix">
|
||
<span style="font-size: 16px; font-weight: bold">订单进程</span>
|
||
<el-button style="float: right" size="small" @click="$router.back()">返回</el-button>
|
||
</div>
|
||
</template>
|
||
<el-steps :active="active" align-center>
|
||
<el-step title="买家下单" :description="parseTime(orderDetail.createTime, '')"></el-step>
|
||
<el-step title="买家付款" :description="parseTime(orderDetail.payTime, '')"></el-step>
|
||
<el-step title="商家发货" :description="parseTime(orderDetail.deliveryTime, '')"></el-step>
|
||
<el-step title="买家收货" :description="parseTime(orderDetail.receiveTime, '')"></el-step>
|
||
</el-steps>
|
||
</el-card>
|
||
<el-card class="mt10">
|
||
<el-descriptions title="订单信息" :column="2" border label-class-name="my-label" contentClassName="my-content">
|
||
<!-- <template slot="extra">-->
|
||
<!-- <el-button size="small" @click="$router.back()">返回</el-button>-->
|
||
<!-- </template>-->
|
||
<el-descriptions-item label="订单编号">{{ orderDetail.orderSn }}</el-descriptions-item>
|
||
<el-descriptions-item label="用户名称">{{ orderDetail.userName }}</el-descriptions-item>
|
||
<el-descriptions-item label="用户手机号">{{ orderDetail.userPhone }}</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 class="mt10">
|
||
<el-descriptions title="收货信息" :column="2" border label-class-name="my-label" contentClassName="my-content">
|
||
<el-descriptions-item label="收货人姓名">{{ getHiddenName(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 class="mt10">
|
||
<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="buyNum"></el-table-column>
|
||
<el-table-column label="实付金额" prop="payAmount">
|
||
<template v-slot="scope">
|
||
<span>￥{{ orderDetail.payAmount }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
<el-card class="mt10">
|
||
<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.expressName }}</el-descriptions-item>
|
||
<!-- <el-descriptions-item label="物流进度">-->
|
||
<!-- <el-popover placement="top" 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>-->
|
||
<!-- <span slot="reference">{{ orderDetail.logistics }}</span>-->
|
||
<!-- </el-popover>-->
|
||
<!-- </el-descriptions-item>-->
|
||
</el-descriptions>
|
||
</el-card>
|
||
</el-main>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getOmsOrder } from '@/api/oms/order';
|
||
const key = 'express-set-key';
|
||
|
||
export default {
|
||
name: 'OrderDetail',
|
||
dicts: ['oms_order_status', 'oms_pay_type'],
|
||
data() {
|
||
return {
|
||
products: [],
|
||
orderDetail: {},
|
||
addressInfo: {},
|
||
aliLogisticsInfoList: [],
|
||
loading: false,
|
||
experssList: [],
|
||
active: 1,
|
||
payTypeMap: [],
|
||
orderStatusMap: []
|
||
};
|
||
},
|
||
async created() {
|
||
const { id } = this.$route.query;
|
||
this.queryDetail(id);
|
||
const orderStatusMap = await this.getDictionaryByKey('oms_order_status');
|
||
const payTypeMap = await this.getDictionaryByKey('oms_pay_type');
|
||
this.orderStatusMap = orderStatusMap;
|
||
this.payTypeMap = payTypeMap;
|
||
},
|
||
computed: {},
|
||
methods: {
|
||
queryDetail(id) {
|
||
this.loading = true;
|
||
return new Promise((resolve) =>
|
||
getOmsOrder(id).then((res) => {
|
||
const { productInfo, addressInfo } = res.data;
|
||
this.orderDetail = res.data;
|
||
this.products = productInfo;
|
||
this.addressInfo = addressInfo;
|
||
if (this.orderDetail.orderStatus <= 3) {
|
||
this.active = this.orderDetail.orderStatus + 1;
|
||
} else {
|
||
this.active = 1;
|
||
}
|
||
this.loading = false;
|
||
})
|
||
);
|
||
},
|
||
getOrderStatus(row) {
|
||
const { label = '' } =
|
||
this.orderStatusMap.find((item) => {
|
||
return row.orderStatus == item.value;
|
||
}) || {};
|
||
return label;
|
||
},
|
||
getPayType(row) {
|
||
const { label = '' } =
|
||
this.payTypeMap.find((item) => {
|
||
return row.orderStatus == item.value;
|
||
}) || {};
|
||
return label;
|
||
}
|
||
}
|
||
};
|
||
</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>
|