细节调整

src/api/pay/payOrder.js

@@ -2,13 +2,13 @@
  * @Author: ch
  * @Date: 2022-07-04 15:20:02
  * @LastEditors: ch
- * @LastEditTime: 2022-07-07 11:37:32
+ * @LastEditTime: 2022-07-07 14:55:24
  * @Description: file content
  */
 import request from '@/utils/request.js';
-export const detail = (mchPrimaryId) => {
+export const detail = (orderId) => {
     return request({
-        url: `/payCenter/appInfo/${mchPrimaryId}`,
+        url: `/payCenter/payOrder/${orderId}`,
         method: 'get',
     });
 };

src/api/pay/refundOrder.js

@@ -2,13 +2,13 @@
  * @Author: ch
  * @Date: 2022-07-04 15:20:02
  * @LastEditors: ch
- * @LastEditTime: 2022-07-07 11:37:26
+ * @LastEditTime: 2022-07-07 15:25:01
  * @Description: file content
  */
 import request from '@/utils/request.js';
-export const detail = (mchPrimaryId) => {
+export const detail = (refundOrderId) => {
     return request({
-        url: `/payCenter/appInfo/${mchPrimaryId}`,
+        url: `/payCenter/refundOrder/${refundOrderId}`,
         method: 'get',
     });
 };

src/store/modules/pay/payOrder.js

@@ -67,7 +67,6 @@ const mutations = {
     setMerchant: (state, data) => (state.opts.merchant = data),
     setApplication: (state, data) => (state.opts.application = data),
     setTotal: (state, data) => (state.total = data),
-    setDetail: (state, data) => (state.detail = data),
 };
 const actions = {
     async search({ rootGetters, commit }, params) {

src/store/modules/pay/refundOrder.js

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-07-04 15:21:30
  * @LastEditors: ch
- * @LastEditTime: 2022-07-07 11:56:12
+ * @LastEditTime: 2022-07-07 15:25:26
  * @Description: file content
  */
 import * as appApi from '@/api/pay/application.js';
@@ -59,7 +59,6 @@ const mutations = {
     setMerchant: (state, data) => (state.opts.merchant = data),
     setApplication: (state, data) => (state.opts.application = data),
     setTotal: (state, data) => (state.total = data),
-    setDetail: (state, data) => (state.detail = data),
 };
 const actions = {
     async search({ rootGetters, commit }, params) {

src/views/pay/application/form.vue

@@ -2,12 +2,12 @@
  * @Author: ch
  * @Date: 2022-07-04 16:42:21
  * @LastEditors: ch
- * @LastEditTime: 2022-07-06 19:01:37
+ * @LastEditTime: 2022-07-07 15:51:16
  * @Description: file content
 -->
 <template>
     <div>
-        <el-form ref="formEl" label-width="160px" :model="form" :rules="rules">
+        <el-form class="main" ref="formEl" label-width="120px" :model="form" :rules="rules">
             <el-form-item label="商户平台" prop="mchPrimaryId">
                 <el-select v-model="form.mchPrimaryId" @change="handleChangeMch" :disabled="isEdit">
                     <el-option
@@ -196,4 +196,8 @@
         router.push({ name: 'PayApplication' });
     };
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+    .main {
+        padding-right: 50px;
+    }
+</style>

src/views/pay/merchant/form/index.vue

@@ -2,12 +2,12 @@
  * @Author: ch
  * @Date: 2022-07-04 16:42:21
  * @LastEditors: ch
- * @LastEditTime: 2022-07-06 11:08:35
+ * @LastEditTime: 2022-07-07 15:50:18
  * @Description: file content
 -->
 <template>
     <div>
-        <el-form ref="formEl" label-width="160px" :model="form" :rules="rules">
+        <el-form class="main" ref="formEl" label-width="160px" :model="form" :rules="rules">
             <el-form-item label="商户平台" prop="mchCode">
                 <el-radio-group v-model="form.mchCode" :disabled="idEdit">
                     <el-radio v-for="item in opts.platform" :key="item.code" :label="item.code" border>
@@ -116,9 +116,7 @@
     };
 </script>
 <style lang="less" scoped>
-    .form-container {
+    .main {
-        .el-form {
+        padding-right: 50px;
-            // width: 100%;
-        }
     }
 </style>

src/views/pay/payOrder/detail.vue

@@ -0,0 +1,58 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-07-07 14:29:36
+ * @LastEditors: ch
+ * @LastEditTime: 2022-07-07 15:22:53
+ * @Description: file content
+-->
+<template>
+    <div class="main">
+        <el-descriptions title="支付订单信息" border :column="2">
+            <el-descriptions-item label="所属商户">{{ detail.mchInfo?.mchName }}</el-descriptions-item>
+            <el-descriptions-item label="所属应用">{{ detail.appInfo?.appName }}</el-descriptions-item>
+            <el-descriptions-item label="支付订单号">{{ detail.payOrderNo }}</el-descriptions-item>
+            <el-descriptions-item label="订单金额">{{ detail.amount }}</el-descriptions-item>
+            <el-descriptions-item label="商品标题">{{ detail.subject }}</el-descriptions-item>
+            <el-descriptions-item label="商品描述">{{ detail.body }}</el-descriptions-item>
+            <el-descriptions-item label="支付方式">{{ detail.payCodeText }}</el-descriptions-item>
+            <el-descriptions-item label="下单时间">{{ detail.createTime }}</el-descriptions-item>
+            <el-descriptions-item label="订单状态">{{ detail.payStatusText }}</el-descriptions-item>
+            <el-descriptions-item label="支付时间">{{ detail.successTime }}</el-descriptions-item>
+            <el-descriptions-item label="通知状态">{{ detail.notifyStatusText }}</el-descriptions-item>
+            <el-descriptions-item label="通知地址">{{ detail.notifyUrl }}</el-descriptions-item>
+            <el-descriptions-item label="已退款金额">{{ detail.refundAmount }}</el-descriptions-item>
+            <el-descriptions-item label="退款次数">{{ detail.refundTimes }}</el-descriptions-item>
+            <el-descriptions-item label="支付渠道订单">{{ detail.channelPayOrderNo }}</el-descriptions-item>
+            <el-descriptions-item label="支付渠道用户ID">{{ detail.channelUserId }}</el-descriptions-item>
+        </el-descriptions>
+        <el-descriptions title="渠道订单信息" :column="1" class="channel">
+            <el-descriptions-item label="发起支付参数">
+                <el-input type="textarea" rows="2" v-model="detail.channelRequest" readonly />
+            </el-descriptions-item>
+            <el-descriptions-item label="发起支付响应">
+                <el-input type="textarea" v-model="detail.channelResponse" readonly />
+            </el-descriptions-item>
+            <el-descriptions-item label="渠道支付回调">
+                <el-input type="textarea" v-model="detail.channelNotify" readonly />
+            </el-descriptions-item>
+        </el-descriptions>
+    </div>
+</template>
+<script setup>
+    const store = useStore();
+    const route = useRoute();
+    const detail = reactive({});
+    const getDetail = async () => {
+        const res = await store.dispatch('payOrder/detail', route.params.id);
+        detail = Object.assign(detail, res);
+    };
+    onActivated(getDetail);
+</script>
+<style lang="less" scoped>
+    .main {
+        padding: 30px !important;
+    }
+    .channel {
+        padding: 30px 0;
+    }
+</style>

src/views/pay/payOrder/list.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-06-15 17:29:32
  * @LastEditors: ch
- * @LastEditTime: 2022-07-07 11:29:41
+ * @LastEditTime: 2022-07-07 14:38:28
  * @Description: file content
 -->
 <template>
@@ -136,7 +136,7 @@
     };
     const handleDetail = (id) => {
         router.push({
-            name: 'UpdateApplication',
+            name: 'PayOrderDetail',
             params: {
                 id,
             },
@@ -148,19 +148,19 @@
                 label: '所属商户',
                 align: 'left',
                 slots: {
-                    default: ({ row }) => <span>{row.mchInfo?.mchName}</span>,
+                    default: ({ row }) => <span class="row-ellipsis">{row.mchInfo?.mchName}</span>,
                 },
             },
             {
                 label: '所属应用',
                 align: 'left',
                 slots: {
-                    default: ({ row }) => <span>{row.appInfo?.appName}</span>,
+                    default: ({ row }) => <span class="row-ellipsis">{row.appInfo?.appName}</span>,
                 },
             },
             {
                 label: '支付订单号',
-                width: 250,
+                minWidth: 110,
                 prop: 'payOrderNo',
                 slots: {
                     default: ({ row }) => <span>{row.payOrderNo}</span>,
@@ -189,18 +189,18 @@
             {
                 label: '下单时间',
                 prop: 'createTime',
-                width: 100,
+                minWidth: 100,
                 slots: {
                     default: ({ row }) => <span>{row.createTime}</span>,
                 },
             },
             {
                 label: '操作',
-                width: 120,
+                width: 60,
                 slots: {
                     default: ({ row }) => (
                         <div>
-                            <ElButton type="text" onClick={() => handleDetail(row.appPrimaryId)}>
+                            <ElButton type="text" onClick={() => handleDetail(row.payOrderId)}>
                                 详情
                             </ElButton>
                         </div>

src/views/pay/refundOrder/detail.vue

@@ -0,0 +1,55 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-07-07 14:29:36
+ * @LastEditors: ch
+ * @LastEditTime: 2022-07-07 15:42:44
+ * @Description: file content
+-->
+<template>
+    <div class="main">
+        <el-descriptions title="退款订单信息" border :column="2">
+            <el-descriptions-item label="所属商户">{{ detail.mchInfo?.mchName }}</el-descriptions-item>
+            <el-descriptions-item label="所属应用">{{ detail.appInfo?.appName }}</el-descriptions-item>
+            <el-descriptions-item label="支付订单号">{{ detail.payOrderInfo?.payOrderNo }}</el-descriptions-item>
+            <el-descriptions-item label="退款订单号">{{ detail.refundOrderNo }}</el-descriptions-item>
+            <el-descriptions-item label="订单金额">{{ detail.payOrderInfo?.amount }}</el-descriptions-item>
+            <el-descriptions-item label="退款金额">{{ detail.refundAmount }}</el-descriptions-item>
+            <el-descriptions-item label="退款状态">{{ detail.refundStatusText }}</el-descriptions-item>
+            <el-descriptions-item label="申请时间">{{ detail.createTime }}</el-descriptions-item>
+            <el-descriptions-item label="通知状态">{{ detail.notifyStatusText }}</el-descriptions-item>
+            <el-descriptions-item label="通知地址">{{ detail.notifyUrl }}</el-descriptions-item>
+            <el-descriptions-item label="退款渠道订单">
+                {{ detail.channelRefundOrderNo }}
+            </el-descriptions-item>
+        </el-descriptions>
+        <el-descriptions title="渠道订单信息" :column="1" class="channel">
+            <el-descriptions-item label="发起退款参数">
+                <el-input type="textarea" rows="2" v-model="detail.channelRequest" readonly />
+            </el-descriptions-item>
+            <el-descriptions-item label="发起退款响应">
+                <el-input type="textarea" v-model="detail.channelResponse" readonly />
+            </el-descriptions-item>
+            <el-descriptions-item label="渠道退款回调">
+                <el-input type="textarea" v-model="detail.channelNotify" readonly />
+            </el-descriptions-item>
+        </el-descriptions>
+    </div>
+</template>
+<script setup>
+    const store = useStore();
+    const route = useRoute();
+    const detail = reactive({});
+    const getDetail = async () => {
+        const res = await store.dispatch('refundOrder/detail', route.params.id);
+        detail = Object.assign(detail, res);
+    };
+    onActivated(getDetail);
+</script>
+<style lang="less" scoped>
+    .main {
+        padding: 30px !important;
+    }
+    .channel {
+        padding: 30px 0;
+    }
+</style>

src/views/pay/refundOrder/list.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-06-15 17:29:32
  * @LastEditors: ch
- * @LastEditTime: 2022-07-07 14:09:28
+ * @LastEditTime: 2022-07-07 15:30:13
  * @Description: file content
 -->
 <template>
@@ -129,7 +129,7 @@
     };
     const handleDetail = (id) => {
         router.push({
-            name: 'UpdateApplication',
+            name: 'RefundOrderDetail',
             params: {
                 id,
             },
@@ -141,26 +141,26 @@
                 label: '所属商户',
                 align: 'left',
                 slots: {
-                    default: ({ row }) => <span>{row.mchInfo?.mchName}</span>,
+                    default: ({ row }) => <span class="row-ellipsis">{row.mchInfo?.mchName}</span>,
                 },
             },
             {
                 label: '所属应用',
                 align: 'left',
                 slots: {
-                    default: ({ row }) => <span>{row.appInfo?.appName}</span>,
+                    default: ({ row }) => <span class="row-ellipsis">{row.appInfo?.appName}</span>,
                 },
             },
             {
                 label: '支付订单号',
-                width: 250,
+                minWidth: 110,
                 slots: {
                     default: ({ row }) => <span>{row.payOrderInfo?.payOrderNo}</span>,
                 },
             },
             {
                 label: '退款订单号',
-                width: 250,
+                minWidth: 110,
                 slots: {
                     default: ({ row }) => <span>{row.refundOrderNo}</span>,
                 },
@@ -190,18 +190,18 @@
             {
                 label: '申请时间',
                 prop: 'createTime',
-                width: 100,
+                minWidth: 100,
                 slots: {
                     default: ({ row }) => <span>{row.createTime}</span>,
                 },
             },
             {
                 label: '操作',
-                width: 120,
+                width: 60,
                 slots: {
                     default: ({ row }) => (
                         <div>
-                            <ElButton type="text" onClick={() => handleDetail(row.appPrimaryId)}>
+                            <ElButton type="text" onClick={() => handleDetail(row.refundOrderId)}>
                                 详情
                             </ElButton>
                         </div>