金豆完成，任务见bug表

0414/src/api/goldBeanDetail.ts

@@ -1,14 +1,15 @@
 import axios from 'axios';
 
-// 后端接口地址
-const API_BASE_URL = '';
+const API_BASE_URL = 'http://192.168.8.94:5173';
 
-// 获取金豆明细数据
 export const getGoldBeanDetail = async (params: any) => {
+  console.log('请求参数:', params);
   try {
-
-    const response = await axios.get(``, { params });
-    return response.data;
+    const response = await axios.post(`${API_BASE_URL}/recharges/query`, params);
+    console.log('完整响应数据:', response.data); 
+    const list = response.data.items || []; 
+    const total = response.data.total || 0; 
+    return { list, total };
   } catch (error) {
     console.error('获取金豆明细数据失败', error);
     throw error;

0414/src/components/DetailTable.vue

@@ -1,17 +1,14 @@
 <template>
   <el-table :data="tableData">
-    <el-table-column prop="name" label="姓名"></el-table-column>
-    <el-table-column prop="fineNetNumber" label="精网号"></el-table-column>
-    <el-table-column prop="region" label="所属地区"></el-table-column>
-    <el-table-column prop="type" label="类型"></el-table-column>
-    <el-table-column prop="orderNumber" label="订单号"></el-table-column>
-    <el-table-column prop="goldBeanQuantity" label="金豆数量"></el-table-column>
-    <el-table-column prop="paidGoldBean" label="付费金豆"></el-table-column>
-    <el-table-column prop="freeGoldBean" label="免费金豆"></el-table-column>
-    <el-table-column prop="amount" label="金额"></el-table-column>
-    <el-table-column prop="rechargePlatform" label="充值平台"></el-table-column>
-    <el-table-column prop="remark" label="备注"></el-table-column>
-    <el-table-column prop="rechargeTime" label="充值时间"></el-table-column>
+    <el-table-column prop="姓名" label="姓名"></el-table-column>
+    <el-table-column prop="精网号" label="精网号"></el-table-column>
+    <el-table-column prop="所属地区" label="所属地区"></el-table-column>
+    <el-table-column prop="订单号" label="订单号"></el-table-column>
+    <el-table-column prop="充值方式" label="充值方式"></el-table-column>
+    <el-table-column prop="充值时间" label="充值时间"></el-table-column>
+    <el-table-column prop="备注" label="备注"></el-table-column>
+    <el-table-column prop="金币数量" label="金币数量"></el-table-column>
+    <el-table-column prop="金额" label="金额"></el-table-column>
   </el-table>
 </template>
 
@@ -25,3 +22,9 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.el-table {
+  width: 100%;
+}
+</style>

0414/src/components/Navbar.vue

@@ -6,17 +6,7 @@
       background-color="#545c64"
       text-color="#fff"
     >
-    <!-- element写的菜单，随便生成的背景色和文字颜色 -->
-     <!-- AI生成的表单 -->
-      <el-menu-item index="0">首页</el-menu-item>
-      <el-menu-item index="1">工作台</el-menu-item>
-      <el-menu-item index="2">财务审核</el-menu-item>
-      <el-sub-menu index="3">
-        <template #title>充值管理</template>
-        <el-menu-item index="3-1">金币充值</el-menu-item>
-        <el-menu-item index="3-2">金币消费</el-menu-item>
-        <el-menu-item index="3-3">金币退款</el-menu-item>
-      </el-sub-menu>
+      <!-- ... 其他菜单项 ... -->
       <el-sub-menu index="4">
         <template #title>金豆模块</template>
         <el-menu-item index="4-1">金豆充值</el-menu-item>
@@ -24,27 +14,21 @@
         <el-menu-item index="4-3">金豆消费明细</el-menu-item>
         <el-menu-item index="4-4">客户金豆余额</el-menu-item>
       </el-sub-menu>
-      <el-menu-item index="5">客户所有明细</el-menu-item>
-      <el-menu-item index="6">客户金币余额</el-menu-item>
-      <el-menu-item index="7">权限管理</el-menu-item>
+      <!-- ... 其他菜单项 ... -->
     </el-menu>
   </template>
   
   <script>
   export default {
     data() {
-      //初始化默认激活的菜单项索引（？？） 整个菜单项activeIndex
       return {
         activeIndex: '1'
       }
     },
     methods: {
-      // 处理菜单项选择事件，打印选择的菜单项的key和keyPath（？？）
-      // key是菜单项的索引，keyPath是菜单项的路径
       handleSelect(key, keyPath) {
         console.log(key, keyPath)
       },
-      //跳一下，没有其他路径
       goToDetail() {
         this.$router.push('/gold-bean-detail')
       }
@@ -54,9 +38,6 @@
   
   <style scoped>
   .el-menu-vertical-demo {
-    /* 这是宽度
-    一个vue三种注释方式 */
     width: 200px;
   }
-
   </style>

0414/src/components/SearchForm.vue

@@ -4,31 +4,25 @@
     :model="form"
     label-width="80px"
   >
-  <!-- AI生成的表单 -->
-  <!-- 通过设置 inline 属性为 true 可以让表单域变为行内的表单域 -->
     <el-form-item label="精网号">
-      <el-input v-model="form.fineNetNumber" placeholder="请输入精网号"></el-input>
+      <el-input v-model="form.精网号" placeholder="请输入精网号"></el-input>
     </el-form-item>
-    <el-form-item label="地区">
-      <el-select v-model="form.region" placeholder="请选择地区">
-        <el-option label="白山市" value="option1"></el-option>
-        <el-option label="扬州市" value="option2"></el-option>
-      </el-select>
-      <!-- select-option是下拉框选择 -->
+    <el-form-item label="所属地区">
+      <el-input v-model="form.region" placeholder="请输入所属地区"></el-input>
     </el-form-item>
     <el-form-item label="订单号">
-      <el-input v-model="form.orderNumber" placeholder="请输入订单号"></el-input>
-    </el-form-item>
-    <el-form-item label="类型">
-      <el-select v-model="form.type" placeholder="请选择类型">
-        <el-option label="购买金豆" value="option1"></el-option>
-        <el-option label="金币换金豆" value="option2"></el-option>
-      </el-select>
+      <el-input v-model="form.orderId" placeholder="请输入订单号"></el-input>
     </el-form-item>
-    <el-form-item label="充值平台">
-      <el-select v-model="form.rechargePlatform" placeholder="请选择充值平台">
-        <el-option label="system" value="option1"></el-option>
-        <el-option label="ios" value="option2"></el-option>
+    <el-form-item label="支付方式">
+      <!-- 修改为下拉框 -->
+      <el-select v-model="form.paymentMethod" placeholder="请选择支付方式" 
+      filterable 
+      allow-create 
+      default-first-option
+      >
+        <el-option label="BANK" value="BANK"></el-option>
+        <el-option label="ALIPAY" value="ALIPAY"></el-option>
+        <el-option label="WECHAT" value="WECHAT"></el-option>
       </el-select>
     </el-form-item>
     <el-form-item>
@@ -43,29 +37,32 @@ export default {
   data() {
     return {
       form: {
-        fineNetNumber: '',
-        region: '',
-        orderNumber: '',
-        type: '',
-        rechargePlatform: ''
+        精网号: '',
+        所属地区: '',
+        orderId: '',
+        paymentMethod: '',
+        page: 1,
+        size: 8
       }
     };
   },
   methods: {
-     // 处理查询事件，将表单数据通过自定义事件search传递出去
     handleSearch() {
+      // 移除订单号里所有空格
+      this.form.orderId = this.form.orderId.replace(/\s/g, '');
       this.$emit('search', this.form);
     },
-    // 处理重置事件，重置表单数据并再次触发查询
-
     handleReset() {
       this.form = {
-        fineNetNumber: '',
-        region: '',
-        orderNumber: '',
-        type: '',
-        rechargePlatform: ''
+        精网号: '',
+        所属地区: '',
+        orderId: '',
+        paymentMethod: '',
+        page: 1,
+        size: 8
       };
+      // 移除重置后订单号里所有空格
+      this.form.orderId = this.form.orderId.replace(/\s/g, '');
       this.$emit('search', this.form);
     }
   }

0414/src/views/GoldBeanDetail.vue

@@ -1,12 +1,22 @@
 <template>
   <div class="detail-container">
-      <div class="search-form-container">
-        <!-- 搜索表单组件，监听search事件 -->
-          <SearchForm @search="handleSearch" />
-      </div>
-      <div class="detail-table-container">
-          <DetailTable :tableData="tableData" />
-      </div>
+    <div class="search-form-container">
+      <!-- 添加 ref 属性 -->
+      <SearchForm ref="searchForm" @search="handleSearch" />
+    </div>
+    <div class="detail-table-container">
+      <DetailTable :tableData="tableData" />
+    </div>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      :page-sizes="[8, 10, 20]"
+      :page-size="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+    >
+    </el-pagination>
   </div>
 </template>
 
@@ -17,27 +27,63 @@ import { getGoldBeanDetail } from '../api/goldBeanDetail';
 
 export default {
   components: {
-      SearchForm,
-      DetailTable
+    SearchForm,
+    DetailTable
   },
   data() {
     return {
-      tableData: []
+      tableData: [],
+      currentPage: 2,
+      pageSize: 8,
+      total: 0
     };
   },
-  // 组件创建时，触发一次无参数的查询
   async created() {
-    await this.handleSearch({});
+    await this.handleSearch({
+      jwcode: '',
+      region: '',
+      orderId: '',
+      paymentMethod: '',
+      page: this.currentPage,
+      size: this.pageSize
+    });
   },
   methods: {
-     // 处理搜索事件，调用API获取金豆明细数据并更新表格数据
     async handleSearch(params) {
       try {
         const data = await getGoldBeanDetail(params);
-        this.tableData = data;
+        // 确保后端返回的数据结构中有 list 和 total 字段
+        this.tableData = data.list || []; 
+        this.total = data.total || 0; 
+        this.currentPage = params.page;
+        this.pageSize = params.size;
       } catch (error) {
         console.error('查询失败', error);
       }
+    },
+    handleSizeChange(newSize) {
+      this.pageSize = newSize;
+      const { 精网号, region, orderId, paymentMethod } = this.$refs.searchForm.form;
+      this.handleSearch({
+        jwcode: 精网号,
+        region,
+        orderId,
+        paymentMethod,
+        page: this.currentPage,
+        size: newSize
+      });
+    },
+    handleCurrentChange(newPage) {
+      this.currentPage = newPage;
+      const { 精网号, region, orderId, paymentMethod } = this.$refs.searchForm.form;
+      this.handleSearch({
+        jwcode: 精网号,
+        region,
+        orderId,
+        paymentMethod,
+        page: newPage,
+        size: this.pageSize
+      });
     }
   }
 };
@@ -46,13 +92,13 @@ export default {
 <style scoped>
 .detail-container {
   display: flex;
-  flex-direction: column; /* 修改为垂直布局 */
+  flex-direction: column;
 }
 .search-form-container {
-  width: 100%; /* 搜索表单宽度占满父容器 */
+  width: 100%;
 }
 .detail-table-container {
-  width: 100%; /* 详情表格宽度占满父容器 */
-  margin-top: 20px; /* 为表格添加顶部间距 */
+  width: 100%;
+  margin-top: 20px;
 }
 </style>

0414/src/views/fuzhu.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="detail-container">
+    <!-- 使用 el-card 包裹搜索表单 -->
+    <el-card class="search-form-container">
+      <SearchForm @search="handleSearch" ref="searchForm" />
+    </el-card>
+    <!-- 使用 el-card 包裹表格 -->
+    <el-card class="detail-table-container">
+      <DetailTable :tableData="tableData" />
+    </el-card>
+    <!-- 美化分页器样式 -->
+    <div class="pagination-container">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[8, 10, 20]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import SearchForm from '../components/SearchForm.vue';
+import DetailTable from '../components/DetailTable.vue';
+import { getGoldBeanDetail } from '../api/goldBeanDetail';
+
+export default {
+  components: {
+    SearchForm,
+    DetailTable
+  },
+  data() {
+    return {
+      tableData: [],
+      currentPage: 2,
+      pageSize: 8,
+      total: 0
+    };
+  },
+  async created() {
+    await this.handleSearch({
+      jwcode: '',
+      region: '',
+      orderId: '',
+      paymentMethod: '',
+      page: this.currentPage,
+      size: this.pageSize
+    });
+  },
+  methods: {
+    async handleSearch(params) {
+      try {
+        const data = await getGoldBeanDetail(params);
+        this.tableData = data.list || []; 
+        this.total = data.total || 0; 
+        this.currentPage = params.page;
+        this.pageSize = params.size;
+      } catch (error) {
+        console.error('查询失败', error);
+      }
+    },
+    handleSizeChange(newSize) {
+      this.pageSize = newSize;
+      this.handleSearch({
+        jwcode: this.$refs.searchForm?.form?.jwcode || '',
+        region: this.$refs.searchForm?.form?.region || '',
+        orderId: this.$refs.searchForm?.form?.orderId || '',
+        paymentMethod: this.$refs.searchForm?.form?.paymentMethod || '',
+        page: this.currentPage,
+        size: newSize
+      });
+    },
+    handleCurrentChange(newPage) {
+      this.currentPage = newPage;
+      this.handleSearch({
+        jwcode: this.$refs.searchForm?.form?.jwcode || '',
+        region: this.$refs.searchForm?.form?.region || '',
+        orderId: this.$refs.searchForm?.form?.orderId || '',
+        paymentMethod: this.$refs.searchForm?.form?.paymentMethod || '',
+        page: newPage,
+        size: this.pageSize
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.detail-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px; /* 添加间距 */
+  padding: 20px;
+}
+
+.search-form-container {
+  width: 100%;
+}
+
+.detail-table-container {
+  width: 100%;
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: center; /* 分页器居中 */
+}
+</style>

250415/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

250415/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

250415/README.md

@@ -0,0 +1,33 @@
+# 250414
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```

250415/env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+declare module "*.vue" {  
+
+    import Vue from 'vue';  
+
+    export default Vue;  
+
+  }
+
+  declare module '*.js';

250415/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

250415/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "250414",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build"
+  },
+  "dependencies": {
+    "axios": "^1.8.4",
+    "element-plus": "^2.9.7",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.1",
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/tsconfig": "^0.7.0",
+    "npm-run-all2": "^7.0.2",
+    "typescript": "~5.8.0",
+    "vite": "^6.2.4",
+    "vite-plugin-vue-devtools": "^7.7.2",
+    "vue-tsc": "^2.2.8"
+  }
+}

250415/src/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="layout">
+    <Navigation />
+    <div class="main-content">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Navigation from './components/Navigation.vue'
+</script>
+
+<style scoped>
+.layout {
+  display: flex;
+}
+
+.main-content {
+  flex: 1;
+  padding: 20px;
+}
+</style>

250415/src/assets/base.css

@@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

250415/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

250415/src/assets/main.css

@@ -0,0 +1,48 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
+
+.layout {
+  display: flex;
+}
+
+.sidebar {
+  min-width: 200px;
+}
+
+.main-content {
+  flex: 1;
+  padding: 20px;
+}

250415/src/components/Navigation.vue

@@ -0,0 +1,32 @@
+<template>
+  <el-menu
+    default-active="recharge-approval"
+    class="el-menu-vertical-demo"
+    @select="handleSelect"
+    background-color="#545c64"
+    text-color="#fff"
+  >
+    <el-menu-item index="recharge">充值</el-menu-item>
+    <el-menu-item index="refund">退款</el-menu-item>
+    <el-menu-item index="recharge-approval">充值审批</el-menu-item>
+    <el-menu-item index="refund-approval">退款审批</el-menu-item>
+  </el-menu>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const handleSelect = (key) => {
+  // 将连字符去掉并将每个单词的首字母大写
+  const routeName = key.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('')
+  router.push({ name: routeName })
+}
+</script>
+
+<style scoped>
+.el-menu-vertical-demo {
+  width: 200px;
+}
+</style>

250415/src/main.ts

@@ -0,0 +1,12 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router/index.js';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+
+
+const app = createApp(App);
+app.use(router);
+app.use(ElementPlus);
+app.mount('#app');    
+

250415/src/router/index.js

@@ -0,0 +1,36 @@
+// src/router/index.js
+import { createRouter, createWebHistory } from 'vue-router'
+import RechargeApproval from '../views/RechargeApproval.vue'
+import Recharge from '../views/Recharge.vue'
+import Refund from '../views/Refund.vue'
+import RefundApproval from '../views/RefundApproval.vue'
+
+const routes = [
+  {
+    path: '/recharge-approval',
+    name: 'RechargeApproval',
+    component: RechargeApproval
+  },
+  {
+    path: '/recharge',
+    name: 'Recharge',
+    component: Recharge
+  },
+  {
+    path: '/refund',
+    name: 'Refund',
+    component: Refund
+  },
+  {
+    path: '/refund-approval',
+    name: 'RefundApproval',
+    component: RefundApproval
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

250415/src/views/Recharge.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <h1>充值申请</h1>
+    <el-form :model="rechargeForm" @submit.prevent="submitRecharge" label-width="120px">
+      <el-form-item label="精网号">
+        <!-- 将 @input 替换为 @blur 事件 -->
+        <el-input v-model="rechargeForm.netId" @blur="checkJwcode" required style="width: 150px;"></el-input> 
+        <!-- 根据检查结果显示提示信息 -->
+        <span v-if="jwcodeCheckResult !== null">
+          {{ jwcodeCheckResult ? '精网号存在' : '该精网号不存在' }}
+        </span>
+      </el-form-item>
+      <!-- 其他表单项保持不变 -->
+      <el-form-item label="充值金额">
+        <el-input-number v-model="rechargeForm.amount" :min="0" required></el-input-number>
+      </el-form-item>
+      <el-form-item label="支付方式">
+        <el-select v-model="rechargeForm.paymentMethod" placeholder="请选择支付方式" required style="width: 150px;">
+          <el-option label="微信" value="wechat"></el-option>
+          <el-option label="支付宝" value="alipay"></el-option>
+          <el-option label="银行卡" value="bankCard"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="rechargeForm.remark" type="textarea" style="width: 150px;"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" native-type="submit">提交申请</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import axios from 'axios';
+import { ElMessage } from 'element-plus';
+
+// 定义充值表单数据
+const rechargeForm = ref({
+  netId: '',
+  amount: 0,
+  paymentMethod: '',
+  remark: ''
+});
+
+// 存储精网号检查结果
+const jwcodeCheckResult = ref(null);
+
+// 检查精网号是否存在的方法
+const checkJwcode = async () => {
+  const jwcode = rechargeForm.value.netId;
+  if (jwcode) {
+    try {
+      // 发送 GET 请求检查精网号
+      const response = await axios.get(`http://192.168.8.108:5173/recharges/checkJwcode/${jwcode}`);
+      // 假设后端返回布尔值表示是否存在
+      jwcodeCheckResult.value = response.data; 
+    } catch (error) {
+      console.error('检查精网号时出错:', error);
+      jwcodeCheckResult.value = null;
+    }
+  } else {
+    jwcodeCheckResult.value = null;
+  }
+};
+
+// 处理充值申请提交
+const submitRecharge = async () => {
+  if (jwcodeCheckResult.value === false) {
+    ElMessage.error('精网号不存在，无法提交申请');
+    return;
+  }
+
+  try {
+    // 构造要提交的数据
+    const postData = {
+      jwcode: rechargeForm.value.netId,
+      amount: rechargeForm.value.amount,
+      paymentMethod: rechargeForm.value.paymentMethod,
+      notes: rechargeForm.value.remark
+    };
+
+    // 发送 POST 请求
+    const response = await axios.post('http://192.168.8.108:5173/recharges/add/addRecharges', postData);
+
+    // 处理响应
+    if (response.status === 200) {
+      ElMessage.success('充值申请提交成功');
+      // 清空表单
+      rechargeForm.value = {
+        netId: '',
+        amount: 0,
+        paymentMethod: '',
+        remark: ''
+      };
+      jwcodeCheckResult.value = null;
+    } else {
+      ElMessage.error('充值申请提交失败，请重试');
+    }
+  } catch (error) {
+    console.error('提交充值申请时出错:', error);
+    ElMessage.error('提交充值申请时出错，请检查网络或联系管理员');
+  }
+};
+</script>
+
+<style scoped>
+/* 若充值审核页面有特殊样式，可在这里添加相同样式 */
+</style>

250415/src/views/RechargeApproval.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
+      <el-form-item label="精网号">
+        <el-input v-model="queryParams.jwcode" placeholder="请输入精网号"></el-input>
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-select v-model="queryParams.status" placeholder="请选择状态">
+          <el-option label="待审批" value="0"></el-option>
+          <el-option label="审批通过" value="1"></el-option>
+          <el-option label="审批驳回" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="fetchOrders">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table :data="orders" stripe>
+      <el-table-column prop="id" label="序号"></el-table-column>
+      <el-table-column prop="姓名" label="姓名"></el-table-column>
+      <el-table-column prop="jwcode" label="精网号"></el-table-column>
+      <el-table-column prop="order_id" label="订单号"></el-table-column>
+      <el-table-column prop="amount" label="金额"></el-table-column>
+      <el-table-column prop="payment_method" label="支付方式"></el-table-column>
+      <el-table-column prop="notes" label="备注"></el-table-column>
+      <el-table-column prop="status" label="状态">
+        <template #default="{ row }">
+          <span v-if="row.status === 0">待审批</span>
+          <span v-if="row.status === 1">审批通过</span>
+          <span v-if="row.status === 2">审批驳回</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="所属地区" label="所属地区"></el-table-column>
+      <el-table-column label="操作">
+        <template #default="{ row }">
+          <el-button
+            v-if="row.status === 0"
+            type="success"
+            @click="approveOrder(row.id)"
+            :disabled="row.disabled"
+          >
+            审批通过
+          </el-button>
+          <el-button
+            v-if="row.status === 0"
+            type="danger"
+            @click="rejectOrder(row.id)"
+            :disabled="row.disabled"
+          >
+            驳回
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="queryParams.offset / queryParams.size + 1"
+      :page-sizes="[10, 20, 100]"
+      :page-size="queryParams.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import axios from 'axios'
+import { ElMessage } from 'element-plus';
+
+const queryParams = ref({
+  jwcode: '',
+  status: null,
+  size: 10,
+  offset: 0
+})
+
+const orders = ref([])
+const total = ref(0)
+
+const fetchOrders = async () => {
+  try {
+    const response = await axios.post('http://192.168.8.94:5173/recharges/getall', queryParams.value)
+    console.log('接口返回的数据:', response.data.items)
+    if (Array.isArray(response.data.items)) {
+      orders.value = response.data.items.map(order => ({
+        ...order,
+        disabled: order.status !== 0
+      }))
+    } else {
+      const dataArray = response.data.data || []
+      orders.value = dataArray.map(order => ({ 
+        ...order,
+        disabled: order.status !== 0
+      }))
+    }
+    // 从服务器端获取总数据量
+    total.value = response.data.total || 0
+    console.log('更新后的 orders 数据:', orders.value)
+  } catch (error) {
+    console.error('获取订单失败:', error)
+  }
+}
+
+const approveOrder = async (id) => {
+  try {
+    await axios.post(`http://192.168.8.94:5173/recharges/approve/${id}`)
+    const index = orders.value.findIndex(order => order.id === id)
+    if (index !== -1) {
+      orders.value[index].status = 1
+      orders.value[index].disabled = true
+    }
+    ElMessage.success('订单审批通过');
+  } catch (error) {
+    console.error('审批通过失败:', error)
+    ElMessage.error('审批通过失败，请重试');
+  }
+}
+
+const rejectOrder = async (id) => {
+  try {
+    await axios.post(`http://192.168.8.94:5173/recharges/reject/${id}`)
+    const index = orders.value.findIndex(order => order.id === id)
+    if (index !== -1) {
+      orders.value[index].status = 2
+      orders.value[index].disabled = true
+    }
+    ElMessage.success('订单已驳回');
+  } catch (error) {
+    console.error('审批驳回失败:', error)
+    ElMessage.error('审批驳回失败，请重试');
+  }
+}
+
+const handleSizeChange = (newSize) => {
+  queryParams.value.size = newSize
+  queryParams.value.offset = 0
+  fetchOrders()
+}
+
+const handleCurrentChange = (newPage) => {
+  queryParams.value.offset = (newPage - 1) * queryParams.value.size
+  fetchOrders()
+}
+
+onMounted(() => {
+  // 点击左侧导航栏的充值审批时，查询所有充值订单
+  queryParams.value.jwcode = ''
+  queryParams.value.status = null
+  fetchOrders()
+})
+</script>
+
+<style scoped>
+/* 可以根据需要保留或添加其他样式 */
+</style>

250415/src/views/Refund.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <h1>退款审核申请</h1>
+    <el-form :model="refundForm" @submit.prevent="submitRefund" label-width="120px">
+      <el-form-item label="精网号">
+        <el-input v-model="refundForm.jwcode" @blur="checkJwcode" required style="width: 150px;"></el-input>
+        <span v-if="jwcodeCheckResult !== null">
+          {{ jwcodeCheckResult ? '精网号存在' : '该精网号不存在' }}
+        </span>
+      </el-form-item>
+      <el-form-item label="订单号">
+        <el-select v-model="refundForm.orderId" placeholder="请选择订单号" style="width: 150px;">
+          <el-option
+            v-for="order in orderList"
+            :key="order.orderId"
+            :label="order.orderId"
+            :value="order.orderId">
+          </el-option>
+        </el-select>
+        <el-button @click="fetchOrderList">查询订单号</el-button>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="refundForm.remark" type="textarea" style="width: 150px;"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" native-type="submit">提交申请</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import axios from 'axios';
+import { ElMessage } from 'element-plus';
+
+// 定义退款表单数据
+const refundForm = ref({
+  jwcode: '',
+  orderId: '',
+  remark: ''
+});
+
+// 存储精网号检查结果
+const jwcodeCheckResult = ref(null);
+// 存储订单列表
+const orderList = ref([]);
+
+// 检查精网号是否存在的方法
+const checkJwcode = async () => {
+  const jwcode = refundForm.value.jwcode;
+  if (jwcode) {
+    try {
+      const response = await axios.get(`http://192.168.8.94:5173/recharges/checkJwcode/${jwcode}`);
+      jwcodeCheckResult.value = response.data;
+    } catch (error) {
+      console.error('检查精网号时出错:', error);
+      jwcodeCheckResult.value = null;
+    }
+  } else {
+    jwcodeCheckResult.value = null;
+  }
+};
+
+// 根据精网号查询订单列表的方法
+const fetchOrderList = async () => {
+  const jwcode = refundForm.value.jwcode;
+  if (!jwcode) {
+    ElMessage.warning('请先输入精网号');
+    return;
+  }
+  try {
+    const response = await axios.get(`http://192.168.8.94:5173/refunds/add/getOrderIds?jwcode=${jwcode}`);
+    orderList.value = response.data.map(orderId => ({ orderId }));
+    if (orderList.value.length === 0) {
+      ElMessage.info('未查询到符合条件的订单号');
+    }
+  } catch (error) {
+    console.error('查询订单号时出错:', error);
+    ElMessage.error('查询订单号时出错，请检查网络或联系管理员');
+  }
+};
+
+// 处理退款申请提交
+const submitRefund = async () => {
+  if (jwcodeCheckResult.value === false) {
+    ElMessage.error('精网号不存在，无法提交申请');
+    return;
+  }
+  if (!refundForm.value.orderId) {
+    ElMessage.warning('请选择订单号');
+    return;
+  }
+
+  try {
+    // 构造要提交的数据
+    const postData = {
+      jwcode: refundForm.value.jwcode,
+      orderId: refundForm.value.orderId,
+      notes: refundForm.value.remark
+    };
+
+    // 发送 POST 请求
+    const response = await axios.post('http://192.168.8.94:5173/refunds/add/addRefunds', postData);
+
+    // 处理响应
+    if (response.status === 200) {
+      ElMessage.success('退款申请提交成功');
+      // 清空表单
+      refundForm.value = {
+        jwcode: '',
+        orderId: '',
+        remark: ''
+      };
+      jwcodeCheckResult.value = null;
+      orderList.value = [];
+    } else {
+      ElMessage.error('退款申请提交失败，请重试');
+    }
+  } catch (error) {
+    console.error('提交退款申请时出错:', error);
+    ElMessage.error('提交退款申请时出错，请检查网络或联系管理员');
+  }
+};
+</script>
+
+<style scoped>
+/* 若充值审核页面有特殊样式，可在这里添加相同样式 */
+</style>

250415/src/views/RefundApproval.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>这是退款审批页面</div>
+  </template>
+  
+  <script setup>
+  </script>
+  
+  <style scoped>
+  </style>

250415/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

250415/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

250415/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

250415/vite.config.ts

@@ -0,0 +1,18 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})