资金管理新增支付设置，可以控制充值列表的类型选择

jhzh

2026-03-16 b32a5cfeeff53d7d45952a32d70316762f3e58d2

资金管理新增支付设置，可以控制充值列表的类型选择

 src/api/capital.js

@@ -12,6 +12,9 @@
  cashlist: '/admin/cash/list.do', // 资金记录
  logtransList: '/admin/log/transList.do', // 资金互转记录
  moneylog: '/admin/moneylog/moneylogAll.do', // 资金互转记录
  payOptionList: '/admin/payOption/list.do', // 支付设置列表
  payOptionUpdateSort: '/admin/payOption/updateSort.do', // 支付设置排序
  payOptionSetEnabled: '/admin/payOption/setEnabled.do', // 支付设置开启/关闭
}

/**
@@ -115,3 +118,30 @@
    data: qs.stringify(parameter),
  })
}

export function payOptionList(parameter) {
  return request({
    url: userApi.payOptionList,
    method: 'post',
    data: qs.stringify(parameter || {}),
  })
}

export function payOptionUpdateSort(parameter) {
  return request({
    url: userApi.payOptionUpdateSort,
    method: 'post',
    headers: {
      'Content-Type': 'application/json',
    },
    data: parameter,
  })
}

export function payOptionSetEnabled(parameter) {
  return request({
    url: userApi.payOptionSetEnabled,
    method: 'post',
    data: qs.stringify(parameter),
  })
}

 src/config/router.config.js

@@ -231,6 +231,12 @@
            component: () => import('@/views/capital/withdrawallist'),
            meta: { title: '提现列表', keepAlive: true, permission: ['withdrawallist'] },
          },
          {
            path: '/capital/payOption',
            name: 'payOption',
            component: () => import('@/views/capital/payOption.vue'),
            meta: { title: '支付设置', keepAlive: true, permission: ['rechargelist'] },
          },
          // {
          //   path: '/capital/fundrecords',
          //   name: 'fundrecords',

 src/views/capital/payOption.vue

New file
@@ -0,0 +1,187 @@
<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-table
        bordered
        :loading="loading"
        :columns="columns"
        :data-source="datalist"
        :pagination="false"
        rowKey="id"
        :customRow="customRow"
      >
        <span slot="enabled" slot-scope="text, record">
          <a-tag :color="record.enabled === 1 ? 'green' : 'red'">
            {{ record.enabled === 1 ? '开启' : '关闭' }}
          </a-tag>
        </span>
        <template slot="action" slot-scope="text, record">
          <a-button
            type="link"
            size="small"
            @click="toggleEnabled(record)"
            :loading="record._loading"
          >
            {{ record.enabled === 1 ? '关闭' : '开启' }}
          </a-button>
        </template>
        <span slot="dragHandle" class="drag-handle">
          <a-icon type="menu" />
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { payOptionList, payOptionUpdateSort, payOptionSetEnabled } from '@/api/capital'

export default {
  name: 'PayOption',
  data() {
    return {
      columns: [
        {
          title: '排序',
          key: 'sort',
          width: 60,
          align: 'center',
          scopedSlots: { customRender: 'dragHandle' },
        },
        {
          title: '名称',
          dataIndex: 'name',
          align: 'center',
        },
        {
          title: '排序序号',
          dataIndex: 'sortOrder',
          align: 'center',
          width: 120,
        },
        {
          title: '状态',
          dataIndex: 'enabled',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'enabled' },
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 120,
          scopedSlots: { customRender: 'action' },
        },
      ],
      loading: false,
      datalist: [],
      dragIndex: null,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      payOptionList()
        .then((res) => {
          this.loading = false
          if (res.status === 0 && Array.isArray(res.data)) {
            this.datalist = (res.data || [])
              .slice()
              .sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
          } else {
            this.datalist = []
          }
        })
        .catch(() => {
          this.loading = false
          this.datalist = []
        })
    },
    customRow(record, index) {
      return {
        attrs: {
          draggable: true,
        },
        on: {
          dragstart: (e) => this.onDragStart(e, index),
          dragover: (e) => this.onDragOver(e, index),
          drop: (e) => this.onDrop(e, index),
        },
      }
    },
    onDragStart(e, index) {
      this.dragIndex = index
      e.dataTransfer.effectAllowed = 'move'
      e.dataTransfer.setData('text/plain', index)
      try {
        e.target.classList.add('drag-over')
      } catch (_) {}
    },
    onDragOver(e, index) {
      e.preventDefault()
      e.dataTransfer.dropEffect = 'move'
    },
    onDrop(e, dropIndex) {
      e.preventDefault()
      try {
        e.target.classList.remove('drag-over')
      } catch (_) {}
      const dragIndex = this.dragIndex
      if (dragIndex == null || dragIndex === dropIndex) return
      const list = this.datalist.slice()
      const [item] = list.splice(dragIndex, 1)
      list.splice(dropIndex, 0, item)
      this.datalist = list
      this.dragIndex = null
      const orderedIds = list.map((i) => i.id)
      // console.log(orderedIds, 'orderedIds');
      // return
      payOptionUpdateSort(orderedIds)
        .then((res) => {
          if (res.status === 0) {
            this.$message.success('排序已更新')
          } else {
            this.$message.error(res.msg || '排序更新失败')
            this.getList()
          }
        })
        .catch(() => {
          this.$message.error('排序更新失败')
          this.getList()
        })
    },
    toggleEnabled(record) {
      const enabled = record.enabled === 1 ? 0 : 1
      this.$set(record, '_loading', true)
      payOptionSetEnabled({ id: record.id, enabled })
        .then((res) => {
          this.$set(record, '_loading', false)
          if (res.status === 0) {
            record.enabled = enabled
            this.$message.success(enabled === 1 ? '已开启' : '已关闭')
          } else {
            this.$message.error(res.msg || '操作失败')
          }
        })
        .catch(() => {
          this.$set(record, '_loading', false)
          this.$message.error('操作失败')
        })
    },
  },
}
</script>

<style scoped>
.drag-handle {
  cursor: move;
  color: #999;
}
.drag-handle:hover {
  color: #1890ff;
}
</style>