From 4891ac46b2f5854a58d37ac66dae963cf3d4160f Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Thu, 9 Jan 2025 13:02:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E9=80=80=E6=AC=BE=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/hard/hard-after-sale.ts               |  17 ++
 .../hard/hard-after-sale/order-refund.vue     | 209 ++++++++++++++++++
 src/views/hard/hard-order/index.vue           |  15 +-
 .../components/refund/index.vue               |  16 +-
 4 files changed, 248 insertions(+), 9 deletions(-)
 create mode 100644 src/views/hard/hard-after-sale/order-refund.vue

diff --git a/src/api/hard/hard-after-sale.ts b/src/api/hard/hard-after-sale.ts
index 2b96fdc..cbc6571 100644
--- a/src/api/hard/hard-after-sale.ts
+++ b/src/api/hard/hard-after-sale.ts
@@ -1,5 +1,22 @@
 import request from "/@/utils/request"
 
+
+export function history(query?: Object) {
+  return request({
+    url: '/hard/hard-after-sale/history',
+    method: 'get',
+    params: query
+  })
+}
+
+export function detailByOrderId(query?: Object) {
+  return request({
+    url: '/hard/hard-after-sale/detail-by-order-id',
+    method: 'get',
+    params: query
+  })
+}
+
 export function pageJoin(query?: Object) {
   return request({
     url: '/hard/hard-after-sale/page',
diff --git a/src/views/hard/hard-after-sale/order-refund.vue b/src/views/hard/hard-after-sale/order-refund.vue
new file mode 100644
index 0000000..761d794
--- /dev/null
+++ b/src/views/hard/hard-after-sale/order-refund.vue
@@ -0,0 +1,209 @@
+<template>
+    <div class="layout-padding">
+        <div class="layout-padding-auto layout-padding-view">
+            <el-descriptions :column="3" border title="订单信息">
+                <el-descriptions-item :span="3" label="订单号: ">
+                    {{ globalData.detail.id }}
+                </el-descriptions-item>
+                <el-descriptions-item label="订单类型: ">
+                    <dict-tag :options="hard_order_type" :value="globalData.detail.orderType" />
+                </el-descriptions-item>
+                <el-descriptions-item label="付款方式: ">
+                    <dict-tag :options="hard_pay_type" :value="globalData.detail.payType" />
+                </el-descriptions-item>
+                <el-descriptions-item label="订单状态: ">
+                    <dict-tag :options="hard_order_status" :value="globalData.detail.orderStatus" />
+                </el-descriptions-item>
+                <el-descriptions-item label="商户: ">
+                    <span> {{ globalData.detail.merchantName }}</span>
+                </el-descriptions-item>
+                <el-descriptions-item label="设备名: ">
+                    <span> {{ globalData.detail.hardName }}</span>
+                </el-descriptions-item>
+                <el-descriptions-item label="设备类型: ">
+                    <span> {{ globalData.detail.hardType }}</span>
+                </el-descriptions-item>
+                <el-descriptions-item label="商品总价: ">
+                    <span class="color-success">
+                        {{ displayPrice(globalData.detail.totalPrice) }}
+                    </span>
+                </el-descriptions-item>
+                <el-descriptions-item label="额外支付: ">
+                    <span class="color-danger">
+                        {{ displayPrice(globalData.detail.extraPrice) }}
+                    </span>
+                </el-descriptions-item>
+                <el-descriptions-item label="实际支付: ">
+                    <span class="color-primary">
+                        {{ displayPrice(globalData.detail.payPrice) }}
+                    </span>
+                </el-descriptions-item>
+            </el-descriptions>
+            <el-descriptions :column="1" title="商品信息">
+                <el-descriptions-item labelClassName="no-colon">
+                    <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+                        :header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle">
+                        <el-table-column label="商品名" align="center" prop="productName" />
+                        <el-table-column label="商品图片" align="center" prop="code">
+                            <template #default="{ row }">
+                                <preview-image v-if="row.productPic" :src="row.productPic" />
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="商品价格" align="center" prop="ticketId">
+                            <template #default="{ row }">
+                                <span>{{ displayPrice(row.productPrice) }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="商品数量" align="center" prop="productCount" />
+                        <el-table-column label="商品总额" align="center" prop="totalPrice">
+                            <template #default="{ row }">
+                                <span>{{ displayPrice(row.totalPrice) }}</span>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-descriptions-item>
+            </el-descriptions>
+            <el-descriptions v-if="globalData.afterSaleData.id" title="售后信息">
+            </el-descriptions>
+            <el-descriptions v-if="globalData.log && globalData.log.length" title="售后日志">
+            </el-descriptions>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="order-refund">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import { useDict } from '/@/hooks/dict';
+import * as hardOrder from "/@/api/hard/hard-order";
+import * as hardCar from "/@/api/hard/hard-car";
+import * as hardAfterSaleApi from '/@/api/hard/hard-after-sale'
+import * as hardAfterSaleLogApi from '/@/api/hard/hard-after-sale-log'
+import { displayPrice } from "/@/utils/formatMoney"
+import { data } from "autoprefixer";
+
+// 定义查询字典
+const { hard_pay_type, hard_order_type, hard_order_status, hard_type } = useDict("hard_pay_type", "hard_order_type", "hard_order_status", "hard_type")
+
+const { query } = useRoute()
+
+const globalData = reactive<any>({
+    detail: {},
+    afterSaleData: {},
+    log: []
+})
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+    createdIsNeed: false,
+    queryForm: {},
+    pagination: {
+        size: 100,
+    },
+    pageList: hardCar.getCarByOrderId
+})
+
+//  table hook
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
+
+onMounted(async () => {
+    await getDetail()
+})
+
+const getDetail = async () => {
+    const id = query.id as unknown as any
+    if (!id) return
+    state.queryForm.orderId = id
+    const { data: orderData } = await hardOrder.getObj(id)
+    globalData.detail = orderData
+    getDataList()
+    const { data: afterSaleData } = await hardAfterSaleApi.detailByOrderId({ orderId: id })
+    if (afterSaleData && afterSaleData.id) {
+        globalData.afterSaleData = afterSaleData
+        const { data: log } = await hardAfterSaleApi.history(afterSaleData.id)
+        globalData.log = log
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-descriptions) {
+    &:not(:nth-child(1)) {
+        margin-top: 20px;
+    }
+
+    .el-descriptions__title {
+        display: flex;
+        align-items: center;
+
+        &::before {
+            display: inline-block;
+            width: 3px;
+            height: 20px;
+            margin-right: 10px;
+            background-color: #409eff;
+            content: '';
+        }
+    }
+
+    .el-descriptions-item__container {
+        margin: 0 10px;
+
+        .no-colon {
+            margin: 0;
+
+            &::after {
+                content: '';
+            }
+        }
+    }
+}
+
+// 时间线样式调整
+:deep(.el-timeline) {
+    margin: 10px 0 0 160px;
+
+    .el-timeline-item__wrapper {
+        position: relative;
+        top: -20px;
+
+        .el-timeline-item__timestamp {
+            position: absolute !important;
+            top: 10px;
+            left: -150px;
+        }
+    }
+
+    .el-timeline-right-content {
+        display: flex;
+        align-items: center;
+        min-height: 30px;
+        padding: 10px;
+        background-color: var(--app-content-bg-color);
+
+        &::before {
+            position: absolute;
+            top: 10px;
+            left: 13px;
+            border-color: transparent var(--app-content-bg-color) transparent transparent;
+            /* 尖角颜色，左侧朝向 */
+            border-style: solid;
+            border-width: 8px;
+            /* 调整尖角大小 */
+            content: '';
+        }
+    }
+
+    .dot-node-style {
+        position: absolute;
+        left: -5px;
+        display: flex;
+        width: 20px;
+        height: 20px;
+        font-size: 10px;
+        color: #fff;
+        border-radius: 50%;
+        justify-content: center;
+        align-items: center;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/hard/hard-order/index.vue b/src/views/hard/hard-order/index.vue
index 7fcd0aa..ad3d9a6 100644
--- a/src/views/hard/hard-order/index.vue
+++ b/src/views/hard/hard-order/index.vue
@@ -26,7 +26,7 @@
         :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
         @sort-change="sortChangeHandle">
         <el-table-column type="selection" width="40" align="center" />
-        <el-table-column type="index" label="#" width="40" />
+        <el-table-column type="index" label="#" width="50" />
         <el-table-column prop="username" label="用户" />
         <el-table-column prop="userAvatar" label="头像">
           <template #default="{ row }">
@@ -101,12 +101,13 @@
           </template>
         </el-table-column>
         <el-table-column label="支付时间" align="center" prop="payTime" width="180px" />
-        <el-table-column label="操作" width="150">
+        <el-table-column label="操作" width="200">
           <template #default="{ row }">
             <el-button icon="ShoppingCartFull" text type="primary"
               @click="shopCarDialogRef.openDialog(row.id)">购物车</el-button>
-            <el-button icon="WalletFilled" v-if="!row.payRefundId && row.orderType != 3 && row.orderType != 4 && false"
-              link type="primary" @click="formDialogRef.openDialog(row)">
+            <el-button icon="WalletFilled"
+              v-if="!row.payRefundId && row.orderType != 3 && row.orderType != 4 && ['5', '10'].includes(row.orderStatus)"
+              link type="primary" @click="doRefund(row)">
               退款
             </el-button>
             <el-button v-if="false" icon="edit-pen" text type="primary" v-auth="'hard_hardwareOrder_edit'"
@@ -135,6 +136,8 @@ import { useMessage, useMessageBox } from "/@/hooks/message";
 import { useDict } from '/@/hooks/dict';
 import { displayPrice } from "/@/utils/formatMoney"
 
+const { push } = useRouter()
+
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import('./form.vue'));
 const ShopCar = defineAsyncComponent(() => import('../components/shop-car.vue'));
@@ -187,6 +190,10 @@ const handleClick = (e: any) => {
   getDataList()
 }
 
+const doRefund = (row: any) => {
+  push({ path: '/hard/hard-after-sale/order-refund', query: { id: row.id } })
+}
+
 // 导出excel
 const exportExcel = () => {
   downBlobFile('/hard/hardwareOrder/export', Object.assign(state.queryForm, { ids: selectObjs }), 'hardwareOrder.xlsx')
diff --git a/src/views/wallet/wallet-setting/components/refund/index.vue b/src/views/wallet/wallet-setting/components/refund/index.vue
index f4341c1..82ffb9e 100644
--- a/src/views/wallet/wallet-setting/components/refund/index.vue
+++ b/src/views/wallet/wallet-setting/components/refund/index.vue
@@ -43,7 +43,7 @@ import { getObj, putObj } from "/@/api/wallet/wallet-setting"
 const dataFormRef = ref();
 const loading = ref(false)
 // 提交表单数据
-const form = reactive({
+const form = reactive<any>({
     id: undefined,
     afterSaleRefundReasons: undefined,
     afterSaleReturnReasons: undefined,
@@ -62,13 +62,12 @@ onMounted(() => {
 const onSubmit = async () => {
     const valid = await dataFormRef.value.validate().catch(() => { });
     if (!valid) return false;
-
     try {
         loading.value = true;
         const pa = {
             ...form,
-            payPrice: storePrice(form.payPrice),
-            bonusPrice: storePrice(form.bonusPrice),
+            afterSaleRefundReasons: form.afterSaleRefundReasons?.join(","),
+            afterSaleReturnReasons: form.afterSaleReturnReasons?.join(",")
         }
         await putObj(pa)
         useMessage().success('修改成功');
@@ -85,7 +84,14 @@ const getwalletRechargePackageData = (id: string) => {
     // 获取数据
     loading.value = true
     getObj(id).then((res: any) => {
-        Object.assign(form, res.data)
+        const data: any = res.data;
+        if (data.afterSaleRefundReasons) {
+            data.afterSaleRefundReasons = data.afterSaleRefundReasons?.split(",")
+        }
+        if (data.afterSaleReturnReasons) {
+            data.afterSaleReturnReasons = data.afterSaleReturnReasons?.split(",")
+        }
+        Object.assign(form, data)
     }).finally(() => {
         loading.value = false
     })