yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

提交订单页面和详情页面 20230619 

(cherry picked from commit 42a7aec0b5)
pull/185/head
xiaobai 2023-06-19 12:42:43 +08:00 committed by shizhong
parent 0f9629707f
commit 1b5c983d1d
5 changed files with 1063 additions and 1065 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.dev
View File

@ -1,5 +1,5 @@
# 开发环境 # 开发环境
NODE_ENV=production NODE_ENV=development
VITE_DEV=false VITE_DEV=false

139
src/api/mall/trade/order/type/orderType.ts
View File

@ -3,25 +3,25 @@
// TODO @xiaobai：这个改成 TradeOrderRespVO // TODO @xiaobai：这个改成 TradeOrderRespVO
export interface TradeOrderPageItemRespVO { export interface TradeOrderPageItemRespVO {
// 订单编号 // 订单编号
id: number id?: number
// 订单流水号 // 订单流水号
no: string no?: string
// 下单时间 // 下单时间
createTime: Date createTime?: Date
// 订单类型 // 订单类型
type: number type?: number
// 订单来源 // 订单来源
terminal: number terminal?: number
// 用户编号 // 用户编号
userId: number userId?: number
// 用户 IP // 用户 IP
userIp: string userIp?: string
// 用户备注 // 用户备注
userRemark: string userRemark?: string
// 订单状态 // 订单状态
status: number status?: number
// 购买的商品数量 // 购买的商品数量
productCount: number productCount?: number
// 订单完成时间 // 订单完成时间
finishTime?: Date finishTime?: Date
// 订单取消时间 // 订单取消时间
@ -33,23 +33,23 @@ export interface TradeOrderPageItemRespVO {
// 支付订单编号 // 支付订单编号
payOrderId: number payOrderId: number
// 是否已支付 // 是否已支付
payed: boolean payed?: boolean
// 付款时间 // 付款时间
payTime?: Date payTime?: Date
// 支付渠道 // 支付渠道
payChannelCode: string payChannelCode?: string
// 商品原价（总） // 商品原价（总）
originalPrice: number originalPrice?: number
// 订单原价（总） // 订单原价（总）
orderPrice: number orderPrice?: number
// 订单优惠（总） // 订单优惠（总）
discountPrice: number discountPrice?: number
// 运费金额 // 运费金额
deliveryPrice: number deliveryPrice?: number
// 订单调价（总） // 订单调价（总）
adjustPrice: number adjustPrice?: number
// 应付金额（总） // 应付金额（总）
payPrice: number payPrice?: number
// 配送模板编号 // 配送模板编号
deliveryTemplateId?: number deliveryTemplateId?: number
// 发货物流公司编号 // 发货物流公司编号
@ -57,35 +57,37 @@ export interface TradeOrderPageItemRespVO {
// 发货物流单号 // 发货物流单号
logisticsNo?: string logisticsNo?: string
// 发货状态 // 发货状态
deliveryStatus: number deliveryStatus?: number
// 发货时间 // 发货时间
deliveryTime?: Date deliveryTime?: Date
// 收货时间 // 收货时间
receiveTime?: Date receiveTime?: Date
// 收件人名称 // 收件人名称
receiverName: string receiverName?: string
// 收件人手机 // 收件人手机
receiverMobile: string receiverMobile?: string
// 收件人地区编号 // 收件人地区编号
receiverAreaId: number receiverAreaId?: number
// 收件人邮编 // 收件人邮编
receiverPostCode: number receiverPostCode?: number
// 收件人详细地址 // 收件人详细地址
receiverDetailAddress: string receiverDetailAddress?: string
// 售后状态 // 售后状态
afterSaleStatus?: number afterSaleStatus?: number
// 退款金额 // 退款金额
refundPrice: number refundPrice?: number
// 优惠劵编号 // 优惠劵编号
couponId?: number couponId?: number
// 优惠劵减免金额 // 优惠劵减免金额
couponPrice: number couponPrice?: number
// 积分抵扣的金额 // 积分抵扣的金额
pointPrice: number pointPrice?: number
//收件人地区名字 //收件人地区名字
receiverAreaName: string receiverAreaName?: string
// 订单项列表 // 订单项列表
items: TradeOrderItemBaseVO[] items?: TradeOrderItemBaseVO[]
//用户信息
user?: MemberUserRespDTO
} }
// TODO @xiaobai：这个改成 TradeOrderItemRespVO // TODO @xiaobai：这个改成 TradeOrderItemRespVO
@ -98,70 +100,70 @@ export interface TradeOrderItemBaseVO {
/** /**
* 编号 * 编号
*/ */
id: number id?: number
/** /**
* 用户编号 * 用户编号
*/ */
userId: number userId?: number
/** /**
* 订单编号 * 订单编号
*/ */
orderId: number orderId?: number
// ========== 商品基本信息 ========== // ========== 商品基本信息 ==========
/** /**
* 商品 SPU 编号 * 商品 SPU 编号
*/ */
spuId: number spuId?: number
/** /**
* 商品 SPU 名称 * 商品 SPU 名称
*/ */
spuName: string spuName?: string
/** /**
* 商品 SKU 编号 * 商品 SKU 编号
*/ */
skuId: number skuId?: number
/** /**
* 商品图片 * 商品图片
*/ */
picUrl: string picUrl?: string
/** /**
* 购买数量 * 购买数量
*/ */
count: number count?: number
// ========== 价格 + 支付基本信息 ========== // ========== 价格 + 支付基本信息 ==========
/** /**
* 商品原价（总） * 商品原价（总）
*/ */
originalPrice: number originalPrice?: number
/** /**
* 商品原价（单） * 商品原价（单）
*/ */
originalUnitPrice: number originalUnitPrice?: number
/** /**
* 商品优惠（总） * 商品优惠（总）
*/ */
discountPrice: number discountPrice?: number
/** /**
* 商品实付金额（总） * 商品实付金额（总）
*/ */
payPrice: number payPrice?: number
/** /**
* 子订单分摊金额（总） * 子订单分摊金额（总）
*/ */
orderPartPrice: number orderPartPrice?: number
/** /**
* 分摊后子订单实付金额（总） * 分摊后子订单实付金额（总）
*/ */
orderDividePrice: number orderDividePrice?: number
// ========== 营销基本信息 ========== // ========== 营销基本信息 ==========
// TODO 芋艿：在捉摸一下 // TODO 芋艿：在捉摸一下
// ========== 售后基本信息 ========== // ========== 售后基本信息 ==========
/** /**
* 售后状态 * 售后状态
*/ */
afterSaleStatus: number afterSaleStatus?: number
//属性数组 //属性数组
properties: ProductPropertyValueDetailRespVO[] properties?: ProductPropertyValueDetailRespVO[]
} }
/** /**
@ -171,17 +173,56 @@ export interface ProductPropertyValueDetailRespVO {
/** /**
* 属性的编号 * 属性的编号
*/ */
propertyId: number propertyId?: number
/** /**
* 属性的名称 * 属性的名称
*/ */
propertyName: string propertyName?: string
/** /**
* 属性值的编号 * 属性值的编号
*/ */
valueId: number valueId?: number
/** /**
* 属性值的名称 * 属性值的名称
*/ */
valueName: string valueName?: string
}
/**
* 订单详情查询 请求
*/
export interface TradeOrderPageReqVO {
pageNo: number
pageSize: number
no?: string
userId?: string
userNickname?: string
userMobile?: string
receiverName?: string
receiverMobile?: string
terminal?: string
type?: number
status?: number
payChannelCode?: string
createTime?: [Date, Date]
spuName?: string
itemCount?: string
all?: string
}
//用户信息
export interface MemberUserRespDTO {
id?: number
nickname?: string
status?: number
avatar?: string
mobile?: string
}
//订单详情选中type
export interface SelectType {
queryParams: TradeOrderPageReqVO
selectTotal: number //选中的数量
selectAllFlag: boolean //全选标识
selectData: Map<number, Set<string>> //存放涉及选中得页面以及每页选中得数据订单号 全选时根据条件查询 排除取消的list订单
unSelectList: Set<string> //登记取消的list 全选标识为true 时登记单独取消的list，再次选中时排除， 全选标识为false 时清空list
} }

