完善订单详情和售后退款日志展示样式重构
This commit is contained in:
puhui999
parent
d10530c9f5
commit
46fd154e3a
@ -51,12 +51,13 @@ export interface OrderVO {
|
||||
avatar?: string
|
||||
}
|
||||
// 订单操作日志
|
||||
orderLog: orderLog[]
|
||||
orderLog?: orderLog[]
|
||||
}
|
||||
|
||||
export interface orderLog {
|
||||
content?: string
|
||||
createTime?: Date
|
||||
userType?: number
|
||||
}
|
||||
|
||||
export interface OrderItemRespVO {
|
||||
|
||||
@ -60,13 +60,20 @@ export const getBoolDictOptions = (dictType: string) => {
|
||||
return dictOption
|
||||
}
|
||||
|
||||
export const getDictObj = (dictType: string, value: any) => {
|
||||
/**
|
||||
* 获取指定字典类型的指定值对应的字典对象
|
||||
* @param dictType 字典类型
|
||||
* @param value 字典值
|
||||
* @return DictDataType 字典对象
|
||||
*/
|
||||
export const getDictObj = (dictType: string, value: any): DictDataType | undefined => {
|
||||
const dictOptions: DictDataType[] = getDictOptions(dictType)
|
||||
dictOptions.forEach((dict: DictDataType) => {
|
||||
if (dict.value === value.toString()) {
|
||||
console.log(dictOptions)
|
||||
for (const dict of dictOptions) {
|
||||
if (dict.value === value + '') {
|
||||
return dict
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -74,12 +81,13 @@ export const getDictObj = (dictType: string, value: any) => {
|
||||
*
|
||||
* @param dictType 字典类型
|
||||
* @param value 字典数据的值
|
||||
* @return 字典名称
|
||||
*/
|
||||
export const getDictLabel = (dictType: string, value: any) => {
|
||||
export const getDictLabel = (dictType: string, value: any): string => {
|
||||
const dictOptions: DictDataType[] = getDictOptions(dictType)
|
||||
const dictLabel = ref('')
|
||||
dictOptions.forEach((dict: DictDataType) => {
|
||||
if (dict.value === value) {
|
||||
if (dict.value === value + '') {
|
||||
dictLabel.value = dict.label
|
||||
}
|
||||
})
|
||||
|
||||
@ -131,9 +131,7 @@
|
||||
:timestamp="formatDate(saleLog.createTime)"
|
||||
placement="top"
|
||||
>
|
||||
<el-card>
|
||||
<span>用户类型：</span>
|
||||
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="saleLog.userType" class="mr-10px" />
|
||||
<div class="el-timeline-right-content">
|
||||
<span>售后状态(之前)：</span>
|
||||
<dict-tag
|
||||
:type="DICT_TYPE.TRADE_AFTER_SALE_STATUS"
|
||||
@ -147,7 +145,15 @@
|
||||
class="mr-10px"
|
||||
/>
|
||||
<span>操作明细：{{ saleLog.content }}</span>
|
||||
</el-card>
|
||||
</div>
|
||||
<template #dot>
|
||||
<span
|
||||
:style="{ backgroundColor: updateStyles(saleLog.userType) }"
|
||||
class="dot-node-style"
|
||||
>
|
||||
{{ getDictLabel(DICT_TYPE.USER_TYPE, saleLog.userType)[0] }}
|
||||
</span>
|
||||
</template>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-descriptions-item>
|
||||
@ -160,7 +166,7 @@
|
||||
<script lang="ts" setup>
|
||||
import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
|
||||
import { floatToFixed2 } from '@/utils'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { DICT_TYPE, getDictLabel, getDictObj } from '@/utils/dict'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import UpdateAuditReasonForm from '@/views/mall/trade/afterSale/form/AfterSaleDisagreeForm.vue'
|
||||
import { createImageViewer } from '@/components/ImageViewer'
|
||||
@ -177,6 +183,21 @@ const formData = ref({
|
||||
})
|
||||
const updateAuditReasonFormRef = ref() // 拒绝售后表单 Ref
|
||||
|
||||
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 getDetail = async () => {
|
||||
const id = params.orderId as unknown as number
|
||||
@ -277,4 +298,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>
|
||||
|
||||
@ -155,8 +155,16 @@
|
||||
v-for="(log, index) in formData.orderLog"
|
||||
: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,7 +181,7 @@
|
||||
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'
|
||||
@ -184,6 +192,21 @@ 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
|
||||
@ -267,4 +290,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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user