订单列表：列表重构 ② and 完善订单详情

Author: puhui999

src/api/mall/trade/order/index.ts

@@ -1,86 +1,86 @@
 import request from '@/config/axios'
 
 export interface OrderVO {
-  id?: number // 订单编号
+  id?: number | null // 订单编号
   no?: string // 订单流水号
-  createTime?: Date // 下单时间
-  type?: number // 订单类型
-  terminal?: number // 订单来源
-  userId?: number // 用户编号
+  createTime?: Date | null // 下单时间
+  type?: number | null // 订单类型
+  terminal?: number | null // 订单来源
+  userId?: number | null // 用户编号
   userIp?: string // 用户 IP
   userRemark?: string // 用户备注
-  status?: number // 订单状态
-  productCount?: number // 购买的商品数量
-  finishTime?: Date // 订单完成时间
-  cancelTime?: Date // 订单取消时间
-  cancelType?: number // 取消类型
+  status?: number | null // 订单状态
+  productCount?: number | null // 购买的商品数量
+  finishTime?: Date | null // 订单完成时间
+  cancelTime?: Date | null // 订单取消时间
+  cancelType?: number | null // 取消类型
   remark?: string // 商家备注
-  payOrderId: number // 支付订单编号
+  payOrderId: number | null // 支付订单编号
   payed?: boolean // 是否已支付
-  payTime?: Date // 付款时间
+  payTime?: Date | null // 付款时间
   payChannelCode?: string // 支付渠道
-  originalPrice?: number // 商品原价（总）
-  orderPrice?: number // 订单原价（总）
-  discountPrice?: number // 订单优惠（总）
-  deliveryPrice?: number // 运费金额
-  adjustPrice?: number // 订单调价（总）
-  payPrice?: number // 应付金额（总）
-  deliveryType?: number // 发货方式
-  deliveryTemplateId?: number // 配送模板编号
-  logisticsId?: number // 发货物流公司编号
+  originalPrice?: number | null // 商品原价（总）
+  orderPrice?: number | null // 订单原价（总）
+  discountPrice?: number | null // 订单优惠（总）
+  deliveryPrice?: number | null // 运费金额
+  adjustPrice?: number | null // 订单调价（总）
+  payPrice?: number | null // 应付金额（总）
+  deliveryType?: number | null // 发货方式
+  deliveryTemplateId?: number | null // 配送模板编号
+  logisticsId?: number | null | null // 发货物流公司编号
   logisticsNo?: string // 发货物流单号
-  deliveryStatus?: number // 发货状态
-  deliveryTime?: Date // 发货时间
-  receiveTime?: Date // 收货时间
+  deliveryStatus?: number | null // 发货状态
+  deliveryTime?: Date | null // 发货时间
+  receiveTime?: Date | null // 收货时间
   receiverName?: string // 收件人名称
   receiverMobile?: string // 收件人手机
-  receiverAreaId?: number // 收件人地区编号
-  receiverPostCode?: number // 收件人邮编
+  receiverAreaId?: number | null // 收件人地区编号
+  receiverPostCode?: number | null // 收件人邮编
   receiverDetailAddress?: string // 收件人详细地址
-  afterSaleStatus?: number // 售后状态
-  refundPrice?: number // 退款金额
-  couponId?: number // 优惠劵编号
-  couponPrice?: number // 优惠劵减免金额
-  pointPrice?: number // 积分抵扣的金额
+  afterSaleStatus?: number | null // 售后状态
+  refundPrice?: number | null // 退款金额
+  couponId?: number | null // 优惠劵编号
+  couponPrice?: number | null // 优惠劵减免金额
+  pointPrice?: number | null // 积分抵扣的金额
   receiverAreaName?: string //收件人地区名字
   items?: OrderItemRespVO[] // 订单项列表
   //用户信息
   user?: {
-    id?: number
+    id?: number | null
     nickname?: string
     avatar?: string
   }
 }
 
 export interface OrderItemRespVO {
   // ========== 订单项基本信息 ==========
-  id?: number // 编号
-  userId?: number // 用户编号
-  orderId?: number // 订单编号
+  id?: number | null // 编号
+  userId?: number | null // 用户编号
+  orderId?: number | null // 订单编号
   // ========== 商品基本信息 ==========
-  spuId?: number // 商品 SPU 编号
+  spuId?: number | null // 商品 SPU 编号
   spuName?: string //商品 SPU 名称
-  skuId?: number // 商品 SKU 编号
+  skuId?: number | null // 商品 SKU 编号
   picUrl?: string //商品图片
-  count?: number //购买数量
+  count?: number | null //购买数量
   // ========== 价格 + 支付基本信息 ==========
-  originalPrice?: number //商品原价（总）
-  originalUnitPrice?: number //商品原价（单）
-  discountPrice?: number //商品优惠（总）
-  payPrice?: number //商品实付金额（总）
-  orderPartPrice?: number //子订单分摊金额（总）
-  orderDividePrice?: number //分摊后子订单实付金额（总）
+  originalPrice?: number | null //商品原价（总）
+  originalUnitPrice?: number | null //商品原价（单）
+  discountPrice?: number | null //商品优惠（总）
+  payPrice?: number | null //商品实付金额（总）
+  orderPartPrice?: number | null //子订单分摊金额（总）
+  orderDividePrice?: number | null //分摊后子订单实付金额（总）
   // ========== 营销基本信息 ==========
   // TODO 芋艿：在捉摸一下
   // ========== 售后基本信息 ==========
-  afterSaleStatus?: number // 售后状态
+  afterSaleStatus?: number | null // 售后状态
   properties?: ProductPropertiesVO[] //属性数组
 }
 
 export interface ProductPropertiesVO {
-  propertyId?: number // 属性的编号
+  propertyId?: number | null // 属性的编号
   propertyName?: string // 属性的名称
-  valueId?: number //属性值的编号
+  valueId?: number | null //属性值的编号
   valueName?: string // 属性值的名称
 }
 
