123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152 |
- <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>
|