<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
width="1000px"
|
:withFooter="false"
|
>
|
<div class="order-detail" v-if="detailInfo">
|
<div class="section">
|
<div class="section-header">
|
<span class="section-title">订单详情</span>
|
<el-tag v-if="detailInfo.order && detailInfo.order.status === 4" type="primary">{{detailInfo.statusDesc}}</el-tag>
|
<el-tag v-else-if="detailInfo.order && detailInfo.order.status <7" type="warning" >{{detailInfo.statusDesc}}</el-tag>
|
<el-tag v-else-if="detailInfo.order && detailInfo.order.status ===7" type="success">{{detailInfo.statusDesc}}</el-tag>
|
<el-tag v-else type="info">{{detailInfo.statusDesc}}</el-tag>
|
<el-button style="" type="primary" @click="showLogList" >加急日志</el-button>
|
</div>
|
<div class="info-grid">
|
<div class="info-item">
|
<span class="label">订单编号：</span>
|
<span class="value">{{ detailInfo.order.code || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">创建时间：</span>
|
<span class="value">{{ detailInfo.order.createTime || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">订单类型：</span>
|
<span class="value">
|
<span v-if="detailInfo.order.type === 0">就地存取</span>
|
<span v-else-if="detailInfo.order.type === 1">同城寄送</span>
|
<span v-else>-</span>
|
</span>
|
</div>
|
|
<div class="info-item">
|
<span class="label">支付时间：</span>
|
<span class="value">{{ detailInfo.order.payTime || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">支付方式：</span>
|
<span class="value">
|
<span>微信支付</span>
|
</span>
|
</div>
|
<div class="info-item">
|
<span class="label">实付金额：</span>
|
<span class="value">
|
<span>¥{{ (detailInfo.order.payAmount / 100).toFixed(2) }}</span>
|
</span>
|
</div>
|
|
<div class="info-item" v-if="detailInfo.type ===1">
|
<span class="label">订单级别：</span>
|
<span class="value">{{ detailInfo.isUrgent === 1?'极速达':'标速达' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">预计到店时间：</span>
|
<span class="value">{{ detailInfo.order.expectedDepositTime || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">预计取件时间：</span>
|
<span class="value">{{ detailInfo.order.expectedTakeTime || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">订单总价：</span>
|
<span class="value">¥{{ (detailInfo.order.totalAmount / 100).toFixed(2) }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">保价金额：</span>
|
<span class="value">¥{{ (detailInfo.order.declaredAmount / 100).toFixed(2) }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">物品保费：</span>
|
<span class="value">¥{{ (detailInfo.order.declaredFee / 100).toFixed(2) }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">预计寄存天数/配送里程：</span>
|
<span class="value">{{ detailInfo.order.estimatedDepositDays || '-' }}天/{{ detailInfo.order.distance || '-' }}公里</span>
|
</div>
|
<div class="info-item full-width">
|
<span class="label">客户备注：</span>
|
<span class="value">{{ detailInfo.order.remark || '-' }}</span>
|
</div>
|
<div class="info-item full-width">
|
<span class="label">物品拍照：</span>
|
<div v-if="detailInfo.depositImages && detailInfo.depositImages.length" class="image-list">
|
<el-image
|
v-for="(img, index) in detailInfo.depositImages"
|
:key="index"
|
style="width: 80px; height: 80px; margin-right: 10px"
|
:src="img"
|
:preview-src-list="detailInfo.depositImages"
|
fit="cover"
|
></el-image>
|
</div>
|
<span v-else>-</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="section">
|
<div class="section-header">
|
<span class="section-title">会员信息</span>
|
</div>
|
<div class="info-grid">
|
<div class="info-item">
|
<span class="label">姓名：</span>
|
<span class="value">{{ detailInfo.memberName || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">手机号码：</span>
|
<span class="value">{{ detailInfo.memberPhone || '-' }}</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="section">
|
<div class="section-header">
|
<span class="section-title">配送信息</span>
|
</div>
|
<div class="info-grid">
|
<div class="info-item">
|
<span class="label">收件人：</span>
|
<span class="value">{{ detailInfo.order.takeUser || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">收件人电话：</span>
|
<span class="value">{{ detailInfo.order.takePhone || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">寄件地址：</span>
|
<span class="value">{{ detailInfo.order.depositLocation || '' }}{{ detailInfo.order.depositLocationRemark || '' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">收件地址：</span>
|
<span class="value">{{ detailInfo.order.takeLocation || '' }}{{ detailInfo.order.takeLocationRemark || '' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">是否收件服务点：</span>
|
<span class="value">{{ detailInfo.order.takeShopId ? '是' : '否' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">配送司机：</span>
|
<span class="value">{{ detailInfo.driverName || '-' }}</span>
|
</div>
|
<div class="info-item full-width">
|
<span class="label">门店收件拍照：</span>
|
<div v-if="detailInfo.storeInImages && detailInfo.storeInImages.length" class="image-list">
|
<el-image
|
v-for="(img, index) in detailInfo.storeInImages"
|
:key="index"
|
style="width: 80px; height: 80px; margin-right: 10px"
|
:src="img"
|
:preview-src-list="detailInfo.storeInImages"
|
fit="cover"
|
></el-image>
|
</div>
|
<span v-else>-</span>
|
</div>
|
<div class="info-item full-width" v-if="detailInfo.order && detailInfo.order.type===1">
|
<span class="label">司机取件拍照：</span>
|
<div v-if="detailInfo.driverTakeImages && detailInfo.driverTakeImages.length" class="image-list">
|
<el-image
|
v-for="(img, index) in detailInfo.driverTakeImages"
|
:key="index"
|
style="width: 80px; height: 80px; margin-right: 10px"
|
:src="img"
|
:preview-src-list="detailInfo.driverTakeImages"
|
fit="cover"
|
></el-image>
|
</div>
|
<span v-else>-</span>
|
</div>
|
<div class="info-item full-width" v-if="detailInfo.order && detailInfo.order.type===1">
|
<span class="label">司机送达拍照/门店入库拍照：</span>
|
<div v-if="detailInfo.driverDoneImages && detailInfo.driverDoneImages.length" class="image-list">
|
<el-image
|
v-for="(img, index) in detailInfo.driverDoneImages"
|
:key="index"
|
style="width: 80px; height: 80px; margin-right: 10px"
|
:src="img"
|
:preview-src-list="detailInfo.driverDoneImages"
|
fit="cover"
|
></el-image>
|
</div>
|
<span v-else>-</span>
|
</div>
|
<div class="info-item full-width" v-if="detailInfo.order && detailInfo.order.takeShopId">
|
<span class="label">门店出库拍照：</span>
|
<div v-if="detailInfo.storeOutImages && detailInfo.storeOutImages.length" class="image-list">
|
<el-image
|
v-for="(img, index) in detailInfo.storeOutImages"
|
:key="index"
|
style="width: 80px; height: 80px; margin-right: 10px"
|
:src="img"
|
:preview-src-list="detailInfo.storeOutImages"
|
fit="cover"
|
></el-image>
|
</div>
|
<span v-else>-</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="section">
|
<div class="section-header">
|
<span class="section-title">取消信息</span>
|
</div>
|
<div class="info-grid">
|
<div class="info-item">
|
<span class="label">取消操作人：</span>
|
<span class="value">{{ detailInfo.platformUserName || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">取消时间：</span>
|
<span class="value">{{ detailInfo.order.cancelTime || '-' }}</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="section" v-if="detailInfo.ordersRefund">
|
<div class="section-header">
|
<span class="section-title">退款信息</span>
|
</div>
|
<div class="info-grid">
|
<div class="info-item">
|
<span class="label">退款理由：</span>
|
<span class="value">{{ detailInfo.ordersRefund.cancelInfo || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">退款申请时间：</span>
|
<span class="value">{{ detailInfo.ordersRefund.createTime || '-' }}</span>
|
</div>
|
|
|
<div class="info-item">
|
<span class="label">退款金额：</span>
|
<span class="value">{{ detailInfo.ordersRefund.createTime || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">退款处理时间：</span>
|
<span class="value">{{ detailInfo.ordersRefund.refundTime || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">退款方式：</span>
|
<span class="value" v-if="detailInfo.ordersRefund.type === 0">未存件直接取消</span>
|
<span class="value" v-else-if="detailInfo.ordersRefund.type === 1">平台直接取消</span>
|
<span class="value" v-else-if="detailInfo.ordersRefund.type === 2">已存件申请取消</span>
|
</div>
|
<div class="info-item">
|
<span class="label">退款备注：</span>
|
<span class="value">{{ detailInfo.ordersRefund.remark || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">操作人：</span>
|
<span class="value">{{ detailInfo.platformUserName || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">操作时间：</span>
|
<span class="value">{{ detailInfo.ordersRefund.updateTime || '-' }}</span>
|
</div>
|
<div class="info-item full-width">
|
<span class="label">门店退款拍照：</span>
|
<div v-if="detailInfo.refundTakeImages && detailInfo.refundTakeImages.length" class="image-list">
|
<el-image
|
v-for="(img, index) in detailInfo.refundTakeImages"
|
:key="index"
|
style="width: 80px; height: 80px; margin-right: 10px"
|
:src="img"
|
:preview-src-list="detailInfo.refundTakeImages"
|
fit="cover"
|
></el-image>
|
</div>
|
<span v-else>-</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="section">
|
<div class="section-header">
|
<span class="section-title">物品信息</span>
|
</div>
|
<el-table :data="detailInfo.detailList" stripe class="goods-table" :header-row-style="headerRowStyle">
|
<el-table-column prop="typeName" label="物品名称" min-width="80px"></el-table-column>
|
<el-table-column prop="luggageName" label="物品尺寸" min-width="80px"></el-table-column>
|
<el-table-column label="单价（元）" min-width="100px">
|
<template slot-scope="{row}">
|
¥{{ ((row.unitPrice||0) / 100).toFixed(2) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="num" label="数量" min-width="60px"></el-table-column>
|
<el-table-column label="小计（元）" min-width="100px">
|
<template slot-scope="{row}">
|
<span class="yellowstate"> ¥{{ ((row.subtotal ||0) / 100).toFixed(2) }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="price-summary" v-if="detailInfo.order">
|
<span class="price-span">基础服务费：¥{{ ((detailInfo.order.price||0) / 100).toFixed(2) }}</span>
|
<span class="price-span">物品保费：¥{{ ((detailInfo.order.declaredFee||0) / 100).toFixed(2) }}</span>
|
<span class="price-span">订单总价：¥{{ ((detailInfo.order.totalAmount||0) / 100).toFixed(2) }}</span>
|
<span class="price-span">实际支付：¥{{ ((detailInfo.order.payAmount||0) / 100).toFixed(2) }}</span>
|
<span class="price-span">退款金额：¥{{ ((detailInfo.order.refundAmount ||0)/ 100).toFixed(2) }}</span>
|
<span class="price-span">超时金额：¥{{ ((detailInfo.order.overdueAmount ||0)/ 100).toFixed(2) }}</span>
|
<span class="price-span">异常金额：¥{{ ((detailInfo.order.exceptionAmount ||0)/ 100).toFixed(2) }}</span>
|
</div>
|
</div>
|
</div>
|
|
<orderProgress ref ='orderProgress'></orderProgress>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { getById ,logListPage} from '@/api/business/orderManagement'
|
import orderProgress from '@/components/business/orderProgress'
|
export default {
|
name: 'OperaOrderDetail',
|
components: { GlobalWindow ,orderProgress},
|
data () {
|
return {
|
title: '订单详情',
|
visible: false,
|
detailInfo: null
|
}
|
},
|
methods: {
|
headerRowStyle({ rowIndex }) {
|
return {
|
background: '#007bff' ,
|
color : '#333',
|
height: '50px'
|
}
|
},
|
open (row) {
|
this.title = '订单详情'
|
getById(row.id).then(res => {
|
console.log(res)
|
this.detailInfo = res
|
this.visible = true
|
}).catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
},
|
showLogList () {
|
var that = this
|
if (!this.detailInfo.order || !this.detailInfo.order.id) {
|
return
|
}
|
logListPage({
|
capacity: 10000,
|
model: {
|
orderId: this.detailInfo.order.id
|
},
|
page: 1
|
}).then(res => {
|
var orderLogList = res.records || []
|
if (orderLogList.length) {
|
this.$refs.orderProgress.open('订单派单日志', orderLogList || [])
|
} else {
|
this.$message.warning('未查询到任何派单记录！')
|
}
|
}).catch(e => {
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.order-detail {
|
|
}
|
.section {
|
margin-bottom: 25px;
|
}
|
.section-header {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
margin-bottom: 15px;
|
}
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
padding-left: 10px;
|
border-left: 4px solid #2E68EC;
|
}
|
.info-grid {
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
gap: 15px;
|
padding: 0 10px;
|
}
|
.info-item {
|
display: flex;
|
font-size: 14px;
|
}
|
.info-item.full-width {
|
grid-column: span 2;
|
}
|
.info-item .label {
|
color: #909399;
|
min-width: 140px;
|
}
|
.info-item .value {
|
color: #606266;
|
word-break: break-all;
|
}
|
.image-list {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.goods-table {
|
margin-bottom: 15px;
|
border: 1px solid #f2f2f2;
|
}
|
.price-summary {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 11px;
|
padding: 15px;
|
background: #f5f7fa;
|
border-radius: 4px;
|
font-size: 14px;
|
color: #606266;
|
|
}
|
.price-span{
|
width: 20%;
|
}
|
</style>
|
