From 2d5ae622127696dabc0c499bd8f005a28f2d64b7 Mon Sep 17 00:00:00 2001
From: ssyang1993 <1017795527@qq.com>
Date: Fri, 18 Jun 2021 11:51:45 +0800
Subject: [PATCH] =?UTF-8?q?1=20.=E8=BF=90=E8=90=A5=E5=B9=B3=E5=8F=B0?=
 =?UTF-8?q?=EF=BC=8C=E6=94=AF=E4=BB=98=E8=AE=A2=E5=8D=95=E4=B8=AD=EF=BC=8C?=
 =?UTF-8?q?=E6=94=AF=E4=BB=98=E6=88=90=E5=8A=9F=E7=9A=84=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=80=80=E6=AC=BE=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jeepay-ui-manager/src/api/manage.js           |   9 ++
 .../src/views/order/pay/PayOrderList.vue      |  13 +-
 .../src/views/order/pay/RefundModal.vue       | 143 ++++++++++++++++++
 jeepay-ui-manager/src/views/user/Login.vue    |   2 +-
 4 files changed, 164 insertions(+), 3 deletions(-)
 create mode 100644 jeepay-ui-manager/src/views/order/pay/RefundModal.vue

diff --git a/jeepay-ui-manager/src/api/manage.js b/jeepay-ui-manager/src/api/manage.js
index c8d598a..1457d00 100644
--- a/jeepay-ui-manager/src/api/manage.js
+++ b/jeepay-ui-manager/src/api/manage.js
@@ -121,6 +121,15 @@ export function getEntTree (sysType) {
   return request.request({ url: '/api/sysEnts/showTree?sysType=' + sysType, method: 'GET' })
 }
 
