From 4a917cb7e7be67d5f10e7c0d852efe3865f3dc59 Mon Sep 17 00:00:00 2001
From: wangdong <1551135706@qq.com>
Date: Thu, 19 Sep 2024 18:10:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E4=BB=98=E8=AE=A2=E5=8D=95=E5=AE=A1?=
 =?UTF-8?q?=E6=A0=B8=E5=92=8C=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user/recharge.js              |  22 +++-
 src/config/router.config.js           |   5 +
 src/views/user/recharge/AuditForm.vue | 135 ++++++++++++++++++++
 src/views/user/recharge/Detail.vue    | 170 ++++++++++++++++++++++++++
 src/views/user/recharge/Index.vue     |  46 ++++++-
 5 files changed, 372 insertions(+), 6 deletions(-)
 create mode 100644 src/views/user/recharge/AuditForm.vue
 create mode 100644 src/views/user/recharge/Detail.vue

diff --git a/src/api/user/recharge.js b/src/api/user/recharge.js
index 1f09d00..8345601 100644
--- a/src/api/user/recharge.js
+++ b/src/api/user/recharge.js
@@ -2,7 +2,9 @@ import { axios } from '@/utils/request'
 
 // api接口列表
 const api = {
-  order: '/user.recharge/order'
+  order: '/user.recharge/order',
+  detail: '/user.recharge/detail',
+  audit: '/user.recharge/audit'
 }
 
 // 列表记录
@@ -13,3 +15,21 @@ export function order (params) {
     params
   })
 }
+
+// 支付订单详情
+export function detail (params) {
+  return axios({
+    url: api.detail,
+    method: 'get',
+    params
+  })
+}
+
+// 支付订单审核
+export function audit (data) {
+  return axios({
+    url: api.audit,
+    method: 'post',
+    data
+  })
+}
\ No newline at end of file
diff --git a/src/config/router.config.js b/src/config/router.config.js
index 7677ae4..8db990c 100644
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@@ -539,6 +539,11 @@ export const asyncRouterMap = [
                 component: () => import(/* webpackChunkName: "content" */ '@/views/user/recharge/Index'),
                 meta: { title: '充值记录', keepAlive: false, permission: ['/user/recharge/index'] },
               },
