交易：订单核销

Author: owen118z

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

@@ -1,6 +1,7 @@
 import request from '@/config/axios'
 
 export interface OrderVO {
+  // ========== 订单基本信息 ==========
   id?: number | null // 订单编号
   no?: string // 订单流水号
   createTime?: Date | null // 下单时间
@@ -15,35 +16,43 @@ export interface OrderVO {
   cancelTime?: Date | null // 订单取消时间
   cancelType?: number | null // 取消类型
   remark?: string // 商家备注
+
+  // ========== 价格 + 支付基本信息 ==========
   payOrderId?: number | null // 支付订单编号
-  payed?: boolean // 是否已支付
+  payStatus?: boolean // 是否已支付
   payTime?: Date | null // 付款时间
   payChannelCode?: string // 支付渠道
   totalPrice?: number | null // 商品原价（总）
-  orderPrice?: number | null // 订单原价（总）
   discountPrice?: number | null // 订单优惠（总）
   deliveryPrice?: number | null // 运费金额
   adjustPrice?: number | null // 订单调价（总）
   payPrice?: number | null // 应付金额（总）
+  // ========== 收件 + 物流基本信息 ==========
   deliveryType?: number | null // 发货方式
+  pickUpStoreId?: number // 自提门店编号
+  pickUpVerifyCode?: string // 自提核销码
   deliveryTemplateId?: number | null // 配送模板编号
-  logisticsId?: number | null | null // 发货物流公司编号
+  logisticsId?: number | null // 发货物流公司编号
   logisticsNo?: string // 发货物流单号
-  deliveryStatus?: number | null // 发货状态
   deliveryTime?: Date | null // 发货时间
   receiveTime?: Date | null // 收货时间
   receiverName?: string // 收件人名称
   receiverMobile?: string // 收件人手机
-  receiverAreaId?: number | null // 收件人地区编号
   receiverPostCode?: number | null // 收件人邮编
+  receiverAreaId?: number | null // 收件人地区编号
+  receiverAreaName?: string //收件人地区名字
   receiverDetailAddress?: string // 收件人详细地址
+
+  // ========== 售后基本信息 ==========
   afterSaleStatus?: number | null // 售后状态
   refundPrice?: number | null // 退款金额
+
+  // ========== 营销基本信息 ==========
   couponId?: number | null // 优惠劵编号
   couponPrice?: number | null // 优惠劵减免金额
-  vipPrice?: number | null // VIP 减免金额
   pointPrice?: number | null // 积分抵扣的金额
-  receiverAreaName?: string //收件人地区名字
+  vipPrice?: number | null // VIP 减免金额
+
   items?: OrderItemRespVO[] // 订单项列表
   // 下单用户信息
   user?: {
@@ -142,5 +151,21 @@ export const updateOrderAddress = async (data: any) => {
 
 // 订单核销
 export const pickUpOrder = async (id: number) => {
-  return await request.put({ url: `/trade/order/pick-up?id=${id}` })
+  return await request.put({ url: `/trade/order/pick-up-by-id?id=${id}` })
+}
+
+// 订单核销
+export const pickUpOrderByVerifyCode = async (pickUpVerifyCode: string) => {
+  return await request.put({
+    url: `/trade/order/pick-up-by-verify-code`,
+    params: { pickUpVerifyCode }
+  })
+}
+
+// 查询核销码对应的订单
+export const getOrderByPickUpVerifyCode = async (pickUpVerifyCode: string) => {
+  return await request.get<OrderVO>({
+    url: `/trade/order/get-by-pick-up-verify-code`,
+    params: { pickUpVerifyCode }
+  })
 }

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

@@ -54,7 +54,7 @@
           </el-button>
           <!-- 到店自提 -->
           <el-button
-            v-if="formData.deliveryType === DeliveryTypeEnum.PICK_UP.type"
+            v-if="formData.deliveryType === DeliveryTypeEnum.PICK_UP.type && showPickUp"
             type="primary"
             @click="handlePickUp"
           >
@@ -235,6 +235,7 @@ import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { DeliveryTypeEnum, TradeOrderStatusEnum } from '@/utils/constants'
 import * as DeliveryPickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
+import { propTypes } from '@/utils/propTypes'
 
 defineOptions({ name: 'TradeOrderDetail' })
 
@@ -294,8 +295,12 @@ const handlePickUp = async () => {
 
 /** 获得详情 */
 const { params } = useRoute() // 查询参数
+const props = defineProps({
+  id: propTypes.number.def(undefined), // 订单ID
+  showPickUp: propTypes.bool.def(true) // 显示核销按钮
+})
+const id = (params.id || props.id) as unknown as number
 const getDetail = async () => {
-  const id = params.id as unknown as number
   if (id) {
     const res = (await TradeOrderApi.getOrder(id)) as TradeOrderApi.OrderVO
     // 没有表单信息则关闭页面返回

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

@@ -0,0 +1,108 @@
+<template>
+  <!-- 核销对话框 -->
+  <Dialog v-model="dialogVisible" title="订单核销" width="35%">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+    >
+      <el-form-item prop="pickUpVerifyCode" label="核销码">
+        <el-input v-model="formData.pickUpVerifyCode" placeholder="请输入核销码" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button type="primary" :disabled="formLoading" @click="getOrderByPickUpVerifyCode">
+        查询
+      </el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+  <!-- 核销确认对话框 -->
+  <Dialog v-model="detailDialogVisible" title="订单详情" width="55%">
+    <TradeOrderDetail v-if="orderDetails.id" :id="orderDetails.id" :show-pick-up="false" />
+    <template #footer>
+      <el-button type="primary" :disabled="formLoading" @click="submitForm"> 确认核销 </el-button>
+      <el-button @click="detailDialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import * as TradeOrderApi from '@/api/mall/trade/order'
+import { OrderVO } from '@/api/mall/trade/order'
+import { DeliveryTypeEnum, TradeOrderStatusEnum } from '@/utils/constants'
+import TradeOrderDetail from '@/views/mall/trade/order/detail/index.vue'
+
+/** 订单核销表单 */
+defineOptions({ name: 'OrderPickUpForm' })
+
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailDialogVisible = ref(false) // 详情弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formRules = reactive({
+  pickUpVerifyCode: [{ required: true, message: '核销码不能为空', trigger: 'blur' }]
+})
+const formData = ref({
+  pickUpVerifyCode: '' // 核销码
+})
+const formRef = ref() // 表单 Ref
+const orderDetails = ref<OrderVO>({})
+
+/** 打开弹窗 */
+const open = async () => {
+  resetForm()
+  dialogVisible.value = true
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 提交请求
+  formLoading.value = true
+  try {
+    await TradeOrderApi.pickUpOrderByVerifyCode(formData.value.pickUpVerifyCode)
+    message.success('核销成功')
+    detailDialogVisible.value = false
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success', true)
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    pickUpVerifyCode: '' // 核销码
+  }
+  formRef.value?.resetFields()
+}
+
+/** 查询核销码对应的订单 */
+const getOrderByPickUpVerifyCode = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+
+  formLoading.value = true
+  const data = await TradeOrderApi.getOrderByPickUpVerifyCode(formData.value.pickUpVerifyCode)
+  formLoading.value = false
+  if (data?.deliveryType !== DeliveryTypeEnum.PICK_UP.type) {
+    message.error('请输入正确的核销码')
+    return
+  }
+  if (data?.status !== TradeOrderStatusEnum.UNDELIVERED.status) {
+    message.error('订单不是待核销状态')
+    return
+  }
+  orderDetails.value = data
+  // 显示详情对话框
+  detailDialogVisible.value = true
+}
+</script>

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

@@ -156,6 +156,10 @@
           <Icon class="mr-5px" icon="ep:refresh" />
           重置
         </el-button>
+        <el-button @click="handlePickup" type="success" plain>
+          <Icon class="mr-5px" icon="ep:check" />
+          核销
+        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -347,6 +351,7 @@
   <!-- 各种操作的弹窗 -->
   <OrderDeliveryForm ref="deliveryFormRef" @success="getList" />
   <OrderUpdateRemarkForm ref="updateRemarkForm" @success="getList" />
+  <OrderPickUpForm ref="pickUpForm" @success="getList" />
 </template>
 
 <script lang="ts" setup>
@@ -361,6 +366,7 @@ import { floatToFixed2 } from '@/utils'
 import { createImageViewer } from '@/components/ImageViewer'
 import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
 import { DeliveryTypeEnum, TradeOrderStatusEnum } from '@/utils/constants'
+import OrderPickUpForm from './form/OrderPickUpForm.vue'
 
 defineOptions({ name: 'TradeOrder' })
 
@@ -521,6 +527,12 @@ watch(
   }
 )
 
+/** 显示核销表单 */
+const pickUpForm = ref()
+const handlePickup = () => {
+  pickUpForm.value.open()
+}
+
 const pickUpStoreList = ref([]) // 自提门店精简列表
 const deliveryExpressList = ref([]) // 物流公司
 /** 初始化 **/