!174 订单列表和详情页面

Merge pull request !174 from 矿泉水/dev

!174 订单列表和详情页面
Merge pull request !174 from 矿泉水/dev
70a6d28e · 芋道源码 · Gitee · e1b1c134 · ca01b160 · 70a6d28e
Commit 70a6d28e authored Jun 23, 2023 by 芋道源码 Committed by Gitee Jun 23, 2023
5 changed files
--- a/.env.dev
+++ b/.env.dev
 # 开发环境
-NODE_ENV=production
+NODE_ENV=development
 VITE_DEV=false

--- a/src/api/mall/trade/order/type/orderType.ts
+++ b/src/api/mall/trade/order/type/orderType.ts
@@ -3,25 +3,25 @@
 // TODO @xiaobai：这个改成 TradeOrderRespVO
 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
-  userIp: string
+  userIp?: string
  // 用户备注
-  userRemark: string
+  userRemark?: string
  // 订单状态
-  status: number
+  status?: number
  // 购买的商品数量
-  productCount: number
+  productCount?: number
  // 订单完成时间
  finishTime?: Date
  // 订单取消时间
@@ -33,23 +33,23 @@ export interface TradeOrderPageItemRespVO {
  // 支付订单编号
  payOrderId: number
  // 是否已支付
-  payed: boolean
+  payed?: boolean
  // 付款时间
  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
  // 发货物流公司编号
@@ -57,35 +57,37 @@ export interface TradeOrderPageItemRespVO {
  // 发货物流单号
  logisticsNo?: string
  // 发货状态
-  deliveryStatus: number
+  deliveryStatus?: number
  // 发货时间
  deliveryTime?: 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
  // 退款金额
-  refundPrice: number
+  refundPrice?: number
  // 优惠劵编号
  couponId?: number
  // 优惠劵减免金额
-  couponPrice: number
+  couponPrice?: number
  // 积分抵扣的金额
-  pointPrice: number
+  pointPrice?: number
  //收件人地区名字
-  receiverAreaName: string
+  receiverAreaName?: string
  // 订单项列表
-  items: TradeOrderItemBaseVO[]
+  items?: TradeOrderItemBaseVO[]
+  //用户信息
+  user?: MemberUserRespDTO
 }
 // TODO @xiaobai：这个改成 TradeOrderItemRespVO
@@ -98,70 +100,70 @@ export interface TradeOrderItemBaseVO {
  /**
   * 编号
   */
-  id: number
+  id?: number
  /**
   * 用户编号
   */
-  userId: number
+  userId?: number
  /**
   * 订单编号
   */
-  orderId: number
+  orderId?: number
  // ========== 商品基本信息 ==========
  /**
   * 商品 SPU 编号
   */
-  spuId: number
+  spuId?: number
  /**
   * 商品 SPU 名称
   */
-  spuName: string
+  spuName?: string
  /**
   * 商品 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 芋艿：在捉摸一下
  // ========== 售后基本信息 ==========
  /**
   * 售后状态
   */
-  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
 }
--- a/src/views/mall/trade/order/index.vue
+++ b/src/views/mall/trade/order/index.vue
--- a/src/views/mall/trade/order/tradeOrderDetail-crmeb.vue
+++ b/src/views/mall/trade/order/tradeOrderDetail-crmeb.vue
-<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>
--- a/src/views/mall/trade/order/tradeOrderDetail.vue
+++ b/src/views/mall/trade/order/tradeOrderDetail.vue
@@ -21,10 +21,10 @@
      <el-descriptions-item label="付款方式: ">
        <dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE_TYPE" :value="order.payChannelCode" />
      </el-descriptions-item>
-      <el-descriptions-item label="买家: ">{{ order.user.nickname }}</el-descriptions-item>
+      <!-- <el-descriptions-item label="买家: ">{{ order.user.nickname }}</el-descriptions-item> -->
      <!-- TODO 芋艿：待实现：跳转会员 -->
      <el-descriptions-item label="收货地址: ">
-        {{ order.receiverAreaName }} " "{{ order.receiverDetailAddress }} " "
+        {{ order.receiverAreaName }} {{ order.receiverDetailAddress }}
        <el-link
          v-clipboard:copy="order.receiverAreaName + ' ' + order.receiverDetailAddress"
          v-clipboard:success="clipboardSuccess"
@@ -37,7 +37,11 @@
    <!-- 订单状态 -->
    <el-descriptions title="订单状态" :column="1">
      <el-descriptions-item label="订单状态: ">
-        <dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="order.status" />
+        <dict-tag
+          v-if="order.status !== ''"
+          :type="DICT_TYPE.TRADE_ORDER_STATUS"
+          :value="order.status"
+        />
      </el-descriptions-item>
      <el-descriptions-item label-class-name="no-colon">
        <el-button type="primary" size="small">调整价格</el-button>
@@ -68,12 +72,12 @@
    <!-- 物流信息 TODO -->
    <!-- 商品信息 -->
-    <el-descriptions title="商品信息" column="6">
+    <el-descriptions title="商品信息">
      <el-descriptions-item labelClassName="no-colon">
        <el-row :gutter="20">
-          <el-col :span="10">
+          <el-col :span="15">
            <el-table :data="order.items" border>
-              <el-table-column prop="spuName" label="商品" width="400">
+              <el-table-column prop="spuName" label="商品" width="auto">
                <template #default="{ row }">
                  {{ row.spuName }}
                  <el-tag
@@ -81,22 +85,18 @@
                    v-for="property in row.properties"
                    :key="property.propertyId"
                  >
-                    {{ property.propertyName }}：{{ property.valueName }}
+                    {{ property.propertyName }}: {{ property.valueName }}</el-tag
-                  </el-tag>
+                  >
                </template>
              </el-table-column>
-              <el-table-column prop="originalUnitPrice" label="单价(元)" width="180">
+              <el-table-column prop="price" label="商品原价(元)" width="150">
-                <template #default="{ row }">
+                <template #default="{ row }"> ￥{{ (row.price / 100.0).toFixed(2) }} </template>
-                  ￥{{ (row.originalUnitPrice / 100.0).toFixed(2) }}
-                </template>
              </el-table-column>
              <el-table-column prop="count" label="数量" width="100" />
-              <el-table-column prop="originalPrice" label="小计（元）" width="100">
+              <el-table-column prop="payPrice" label="合计(元)" width="150">
-                <template #default="{ row }">
+                <template #default="{ row }"> ￥{{ (row.payPrice / 100.0).toFixed(2) }} </template>
-                  ￥{{ (row.originalPrice / 100.0).toFixed(2) }}
-                </template>
              </el-table-column>
-              <el-table-column prop="afterSaleStatus" label="退款状态">
+              <el-table-column prop="afterSaleStatus" label="售后状态" width="auto">
                <template #default="{ row }">
                  <dict-tag
                    :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
@@ -114,25 +114,33 @@
    </el-descriptions>
    <el-descriptions column="6">
      <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 label="运费金额: ">
-        ￥{{ (order.deliveryPrice / 100.0).toFixed(2) }}
+        ￥{{ parseFloat((order.deliveryPrice / 100.0) as unknown as string).toFixed(2) }}
      </el-descriptions-item>
      <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) }}