@@ -90,8 +90,8 @@ export const getOrderPage = async (params) => {
 }
 
 // 查询交易订单详情
-export const getOrder = async (id: number) => {
-  return await request.get({ url: `/trade/order/get?id=` + id })
+export const getOrder = async (id: number | null) => {
+  return await request.get({ url: `/trade/order/get-detail?id=` + id })
 }
 
 // 新增交易订单
@@ -105,6 +105,6 @@ export const updateOrder = async (data: OrderVO) => {
 }
 
 // 删除交易订单
-export const deleteOrder = async (id: number) => {
+export const deleteOrder = async (id: number | null) => {
   return await request.delete({ url: `/trade/order/delete?id=` + id })
 }

src/router/modules/remaining.ts

@@ -5,32 +5,32 @@ const { t } = useI18n()
  * redirect: noredirect        当设置 noredirect 的时候该路由在面包屑导航中不可被点击
  * name:'router-name'          设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
  * meta : {
-    hidden: true              当设置 true 的时候该路由不会再侧边栏出现 如404，login等页面(默认 false)
+ hidden: true              当设置 true 的时候该路由不会再侧边栏出现 如404，login等页面(默认 false)
 
-    alwaysShow: true          当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式，
-                              只有一个时，会将那个子路由当做根路由显示在侧边栏，
-                              若你想不管路由下面的 children 声明的个数都显示你的根路由，
-                              你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，
-                              一直显示根路由(默认 false)
+ alwaysShow: true          当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式，
+ 只有一个时，会将那个子路由当做根路由显示在侧边栏，
+ 若你想不管路由下面的 children 声明的个数都显示你的根路由，
+ 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，
+ 一直显示根路由(默认 false)
 
-    title: 'title'            设置该路由在侧边栏和面包屑中展示的名字
+ title: 'title'            设置该路由在侧边栏和面包屑中展示的名字
 
-    icon: 'svg-name'          设置该路由的图标
+ icon: 'svg-name'          设置该路由的图标
 
-    noCache: true             如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
+ noCache: true             如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
 
-    breadcrumb: false         如果设置为false，则不会在breadcrumb面包屑中显示(默认 true)
+ breadcrumb: false         如果设置为false，则不会在breadcrumb面包屑中显示(默认 true)
 
-    affix: true               如果设置为true，则会一直固定在tag项中(默认 false)
+ affix: true               如果设置为true，则会一直固定在tag项中(默认 false)
 
-    noTagsView: true          如果设置为true，则不会出现在tag中(默认 false)
+ noTagsView: true          如果设置为true，则不会出现在tag中(默认 false)
 
-    activeMenu: '/dashboard'  显示高亮的路由路径
+ activeMenu: '/dashboard'  显示高亮的路由路径
 
-    followAuth: '/dashboard'  跟随哪个路由进行权限过滤
+ followAuth: '/dashboard'  跟随哪个路由进行权限过滤
 
-    canTo: true               设置为true即使hidden为true，也依然可以进行路由跳转(默认 false)
-  }
+ canTo: true               设置为true即使hidden为true，也依然可以进行路由跳转(默认 false)
+ }
  **/
 const remainingRouter: AppRouteRecordRaw[] = [
   {
@@ -349,7 +349,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
   {
     path: '/property',
     component: Layout,
-    name: 'property',
+    name: 'Property',
     meta: {
       hidden: true
     },
@@ -411,6 +411,22 @@ const remainingRouter: AppRouteRecordRaw[] = [
       }
     ]
   },
+  {
+    path: '/trade/order',
+    component: Layout,
+    name: 'Detail',
+    meta: {
+      hidden: true
+    },
+    children: [
+      {
+        path: 'detail/:orderId(\\d+)',
+        component: () => import('@/views/mall/trade/order/detail/index.vue'),
+        name: 'TradeOrderDetailForm',
+        meta: { title: '订单详情', icon: '', activeMenu: '/trade/trade/order' }
+      }
+    ]
+  },
   {
     path: '/pay',
     component: Layout,

src/utils/dict.ts

@@ -130,7 +130,7 @@ export enum DICT_TYPE {
   BPM_OA_LEAVE_TYPE = 'bpm_oa_leave_type',
 
   // ========== PAY 模块 ==========
-  PAY_CHANNEL_CODE = 'pay_channel_code', // 支付渠道编码类型
+  PAY_CHANNEL_CODE_TYPE = 'pay_channel_code_type', // 支付渠道编码类型
   PAY_ORDER_STATUS = 'pay_order_status', // 商户支付订单状态
   PAY_REFUND_STATUS = 'pay_refund_status', // 退款订单状态
   PAY_NOTIFY_STATUS = 'pay_notify_status', // 商户支付回调状态