trade：完善订单详情

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

@@ -41,15 +41,22 @@ export interface OrderVO {
   refundPrice?: number | null // 退款金额
   couponId?: number | null // 优惠劵编号
   couponPrice?: number | null // 优惠劵减免金额
+  vipPrice?: number | null // VIP 减免金额
   pointPrice?: number | null // 积分抵扣的金额
   receiverAreaName?: string //收件人地区名字
   items?: OrderItemRespVO[] // 订单项列表
-  // 用户信息
+  // 下单用户信息
   user?: {
     id?: number | null
     nickname?: string
     avatar?: string
   }
+  // 推广用户信息
+  brokerageUser?: {
+    id?: number | null
+    nickname?: string
+    avatar?: string
+  }
   // 订单操作日志
   logs?: OrderLogRespVO[]
 }
@@ -114,21 +121,21 @@ export interface DeliveryVO {
 }
 
 // 订单发货
-export const delivery = async (data: DeliveryVO) => {
+export const deliveryOrder = async (data: DeliveryVO) => {
   return await request.put({ url: `/trade/order/delivery`, data })
 }
 
 // 订单备注
-export const updateRemark = async (data: any) => {
+export const updateOrderRemark = async (data: any) => {
   return await request.put({ url: `/trade/order/update-remark`, data })
 }
 
 // 订单调价
-export const updatePrice = async (data: any) => {
+export const updateOrderPrice = async (data: any) => {
   return await request.put({ url: `/trade/order/update-price`, data })
 }
 
 // 修改订单地址
-export const updateAddress = async (data: any) => {
+export const updateOrderAddress = async (data: any) => {
   return await request.put({ url: `/trade/order/update-address`, data })
 }

src/utils/constants.ts

@@ -375,3 +375,17 @@ export const BrokerageWithdrawTypeEnum = {
     name: '支付宝'
   }
 }
+
+/**
+ * 配送方式枚举
+ */
+export const DeliveryTypeEnum = {
+  EXPRESS: {
+    type: 1,
+    name: '快递发货'
+  },
+  PICK_UP: {
+    type: 2,
+    name: '到店自提'
+  }
+}

src/views/mall/trade/order/detail/index.vue

@@ -3,35 +3,21 @@
     <!-- 订单信息 -->
     <el-descriptions title="订单信息">
       <el-descriptions-item label="订单号: ">{{ formData.no }}</el-descriptions-item>
-      <el-descriptions-item label="配送方式: ">
+      <el-descriptions-item label="买家: ">{{ formData?.user?.nickname }}</el-descriptions-item>
-        <dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="formData.deliveryType!" />
-      </el-descriptions-item>
-      <!-- TODO 营销活动待实现     -->
-      <el-descriptions-item label="营销活动: ">秒杀活动</el-descriptions-item>
       <el-descriptions-item label="订单类型: ">
         <dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="formData.type!" />
       </el-descriptions-item>
-      <el-descriptions-item label="收货人: ">{{ formData.receiverName }}</el-descriptions-item>
-      <el-descriptions-item label="买家留言: ">{{ formData.userRemark }}</el-descriptions-item>
       <el-descriptions-item label="订单来源: ">
         <dict-tag :type="DICT_TYPE.TERMINAL" :value="formData.terminal!" />
       </el-descriptions-item>
-      <el-descriptions-item label="联系电话: ">{{ formData.receiverMobile }}</el-descriptions-item>
+      <el-descriptions-item label="买家留言: ">{{ formData.userRemark }}</el-descriptions-item>
       <el-descriptions-item label="商家备注: ">{{ formData.remark }}</el-descriptions-item>
       <el-descriptions-item label="支付单号: ">{{ formData.payOrderId }}</el-descriptions-item>
       <el-descriptions-item label="付款方式: ">
         <dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="formData.payChannelCode!" />
       </el-descriptions-item>
-      <!-- <el-descriptions-item label="买家: ">{{ formData.user.nickname }}</el-descriptions-item> -->
+      <el-descriptions-item label="推广用户: " v-if="formData.brokerageUser">
-      <!-- TODO @puhui999：待实现：跳转会员 -->
+        {{ formData.brokerageUser?.nickname }}
-      <el-descriptions-item label="收货地址: ">
-        {{ formData.receiverAreaName }} {{ formData.receiverDetailAddress }}
-        <el-link
-          v-clipboard:copy="formData.receiverAreaName + ' ' + formData.receiverDetailAddress"
-          v-clipboard:success="clipboardSuccess"
-          icon="ep:document-copy"
-          type="primary"
-        />
       </el-descriptions-item>
     </el-descriptions>
 
@@ -45,10 +31,18 @@
           调整价格
         </el-button>
         <el-button type="primary" @click="remark">备注</el-button>
-        <el-button v-if="formData.status! === 10" type="primary" @click="delivery">
+        <el-button
+          v-if="formData.status! === 10 && formData.deliveryType === DeliveryTypeEnum.EXPRESS.type"
+          type="primary"
+          @click="delivery"
+        >
           发货
         </el-button>
-        <el-button v-if="formData.status! === 10" type="primary" @click="updateAddress">
+        <el-button
+          v-if="formData.status! === 10 && formData.deliveryType === DeliveryTypeEnum.EXPRESS.type"
+          type="primary"
+          @click="updateAddress"
+        >
           修改地址
         </el-button>
       </el-descriptions-item>
@@ -95,7 +89,8 @@
         </el-row>
       </el-descriptions-item>
     </el-descriptions>
-    <el-descriptions :column="6">
+    <el-descriptions :column="4">
+      <!-- 第一层 -->
       <el-descriptions-item label="商品总额: ">
         {{ fenToYuan(formData.totalPrice!) }} 元
       </el-descriptions-item>
@@ -105,43 +100,60 @@
       <el-descriptions-item label="订单调价: ">
         {{ fenToYuan(formData.adjustPrice!) }} 元
       </el-descriptions-item>
-
+      <el-descriptions-item v-for="item in 1" :key="item" label-class-name="no-colon" />
+      <!-- 第二层 -->
       <el-descriptions-item>
-        <template #label><span style="color: red">商品优惠: </span></template>
+        <template #label><span style="color: red">优惠劵优惠: </span></template>
         {{ fenToYuan(formData.couponPrice!) }} 元
       </el-descriptions-item>
       <el-descriptions-item>
-        <template #label><span style="color: red">订单优惠: </span></template>
+        <template #label><span style="color: red">VIP 优惠: </span></template>
+        {{ fenToYuan(formData.vipPrice!) }} 元
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label><span style="color: red">活动优惠: </span></template>
         {{ fenToYuan(formData.discountPrice!) }} 元
       </el-descriptions-item>
       <el-descriptions-item>
         <template #label><span style="color: red">积分抵扣: </span></template>
         {{ fenToYuan(formData.pointPrice!) }} 元
       </el-descriptions-item>
-
+      <!-- 第三层 -->
-      <el-descriptions-item v-for="item in 5" :key="item" label-class-name="no-colon" />
+      <el-descriptions-item v-for="item in 3" :key="item" label-class-name="no-colon" />
-      <!-- 占位 -->
       <el-descriptions-item label="应付金额: ">
         {{ fenToYuan(formData.payPrice!) }} 元
       </el-descriptions-item>
     </el-descriptions>
 
-    <!-- TODO 芋艿：需要改改 -->
+    <!-- 物流信息 -->
-    <el-descriptions :column="4" title="物流信息">
+    <el-descriptions :column="4" title="收货信息">
-      <el-descriptions-item label="物流公司: ">
+      <el-descriptions-item label="配送方式: ">
+        <dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="formData.deliveryType!" />
+      </el-descriptions-item>
+      <el-descriptions-item label="收货人: ">{{ formData.receiverName }}</el-descriptions-item>
+      <el-descriptions-item label="联系电话: ">{{ formData.receiverMobile }}</el-descriptions-item>
+      <!-- 快递配送 -->
+      <div v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type">
+        <el-descriptions-item label="收货地址: " v-if="formData.receiverDetailAddress">
+          {{ formData.receiverAreaName }} {{ formData.receiverDetailAddress }}
+          <el-link
+            v-clipboard:copy="formData.receiverAreaName + ' ' + formData.receiverDetailAddress"
+            v-clipboard:success="clipboardSuccess"
+            icon="ep:document-copy"
+            type="primary"
+          />
+        </el-descriptions-item>
+        <el-descriptions-item label="物流公司: " v-if="formData.logisticsId">
           {{ deliveryExpressList.find((item) => item.id === formData.logisticsId)?.name }}
         </el-descriptions-item>
-      <el-descriptions-item label="运单号: ">{{ formData.logisticsNo }}</el-descriptions-item>
+        <el-descriptions-item label="运单号: " v-if="formData.logisticsId">
-      <el-descriptions-item label="发货时间: ">
+          {{ formData.logisticsNo }}
-        {{ formatDate(formData.deliveryTime!) }}
         </el-descriptions-item>
-      <el-descriptions-item label="物流状态: ">
+        <el-descriptions-item label="发货时间: " v-if="formatDate.deliveryTime">
-        <!-- TODO 物流状态怎么获取？ -->
+          {{ formatDate(formData.deliveryTime) }}
-        <dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="formData.deliveryStatus!" />
         </el-descriptions-item>
-      <!-- 占位 4 -->
+        <el-descriptions-item v-for="item in 2" :key="item" label-class-name="no-colon" />
-      <el-descriptions-item v-for="item in 4" :key="item" label-class-name="no-colon" />
+        <el-descriptions-item label="物流详情: " v-if="expressTrackList.length > 0">
-      <el-descriptions-item label="物流详情: ">
           <el-timeline>
             <el-timeline-item
               v-for="(express, index) in expressTrackList"
@@ -152,7 +164,16 @@
             </el-timeline-item>
           </el-timeline>
         </el-descriptions-item>
+      </div>
+      <!-- 自提门店 -->
+      <div v-if="formData.deliveryType === DeliveryTypeEnum.PICK_UP.type">
+        <el-descriptions-item label="自提门店: " v-if="formData.pickUpStoreId">
+          {{ pickUpStore.name }}
+        </el-descriptions-item>
+      </div>
     </el-descriptions>
+
+    <!-- 订单日志 -->
     <el-descriptions title="订单操作日志">
       <el-descriptions-item labelClassName="no-colon">
         <el-timeline>
@@ -196,6 +217,8 @@ import OrderUpdateAddressForm from '@/views/mall/trade/order/form/OrderUpdateAdd
 import OrderUpdatePriceForm from '@/views/mall/trade/order/form/OrderUpdatePriceForm.vue'
 import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
 import { useTagsViewStore } from '@/store/modules/tagsView'
+import { DeliveryTypeEnum } from '@/utils/constants'
+import * as DeliveryPickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
 
 defineOptions({ name: 'TradeOrderDetail' })
 
@@ -271,10 +294,20 @@ const clipboardSuccess = () => {
 /** 初始化 **/
 const deliveryExpressList = ref([]) // 物流公司
 const expressTrackList = ref([]) // 物流详情
+const pickUpStore = ref({}) // 自提门店
 onMounted(async () => {
   await getDetail()
+  // 如果配送方式为快递，则查询物流公司
+  if (formData.value.deliveryType === DeliveryTypeEnum.EXPRESS.type) {
     deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
+    if (form.value.logisticsId) {
       expressTrackList.value = await TradeOrderApi.getExpressTrackList(formData.value.id!)
+    }
+  } else if (formData.value.deliveryType === DeliveryTypeEnum.PICK_UP.type) {
+    pickUpStore.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStore(
+      formData.value.pickUpStoreId
+    )
+  }
 })
 </script>
 <style lang="scss" scoped>
@@ -312,7 +345,7 @@ onMounted(async () => {
 
 // 时间线样式调整
 :deep(.el-timeline) {
-  margin: 10px 0px 0px 160px;
+  margin: 10px 0 0 160px;
 
   .el-timeline-item__wrapper {
     position: relative;

src/views/mall/trade/order/form/OrderDeliveryForm.vue

@@ -54,7 +54,7 @@ const open = async (row: TradeOrderApi.OrderVO) => {
   resetForm()
   // 设置数据
   copyValueToTarget(formData.value, row)
-  if (row.logisticsId === null || row.logisticsId === 0) {
+  if (row.logisticsId === 0) {
     expressType.value = 'none'
   }
   dialogVisible.value = true
@@ -73,7 +73,7 @@ const submitForm = async () => {
       data.logisticsId = 0
       data.logisticsNo = ''
     }
-    await TradeOrderApi.delivery(data)
+    await TradeOrderApi.deliveryOrder(data)
     message.success(t('common.updateSuccess'))
     dialogVisible.value = false
     // 发送操作成功的事件

src/views/mall/trade/order/form/OrderUpdateAddressForm.vue

@@ -69,7 +69,7 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     const data = unref(formData)
-    await TradeOrderApi.updateAddress(data)
+    await TradeOrderApi.updateOrderAddress(data)
     message.success(t('common.updateSuccess'))
     dialogVisible.value = false
     // 发送操作成功的事件

src/views/mall/trade/order/form/OrderUpdatePriceForm.vue

@@ -69,7 +69,7 @@ const submitForm = async () => {
     data.adjustPrice = convertToInteger(data.adjustPrice)
     delete data.payPrice
     delete data.newPayPrice
-    await TradeOrderApi.updatePrice(data)
+    await TradeOrderApi.updateOrderPrice(data)
     message.success(t('common.updateSuccess'))
     dialogVisible.value = false
     // 发送操作成功的事件

src/views/mall/trade/order/form/OrderUpdateRemarkForm.vue

@@ -49,7 +49,7 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     const data = unref(formData)
-    await TradeOrderApi.updateRemark(data)
+    await TradeOrderApi.updateOrderRemark(data)
     message.success(t('common.updateSuccess'))
     dialogVisible.value = false
     // 发送操作成功的事件