310 lines
8.8 KiB
Vue
310 lines
8.8 KiB
Vue
<template>
|
||
<div class="container">
|
||
<Breadcrumb :items="['menu.withdraw', 'menu.withdraw.list']" />
|
||
|
||
<a-card class="general-card" :title="$t('menu.withdraw.list')">
|
||
<a-row>
|
||
<a-col :flex="1">
|
||
<a-form :model="queryParams" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
|
||
label-align="left">
|
||
<a-row :gutter="16">
|
||
<a-col :span="8">
|
||
<a-form-item field="name" :label="'用户名'">
|
||
<a-input v-model="queryParams.username" :placeholder="'请输入用户名'" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8">
|
||
<a-form-item field="updatedat" label="交易时间">
|
||
<a-range-picker v-model="queryParams.updatedat" style="width: 100%" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8">
|
||
<a-form-item field="status" :label="'交易类型'">
|
||
<a-select v-model="queryParams.status" :options="[
|
||
{
|
||
label: '全部',
|
||
value: -1,
|
||
},
|
||
{
|
||
label: '申请中',
|
||
value: 1,
|
||
},{
|
||
label: '已到账',
|
||
value: 2
|
||
}, {
|
||
label: '已驳回',
|
||
value: 3,
|
||
}, {
|
||
label: '等待银行打款',
|
||
value: 4,
|
||
}, {
|
||
label: '支付失败',
|
||
value: 5,
|
||
}]" :placeholder="'请选择交易类型'" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</a-col>
|
||
|
||
<a-col :flex="'86px'" style="text-align: right">
|
||
<a-space :size="18">
|
||
<a-button type="primary" @click="getAll">
|
||
<template #icon>
|
||
<icon-search />
|
||
</template>
|
||
查询
|
||
</a-button>
|
||
<a-button @click="reset">
|
||
<template #icon>
|
||
<icon-refresh />
|
||
</template>
|
||
重置
|
||
</a-button>
|
||
</a-space>
|
||
</a-col>
|
||
</a-row>
|
||
<div class="table-container">
|
||
<div class="table-content">
|
||
<a-table :data="data" :summary="summary" :pagination="false" :sticky-header="0" :scroll="{ y: 'calc(100vh - 375px)' }">
|
||
<template #columns>
|
||
<a-table-column title="账号" data-index="username"></a-table-column>
|
||
<a-table-column title="交易类型" data-index="status_text"></a-table-column>
|
||
<a-table-column title="交易时间" data-index="createtime2"></a-table-column>
|
||
<a-table-column title="交易金额" data-index="amount"></a-table-column>
|
||
<a-table-column title="订单编号" data-index="order_number"></a-table-column>
|
||
<a-table-column title="操作">
|
||
<template #cell="{ record }">
|
||
<a-button @click="handleNotBlock(record)">拒绝</a-button>
|
||
<a-button @click="handleBlock(record)">同意</a-button>
|
||
</template>
|
||
</a-table-column>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
<div class="summary-container">
|
||
<div>
|
||
合计：{{ addNum }}
|
||
</div>
|
||
</div>
|
||
<div class="pagination-container">
|
||
<a-pagination
|
||
v-model:current="pagination.current"
|
||
v-model:page-size="pagination.pageSize"
|
||
:total="pagination.total"
|
||
:page-size-options="pagination.pageSizeOptions"
|
||
:show-jumper="pagination.showJumper"
|
||
:show-page-size="pagination.showPageSize"
|
||
:show-total="pagination.showTotal"
|
||
@change="handleTableChange"
|
||
@page-size-change="handlePageSizeChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</a-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { computed, ref, reactive, watch, nextTick, onMounted } from 'vue';
|
||
import { PaginationProps,TableChangeExtra } from '@arco-design/web-vue';
|
||
import { lists,pushMoney } from '@/api/withdraw';
|
||
import { Modal } from '@arco-design/web-vue';
|
||
import { Message } from '@arco-design/web-vue';
|
||
|
||
const queryParams = ref({
|
||
username: "",
|
||
status: -1,
|
||
updatedat: [],
|
||
current: 1,
|
||
pageSize: 10,
|
||
});
|
||
const addNum = ref(0);
|
||
|
||
const pagination = reactive<PaginationProps>({
|
||
current: 1, // 当前页码
|
||
pageSize: 10, // 每页显示的条数
|
||
total: 0, // 总条数（根据实际情况设置）
|
||
pageSizeOptions: [10, 20, 50, 100,10000],
|
||
showJumper: true,
|
||
showPageSize: true,
|
||
showTotal: true,
|
||
})
|
||
|
||
//改变每页显示数量
|
||
const handlePageSizeChange = (pageSize: number) => {
|
||
pagination.current = 1;
|
||
pagination.pageSize = pageSize;
|
||
queryParams.value.current = 1;
|
||
queryParams.value.pageSize = pageSize;
|
||
getAll();
|
||
}
|
||
|
||
interface DataItem {
|
||
user_id: string;
|
||
username: string;
|
||
money: Date;
|
||
status: string;
|
||
createtime2: string;
|
||
}
|
||
|
||
let data = ref<DataItem[]>([])
|
||
//跳页
|
||
const handleTableChange = (page:number) => {
|
||
pagination.current = page;
|
||
queryParams.value.current = page;
|
||
getAll();
|
||
};
|
||
// const handleTableChange = (current) => {
|
||
// const pager = { ...pagination };
|
||
// pager.current = pag.current;
|
||
// pagination.current = pager.current;
|
||
// console.log(current)
|
||
// queryParams.value.current = pagination.current;
|
||
// queryParams.value.pageSize = pagination.pageSize;
|
||
// getAll();
|
||
// }
|
||
// const showConfirm = (record) => {
|
||
// Modal.confirm({
|
||
// title: '操作提醒',
|
||
// content: '是否同意该用户的提现申请',
|
||
// okText: '同意',
|
||
// cancelText: '拒绝',
|
||
// onOk: () => handleBlock(record),
|
||
// onCancel: () => handleNotBlock(record),
|
||
// });
|
||
// };
|
||
|
||
//同意提现
|
||
const handleBlock = async(record:any) => {
|
||
Modal.confirm({
|
||
title: '操作提醒',
|
||
content: '是否确认该选择',
|
||
okText: '确认',
|
||
cancelText: '取消',
|
||
onOk: async () => {
|
||
record.type = 0;
|
||
const res = await pushMoney(record);
|
||
if (res.code === 200) {
|
||
reset();
|
||
Message.success('操作成功');
|
||
} else {
|
||
reset();
|
||
Message.error('操作失败');
|
||
}
|
||
},
|
||
onCancel: () => {
|
||
// 用户点击取消按钮时的操作（可选）
|
||
Message.info('操作已取消');
|
||
}
|
||
});
|
||
};
|
||
|
||
//不同意提现
|
||
const handleNotBlock = async(record:any) => {
|
||
Modal.confirm({
|
||
title: '操作提醒',
|
||
content: '是否确认该选择',
|
||
okText: '确认',
|
||
cancelText: '取消',
|
||
onOk: async () => {
|
||
record.type = 1;
|
||
const res = await pushMoney(record);
|
||
if (res.code === 200) {
|
||
reset();
|
||
Message.success('操作成功');
|
||
} else {
|
||
reset();
|
||
Message.error('操作失败');
|
||
}
|
||
},
|
||
onCancel: () => {
|
||
// 用户点击取消按钮时的操作（可选）
|
||
Message.info('操作已取消');
|
||
}
|
||
});
|
||
|
||
// const res = await pushMoney(record);
|
||
// if(res.code === 200 ){
|
||
// reset();
|
||
// Message.success('操作成功')
|
||
// }
|
||
};
|
||
|
||
//显示合计
|
||
const summary = () => {
|
||
let amount = 0;
|
||
data.value.forEach(record => {
|
||
amount += record.amount;
|
||
})
|
||
addNum.value = amount;
|
||
}
|
||
//给合计样式
|
||
const getColorStyle = (column, record) => {
|
||
if (['amount'].includes(column.dataIndex)) {
|
||
return {color: record[column.dataIndex] > 0 ? 'red' : 'green'}
|
||
}
|
||
return undefined
|
||
}
|
||
|
||
//重置
|
||
const reset=()=>{
|
||
queryParams.value.username="";
|
||
queryParams.value.status=-1;
|
||
queryParams.value.updatedat=[];
|
||
getAll();
|
||
}
|
||
//获取列表数据
|
||
const getAll = async() => {
|
||
const res= await lists(queryParams.value);
|
||
if (res.code == 200) {
|
||
data.value = res.data.data;
|
||
pagination.total = res.data.total;
|
||
summary();
|
||
}
|
||
};
|
||
onMounted(async () => {
|
||
getAll()
|
||
})
|
||
</script>
|
||
|
||
|
||
<style lang="less" scoped>
|
||
|
||
.table-container {
|
||
height: calc(100vh - 320px);
|
||
}
|
||
|
||
.table-content {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.arco-table {
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.pagination-container {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding: 10px;
|
||
background-color: white;
|
||
border-top: 1px solid #e8e8e8;
|
||
}
|
||
|
||
.arco-table {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.container {
|
||
padding: 0 20px 20px 20px;
|
||
}
|
||
|
||
.summary-container{
|
||
background-color: rgb(223, 226, 224);
|
||
text-align: center;
|
||
font-size: 20px;
|
||
}
|
||
</style>
|