<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
width="900px"
|
: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.status === 1" type="warning">待取件</el-tag>
|
<el-tag v-else-if="detailInfo.status === 2" type="primary">配送中</el-tag>
|
<el-tag v-else-if="detailInfo.status === 3" type="success">已完成</el-tag>
|
<el-tag v-else-if="detailInfo.status === 4" type="info">已取消</el-tag>
|
</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">
|
<span class="label">订单级别：</span>
|
<span class="value">{{ detailInfo.order.orderLevel || '-' }}</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">
|
<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">
|
<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">
|
<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">
|
<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.unitPriceYuan / 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}">
|
¥{{ (row.subtotal / 100).toFixed(2) }}
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="price-summary">
|
<span>基础服务费：¥{{ (detailInfo.order.price / 100).toFixed(2) }}</span>
|
<span>物品保费：¥{{ (detailInfo.order.declaredFee / 100).toFixed(2) }}</span>
|
<span>订单总价：¥{{ (detailInfo.order.totalAmount / 100).toFixed(2) }}</span>
|
<span>实际支付：¥{{ (detailInfo.order.payAmount / 100).toFixed(2) }}</span>
|
<span>退款金额：¥{{ (detailInfo.order.refundAmount / 100).toFixed(2) }}</span>
|
<span>超时金额：¥{{ (detailInfo.order.overdueAmount / 100).toFixed(2) }}</span>
|
<span>异常金额：¥{{ (detailInfo.order.exceptionAmount / 100).toFixed(2) }}</span>
|
</div>
|
</div>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { getById } from '@/api/business/orderManagement'
|
|
export default {
|
name: 'OperaOrderDetail',
|
components: { GlobalWindow },
|
data () {
|
return {
|
title: '订单详情',
|
visible: false,
|
detailInfo: null
|
}
|
},
|
methods: {
|
open (row) {
|
this.title = '订单详情'
|
getById(row.id).then(res => {
|
console.log(res)
|
this.detailInfo = res
|
this.visible = true
|
}).catch(e => {
|
this.$tip.apiFailed(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;
|
}
|
.price-summary {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 11px;
|
padding: 15px;
|
background: #f5f7fa;
|
border-radius: 4px;
|
font-size: 14px;
|
color: #606266;
|
}
|
</style>
|
