From 9d779f3dbac2b69299aa8ac258ede6343d14fae7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E7=8B=BC?= <2468023037@qq.com>
Date: Thu, 20 Feb 2025 13:29:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/withdraw.ts                |  20 +-
 src/views/withdraw/index.vue       | 364 ++++++++++++++++-------------
 src/views/withdraw/locale/en-US.ts |   2 +-
 src/views/withdraw/locale/zh-CN.ts |   2 +-
 4 files changed, 207 insertions(+), 181 deletions(-)

diff --git a/src/api/withdraw.ts b/src/api/withdraw.ts
index baac07f..e27ef51 100644
--- a/src/api/withdraw.ts
+++ b/src/api/withdraw.ts
@@ -42,23 +42,5 @@ export interface ListParams {
  * @returns 
  */
 export function lists(params: ListParams) {
-  return axios.post<jobuser>('/api/v1/withdraw/lists',params);
+  return axios.post<jobuser>('/admin/api/v1/withdraw/lists',params);
 }
-
-// /**
-//  * 
-//  * @param id 拉黑
-//  * @returns 
-//  */
-// export function getBlack(id: string) {
-//     return axios.post<Black>('/api/v1/jobuser/getBlack', { id });
-// }
-
-// /**
-//  * 
-//  * @param id 洗白
-//  * @returns 
-//  */
-// export function getOutBlack(id: string) {
-//     return axios.post<Black>('/api/v1/jobuser/getOutBlack', { id });
-//   }
\ No newline at end of file
diff --git a/src/views/withdraw/index.vue b/src/views/withdraw/index.vue
index 165c2d1..4b7c565 100644
--- a/src/views/withdraw/index.vue
+++ b/src/views/withdraw/index.vue
@@ -3,54 +3,132 @@
     <Breadcrumb :items="['menu.withdraw', 'menu.withdraw.list']" />
 
     <a-card class="general-card" :title="$t('menu.withdraw.list')">
-      <a-table  :data="data">
-        <template #columns>
-          <a-table-column title="用户id" data-index="user_id"></a-table-column>
-          <a-table-column title="用户名称" data-index="username"></a-table-column>
-          <a-table-column title="转账金额" data-index="money"></a-table-column>
-          <a-table-column title="状态" data-index="status" filterable="filters: [{
-            text: 'London',
-            value: 'London',
-          }, {
-            text: 'Paris',
-            value: 'Paris',
-          },],
-          filter: (value, row) => row.address.includes(value),"></a-table-column>
-          <a-table-column title="操作时间" data-index="createtime2"></a-table-column>
-          <a-table-column title="操作">
-            <template #cell="{ record }">
-              <a-button v-if="record.status == '申请中'" @click="showConfirm(record.id)">审批</a-button> 
-            </template>
-          </a-table-column>
-        </template>
-      </a-table>
+        <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,
+                  }]" :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="id"></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 } from '@/api/withdraw';
 import { Modal } from '@arco-design/web-vue';
 import { Message } from '@arco-design/web-vue';
-const columns = [
-      {
-        title: 'Name',
-        dataIndex: 'name',
-      },
-      {
-        title: 'Salary',
-        dataIndex: 'salary',
-      },
-      {
-        title: 'Address',
-        dataIndex: 'address',
-      },
-      {
-        title: 'Email',
-        dataIndex: 'email',
-      },
-    ];
+import { login } from '@/api/user';
+
+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;
@@ -58,48 +136,65 @@ interface DataItem {
     status: string;
     createtime2: string;
 }
+
 let data = ref<DataItem[]>([])
