bandhuBuy-admin/src/app/admin/views/payment/components/PayoutConfig.vue

<template>
  <div class="payout-config" v-loading="loading">
    <el-table height="100%" class="sa-table" :data="tableData" stripe>
      <template #empty>
        <sa-empty />
      </template>

      <el-table-column label="代付支付方式" min-width="150" align="center">
        <template #default="scope">
          <span class="method-name">{{ scope.row.methodName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="代付支付通道" min-width="200" align="center">
        <template #default="scope">
          <div class="channel-list">
            <div
              v-for="channel in scope.row.midChannelMethodBOList"
              :key="channel.id"
              class="channel-item"
            >
              {{ channel.paymentChannel.channelName }}
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="通道状态" min-width="150" align="center">
        <template #default="scope">
          <div class="status-list">
            <div
              v-for="channel in scope.row.midChannelMethodBOList"
              :key="channel.id"
              class="status-item"
            >
              <el-switch
                v-model="channel.status"
                :active-value="1"
                :inactive-value="0"
                @change="handleChannelStatusChange(channel)"
              />
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import api from '../../../api';

  const loading = ref(false);
  const tableData = ref([]);

  // 获取代付配置数据
  async function getData() {
    loading.value = true;
    try {
      const { code, data } = await api.payment.method.list({
        agencyService: 2, // 代付
      });

      if (code == 200) {
        tableData.value = data || [];
      }
    } catch (error) {
      console.error('获取代付配置失败:', error);
      ElMessage.error('获取数据失败');
    } finally {
      loading.value = false;
    }
  }

  // 处理通道状态变更
  async function handleChannelStatusChange(channel) {
    try {
      const { code } = await api.payment.method.midUpdate({
        id: channel.id,
        status: channel.status,
      });

      if (code == 200) {
        ElMessage.success('通道状态更新成功');
      }
    } catch (error) {
      console.error('更新通道状态失败:', error);
      ElMessage.error('通道状态更新失败');
      // 回滚状态
      channel.status = channel.status === 1 ? 0 : 1;
    }
  }

  // 暴露方法给父组件调用
  defineExpose({
    getData,
  });

  onMounted(() => {
    getData();
  });
</script>

<style lang="scss" scoped>
  .payout-config {
    height: 100%;

    .method-cell {
      display: flex;
      align-items: center;

      .method-name {
        font-weight: 500;
      }
    }

    .channel-list,
    .weight-list,
    .status-list {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      padding: 8px;
    }

    .channel-item,
    .weight-item,
    .status-item {
      display: flex;
      align-items: center;
      min-height: 40px;
      padding: 8px 12px;
      width: 100%;
      justify-content: center;

      &:not(:last-child) {
        border-bottom: 1px solid var(--el-border-color-light);
        margin-bottom: 8px;
        padding-bottom: 12px;
      }
    }

    .weight-display {
      color: #909399;
      font-style: italic;
    }
  }
</style>