1137
src/views/mall/trade/order/index.vue
View File

File diff suppressed because it is too large Load Diff

141
src/views/mall/trade/order/tradeOrderDetail-crmeb.vue
View File

@ -1,141 +0,0 @@
<template>
<el-drawer v-model="drawerVisiable" width="50%">
<el-form inline="true">
<el-form-item>
<div>
<span text="普通订单:">普通订单:</span>
<span text="订单号: ">1111112546</span>
</div>
</el-form-item>
<el-form-item> <el-button type="primary" icon="search">发送货</el-button></el-form-item>
<el-form-item><el-button type="success" icon="search">小票打印</el-button> </el-form-item>
<el-form-item>
<el-dropdown @command="handleCommand">
<el-button> ... </el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="remark">订单备注</el-dropdown-item>
<el-dropdown-item command="b">立即退款</el-dropdown-item>
<el-dropdown-item command="print">打印配货单</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-form-item>
</el-form>
<el-descriptions class="m-10" direction="vertical" column="4">
<el-descriptions-item label="订单状态">未发货TODO</el-descriptions-item>
<el-descriptions-item label="实际支付">1000 元 TODO</el-descriptions-item>
<el-descriptions-item label="支付方式">手机支付</el-descriptions-item>
<el-descriptions-item label="支付时间"> {{ formatDate(Date()) }}</el-descriptions-item>
</el-descriptions>
<el-tabs @tab-click="handleClick">
<el-tab-pane label="订单信息">
<el-descriptions title="订单信息">
<el-descriptions-item label="用户UID: ">kooriookami</el-descriptions-item>
<el-descriptions-item label="用户昵称: ">18100000000</el-descriptions-item>
<el-descriptions-item label="绑定电话: ">Suzhou</el-descriptions-item>
</el-descriptions>
<el-divider border-style="dashed" />
<el-descriptions title="收货信息" column="1">
<el-descriptions-item label="收货人: ">kooriookami</el-descriptions-item>
<el-descriptions-item label="收货电话: ">18100000000</el-descriptions-item>
<el-descriptions-item label="收货地址: ">{{ detailData }}</el-descriptions-item>
</el-descriptions>
<el-divider border-style="dashed" />
<el-descriptions title="供应商信息">
<el-descriptions-item label="供应商: ">kooriookami</el-descriptions-item>
<el-descriptions-item label="供应商姓名: ">18100000000</el-descriptions-item>
<el-descriptions-item label="联系方式: ">Suzhou</el-descriptions-item>
<el-descriptions-item label="供应商邮箱: ">Suzhou</el-descriptions-item>
</el-descriptions>
<el-divider border-style="dashed" />
<el-descriptions title="订单信息">
<el-descriptions-item label="创建时间: "> {{ formatDate(Date()) }} </el-descriptions-item>
<el-descriptions-item label="商品总数: ">18100000000</el-descriptions-item>
<el-descriptions-item label="商品总价: ￥">200.00 元</el-descriptions-item>
<el-descriptions-item label="优惠券金额: ￥">200.00 元</el-descriptions-item>
<el-descriptions-item label="积分抵扣: ">200.00</el-descriptions-item>
<el-descriptions-item label="支付邮费: ￥">200.00 元</el-descriptions-item>
<el-descriptions-item label="会员商品优惠: ￥">200.00 元</el-descriptions-item>
<el-descriptions-item label="推广人: ￥">200.00 元</el-descriptions-item>
<el-descriptions-item label="支付时间: "> {{ formatDate(Date()) }} </el-descriptions-item>
<el-descriptions-item label="支付方式: ￥">200.00 元</el-descriptions-item>
</el-descriptions>
<el-divider v-if="true" border-style="dashed" />
<el-descriptions v-if="true" title="订单备注">
<el-descriptions-item label="备注: ">TODO</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
<el-tab-pane label="商品信息">
<el-descriptions title="商品信息">
<el-descriptions-item label="用户UID: ">kooriookami</el-descriptions-item>
<el-descriptions-item label="用户昵称: ">18100000000</el-descriptions-item>
<el-descriptions-item label="绑定电话: ">Suzhou</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
<el-tab-pane label="订单记录">
<el-descriptions title="订单记录">
<el-descriptions-item label="用户UID: ">kooriookami</el-descriptions-item>
<el-descriptions-item label="用户昵称: ">18100000000</el-descriptions-item>
<el-descriptions-item label="绑定电话: ">Suzhou</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
<el-tab-pane label="发货记录">
<el-descriptions title="发货记录">
<el-descriptions-item label="用户UID: ">kooriookami</el-descriptions-item>
<el-descriptions-item label="用户昵称: ">18100000000</el-descriptions-item>
<el-descriptions-item label="绑定电话: ">Suzhou</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
</el-tabs>
</el-drawer>
</template>
<script lang="ts" name="tradeOrderDetail-crmeb" setup>
import { formatDate } from '@/utils/formatTime'
import * as TradeOrderApi from '@/api/mall/trade/order'
const message = useMessage() // 消息弹窗
const drawerVisiable = ref(false)
let detailData = reactive<any>({
items: [],
user: {}
}) //详情数据
const handleClick = () => {}
const handleCommand = (command: string) => {
console.log(command)
}
//暂考虑一次性加载详情页面所有数据
const queryDetail = async (no: string) => {
try {
const res = await TradeOrderApi.getOrderDetail(no)
console.log(res)
detailData.value = res
console.log(detailData.value)
} catch {
message.error('获取详情数据失败')
}
}
//显示详情
const show = async (no: string) => {
drawerVisiable.value = true
try {
queryDetail(no)
} finally {
}
}
defineExpose({ show }) //显示详情方法
</script>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409eff;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>