-//弹窗控制
-const modal_visible=ref(false)
-//传递下去的用户id
-const show_group_id=ref(0)
-const show_group=(id:number)=>{
-  show_group_id.value=id
-  modal_visible.value=true
+//跳页
+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 = (id: string) => {
+//   Modal.confirm({
+//     title: '操作提醒',
+//     content: '是否同意该用户的提现申请',
+//     okText: '同意',
+//     cancelText: '拒绝',
+//     onOk: () => handleBlock(id),
+//     onCancel: () => Message.info('取消操作'),
+//   });
+// };
+
+//显示合计
+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 showConfirm = (id: string) => {
-  Modal.confirm({
-    title: '操作提醒',
-    content: '是否同意该用户的提现申请',
-    okText: '同意',
-    cancelText: '拒绝',
-    onOk: () => handleBlock(id),
-    onCancel: () => Message.info('取消操作'),
-  });
-};
-
-
-
-const handleBlock = (id: string) => {
-//   getBlack(id).then(res => {
-//     console.log(res.status)
-//     if (res.status == 'success') {
-//       getAll();
-//       Message.success('拉黑成功')
-//     } else {
-//       Message.error('拉黑失败')
-//     }
-//   })
-};
-const queryParams = ref({
-  black: null,
-  username: null
-});
-const getAll = () => {
-  lists(queryParams.value).then(res => {
-    data.value = res.data;
-  })
+//重置
+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()
@@ -108,91 +203,40 @@ onMounted(async () => {
 
 
 <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;
 }
 
-.left-side {
-  flex: 1;
-  overflow: auto;
-}
-
-.right-side {
-  width: 280px;
-  margin-left: 16px;
-}
-
-.panel {
-  background-color: var(--color-bg-2);
-  border-radius: 4px;
-  overflow: auto;
-}
-
-:deep(.panel-border) {
-  margin-bottom: 0;
-  border-bottom: 1px solid rgb(var(--gray-2));
-}
-
-.moduler-wrap {
-  border-radius: 4px;
-  background-color: var(--color-bg-2);
-
-  :deep(.text) {
-    font-size: 12px;
-    text-align: center;
-    color: rgb(var(--gray-8));
-  }
-
-  :deep(.wrapper) {
-    margin-bottom: 8px;
-    text-align: center;
-    cursor: pointer;
-
-    &:last-child {
-      .text {
-        margin-bottom: 0;
-      }
-    }
-
-    &:hover {
-      .icon {
-        color: rgb(var(--arcoblue-6));
-        background-color: #e8f3ff;
-      }
-
-      .text {
-        color: rgb(var(--arcoblue-6));
-      }
-    }
-  }
-
-  :deep(.icon) {
-    display: inline-block;
-    width: 32px;
-    height: 32px;
-    margin-bottom: 4px;
-    color: rgb(var(--dark-gray-1));
-    line-height: 32px;
-    font-size: 16px;
-    text-align: center;
-    background-color: rgb(var(--gray-1));
-    border-radius: 4px;
-  }
-}
-</style>
-
-<style lang="less" scoped>
-// responsive
-.mobile {
-  .container {
-    display: block;
-  }
-
-  .right-side {
-    // display: none;
-    width: 100%;
-    margin-left: 0;
-    margin-top: 16px;
-  }
+.summary-container{
+  background-color: rgb(223, 226, 224);
+  text-align: center;
+  font-size: 20px;
 }
 </style>
diff --git a/src/views/withdraw/locale/en-US.ts b/src/views/withdraw/locale/en-US.ts
index 543d824..4ea7455 100644
--- a/src/views/withdraw/locale/en-US.ts
+++ b/src/views/withdraw/locale/en-US.ts
@@ -1,5 +1,5 @@
 export default {
     'menu.profile.basic': 'User List',
-    'menu.withdraw.list': '提现记录',
+    'menu.withdraw.list': '账变明细',
   };
   
\ No newline at end of file
diff --git a/src/views/withdraw/locale/zh-CN.ts b/src/views/withdraw/locale/zh-CN.ts
index 543d824..4ea7455 100644
--- a/src/views/withdraw/locale/zh-CN.ts
+++ b/src/views/withdraw/locale/zh-CN.ts
@@ -1,5 +1,5 @@
 export default {
     'menu.profile.basic': 'User List',
-    'menu.withdraw.list': '提现记录',
+    'menu.withdraw.list': '账变明细',
   };
   
\ No newline at end of file