+/** 0617 测试退款用接口 */
+export function refundModal (payOrderId, refundAmount, refundReason) {
+  return request.request({
+    url: '/api/payOrder/refunds/' + payOrderId,
+    method: 'POST',
+    data: { refundAmount, refundReason }
+  })
+}
+
 /** 更新用户角色信息 */
 export function uSysUserRoleRela (sysUserId, roleIdList) {
   return request.request({
diff --git a/jeepay-ui-manager/src/views/order/pay/PayOrderList.vue b/jeepay-ui-manager/src/views/order/pay/PayOrderList.vue
index cb7407f..ad47f6f 100644
--- a/jeepay-ui-manager/src/views/order/pay/PayOrderList.vue
+++ b/jeepay-ui-manager/src/views/order/pay/PayOrderList.vue
@@ -88,10 +88,13 @@
         <template slot="opSlot" slot-scope="{record}">  <!-- 操作列插槽 -->
           <JeepayTableColumns>
             <a-button type="link" v-if="$access('ENT_PAY_ORDER_VIEW')" @click="detailFunc(record.payOrderId)">详情</a-button>
+            <a-button type="link" v-if="$access('ENT_PAY_ORDER_REFUND')" style="color: red" v-show="(record.state === 2)" @click="openFunc(record.payOrderId)">退款</a-button>
           </JeepayTableColumns>
         </template>
       </JeepayTable>
     </a-card>
+    <!-- 退款弹出框 -->
+    <refund-modal ref="refundModalInfo"></refund-modal>
     <!-- 日志详情抽屉 -->
     <template>
       <a-drawer
@@ -338,6 +341,7 @@
   </page-header-wrapper>
 </template>
 <script>
+import RefundModal from './RefundModal' // 退款弹出框
 import JeepayTextUp from '@/components/JeepayTextUp/JeepayTextUp' // 文字上移组件
 import JeepayTable from '@/components/JeepayTable/JeepayTable'
 import JeepayTableColumns from '@/components/JeepayTable/JeepayTableColumns'
@@ -355,12 +359,12 @@ const tableColumns = [
   { key: 'refundState', title: '退款状态', scopedSlots: { customRender: 'refundStateSlot' }, width: 100 },
   { key: 'notifyState', title: '回调状态', scopedSlots: { customRender: 'notifySlot' }, width: 100 },
   { key: 'createdAt', dataIndex: 'createdAt', title: '创建日期', width: 180 },
-  { key: 'op', title: '操作', width: '100px', fixed: 'right', align: 'center', scopedSlots: { customRender: 'opSlot' } }
+  { key: 'op', title: '操作', width: '160px', fixed: 'right', align: 'center', scopedSlots: { customRender: 'opSlot' } }
 ]
 
 export default {
   name: 'IsvListPage',
-  components: { JeepayTable, JeepayTableColumns, JeepayTextUp },
+  components: { JeepayTable, JeepayTableColumns, JeepayTextUp, RefundModal },
   data () {
     return {
       btnLoading: false,
@@ -390,6 +394,11 @@ export default {
     searchFunc: function () { // 点击【查询】按钮点击事件
       this.$refs.infoTable.refTable(true)
     },
+
+    // 打开退款弹出框
+    openFunc (recordId) {
+      this.$refs.refundModalInfo.show(recordId)
+    },
     detailFunc: function (recordId) {
       const that = this
       req.getById(API_URL_PAY_ORDER_LIST, recordId).then(res => {
diff --git a/jeepay-ui-manager/src/views/order/pay/RefundModal.vue b/jeepay-ui-manager/src/views/order/pay/RefundModal.vue
new file mode 100644
index 0000000..4245716
--- /dev/null
+++ b/jeepay-ui-manager/src/views/order/pay/RefundModal.vue
@@ -0,0 +1,143 @@
+<template>
+  <div>
+    <a-modal
+      title="退款"
+      :visible="visible"
+      :confirm-loading="confirmLoading"
+      @ok="handleOk"
+      @cancel="handleCancel"
+      :closable="false"
+    >
+      <a-row>
+        <a-col :sm="24">
+          <a-descriptions>
+            <a-descriptions-item label="支付订单号">
+              <a-tag color="purple">
+                {{ detailData.payOrderId }}
+              </a-tag>
+            </a-descriptions-item>
+          </a-descriptions>
+        </a-col>
+        <a-col :sm="24">
+          <a-descriptions>
+            <a-descriptions-item label="支付金额">
+              <a-tag color="green">
+                {{ detailData.amount/100 }}
+              </a-tag>
+            </a-descriptions-item>
+          </a-descriptions>
+        </a-col>
+        <a-col :sm="24">
+          <a-descriptions>
+            <a-descriptions-item label="可退金额">
+              <a-tag color="pink">
+                {{ nowRefundAmount }}
+              </a-tag>
+            </a-descriptions-item>
+          </a-descriptions>
+        </a-col>
+      </a-row>
+
+      <a-form-model :rules="rules" :model="refund" ref="refundInfo" :layout="horizontal">
+
+        <a-form-model-item label="退款金额" prop="refundAmount">
+          <a-input v-model="refund.refundAmount" type="number" @keyup="handleInput2" style="flex-grow:1" />
+        </a-form-model-item>
+
+        <a-form-model-item label="退款详情" prop="refundReason">
+          <a-input v-model="refund.refundReason" type="textarea" />
+        </a-form-model-item>
+
+      </a-form-model>
+
+    </a-modal>
+  </div>
+</template>
+<script>
+import { API_URL_PAY_ORDER_LIST, req, refundModal } from '@/api/manage'
+export default {
+
+  data () {
+    return {
+      horizontal: 'horizontal',
+      recordId: '',
+      labelCol: { span: 4 },
+      wrapperCol: { span: 16 },
+      visible: false,
+      confirmLoading: false,
+      detailData: {
+      },
+      refund: {
+        // refundReason: '', // 退款原因
+        // refundAmount: '' // 退款金额
+      },
+      rules: {
+        refundReason: [{ min: 0, max: 256, required: true, trigger: 'blur', message: '请输入退款原因，最长不超过256个字符' }],
+        refundAmount: [{ required: true, message: '请输入金额', trigger: 'blur' },
+         {
+            validator: (rule, value, callBack) => {
+								if (value < 0.01 || value > this.nowRefundAmount) {
+									callBack('退款金额不能小于0.01，或者大于可退金额')
+								}
+							callBack()
+						}
+         }]
+      }
+    }
+  },
+  computed: {
+    nowRefundAmount () {
+      return (this.detailData.amount / 100 - this.detailData.refundAmount / 100)
+    }
+  },
+  methods: {
+    handleInput2 (e) {
+      // 只能输入两位小数，且首位数字不能为0
+      e.target.value = e.target.value.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
+      e.target.value = e.target.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
+      e.target.value = e.target.value.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3')// 只能输入两个小数
+      if (e.target.value.indexOf('.') < 0 && e.target.value !== '') { // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
+        e.target.value = parseFloat(e.target.value)
+      }
+      this.refund.refundAmount = e.target.value // 最后赋值给refundAmount
+    },
+    show (recordId) {
+      if (this.$refs.refundInfo !== undefined) {
+					this.$refs.refundInfo.resetFields()
+			}
+      this.recordId = recordId
+      this.visible = true
+      this.refund = {}
+      const that = this
+      req.getById(API_URL_PAY_ORDER_LIST, recordId).then(res => {
+        that.detailData = res
+      })
+    },
+    handleOk (e) {
+      this.$refs.refundInfo.validate(valid => {
+				if (valid) {
+          this.confirmLoading = true
+          const that = this
+          // 退款接口
+          refundModal(that.recordId, that.refund.refundAmount, that.refund.refundReason).then(res => {
+              that.visible = false // 关闭弹窗
+              that.confirmLoading = false // 取消按钮转圈
+              that.$message.success('退款成功')
+              console.log(that.refund.refundAmount)
+          }).catch(err => {
+            console.log(err)
+            that.confirmLoading = false // 取消按钮转圈
+          })
+        }
+      })
+    },
+    handleCancel (e) {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>
diff --git a/jeepay-ui-manager/src/views/user/Login.vue b/jeepay-ui-manager/src/views/user/Login.vue
index 36e132a..a6cc3c7 100644
--- a/jeepay-ui-manager/src/views/user/Login.vue
+++ b/jeepay-ui-manager/src/views/user/Login.vue
@@ -168,7 +168,7 @@ export default {
     font-size: 16px;
     height: 40px;
     width: 100%;
-    background-color: @jee-theme;
+    // background-color: @jee-theme;
   }
 
   .user-login-other {
-- 
GitLab