+              {
+                path: '/user/recharge/detail',
+                component: () => import(/* webpackChunkName: "content" */ '@/views/user/recharge/Detail'),
+                meta: { title: '充值详情', keepAlive: false, permission: ['/user/recharge/detail'] },
+              },
               {
                 path: '/user/balance/index',
                 component: () => import(/* webpackChunkName: "content" */ '@/views/user/balance/Index'),
diff --git a/src/views/user/recharge/AuditForm.vue b/src/views/user/recharge/AuditForm.vue
new file mode 100644
index 0000000..d469127
--- /dev/null
+++ b/src/views/user/recharge/AuditForm.vue
@@ -0,0 +1,135 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="560"
+    :visible="visible"
+    :isLoading="isLoading"
+    :confirmLoading="isLoading"
+    :maskClosable="false"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="isLoading">
+      <a-form v-if="visible" :form="form">
+        <a-form-item label="支付状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-tag>待支付</a-tag>
+        </a-form-item>
+        <a-form-item label="支付金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <span>{{ record.pay_price }}</span>
+        </a-form-item>
+        <a-form-item label="赠送金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <span>{{ record.gift_money }}</span>
+        </a-form-item>
+        <template v-if="record.platform === 'H5'">
+          <a-form-item label="付款人姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <span>{{ record.payer_name }}</span>
+          </a-form-item>
+          <a-form-item label="付款人电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <span>{{ record.payer_phone }}</span>
+          </a-form-item>
+          <!-- <a-form-item label="支付凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          </a-form-item> -->
+        </template>
+        <a-form-item label="审核状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-radio-group v-decorator="['audit_status', { initialValue: 10, rules: [{ required: true }] }]">
+            <a-radio :value="10">同意</a-radio>
+            <a-radio :value="20">拒绝</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item
+          v-if="form.getFieldValue('audit_status') == 20"
+          label="拒绝理由"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+        >
+        <Ueditor v-decorator="['refuse_desc', { rules: [{ required: true, message: '请输入拒绝理由' }] }]" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import * as Api from '@/api/user/recharge'
+import { Ueditor } from '@/components'
+
+export default {
+  components: {
+    Ueditor,
+  },
+  data() {
+    return {
+      // 对话框标题
+      title: '支付订单审核',
+      // 标签布局属性
+      labelCol: { span: 7 },
+      // 输入框布局属性
+      wrapperCol: { span: 13 },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      isLoading: false,
+      // 当前表单元素
+      form: this.$form.createForm(this),
+      // 退货地址列表
+      addressList: [],
+      // 当前记录
+      record: {},
+    }
+  },
+  methods: {
+    // 显示对话框
+    show(record) {
+      // 显示窗口
+      this.visible = true
+      // 当前记录
+      this.record = record
+      // 更新form元素
+      this.$nextTick(() => {
+        console.log( this.record)
+        this.$forceUpdate()
+      })
+    },
+
+    // 确认按钮
+    handleSubmit(e) {
+      e.preventDefault()
+      // 表单验证
+      const {
+        form: { validateFields },
+      } = this
+      validateFields((errors, values) => {
+        // 提交到后端api
+        !errors && this.onFormSubmit(values)
+      })
+    },
+
+    // 关闭对话框事件
+    handleCancel() {
+      this.visible = false
+      this.form.resetFields()
+    },
+
+    // 提交到后端api
+    onFormSubmit(values) {
+      this.isLoading = true
+      console.log(values);
+      Api.audit({ rechargeOrderId: this.record.order_id, form: values })
+        .then((result) => {
+          // 显示成功
+          this.$message.success(result.message, 1.5)
+          // 关闭对话框事件
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', values)
+        })
+        .finally(() => (this.isLoading = false))
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.ant-form-item {
+  margin-bottom: 10px;
+}
+</style>
diff --git a/src/views/user/recharge/Detail.vue b/src/views/user/recharge/Detail.vue
new file mode 100644
index 0000000..9aa3c59
--- /dev/null
+++ b/src/views/user/recharge/Detail.vue
@@ -0,0 +1,170 @@
+<template>
+  <div>
+    <!-- 加载中 -->
+    <a-spin :spinning="isLoading" />
+    <!-- 售后单内容 -->
+    <div v-if="!isLoading" class="detail-content">
+      <!-- 售后单信息 -->
+      <a-card :bordered="false">
+        <!-- 订单操作 -->
+        <div v-if="record.pay_status !== 20" class="detail-actions">
+          <div class="ant-descriptions-title">充值操作</div>
+          <!-- 操作栏 -->
+          <div class="actions mt-10">
+            <div>
+              <a-button type="primary" @click="handleAudit"
+                >充值审核</a-button
+              >
+            </div>
+          </div>
+        </div>
+        <!-- 售后单信息 -->
+        <a-descriptions title="充值信息">
+          <a-descriptions-item label="订单号">
+            <span
+              >{{ record.order_no }}</span
+            >
+          </a-descriptions-item>
+          <a-descriptions-item label="支付状态">
+            <a-tag>{{ record.pay_status == 20 ? '已支付' : '待支付' }}</a-tag>
+          </a-descriptions-item>
+          <a-descriptions-item label="支付金额">
+            <span>{{ record.pay_price }}</span>
+          </a-descriptions-item>
+          <a-descriptions-item label="赠送金额">
+            <span>{{ record.gift_money }}</span>
+          </a-descriptions-item>
+          <a-descriptions-item v-if="record.payer_name" label="付款人姓名">
+              <span>{{ record.payer_name }}</span>
+          </a-descriptions-item>
+          <a-descriptions-item v-if="record.payer_phone" label="付款人电话">
+              <span>{{ record.payer_phone }}</span>
+          </a-descriptions-item>
+          <a-descriptions-item v-if="record.upload_images.length > 0"  label="支付凭证">
+            <div class="image-list">
+              <div v-for="item in record.upload_images" :key="item.image_id" class="file-item">
+                <a :href="item.preview_url" target="_blank">
+                  <div class="img-cover" :style="{ backgroundImage: `url('${item.preview_url}')` }"></div>
+                </a>
+              </div>
+            </div>
+          </a-descriptions-item>
+        </a-descriptions>
+        <a-divider class="o-divider" />
+      </a-card>
+    </div>
+    <AuditForm ref="AuditForm" @handleSubmit="handleRefresh" />
+  </div>
+</template>
+
+<script>
+import * as Api from '@/api/user/recharge'
+import AuditForm from './AuditForm.vue'
+
+
+export default {
+  name: 'Index',
+  components: {
+    AuditForm,
+  },
+  data() {
+    return {
+      // 正在加载
+      isLoading: true,
+      // 支付订单ID
+      rechargeOrderId: null,
+      // 支付订单详情
+      record: {},
+    }
+  },
+  created() {
+    // 记录售后单ID
+    this.rechargeOrderId = this.$route.query.rechargeOrderId
+    // 刷新页面
+    this.handleRefresh()
+  },
+  methods: {
+    // 刷新页面
+    handleRefresh() {
+      // 获取当前记录
+      this.getDetail()
+    },
+
+    // 获取当前记录
+    getDetail() {
+      const { rechargeOrderId } = this
+      this.isLoading = true
+      console.log(Api.detail, rechargeOrderId);
+      Api.detail({ rechargeOrderId })
+        .then((result) => {
+          // 当前记录
+          this.record = result.data.detail
+          // 商品列表
+          this.goodsList = [this.record.orderGoods]
+        })
+        .finally(() => (this.isLoading = false))
+    },
+
+    // 商家审核
+    handleAudit() {
+      const { record } = this
+      this.$refs.AuditForm.show(record)
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+// 售后单详情页
+.detail-content {
+  margin-bottom: 70px;
+
+  /deep/.ant-descriptions-item > span {
+    vertical-align: middle;
+  }
+
+  /deep/.ant-descriptions-item-content {
+    padding-left: 3px;
+  }
+  .detail-actions {
+    margin-bottom: 20px;
+  }
+
+  // 商品列表
+  .goods-list {
+    /deep/table {
+      table-layout: auto;
+    }
+  }
+  // 操作栏
+  .actions {
+    button {
+      margin-right: 8px;
+    }
+  }
+
+  // 预览图列表
+  .image-list {
+    // 文件元素
+    .file-item {
+      position: relative;
+      float: left;
+      width: 120px;
+      height: 120px;
+      position: relative;
+      padding: 2px;
+      border: 1px solid #ddd;
+      background: #fff;
+      margin-right: 12px;
+      .img-cover {
+        display: block;
+        width: 100%;
+        height: 100%;
+        background: no-repeat center center / 100%;
+      }
+      &:hover {
+        border: 1px solid #a7c3de;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/user/recharge/Index.vue b/src/views/user/recharge/Index.vue
index 5a86db0..e97464e 100644
--- a/src/views/user/recharge/Index.vue
+++ b/src/views/user/recharge/Index.vue
@@ -41,6 +41,7 @@
       :columns="columns"
       :data="loadData"
       :pagination="pagination"
+      :scroll="{ x: 1450 }"
     >
       <!-- 会员信息 -->
       <span slot="user" slot-scope="text">
@@ -56,10 +57,26 @@
         <a-tag>{{ RechargeTypeEnum[text].name }}</a-tag>
       </span>
       <!-- 状态 -->
-      <span slot="pay_status" slot-scope="text">
-        <a-tag :color="text == 20 ? 'green' : ''">{{ text == 20 ? '已支付' : '待支付' }}</a-tag>
+      <span slot="pay_status" slot-scope="text, item">
+        <a-tag :color="text == 20 ? 'green' : (item.audit_status == 20 ? 'red' : '' )">{{ text == 20 ? '已支付' : (item.audit_status ? '已拒绝' : '待支付') }}</a-tag>
+      </span>
+      <!-- 状态 -->
+      <span slot="audit_status" slot-scope="text, item">
+        <a-tag :color="text == 10 ? 'green' : (text == 20 ? 'red' : '')">{{ text == 10 ? '审核通过' : (text == 20 ? '拒绝' : '') }}</a-tag>
+      </span>
+      <span class="actions" slot="actions" slot-scope="text, item">
+        <router-link
+          :to="{ path: '/user/recharge/detail', query: { rechargeOrderId: item.order_id } }"
+          >详情</router-link
+        >
+        <a
+          v-if="item.pay_status !== 20"
+          @click="handleAudit(item)"
+          >审核</a
+        >
       </span>
     </s-table>
+    <AuditForm ref="AuditForm" @handleSubmit="handleRefresh" />
   </a-card>
 </template>
 
@@ -68,12 +85,14 @@ import * as Api from '@/api/user/recharge'
 import { STable, UserItem } from '@/components/Table'
 import PayStatusEnum from '@/common/enum/recharge/order/PayStatus'
 import RechargeTypeEnum from '@/common/enum/recharge/order/RechargeType'
+import AuditForm from './AuditForm.vue';
 
 export default {
   name: 'Index',
   components: {
     STable,
-    UserItem
+    UserItem,
+    AuditForm
   },
   data () {
     return {
@@ -95,10 +114,12 @@ export default {
         {
           title: '会员信息',
           dataIndex: 'user',
+          width: '250px',
           scopedSlots: { customRender: 'user' }
         },
         {
           title: '订单号',
+          width: '150px',
           dataIndex: 'order_no'
         },
         {
@@ -124,13 +145,25 @@ export default {
           dataIndex: 'pay_status',
           scopedSlots: { customRender: 'pay_status' }
         },
+        {
+          title: '审核状态',
+          dataIndex: 'audit_status',
+          scopedSlots: { customRender: 'audit_status' }
+        },
         {
           title: '付款时间',
+          width: '150px',
           dataIndex: 'pay_time'
         },
         {
           title: '创建时间',
+          width: '150px',
           dataIndex: 'create_time'
+        },
+        {
+          title: '操作',
+          dataIndex: 'actions',
+          scopedSlots: { customRender: 'actions' }
         }
       ],
       // 加载数据方法 必须为 Promise 对象
@@ -164,8 +197,11 @@ export default {
           this.handleRefresh(true)
         }
       })
-    }
-
+    },
+    // 审核
+    handleAudit(record) {
+      this.$refs.AuditForm.show(record)
+    },
   }
 }
 </script>