|
|
@@ -34,13 +34,116 @@
|
|
|
:modal-config="editModalConfig"
|
|
|
@submit-click="handleSubmitClick"
|
|
|
></page-modal>
|
|
|
+
|
|
|
+ <!-- 退款记录弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="refundRecordDialogVisible"
|
|
|
+ title="退款记录"
|
|
|
+ width="80%"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <div class="refund-record-container">
|
|
|
+ <!-- 搜索区域 -->
|
|
|
+ <el-form :inline="true" :model="refundQueryParams" class="search-form">
|
|
|
+ <el-form-item label="创建时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="refundDateRange"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
|
|
|
+ @change="handleRefundDateChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="handleRefundQuery">查询</el-button>
|
|
|
+ <el-button @click="handleRefundReset">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 表格 -->
|
|
|
+ <el-table
|
|
|
+ v-loading="refundTableLoading"
|
|
|
+ :data="refundTableData"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column prop="orderId" label="订单ID" width="100" />
|
|
|
+ <el-table-column prop="orderNo" label="商户订单号" width="180" />
|
|
|
+ <el-table-column prop="type" label="退款类型" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag :type="row.type === 1 ? 'warning' : 'info'">
|
|
|
+ {{ row.type === 1 ? '主动退款' : '用户申请退款' }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="outRefundNo" label="商户退款单号" width="180" />
|
|
|
+ <el-table-column prop="refundId" label="微信支付退款单号" width="200" />
|
|
|
+ <el-table-column prop="transactionId" label="微信支付订单号" width="200" />
|
|
|
+ <el-table-column prop="reason" label="退款原因" width="150" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="acceptedTime" label="退款受理时间" width="180" />
|
|
|
+ <el-table-column prop="successTime" label="退款成功时间" width="180" />
|
|
|
+ <el-table-column prop="amount" label="退款金额(元)" width="130">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span class="money-text danger">¥ {{ formatMoney(row.amount) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="status" label="退款状态" width="120" />
|
|
|
+ <el-table-column prop="createTime" label="创建时间" width="180" />
|
|
|
+ <el-table-column label="操作" width="100">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button type="info" link @click="handleRefundRecordClick(row)">退款日志</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="refundQueryParams.pageNum"
|
|
|
+ v-model:page-size="refundQueryParams.pageSize"
|
|
|
+ :total="refundTotal"
|
|
|
+ :page-sizes="[10, 20, 30, 50]"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ background
|
|
|
+ @size-change="handleRefundSizeChange"
|
|
|
+ @current-change="handleRefundCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 退款日志抽屉 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="refundLogDrawerVisible"
|
|
|
+ title="退款日志"
|
|
|
+ :size="200"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <el-form label-width="120px">
|
|
|
+ <el-form-item label="通知请求">
|
|
|
+ <el-input
|
|
|
+ v-model="currentNotifyRequest"
|
|
|
+ type="textarea"
|
|
|
+ :rows="20"
|
|
|
+ readonly
|
|
|
+ placeholder="暂无数据"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
defineOptions({ name: "UserInfo" });
|
|
|
|
|
|
-import UserInfoAPI, { UserInfoForm, UserInfoPageQuery } from "@/api/userManage/user-info-api";
|
|
|
+import UserInfoAPI, {
|
|
|
+ UserInfoForm,
|
|
|
+ UserInfoPageQuery,
|
|
|
+ UserRefundOrderPageQuery,
|
|
|
+ UserRefundOrderPageVO,
|
|
|
+} from "@/api/userManage/user-info-api";
|
|
|
import UserFirmAPI from "@/api/toBManage/user-firm-api";
|
|
|
import type { IObject, IModalConfig, IContentConfig, ISearchConfig } from "@/components/CURD/types";
|
|
|
import usePage from "@/components/CURD/usePage";
|
|
|
@@ -176,6 +279,15 @@ const contentConfig: IContentConfig<UserInfoPageQuery> = reactive({
|
|
|
size: "small",
|
|
|
},
|
|
|
},
|
|
|
+ {
|
|
|
+ name: "refundRecord",
|
|
|
+ text: "退款记录",
|
|
|
+ attrs: {
|
|
|
+ type: "info",
|
|
|
+ link: true,
|
|
|
+ size: "small",
|
|
|
+ },
|
|
|
+ },
|
|
|
{
|
|
|
name: "refund",
|
|
|
text: "退款",
|
|
|
@@ -183,7 +295,7 @@ const contentConfig: IContentConfig<UserInfoPageQuery> = reactive({
|
|
|
type: "danger",
|
|
|
size: "small",
|
|
|
},
|
|
|
- render: (row: any) => row.balance>0,
|
|
|
+ render: (row: any) => row.balance > 0,
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
@@ -245,6 +357,9 @@ const handleOperateClick = (data: IObject) => {
|
|
|
handleEditClick(data.row, async () => {
|
|
|
return await UserInfoAPI.getFormData(data.row.id);
|
|
|
});
|
|
|
+ } else if (data.name === "refundRecord") {
|
|
|
+ // 打开退款记录弹窗
|
|
|
+ openRefundRecordDialog(data.row);
|
|
|
} else if (data.name === "refund") {
|
|
|
ElMessageBox.confirm("确认要为该用户执行退款操作吗?", "退款确认", {
|
|
|
confirmButtonText: "确认",
|
|
|
@@ -289,6 +404,99 @@ const handleSortChange = (data: { prop: string; order: string | null }) => {
|
|
|
// 带着排序参数重新查询
|
|
|
contentRef.value?.fetchPageData({ ...sortParams });
|
|
|
};
|
|
|
+
|
|
|
+// ==================== 退款记录弹窗相关 ====================
|
|
|
+const refundRecordDialogVisible = ref(false);
|
|
|
+const refundTableLoading = ref(false);
|
|
|
+const refundTableData = ref<UserRefundOrderPageVO[]>([]);
|
|
|
+const refundTotal = ref(0);
|
|
|
+const refundDateRange = ref<[string, string]>();
|
|
|
+const currentUserId = ref<number>(0);
|
|
|
+
|
|
|
+// 退款查询参数
|
|
|
+const refundQueryParams = reactive<UserRefundOrderPageQuery>({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ userId: 0,
|
|
|
+ startTime: undefined,
|
|
|
+ endTime: undefined,
|
|
|
+});
|
|
|
+
|
|
|
+// 打开退款记录弹窗
|
|
|
+const openRefundRecordDialog = (row: any) => {
|
|
|
+ currentUserId.value = row.id;
|
|
|
+ refundQueryParams.userId = row.id;
|
|
|
+ refundQueryParams.pageNum = 1;
|
|
|
+ refundQueryParams.startTime = undefined;
|
|
|
+ refundQueryParams.endTime = undefined;
|
|
|
+ refundDateRange.value = undefined;
|
|
|
+ refundRecordDialogVisible.value = true;
|
|
|
+ fetchRefundRecordList();
|
|
|
+};
|
|
|
+
|
|
|
+// 获取退款记录列表
|
|
|
+const fetchRefundRecordList = async () => {
|
|
|
+ refundTableLoading.value = true;
|
|
|
+ try {
|
|
|
+ const response = await UserInfoAPI.getUserRefundOrderList(refundQueryParams);
|
|
|
+ refundTableData.value = response.list;
|
|
|
+ refundTotal.value = response.total;
|
|
|
+ } catch (error) {
|
|
|
+ console.error("获取退款记录失败:", error);
|
|
|
+ ElMessage.error("获取退款记录失败");
|
|
|
+ } finally {
|
|
|
+ refundTableLoading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 处理日期范围变化
|
|
|
+const handleRefundDateChange = (value: [string, string] | null) => {
|
|
|
+ if (value && value.length === 2) {
|
|
|
+ refundQueryParams.startTime = value[0];
|
|
|
+ refundQueryParams.endTime = value[1];
|
|
|
+ } else {
|
|
|
+ refundQueryParams.startTime = undefined;
|
|
|
+ refundQueryParams.endTime = undefined;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 查询退款记录
|
|
|
+const handleRefundQuery = () => {
|
|
|
+ refundQueryParams.pageNum = 1;
|
|
|
+ fetchRefundRecordList();
|
|
|
+};
|
|
|
+
|
|
|
+// 重置退款查询
|
|
|
+const handleRefundReset = () => {
|
|
|
+ refundQueryParams.pageNum = 1;
|
|
|
+ refundQueryParams.startTime = undefined;
|
|
|
+ refundQueryParams.endTime = undefined;
|
|
|
+ refundDateRange.value = undefined;
|
|
|
+ fetchRefundRecordList();
|
|
|
+};
|
|
|
+
|
|
|
+// 分页大小变化
|
|
|
+const handleRefundSizeChange = (size: number) => {
|
|
|
+ refundQueryParams.pageSize = size;
|
|
|
+ refundQueryParams.pageNum = 1;
|
|
|
+ fetchRefundRecordList();
|
|
|
+};
|
|
|
+
|
|
|
+// 当前页变化
|
|
|
+const handleRefundCurrentChange = (page: number) => {
|
|
|
+ refundQueryParams.pageNum = page;
|
|
|
+ fetchRefundRecordList();
|
|
|
+};
|
|
|
+
|
|
|
+// ==================== 退款日志抽屉相关 ====================
|
|
|
+const refundLogDrawerVisible = ref(false);
|
|
|
+const currentNotifyRequest = ref("");
|
|
|
+
|
|
|
+// 处理退款记录点击
|
|
|
+const handleRefundRecordClick = (row: UserRefundOrderPageVO) => {
|
|
|
+ currentNotifyRequest.value = row.notifyRequest || "";
|
|
|
+ refundLogDrawerVisible.value = true;
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -308,4 +516,17 @@ const handleSortChange = (data: { prop: string; order: string | null }) => {
|
|
|
.money-text.warning {
|
|
|
color: #e6a23c;
|
|
|
}
|
|
|
+
|
|
|
+.refund-record-container {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.search-form {
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-pagination {
|
|
|
+ margin-top: 16px;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
</style>
|