订单售后列表：完善售后详情及相关操作

2023-08-29 09:48:33 +08:00 · 2023-08-29 09:48:33 +08:00 · ed739aec55
commit ed739aec55
parent 8a51c9c771
5 changed files with 134 additions and 34 deletions
--- a/src/api/mall/trade/afterSale/index.ts
+++ b/src/api/mall/trade/afterSale/index.ts
@ -1,6 +1,5 @@
 import request from '@/config/axios'

-// 定义 TradeAfterSaleDTO 接口，映射 TradeAfterSaleDO
 export interface TradeAfterSaleVO {
  id?: number | null // 售后编号，主键自增
  no?: string // 售后单号
@ -44,8 +43,27 @@ export interface ProductPropertiesVO {
 export const getAfterSalePage = async (params) => {
  return await request.get({ url: `/trade/after-sale/page`, params })
 }
-
 // 获得交易售后详情
-export const getAfterSale = async (id) => {
+export const getAfterSale = async (id: any) => {
  return await request.get({ url: `/trade/after-sale/get-detail?id=${id}` })
 }
+// 同意售后
+export const agree = async (id: any) => {
+  return await request.put({ url: `/trade/after-sale/agree?id=${id}` })
+}
+// 拒绝售后
+export const disagree = async (data: any) => {
+  return await request.put({ url: `/trade/after-sale/disagree`, data })
+}
+// 确认收货
+export const receive = async (id: any) => {
+  return await request.put({ url: `/trade/after-sale/receive?id=${id}` })
+}
+// 拒绝收货
+export const refuse = async (id: any) => {
+  return await request.put({ url: `/trade/after-sale/refuse?id=${id}` })
+}
+// 确认退款
+export const refund = async (id: any) => {
+  return await request.put({ url: `/trade/after-sale/refund?id=${id}` })
+}
--- a/src/views/mall/trade/afterSale/components/UpdateAuditReasonForm.vue
+++ b/src/views/mall/trade/afterSale/components/UpdateAuditReasonForm.vue
@ -0,0 +1,70 @@
+<template>
+  <Dialog v-model="dialogVisible" title="拒绝售后" width="45%">
+    <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
+      <el-form-item label="审批备注">
+        <el-input
+          v-model="formData.auditReason"
+          :rows="3"
+          placeholder="请输入审批备注"
+          type="textarea"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
+
+defineOptions({ name: 'UpdateAuditReasonForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: 0, // 售后订单编号
+  auditReason: '' // 审批备注
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (row: AfterSaleApi.TradeAfterSaleVO) => {
+  resetForm()
+  // 设置数据
+  formData.value.id = row.id
+  formData.value.auditReason = row.auditReason
+  dialogVisible.value = true
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = unref(formData)
+    await AfterSaleApi.disagree(data)
+    message.success(t('common.updateSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success', true)
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: 0, // 售后订单编号
+    auditReason: '' // 审批备注
+  }
+  formRef.value?.resetFields()
+}
+</script>
--- a/src/views/mall/trade/afterSale/detail/index.vue
+++ b/src/views/mall/trade/afterSale/detail/index.vue
@ -2,61 +2,61 @@
  <ContentWrap>
    <!-- 订单信息 -->
    <el-descriptions title="退款订单信息">
-      <el-descriptions-item label="订单号: ">{{ orderInfo.orderNo }}</el-descriptions-item>
+      <el-descriptions-item label="订单号: ">{{ formData.orderNo }}</el-descriptions-item>
      <el-descriptions-item label="配送方式: ">
-        <dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="orderInfo.order.deliveryType" />
+        <dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="formData.order.deliveryType" />
      </el-descriptions-item>
      <el-descriptions-item label="订单类型: ">
-        <dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="orderInfo.order.type" />
+        <dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="formData.order.type" />
      </el-descriptions-item>
      <el-descriptions-item label="收货人: ">
-        {{ orderInfo.order.receiverName }}
+        {{ formData.order.receiverName }}
      </el-descriptions-item>
      <el-descriptions-item label="买家留言: ">
-        {{ orderInfo.order.userRemark }}
+        {{ formData.order.userRemark }}
      </el-descriptions-item>
      <el-descriptions-item label="订单来源: ">
-        <dict-tag :type="DICT_TYPE.TERMINAL" :value="orderInfo.order.terminal" />
+        <dict-tag :type="DICT_TYPE.TERMINAL" :value="formData.order.terminal" />
      </el-descriptions-item>
      <el-descriptions-item label="联系电话: ">
-        {{ orderInfo.order.receiverMobile }}
+        {{ formData.order.receiverMobile }}
      </el-descriptions-item>
-      <el-descriptions-item label="商家备注: ">{{ orderInfo.order.remark }}</el-descriptions-item>
+      <el-descriptions-item label="商家备注: ">{{ formData.order.remark }}</el-descriptions-item>
      <el-descriptions-item label="支付单号: ">
-        {{ orderInfo.order.payOrderId }}
+        {{ formData.order.payOrderId }}
      </el-descriptions-item>
      <el-descriptions-item label="付款方式: ">
-        <dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="orderInfo.order.payChannelCode" />
+        <dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="formData.order.payChannelCode" />
      </el-descriptions-item>
      <!-- TODO 芋艿：待实现：跳转会员 -->
-      <!-- <el-descriptions-item label="买家: ">{{ orderInfo.user.nickname }}</el-descriptions-item> -->
+      <!-- <el-descriptions-item label="买家: ">{{ formData.user.nickname }}</el-descriptions-item> -->
    </el-descriptions>

    <!-- 售后信息 -->
    <el-descriptions title="售后信息">
-      <el-descriptions-item label="退款编号: ">{{ orderInfo.no }}</el-descriptions-item>
+      <el-descriptions-item label="退款编号: ">{{ formData.no }}</el-descriptions-item>
      <el-descriptions-item label="申请时间: ">
-        {{ formatDate(orderInfo.auditTime) }}
+        {{ formatDate(formData.auditTime) }}
      </el-descriptions-item>
      <!-- TODO 营销活动待实现     -->
      <el-descriptions-item label="售后类型: ">
-        <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_TYPE" :value="orderInfo.type" />
+        <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_TYPE" :value="formData.type" />
      </el-descriptions-item>
      <el-descriptions-item label="售后方式: ">
-        <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_WAY" :value="orderInfo.way" />
+        <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_WAY" :value="formData.way" />
      </el-descriptions-item>
-      <el-descriptions-item label="退款金额: ">{{ orderInfo.refundPrice }}</el-descriptions-item>
-      <el-descriptions-item label="退款原因: ">{{ orderInfo.applyReason }}</el-descriptions-item>
+      <el-descriptions-item label="退款金额: ">{{ formData.refundPrice }}</el-descriptions-item>
+      <el-descriptions-item label="退款原因: ">{{ formData.applyReason }}</el-descriptions-item>
      <el-descriptions-item label="补充描述: ">
-        {{ orderInfo.applyDescription }}
+        {{ formData.applyDescription }}
      </el-descriptions-item>
-      <el-descriptions-item label="凭证图片: "> {{ orderInfo.applyPicUrls }}</el-descriptions-item>
+      <el-descriptions-item label="凭证图片: "> {{ formData.applyPicUrls }}</el-descriptions-item>
    </el-descriptions>

    <!-- 退款状态 -->
    <el-descriptions :column="1" title="退款状态">
      <el-descriptions-item label="退款状态: ">
-        <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS" :value="orderInfo.status" />
+        <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS" :value="formData.status" />
      </el-descriptions-item>
      <el-descriptions-item label-class-name="no-colon">
        <el-button type="primary" @click="openForm('agree')">同意售后</el-button>
@ -64,9 +64,6 @@
        <el-button type="primary" @click="openForm('receive')">确认收货</el-button>
        <el-button type="primary" @click="openForm('refuse')">拒绝收货</el-button>
        <el-button type="primary" @click="openForm('refund')">确认退款</el-button>
-        <el-button type="primary" @click="openForm('update-refunded')">
-          更新售后订单为已退款
-        </el-button>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label><span style="color: red">提醒: </span></template>
@ -81,7 +78,7 @@
      <el-descriptions-item labelClassName="no-colon">
        <el-row :gutter="20">
          <el-col :span="15">
-            <el-table :data="orderInfo.items" border>
+            <el-table :data="formData.items" border>
              <el-table-column label="商品" prop="spuName" width="auto">
                <template #default="{ row }">
                  {{ row.spuName }}
@ -114,40 +111,56 @@
    <!-- 售后信息 -->
    <el-descriptions title="售后日志" />
  </ContentWrap>
+
+  <!-- 各种操作的弹窗 -->
+  <UpdateAuditReasonForm ref="updateAuditReasonFormRef" @success="getDetail" />
 </template>
 <script lang="ts" setup>
 import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
 import { floatToFixed2 } from '@/utils'
 import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
+import UpdateAuditReasonForm from '@/views/mall/trade/afterSale/components/UpdateAuditReasonForm.vue'

 defineOptions({ name: 'TradeOrderDetailForm' })

+const message = useMessage() // 消息弹窗
 const { params } = useRoute() // 查询参数
-const orderInfo = ref({
+const formData = ref({
  order: {}
 })
+const updateAuditReasonFormRef = ref() // 拒绝售后表单 Ref
 /** 获得详情 */
 const getDetail = async () => {
  const id = params.orderId as unknown as number
  if (id) {
-    const res = (await AfterSaleApi.getAfterSale(id)) as AfterSaleApi.TradeAfterSaleVO
-    orderInfo.value = res
+    formData.value = await AfterSaleApi.getAfterSale(id)
  }
 }
 const openForm = (type: string) => {
  switch (type) {
    case 'agree':
+      message.confirm('是否同意售后？').then(() => {
+        AfterSaleApi.agree(formData.value.id)
+      })
      break
    case 'disagree':
+      updateAuditReasonFormRef.value?.open(formData.value)
      break
    case 'receive':
+      message.confirm('是否确认收货？').then(() => {
+        AfterSaleApi.receive(formData.value.id)
+      })
      break
    case 'refuse':
+      message.confirm('是否拒绝收货？').then(() => {
+        AfterSaleApi.refuse(formData.value.id)
+      })
      break
    case 'refund':
-      break
-    case 'update-refunded':
+      message.confirm('是否确认退款？').then(() => {
+        AfterSaleApi.refund(formData.value.id)
+      })
      break
  }
 }
--- a/src/views/mall/trade/afterSale/index.vue
+++ b/src/views/mall/trade/afterSale/index.vue
@ -119,8 +119,8 @@
          <span>{{ floatToFixed2(scope.row.refundPrice) }}元</span>
        </template>
      </el-table-column>
-      <el-table-column align="center" label="买家" prop="user.nickname" />
      <!-- TODO 芋艿：未来要加个会员链接 -->
+      <el-table-column align="center" label="买家" prop="user.nickname" />
      <el-table-column align="center" label="申请时间" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ formatDate(scope.row.createTime) }}</span>
--- a/src/views/mall/trade/order/components/OrderUpdateRemarkForm.vue
+++ b/src/views/mall/trade/order/components/OrderUpdateRemarkForm.vue
@ -49,7 +49,6 @@ const submitForm = async () => {
  formLoading.value = true
  try {
    const data = unref(formData)
-    console.log(data)
    await TradeOrderApi.updateRemark(data)
    message.success(t('common.updateSuccess'))
    dialogVisible.value = false