|
|
|
|
@ -40,12 +40,17 @@
|
|
|
|
|
<el-descriptions-item label="订单状态: ">
|
|
|
|
|
<dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="formData.status!" />
|
|
|
|
|
</el-descriptions-item>
|
|
|
|
|
<!-- TODO @puhui999：根据状态，进行展示按钮 -->
|
|
|
|
|
<el-descriptions-item label-class-name="no-colon">
|
|
|
|
|
<el-button type="primary" @click="openForm('updatePrice')">调整价格</el-button>
|
|
|
|
|
<el-button type="primary" @click="openForm('remark')">备注</el-button>
|
|
|
|
|
<el-button type="primary" @click="openForm('delivery')">发货</el-button>
|
|
|
|
|
<el-button type="primary" @click="openForm('updateAddress')">修改地址</el-button>
|
|
|
|
|
<el-button v-if="formData.status! === 0" type="primary" @click="updatePrice">
|
|
|
|
|
调整价格
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button type="primary" @click="remark">备注</el-button>
|
|
|
|
|
<el-button v-if="formData.status! === 10" type="primary" @click="delivery">
|
|
|
|
|
发货
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button v-if="formData.status! === 10" type="primary" @click="updateAddress">
|
|
|
|
|
修改地址
|
|
|
|
|
</el-button>
|
|
|
|
|
</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item>
|
|
|
|
|
<template #label><span style="color: red">提醒: </span></template>
|
|
|
|
|
@ -152,11 +157,22 @@
|
|
|
|
|
<el-descriptions-item labelClassName="no-colon">
|
|
|
|
|
<el-timeline>
|
|
|
|
|
<el-timeline-item
|
|
|
|
|
v-for="(log, index) in formData.orderLog"
|
|
|
|
|
v-for="(log, index) in formData.logs"
|
|
|
|
|
:key="index"
|
|
|
|
|
:timestamp="formatDate(log.createTime!)"
|
|
|
|
|
placement="top"
|
|
|
|
|
>
|
|
|
|
|
{{ log.content }}
|
|
|
|
|
<div class="el-timeline-right-content">
|
|
|
|
|
{{ log.content }}
|
|
|
|
|
</div>
|
|
|
|
|
<template #dot>
|
|
|
|
|
<span
|
|
|
|
|
:style="{ backgroundColor: updateStyles(log.userType!) }"
|
|
|
|
|
class="dot-node-style"
|
|
|
|
|
>
|
|
|
|
|
{{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
|
|
|
|
|
</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-timeline-item>
|
|
|
|
|
</el-timeline>
|
|
|
|
|
</el-descriptions-item>
|
|
|
|
|
@ -173,54 +189,74 @@
|
|
|
|
|
import * as TradeOrderApi from '@/api/mall/trade/order'
|
|
|
|
|
import { floatToFixed2 } from '@/utils'
|
|
|
|
|
import { formatDate } from '@/utils/formatTime'
|
|
|
|
|
import { DICT_TYPE } from '@/utils/dict'
|
|
|
|
|
import { DICT_TYPE, getDictLabel, getDictObj } from '@/utils/dict'
|
|
|
|
|
import OrderUpdateRemarkForm from '@/views/mall/trade/order/form/OrderUpdateRemarkForm.vue'
|
|
|
|
|
import OrderDeliveryForm from '@/views/mall/trade/order/form/OrderDeliveryForm.vue'
|
|
|
|
|
import OrderUpdateAddressForm from '@/views/mall/trade/order/form/OrderUpdateAddressForm.vue'
|
|
|
|
|
import OrderUpdatePriceForm from '@/views/mall/trade/order/form/OrderUpdatePriceForm.vue'
|
|
|
|
|
import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
|
|
|
|
|
import { useTagsViewStore } from '@/store/modules/tagsView'
|
|
|
|
|
|
|
|
|
|
defineOptions({ name: 'TradeOrderDetail' })
|
|
|
|
|
|
|
|
|
|
const message = useMessage() // 消息弹窗
|
|
|
|
|
|
|
|
|
|
const updateStyles = (type: number) => {
|
|
|
|
|
const dict = getDictObj(DICT_TYPE.USER_TYPE, type)
|
|
|
|
|
switch (dict?.colorType) {
|
|
|
|
|
case 'success':
|
|
|
|
|
return '#67C23A'
|
|
|
|
|
case 'info':
|
|
|
|
|
return '#909399'
|
|
|
|
|
case 'warning':
|
|
|
|
|
return '#E6A23C'
|
|
|
|
|
case 'danger':
|
|
|
|
|
return '#F56C6C'
|
|
|
|
|
}
|
|
|
|
|
return '#409EFF'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 订单详情
|
|
|
|
|
const formData = ref<TradeOrderApi.OrderVO>({
|
|
|
|
|
orderLog: [] // TODO @puhui999：orderLogs
|
|
|
|
|
logs: []
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// TODO @puhui999：这个最好也拆掉哈
|
|
|
|
|
const deliveryFormRef = ref() // 发货表单 Ref
|
|
|
|
|
const updateRemarkForm = ref() // 订单备注表单 Ref
|
|
|
|
|
const updateAddressFormRef = ref() // 收货地址表单 Ref
|
|
|
|
|
const updatePriceFormRef = ref() // 订单调价表单 Ref
|
|
|
|
|
const openForm = (type: string) => {
|
|
|
|
|
switch (type) {
|
|
|
|
|
case 'remark':
|
|
|
|
|
updateRemarkForm.value?.open(formData.value)
|
|
|
|
|
break
|
|
|
|
|
case 'delivery':
|
|
|
|
|
deliveryFormRef.value?.open(formData.value)
|
|
|
|
|
break
|
|
|
|
|
case 'updateAddress':
|
|
|
|
|
updateAddressFormRef.value?.open(formData.value)
|
|
|
|
|
break
|
|
|
|
|
case 'updatePrice':
|
|
|
|
|
updatePriceFormRef.value?.open(formData.value)
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
const remark = () => {
|
|
|
|
|
updateRemarkForm.value?.open(formData.value)
|
|
|
|
|
}
|
|
|
|
|
const delivery = () => {
|
|
|
|
|
deliveryFormRef.value?.open(formData.value)
|
|
|
|
|
}
|
|
|
|
|
const updateAddress = () => {
|
|
|
|
|
updateAddressFormRef.value?.open(formData.value)
|
|
|
|
|
}
|
|
|
|
|
const updatePrice = () => {
|
|
|
|
|
updatePriceFormRef.value?.open(formData.value)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** 获得详情 */
|
|
|
|
|
const { params } = useRoute() // 查询参数
|
|
|
|
|
const getDetail = async () => {
|
|
|
|
|
const id = params.orderId as unknown as number
|
|
|
|
|
if (id) {
|
|
|
|
|
const res = (await TradeOrderApi.getOrder(id)) as TradeOrderApi.OrderVO
|
|
|
|
|
// 没有表单信息则关闭页面返回
|
|
|
|
|
if (res === null) {
|
|
|
|
|
close()
|
|
|
|
|
}
|
|
|
|
|
formData.value = res
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const { delView } = useTagsViewStore() // 视图操作
|
|
|
|
|
const { push, currentRoute } = useRouter() // 路由
|
|
|
|
|
/** 关闭 tag */
|
|
|
|
|
const close = () => {
|
|
|
|
|
delView(unref(currentRoute))
|
|
|
|
|
push({ name: 'TradeAfterSale' })
|
|
|
|
|
}
|
|
|
|
|
/** 复制 */
|
|
|
|
|
const clipboardSuccess = () => {
|
|
|
|
|
message.success('复制成功')
|
|
|
|
|
@ -267,4 +303,51 @@ onMounted(async () => {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 时间线样式调整
|
|
|
|
|
:deep(.el-timeline) {
|
|
|
|
|
margin: 10px 0px 0px 160px;
|
|
|
|
|
|
|
|
|
|
.el-timeline-item__wrapper {
|
|
|
|
|
position: relative;
|
|
|
|
|
top: -20px;
|
|
|
|
|
|
|
|
|
|
.el-timeline-item__timestamp {
|
|
|
|
|
position: absolute !important;
|
|
|
|
|
top: 10px;
|
|
|
|
|
left: -150px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-timeline-right-content {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
min-height: 30px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
background-color: #f7f8fa;
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
content: ''; /* 必须设置 content 属性 */
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 10px;
|
|
|
|
|
left: 13px; /* 将伪元素水平居中 */
|
|
|
|
|
border-width: 8px; /* 调整尖角大小 */
|
|
|
|
|
border-style: solid;
|
|
|
|
|
border-color: transparent #f7f8fa transparent transparent; /* 尖角颜色，左侧朝向 */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dot-node-style {
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: -5px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
芋道源码
2 years ago
committed by
Gitee