709
src/views/mall/trade/order/tradeOrderDetail.vue
View File

@ -1,357 +1,352 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 订单信息 --> <!-- 订单信息 -->
<el-descriptions title="订单信息"> <el-descriptions title="订单信息">
<el-descriptions-item label="订单号: ">{{ order.no }}</el-descriptions-item> <el-descriptions-item label="订单号: ">{{ order.no }}</el-descriptions-item>
<el-descriptions-item label="配送方式: ">物流配送</el-descriptions-item> <el-descriptions-item label="配送方式: ">物流配送</el-descriptions-item>
<!-- TODO 芋艿：待实现 --> <!-- TODO 芋艿：待实现 -->
<el-descriptions-item label="营销活动: ">物流配送</el-descriptions-item> <el-descriptions-item label="营销活动: ">物流配送</el-descriptions-item>
<!-- TODO 芋艿：待实现 --> <!-- TODO 芋艿：待实现 -->
<el-descriptions-item label="订单类型: "> <el-descriptions-item label="订单类型: ">
<dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="order.type" /> <dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="order.type" />
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="收货人: ">{{ order.receiverName }}</el-descriptions-item> <el-descriptions-item label="收货人: ">{{ order.receiverName }}</el-descriptions-item>
<el-descriptions-item label="买家留言: ">{{ order.userRemark }}</el-descriptions-item> <el-descriptions-item label="买家留言: ">{{ order.userRemark }}</el-descriptions-item>
<el-descriptions-item label="订单来源: "> <el-descriptions-item label="订单来源: ">
<dict-tag :type="DICT_TYPE.TERMINAL" :value="order.terminal" /> <dict-tag :type="DICT_TYPE.TERMINAL" :value="order.terminal" />
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="联系电话: ">{{ order.receiverMobile }}</el-descriptions-item> <el-descriptions-item label="联系电话: ">{{ order.receiverMobile }}</el-descriptions-item>
<el-descriptions-item label="商家备注: ">{{ order.remark }}</el-descriptions-item> <el-descriptions-item label="商家备注: ">{{ order.remark }}</el-descriptions-item>
<el-descriptions-item label="支付单号: ">{{ order.payOrderId }}</el-descriptions-item> <el-descriptions-item label="支付单号: ">{{ order.payOrderId }}</el-descriptions-item>
<el-descriptions-item label="付款方式: "> <el-descriptions-item label="付款方式: ">
<dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE_TYPE" :value="order.payChannelCode" /> <dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE_TYPE" :value="order.payChannelCode" />
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="买家: ">{{ order.user.nickname }}</el-descriptions-item> <!-- <el-descriptions-item label="买家: ">{{ order.user.nickname }}</el-descriptions-item> -->
<!-- TODO 芋艿：待实现：跳转会员 --> <!-- TODO 芋艿：待实现：跳转会员 -->
<el-descriptions-item label="收货地址: "> <el-descriptions-item label="收货地址: ">
{{ order.receiverAreaName }} " "{{ order.receiverDetailAddress }} " " {{ order.receiverAreaName }} {{ order.receiverDetailAddress }}
<el-link <el-link
v-clipboard:copy="order.receiverAreaName + ' ' + order.receiverDetailAddress" v-clipboard:copy="order.receiverAreaName + ' ' + order.receiverDetailAddress"
v-clipboard:success="clipboardSuccess" v-clipboard:success="clipboardSuccess"
icon="ep:document-copy" icon="ep:document-copy"
type="primary" type="primary"
/> />
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
<!-- 订单状态 --> <!-- 订单状态 -->
<el-descriptions title="订单状态" :column="1"> <el-descriptions title="订单状态" :column="1">
<el-descriptions-item label="订单状态: "> <el-descriptions-item label="订单状态: ">
<dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="order.status" /> <dict-tag
</el-descriptions-item> v-if="order.status !== ''"
<el-descriptions-item label-class-name="no-colon"> :type="DICT_TYPE.TRADE_ORDER_STATUS"
<el-button type="primary" size="small">调整价格</el-button> :value="order.status"
<!-- TODO 芋艿：待实现 --> />
<el-button type="primary" size="small">备注</el-button> </el-descriptions-item>
<!-- TODO 芋艿：待实现 --> <el-descriptions-item label-class-name="no-colon">
<el-button type="primary" size="small">发货</el-button> <el-button type="primary" size="small">调整价格</el-button>
<!-- TODO 芋艿：待实现 --> <!-- TODO 芋艿：待实现 -->
<el-button type="primary" size="small">关闭订单</el-button> <el-button type="primary" size="small">备注</el-button>
<!-- TODO 芋艿：待实现 --> <!-- TODO 芋艿：待实现 -->
<el-button type="primary" size="small">修改地址</el-button> <el-button type="primary" size="small">发货</el-button>
<!-- TODO 芋艿：待实现 --> <!-- TODO 芋艿：待实现 -->
<el-button type="primary" size="small">打印电子面单</el-button> <el-button type="primary" size="small">关闭订单</el-button>
<!-- TODO 芋艿：待实现 --> <!-- TODO 芋艿：待实现 -->
<el-button type="primary" size="small">打印发货单</el-button> <el-button type="primary" size="small">修改地址</el-button>
<!-- TODO 芋艿：待实现 --> <!-- TODO 芋艿：待实现 -->
<el-button type="primary" size="small">确认收货</el-button> <el-button type="primary" size="small">打印电子面单</el-button>
<!-- TODO 芋艿：待实现 --> <!-- TODO 芋艿：待实现 -->
</el-descriptions-item> <el-button type="primary" size="small">打印发货单</el-button>
<el-descriptions-item> <!-- TODO 芋艿：待实现 -->
<template #label><span style="color: red">提醒: </span></template> <el-button type="primary" size="small">确认收货</el-button>
买家付款成功后，货款将直接进入您的商户号（微信、支付宝）<br /> <!-- TODO 芋艿：待实现 -->
请及时关注你发出的包裹状态，确保可以配送至买家手中 <br /> </el-descriptions-item>
如果买家表示没收到货或货物有问题，请及时联系买家处理，友好协商 <el-descriptions-item>
</el-descriptions-item> <template #label><span style="color: red">提醒: </span></template>
</el-descriptions> 买家付款成功后，货款将直接进入您的商户号（微信、支付宝）<br />
请及时关注你发出的包裹状态，确保可以配送至买家手中 <br />
<!-- 物流信息 TODO --> 如果买家表示没收到货或货物有问题，请及时联系买家处理，友好协商
</el-descriptions-item>
<!-- 商品信息 --> </el-descriptions>
<el-descriptions title="商品信息" column="6">
<el-descriptions-item labelClassName="no-colon"> <!-- 物流信息 TODO -->
<el-row :gutter="20">
<el-col :span="10"> <!-- 商品信息 -->
<el-table :data="order.items" border> <el-descriptions title="商品信息">
<el-table-column prop="spuName" label="商品" width="400"> <el-descriptions-item labelClassName="no-colon">
<template #default="{ row }"> <el-row :gutter="20">
{{ row.spuName }} <el-col :span="15">
<el-tag <el-table :data="order.items" border>
size="medium" <el-table-column prop="spuName" label="商品" width="auto">
v-for="property in row.properties" <template #default="{ row }">
:key="property.propertyId" {{ row.spuName }}
> <el-tag
{{ property.propertyName }}：{{ property.valueName }} size="medium"
</el-tag> v-for="property in row.properties"
</template> :key="property.propertyId"
</el-table-column> >
<el-table-column prop="originalUnitPrice" label="单价(元)" width="180"> {{ property.propertyName }}: {{ property.valueName }}</el-tag
<template #default="{ row }"> >
￥{{ (row.originalUnitPrice / 100.0).toFixed(2) }} </template>
</template> </el-table-column>
</el-table-column> <el-table-column prop="price" label="商品原价(元)" width="150">
<el-table-column prop="count" label="数量" width="100" /> <template #default="{ row }"> ￥{{ (row.price / 100.0).toFixed(2) }} </template>
<el-table-column prop="originalPrice" label="小计（元）" width="100"> </el-table-column>
<template #default="{ row }"> <el-table-column prop="count" label="数量" width="100" />
￥{{ (row.originalPrice / 100.0).toFixed(2) }} <el-table-column prop="payPrice" label="合计(元)" width="150">
</template> <template #default="{ row }"> ￥{{ (row.payPrice / 100.0).toFixed(2) }} </template>
</el-table-column> </el-table-column>
<el-table-column prop="afterSaleStatus" label="退款状态"> <el-table-column prop="afterSaleStatus" label="售后状态" width="auto">
<template #default="{ row }"> <template #default="{ row }">
<dict-tag <dict-tag
:type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS" :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
:value="row.afterSaleStatus" :value="row.afterSaleStatus"
/> />
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-col> </el-col>
<el-col :span="10" /> <el-col :span="10" />
</el-row> </el-row>
</el-descriptions-item> </el-descriptions-item>
<!-- 占位 --> <!-- 占位 -->
<!-- <el-descriptions-item v-for="item in 5" label-class-name="no-colon" :key="item" /> --> <!-- <el-descriptions-item v-for="item in 5" label-class-name="no-colon" :key="item" /> -->
</el-descriptions> </el-descriptions>
<el-descriptions column="6"> <el-descriptions column="6">
<el-descriptions-item label="商品总额: "> <el-descriptions-item label="商品总额: ">
￥{{ (order.originalPrice / 100.0).toFixed(2) }} ￥{{ parseFloat((order.totalPrice / 100.0) as unknown as string).toFixed(2) }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="运费金额: "> <el-descriptions-item label="运费金额: ">
￥{{ (order.deliveryPrice / 100.0).toFixed(2) }} ￥{{ parseFloat((order.deliveryPrice / 100.0) as unknown as string).toFixed(2) }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="订单调价: "> <el-descriptions-item label="订单调价: ">
￥{{ (order.adjustPrice / 100.0).toFixed(2) }} ￥{{
</el-descriptions-item> parseFloat((order.adjustPrice / 100.0) as unknown as string).toFixed(2)
<el-descriptions-item> }}</el-descriptions-item
<template #label><span style="color: red">商品优惠: </span></template> >
￥{{ ((order.originalPrice - order.originalPrice) / 100.0).toFixed(2) }} <el-descriptions-item>
</el-descriptions-item> <template #label><span style="color: red">商品优惠: </span></template>
<el-descriptions-item> <!-- 没理解TODO order.totalPrice - order.totalPrice -->
<template #label><span style="color: red">订单优惠: </span></template> ￥{{
￥{{ (order.discountPrice / 100.0).toFixed(2) }} parseFloat((order.totalPrice - order.totalPrice / 100.0) as unknown as string).toFixed(2)
</el-descriptions-item> }}
<el-descriptions-item> </el-descriptions-item>
<template #label><span style="color: red">积分抵扣: </span></template> <el-descriptions-item>
￥{{ (order.pointPrice / 100.0).toFixed(2) }} <template #label><span style="color: red">订单优惠: </span></template>
</el-descriptions-item> ￥{{ parseFloat((order.discountPrice / 100.0) as unknown as string).toFixed(2) }}
</el-descriptions-item>
<el-descriptions-item v-for="item in 5" label-class-name="no-colon" :key="item" /> <el-descriptions-item>
<!-- 占位 --> <template #label><span style="color: red">积分抵扣: </span></template>
<el-descriptions-item label="应付金额: "> ￥{{ parseFloat((order.pointPrice / 100.0) as unknown as string).toFixed(2) }}
￥{{ (order.payPrice / 100.0).toFixed(2) }} </el-descriptions-item>
</el-descriptions-item>
</el-descriptions> <el-descriptions-item v-for="item in 5" label-class-name="no-colon" :key="item" />
<!-- 占位 -->
<div v-for="group in detailGroups" :key="group.title"> <el-descriptions-item label="应付金额: ">
<el-descriptions v-bind="group.groupProps" :title="group.title"> ￥{{ (order.payPrice / 100.0).toFixed(2) }}
<!-- 订单操作日志 --> </el-descriptions-item>
<el-descriptions-item v-if="group.key === 'orderLog'" labelClassName="no-colon"> </el-descriptions>
<el-timeline>
<el-timeline-item <div v-for="group in detailGroups" :key="group.title">
v-for="activity in detailInfo[group.key]" <el-descriptions v-bind="group.groupProps" :title="group.title">
:key="activity.timestamp" <!-- 订单操作日志 -->
:timestamp="activity.timestamp" <el-descriptions-item v-if="group.key === 'orderLog'" labelClassName="no-colon">
> <el-timeline>
{{ activity.content }} <el-timeline-item
</el-timeline-item> v-for="activity in detailInfo[group.key]"
</el-timeline> :key="activity.timestamp"
</el-descriptions-item> :timestamp="activity.timestamp"
>
<!-- 物流信息 --> {{ activity.content }}
<!-- TODO @xiaobai：改成一个包裹哈；目前只允许发货一次 --> </el-timeline-item>
<el-descriptions-item v-if="group.key === 'expressInfo'" labelClassName="no-colon"> </el-timeline>
<el-tabs type="card"> </el-descriptions-item>
<!-- 循环包裹物流信息 -->
<el-tab-pane <!-- 物流信息 -->
v-for="pkgInfo in detailInfo[group.key]" <el-descriptions-item v-if="group.key === 'expressInfo'" labelClassName="no-colon">
:key="pkgInfo.label" <!-- 循环包裹物流信息 -->
:label="pkgInfo.label" <div v-show="(pkgInfo = detailInfo[group.key]) !== null" style="border: 1px dashed">
> <!-- 包裹详情 -->
<!-- 包裹详情 --> <el-descriptions class="m-5">
<el-descriptions> <el-descriptions-item
<el-descriptions-item v-for="(pkgChild, pkgCIdx) in group.children"
v-for="(pkgChild, pkgCIdx) in group.children" v-bind="pkgChild.childProps"
v-bind="pkgChild.childProps" :key="`pkgChild_${pkgCIdx}`"
:key="`pkgChild_${pkgCIdx}`" :label="pkgChild.label"
:label="pkgChild.label" >
> <!-- 包裹商品列表 -->
<!-- 包裹商品列表 --> <template v-if="pkgChild.valueKey === 'goodsList' && pkgInfo[pkgChild.valueKey]">
<template v-if="pkgChild.valueKey === 'goodsList' && pkgInfo[pkgChild.valueKey]"> <div
<div v-for="(goodInfo, goodInfoIdx) in pkgInfo[pkgChild.valueKey]"
v-for="(goodInfo, goodInfoIdx) in pkgInfo[pkgChild.valueKey]" :key="`goodInfo_${goodInfoIdx}`"
:key="`goodInfo_${goodInfoIdx}`" style="display: flex"
style="display: flex" >
> <el-image
<el-image style="width: 100px; height: 100px; flex: none"
style="width: 100px; height: 100px; flex: none" :src="goodInfo.imgUrl"
:src="goodInfo.imgUrl" />
/> <el-descriptions :column="1">
<el-descriptions :column="1"> <el-descriptions-item labelClassName="no-colon">{{
<el-descriptions-item labelClassName="no-colon"> goodInfo.name
{{goodInfo.name }} }}</el-descriptions-item>
</el-descriptions-item> <el-descriptions-item label="数量">{{ goodInfo.count }}</el-descriptions-item>
<el-descriptions-item label="数量"> </el-descriptions>
{{goodInfo.count }} </div>
</el-descriptions-item> </template>
</el-descriptions>
</div> <!-- 包裹物流详情 -->
</template> <template v-else-if="pkgChild.valueKey === 'wlxq'">
<el-row :gutter="10">
<!-- 包裹物流详情 --> <el-col :span="6" :offset="1">
<template v-else-if="pkgChild.valueKey === 'wlxq'"> <el-timeline>
<el-row :gutter="10"> <el-timeline-item
<el-col :span="6" :offset="1"> v-for="(activity, index) in pkgInfo[pkgChild.valueKey]"
<el-timeline> :key="index"
<el-timeline-item :timestamp="activity.timestamp"
v-for="(activity, index) in pkgInfo[pkgChild.valueKey]" >
:key="index" {{ activity.content }}
:timestamp="activity.timestamp" </el-timeline-item>
> </el-timeline>
{{ activity.content }} </el-col>
</el-timeline-item> </el-row>
</el-timeline> </template>
</el-col> <template v-else>
</el-row> {{ pkgInfo[pkgChild.valueKey] }}
</template> </template>
<template v-else> </el-descriptions-item>
{{ pkgInfo[pkgChild.valueKey] }} </el-descriptions>
</template> </div>
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
</el-tab-pane> </div>
</el-tabs> </ContentWrap>
</el-descriptions-item> </template>
</el-descriptions> <script lang="ts" name="TradeOrderDetail" setup>
</div> import { DICT_TYPE } from '@/utils/dict'
</ContentWrap> import * as TradeOrderApi from '@/api/mall/trade/order'
</template> const message = useMessage() // 消息弹窗
<script lang="ts" name="TradeOrderDetail" setup>
// TODO @xiaobai：在 order 下创建一个 order/detail，然后改名为 index.vue const { query } = useRoute()
import { DICT_TYPE } from '@/utils/dict' const queryParams = reactive({
import * as TradeOrderApi from '@/api/mall/trade/order' id: query.id
const message = useMessage() // 消息弹窗 })
const dialogVisible = ref(false)
const { query } = useRoute() const loading = ref(false)
const queryParams = reactive({ const order = ref<any>({
id: query.id items: [],
}) user: {}
const dialogVisible = ref(false) }) //详情数据
const loading = ref(false)
const order = ref<any>({ const detailGroups = ref([
items: [], {
user: {} title: '物流信息',
}) // 详情数据 key: 'expressInfo',
children: [
const detailGroups = ref([ { label: '发货时间: ', valueKey: 'fhsj' },
{ { label: '物流公司: ', valueKey: 'wlgs' },
title: '物流信息', { label: '运单号: ', valueKey: 'ydh' },
key: 'expressInfo', { label: '物流状态: ', valueKey: 'wlzt', childProps: { span: 3 } },
children: [ { label: '物流详情: ', valueKey: 'wlxq' }
{ label: '发货时间: ', valueKey: 'fhsj' }, ]
{ label: '物流公司: ', valueKey: 'wlgs' }, },
{ label: '运单号: ', valueKey: 'ydh' }, {
{ label: '物流状态: ', valueKey: 'wlzt', childProps: { span: 3 } }, title: '订单操作日志',
{ label: '物流详情: ', valueKey: 'wlxq' } key: 'orderLog'
] }
}, ])
{
title: '订单操作日志', const detailInfo = ref({
key: 'orderLog' expressInfo:
} // 物流信息
]) {
label: '包裹1',
const detailInfo = ref({ name: 'bg1',
expressInfo: [ fhsj: '2022-11-03 16:50:45',
// 物流信息 wlgs: '极兔',
{ ydh: '2132123',
label: '包裹1', wlzt: '不支持此快递公司',
name: 'bg1', wlxq: [
fhsj: '2022-11-03 16:50:45', {
wlgs: '极兔', content: '正在派送途中,请您准备签收(派件人:王涛,电话:13854563814)',
ydh: '2132123', timestamp: '2018-04-15 15:00:16'
wlzt: '不支持此快递公司', },
wlxq: [ {
{ content: '快件到达 【烟台龙口东江村委营业点】',
content: '正在派送途中,请您准备签收(派件人:王涛,电话:13854563814)', timestamp: '2018-04-13 14:54:19'
timestamp: '2018-04-15 15:00:16' },
}, {
{ content: '快件已发车',
content: '快件到达 【烟台龙口东江村委营业点】', timestamp: '2018-04-11 12:55:52'
timestamp: '2018-04-13 14:54:19' },
}, {
{ content: '快件已发车',
content: '快件已发车', timestamp: '2018-04-11 12:55:52'
timestamp: '2018-04-11 12:55:52' },
}, {
{ content: '快件已发车',
content: '快件已发车', timestamp: '2018-04-11 12:55:52'
timestamp: '2018-04-11 12:55:52' }
}, ]
{ },
content: '快件已发车', orderLog: [
timestamp: '2018-04-11 12:55:52' // 订单操作日志
} {
] content: '买家【乌鸦】关闭了订单',
} timestamp: '2018-04-15 15:00:16'
], },
orderLog: [ {
// 订单操作日志 content: '买家【乌鸦】下单了',
{ timestamp: '2018-04-15 15:00:16'
content: '买家【乌鸦】关闭了订单', }
timestamp: '2018-04-15 15:00:16' ],
}, goodsInfo: [] // 商品详情tableData
{ })
content: '买家【乌鸦】下单了', //暂考虑一次性加载详情页面所有数据
timestamp: '2018-04-15 15:00:16' const getlist = async () => {
} dialogVisible.value = true
], loading.value = true
goodsInfo: [] // 商品详情tableData try {
}) const res = await TradeOrderApi.getOrderDetail(queryParams.id as unknown as number)
// 暂考虑一次性加载详情页面所有数据 TODO @xiaobai：getDetail order.value = res
const getlist = async () => { console.log(order)
dialogVisible.value = true } catch {
loading.value = true message.error('获取详情数据失败')
try { } finally {
const res = await TradeOrderApi.getOrderDetail(queryParams.id) loading.value = false
order.value = res }
} catch { }
message.error('获取详情数据失败') onMounted(async () => {
} finally { await getlist()
loading.value = false })
} const clipboardSuccess = () => {
} message.success('复制成功')
onMounted(async () => { }
await getlist() </script>
}) <style lang="scss" scoped>
const clipboardSuccess = () => { :deep(.el-descriptions) {
message.success('复制成功') &:not(:nth-child(1)) {
} margin-top: 20px;
</script> }
<style lang="scss" scoped> .el-descriptions__title {
:deep(.el-descriptions) { display: flex;
&:not(:nth-child(1)) { align-items: center;
margin-top: 20px; &::before {
} content: '';
.el-descriptions__title { display: inline-block;
display: flex; margin-right: 10px;
align-items: center; width: 3px;
&::before { height: 20px;
content: ''; background-color: #409eff;
display: inline-block; }
margin-right: 10px; }
width: 3px; .el-descriptions-item__container {
height: 20px; margin: 0 10px;
background-color: #409eff; .no-colon {
} margin: 0;
} &::after {
.el-descriptions-item__container { content: '';
margin: 0 10px; }
.no-colon { }
margin: 0; }
&::after { }
content: ''; </style>
}
}
}
}
</style>