+        <!-- 没理解TODO  order.totalPrice - order.totalPrice -->
+        ￥{{
+          parseFloat(((order.totalPrice - order.totalPrice) / 100.0) as unknown as string).toFixed(
+            2
+          )
+        }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label><span style="color: red">订单优惠: </span></template>
-        ￥{{ (order.discountPrice / 100.0).toFixed(2) }}
+        ￥{{ parseFloat((order.discountPrice / 100.0) as unknown as string).toFixed(2) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label><span style="color: red">积分抵扣: </span></template>
-        ￥{{ (order.pointPrice / 100.0).toFixed(2) }}
+        ￥{{ parseFloat((order.pointPrice / 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" />
@@ -160,15 +168,10 @@
        <!-- 物流信息 -->
        <!-- TODO @xiaobai：改成一个包裹哈；目前只允许发货一次 -->
        <el-descriptions-item v-if="group.key === 'expressInfo'" labelClassName="no-colon">
-          <el-tabs type="card">
          <!-- 循环包裹物流信息 -->
-            <el-tab-pane
+          <div v-show="(pkgInfo = detailInfo[group.key]) !== null" style="border: 1px dashed">
-              v-for="pkgInfo in detailInfo[group.key]"
-              :key="pkgInfo.label"
-              :label="pkgInfo.label"
-            >
            <!-- 包裹详情 -->
-              <el-descriptions>
+            <el-descriptions class="m-5">
              <el-descriptions-item
                v-for="(pkgChild, pkgCIdx) in group.children"
                v-bind="pkgChild.childProps"
@@ -187,12 +190,10 @@
                      :src="goodInfo.imgUrl"
                    />
                    <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="数量">
+                      <el-descriptions-item label="数量">{{ goodInfo.count }}</el-descriptions-item>
-                          {{goodInfo.count }}
-                        </el-descriptions-item>
                    </el-descriptions>
                  </div>
                </template>
@@ -218,8 +219,7 @@
                </template>
              </el-descriptions-item>
            </el-descriptions>
-            </el-tab-pane>
+          </div>
-          </el-tabs>
        </el-descriptions-item>
      </el-descriptions>
    </div>
@@ -261,7 +261,7 @@ const detailGroups = ref([
 ])
 const detailInfo = ref({
-  expressInfo: [
+  expressInfo:
    // 物流信息
    {
      label: '包裹1',
@@ -292,8 +292,7 @@ const detailInfo = ref({
          timestamp: '2018-04-11 12:55:52'
        }
      ]
-    }
+    },
-  ],
  orderLog: [
    // 订单操作日志
    {
@@ -307,13 +306,14 @@ const detailInfo = ref({
  ],
  goodsInfo: [] // 商品详情tableData
 })
-// 暂考虑一次性加载详情页面所有数据 TODO @xiaobai：getDetail
+// 暂考虑一次性加载详情页面所有数据 TODO
 const getlist = async () => {
  dialogVisible.value = true
  loading.value = true
  try {
-    const res = await TradeOrderApi.getOrderDetail(queryParams.id)
+    const res = await TradeOrderApi.getOrderDetail(queryParams.id as unknown as number)
    order.value = res
+    console.log(order)
  } catch {
    message.error('获取详情数据失败')
  } finally {
@@ -332,9 +332,11 @@ const clipboardSuccess = () => {
  &:not(:nth-child(1)) {
    margin-top: 20px;
  }
  .el-descriptions__title {
    display: flex;
    align-items: center;
    &::before {
      content: '';
      display: inline-block;
@@ -344,10 +346,13 @@ const clipboardSuccess = () => {
      background-color: #409eff;
    }
  }
  .el-descriptions-item__container {
    margin: 0 10px;
    .no-colon {
      margin: 0;
      &::after {
        content: '';
      }