Commit 42a7aec0 by xiaobai

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

parent e2d795f4
# 开发环境 # 开发环境
NODE_ENV=production NODE_ENV=development
VITE_DEV=false VITE_DEV=false
......
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
// 订单取消时间 // 订单取消时间
...@@ -30,23 +30,23 @@ export interface TradeOrderPageItemRespVO { ...@@ -30,23 +30,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
// 发货物流公司编号 // 发货物流公司编号
...@@ -54,35 +54,37 @@ export interface TradeOrderPageItemRespVO { ...@@ -54,35 +54,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
} }
/** /**
...@@ -94,70 +96,70 @@ export interface TradeOrderItemBaseVO { ...@@ -94,70 +96,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[]
} }
/** /**
...@@ -167,17 +169,56 @@ export interface ProductPropertyValueDetailRespVO { ...@@ -167,17 +169,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
} }
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment