1 .运营平台，支付订单中，支付成功的订单增加退款按钮

2021-06-18 11:51:45 +08:00 · 2021-06-18 11:51:45 +08:00 · 2d5ae62212
parent 44c61fa659
commit 2d5ae62212
4 changed files with 164 additions and 3 deletions
--- 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({
--- 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 => {
--- a/jeepay-ui-manager/src/views/order/pay/RefundModal.vue
+++ 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>
--- 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 {