新增rechargeDetails.vue

code/vue-base1/src/components/Sidebar.vue

@@ -12,6 +12,7 @@
       <el-menu-item index="2" @click="navigateTo('refund')">退款</el-menu-item>
       <el-menu-item index="3" @click="navigateTo('recharge-audit')">充值审核</el-menu-item>
       <el-menu-item index="4" @click="navigateTo('refund-audit')">退款审核</el-menu-item>
+      <el-menu-item index="5" @click="navigateTo('recharge-details')">充值明细</el-menu-item>
     </div>
   </el-menu>
 </template>

code/vue-base1/src/router/index.js

@@ -3,6 +3,7 @@ import Recharge from '../views/Recharge.vue'
 import Refund from '../views/Refund.vue'
 import RechargeAudit from '../views/RechargeAudit.vue'
 import RefundAudit from '../views/RefundAudit.vue'
+import RechargeDetails from '../views/RechargeDetails.vue'
 
 const routes = [
   {
@@ -24,6 +25,11 @@ const routes = [
     path: '/refund-audit',
     name: 'refund-audit',
     component: RefundAudit
+  },
+  {
+    path: '/recharge-details',
+    name: 'recharge-details',
+    component: RechargeDetails
   }
 ]
 

code/vue-base1/src/views/Recharge.vue

@@ -1,230 +1,230 @@
 <template>
-    <div class="recharge-form">
-      <h2 class="form-title">后台充值</h2>
-
-      <form @submit.prevent="submitForm">
-        <!-- 精网号输入组 -->
-        <div class="form-group">
-          <label for="jwcode">精网号</label>
-          <!-- 添加 @blur 事件监听器 -->
-          <input
-            type="text"
-            id="jwcode"
-            v-model="formData.jwcode"
-            placeholder="请输入精网号"
-            required
-            @blur="checkJwcodeExists"
-          />
-        </div>
-
-        <!-- 充值金额输入组 -->
-        <div class="form-group">
-          <label for="amount">充值金额</label>
-          <!-- 充值金额输入框，使用 v-model.number 绑定到 formData.amount，确保输入为数字 -->
-          <input
-            type="number"
-            id="amount"
-            v-model.number="formData.amount"
-            placeholder="请输入充值金额"
-            required
-            min="0"
-          />
-        </div>
-
-        <!-- 支付方式选择组 -->
-        <div class="form-group">
-          <label for="payment-method">支付方式</label>
-          <!-- 支付方式选择框，使用 v-model 绑定到 formData.paymentMethod -->
-          <select id="payment-method" v-model="formData.paymentMethod" required>
-            <!-- 默认选项 -->
-            <option value="">请选择支付方式</option>
-            <!-- 微信支付选项 -->
-            <option value="WECHAT">微信</option>
-            <!-- 支付宝支付选项 -->
-            <option value="ALIPAY">支付宝</option>
-            <!-- 银行卡支付选项 -->
-            <option value="BANK">银行卡</option>
-          </select>
-        </div>
-
-        <!-- 备注输入组 -->
-        <div class="form-group">
-          <label for="notes">备注：</label>
-          <!-- 修正为绑定到 formData.notes -->
-          <textarea
-            id="notes"
-            v-model="formData.notes"
-            rows="4"
-            placeholder="请输入备注（非必填）"
-          ></textarea>
-        </div>
-
-        <!-- 提交按钮组 -->
-        <div class="form-group">
-          <!-- 修改按钮，根据 isLoading 状态显示不同文字和禁用状态 -->
-          <button type="submit" :disabled="isLoading">
-            {{ isLoading ? '提交中...' : '提交' }}
-          </button>
-        </div>
-      </form>
-    </div>
-  </template>
-
-  <script>
-
-  import axios from 'axios';
-  
-  export default {
-    data() {
-        return {
-
-            formData: {
-
-                jwcode: '',
-
-                amount: null,
-
-                paymentMethod: '',
-
-                notes: ''
-            },
-            isLoading: false,
-            jwcodeExists: true // 新增变量，用于标记精网号是否存在
-        };
-    },
-    methods: {
-        /**
-         * 检查精网号是否存在于数据库
-         */
-        async checkJwcodeExists() {
-            if (!this.formData.jwcode) {
-                this.jwcodeExists = true;
-                return;
-            }
-            try {
-                const response = await axios.get(`http://192.168.8.94:8080/recharges/checkJwcode/${this.formData.jwcode}`);
-                if (response.data && typeof response.data.exists === 'boolean') {
-                    this.jwcodeExists = response.data.exists;
-                } else {
-                    console.error('后端返回的数据格式不正确，缺少 exists 属性或属性类型错误');
-                    // 可以根据实际情况处理错误，比如设置默认值
-                    this.jwcodeExists = true; 
-                }
-                if (!this.jwcodeExists) {
-                    alert('用户不存在1，请检查精网号。');
-                }
-            } catch (error) {
-                console.error('检查精网号失败：', error);
-                alert('检查精网号时出错，请稍后再试。');
-                // 清空精网号记录
-                this.formData.jwcode = ''; 
-            }
-        },
-        /**
-         * 提交表单的方法
-         * 发送表单数据到后端，并处理响应
-         */
-        async submitForm() {
-            // 提交前检查精网号是否为空
-            if (!this.formData.jwcode) {
-                alert("精网号不能为空！");
-                return;
-            }
-            // 检查精网号是否存在
-            if (!this.jwcodeExists) {
-                alert('用户不存在2，请检查精网号。');
-                return;
-            }
-            try {
-
-                // 开始提交，设置加载状态为 true
-                this.isLoading = true; 
-                const response = await axios.post('http://192.168.8.94:8080/recharges/add/addRecharges', this.formData);
-                
-                if (response.data.code === "200") {
-                  console.log('后端响应：', response.data.code === "200");
-                  alert('提交成功！');
-                } else {
-                  alert('提交失败：' + (response.data.message || '未知错误'));
-                }
-            } catch (error) {
-                console.error('提交表单失败：', error);
-                alert('提交失败，请稍后再试。');
-            } finally {
-                // 无论提交成功与否，都清空表单数据
-                this.formData = {
-                    jwcode: '',
-                    amount: null,
-                    paymentMethod: '',
-                    notes: ''
-                };
-                this.isLoading = false; 
-            }
-        }
-    }
-};
-  </script>
-
-  <style scoped>
-  /* 充值表单样式 */
-  .recharge-form {
-    min-width: 600px;
-    margin-left: 8px;
-    margin-top: 2px;
-
-    padding: 20px;
-    /* border: 10px solid #ccc; */
-    border-radius: 8px;
-    background-color: #f9f9f9;
-  }
-
-  /* 表单标题样式 */
-  .form-title {
-    text-align: center;
-    margin-bottom: 20px;
-  }
-
-  /* 表单组样式 */
-  .form-group {
-    margin-bottom: 15px;
-  }
-
-  /* 表单组标签样式 */
-  .form-group label {
-    display: block;
-    margin-bottom: 5px;
-    font-weight: bold;
-  }
-
-  /* 表单组输入框、选择框和文本框样式 */
-  .form-group input[type="text"],
-  .form-group input[type="number"],
-  .form-group select,
-  .form-group textarea {
-    width: 98%;
-    padding: 8px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-  }
-
-  /* 表单组文本框样式 */
-  .form-group textarea {
-    resize: vertical;
-  }
-
-  /* 表单组按钮样式 */
-  .form-group button {
-    width: 100%;
-    padding: 10px;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-
-  /* 表单组按钮悬停样式 */
-  .form-group button:hover {
-    background-color: #0056b3;
+  <div class="recharge-form">
+    <h2 class="form-title">后台充值</h2>
+
+    <form @submit.prevent="submitForm">
+      <!-- 精网号输入组 -->
+      <div class="form-group">
+        <label for="jwcode">精网号</label>
+        <!-- 添加 @blur 事件监听器 -->
+        <input
+          type="text"
+          id="jwcode"
+          v-model="formData.jwcode"
+          placeholder="请输入精网号"
+          required
+          @blur="checkJwcodeExists"
+        />
+      </div>
+
+      <!-- 充值金额输入组 -->
+      <div class="form-group">
+        <label for="amount">充值金额</label>
+        <!-- 充值金额输入框，使用 v-model.number 绑定到 formData.amount，确保输入为数字 -->
+        <input
+          type="number"
+          id="amount"
+          v-model.number="formData.amount"
+          placeholder="请输入充值金额"
+          required
+          min="0"
+        />
+      </div>
+
+      <!-- 支付方式选择组 -->
+      <div class="form-group">
+        <label for="payment-method">支付方式</label>
+        <!-- 支付方式选择框，使用 v-model 绑定到 formData.paymentMethod -->
+        <select id="payment-method" v-model="formData.paymentMethod" required>
+          <!-- 默认选项 -->
+          <option value="">请选择支付方式</option>
+          <!-- 微信支付选项 -->
+          <option value="WECHAT">微信</option>
+          <!-- 支付宝支付选项 -->
+          <option value="ALIPAY">支付宝</option>
+          <!-- 银行卡支付选项 -->
+          <option value="BANK">银行卡</option>
+        </select>
+      </div>
+
+      <!-- 备注输入组 -->
+      <div class="form-group">
+        <label for="notes">备注：</label>
+        <!-- 修正为绑定到 formData.notes -->
+        <textarea
+          id="notes"
+          v-model="formData.notes"
+          rows="4"
+          placeholder="请输入备注（非必填）"
+        ></textarea>
+      </div>
+
+      <!-- 提交按钮组 -->
+      <div class="form-group">
+        <!-- 修改按钮，根据 isLoading 状态显示不同文字和禁用状态 -->
+        <button type="submit" :disabled="isLoading">
+          {{ isLoading ? '提交中...' : '提交' }}
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+
+import axios from 'axios';
+
+export default {
+  data() {
+      return {
+
+          formData: {
+
+              jwcode: '',
+
+              amount: null,
+
+              paymentMethod: '',
+
+              notes: ''
+          },
+          isLoading: false,
+          jwcodeExists: true // 新增变量，用于标记精网号是否存在
+      };
+  },
+  methods: {
+      /**
+       * 检查精网号是否存在于数据库
+       */
+      async checkJwcodeExists() {
+          if (!this.formData.jwcode) {
+              this.jwcodeExists = true;
+              return;
+          }
+          try {
+              const response = await axios.get(`http://192.168.8.94:8080/recharges/checkJwcode/${this.formData.jwcode}`);
+              if (response.data && typeof response.data.exists === 'boolean') {
+                  this.jwcodeExists = response.data.exists;
+              } else {
+                  console.error('后端返回的数据格式不正确，缺少 exists 属性或属性类型错误');
+                  // 可以根据实际情况处理错误，比如设置默认值
+                  this.jwcodeExists = true; 
+              }
+              if (!this.jwcodeExists) {
+                  alert('用户不存在1，请检查精网号。');
+              }
+          } catch (error) {
+              console.error('检查精网号失败：', error);
+              alert('检查精网号时出错，请稍后再试。');
+              // 清空精网号记录
+              this.formData.jwcode = ''; 
+          }
+      },
+      /**
+       * 提交表单的方法
+       * 发送表单数据到后端，并处理响应
+       */
+      async submitForm() {
+          // 提交前检查精网号是否为空
+          if (!this.formData.jwcode) {
+              alert("精网号不能为空！");
+              return;
+          }
+          // 检查精网号是否存在
+          if (!this.jwcodeExists) {
+              alert('用户不存在2，请检查精网号。');
+              return;
+          }
+          try {
+
+              // 开始提交，设置加载状态为 true
+              this.isLoading = true; 
+              const response = await axios.post('http://192.168.8.94:8080/recharges/add/addRecharges', this.formData);
+              
+              if (response.data.code === "200") {
+                console.log('后端响应：', response.data.code === "200");
+                alert('提交成功！');
+              } else {
+                alert('提交失败：' + (response.data.message || '未知错误'));
+              }
+          } catch (error) {
+              console.error('提交表单失败：', error);
+              alert('提交失败，请稍后再试。');
+          } finally {
+              // 无论提交成功与否，都清空表单数据
+              this.formData = {
+                  jwcode: '',
+                  amount: null,
+                  paymentMethod: '',
+                  notes: ''
+              };
+              this.isLoading = false; 
+          }
+      }
   }
-  </style>
+};
+</script>
+
+<style scoped>
+/* 充值表单样式 */
+.recharge-form {
+  min-width: 600px;
+  margin-left: 8px;
+  margin-top: 2px;
+
+  padding: 20px;
+  /* border: 10px solid #ccc; */
+  border-radius: 8px;
+  background-color: #f9f9f9;
+}
+
+/* 表单标题样式 */
+.form-title {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+/* 表单组样式 */
+.form-group {
+  margin-bottom: 15px;
+}
+
+/* 表单组标签样式 */
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+/* 表单组输入框、选择框和文本框样式 */
+.form-group input[type="text"],
+.form-group input[type="number"],
+.form-group select,
+.form-group textarea {
+  width: 98%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+/* 表单组文本框样式 */
+.form-group textarea {
+  resize: vertical;
+}
+
+/* 表单组按钮样式 */
+.form-group button {
+  width: 100%;
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* 表单组按钮悬停样式 */
+.form-group button:hover {
+  background-color: #0056b3;
+}
+</style>

code/vue-base1/src/views/RechargeDetails.vue

@@ -0,0 +1,245 @@
+<template>
+  <!-- 整个页面的卡片容器 -->
+  <el-card class="recharge-card">
+    <!-- 搜索表单部分，使用卡片布局 -->
+    <el-card class="search-card">
+      <template #header>
+        <div class="card-header">
+          <span>搜索条件</span>
+        </div>
+      </template>
+      <!-- 第一行搜索表单，内联布局 -->
+      <el-form :inline="true" :model="searchForm" class="search-form">
+        <el-form-item label="精网号">
+          <!-- 绑定精网号输入值到 searchForm.jwcode -->
+          <el-input v-model="searchForm.jwcode" placeholder="请输入精网号" />
+        </el-form-item>
+        <el-form-item label="地区">
+          <el-select 
+            v-model="searchForm.regions"
+            placeholder="请选择地区"
+            filterable
+            allow-create
+            default-first-option
+          >
+            <el-option label="泰国" value="THAILAND"></el-option>
+            <el-option label="美国" value="AMERICA"></el-option>
+            <el-option label="新加坡" value="SINGAPORE"></el-option>
+            <el-option label="马来西亚" value="MALAYSIA"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="订单号">
+          <!-- 绑定订单号输入值到 searchForm.orderId -->
+          <el-input v-model="searchForm.orderId" placeholder="请输入订单号" />
+        </el-form-item>
+        <el-form-item label="充值方式">
+          <el-select
+            v-model="searchForm.paymentMethod"
+            placeholder="请选择充值方式"
+            filterable
+            allow-create
+            default-first-option
+          >
+            <el-option label="微信" value="WECHAT"></el-option>
+            <el-option label="支付宝" value="ALIPAY"></el-option>
+            <el-option label="银行" value="BANK"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <!-- 第二行搜索表单，内联布局 -->
+      <el-form :inline="true" :model="searchForm" class="search-form">
+        <!-- <el-form-item label="充值时间"> -->
+          <!-- 绑定充值时间范围选择值到 searchForm.rechargeTime -->
+          <!-- <el-date-picker
+            v-model="searchForm.rechargeTime"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          />
+        </el-form-item> -->
+        <!-- 新增一个 div 包裹按钮组 -->
+        <div class="button-group-wrapper">
+          <el-form-item>
+            <el-button type="primary" @click="handleSearch">查询</el-button>
+            <el-button @click="resetSearch">重置</el-button>
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-card>
+
+    <!-- 搜索表单和明细表之间的分隔线 -->
+    <el-divider />
+
+    <!-- 明细表 -->
+    <el-card class="detail-card">
+      <template #header>
+        <div class="card-header">
+          <span>充值明细</span>
+        </div>
+      </template>
+      <!-- 表格组件，绑定表格数据和加载状态 -->
+      <el-table
+        :data="rechargeDetailsList"
+        style="width: 100%"
+        :loading="isLoading"
+        stripe
+        border
+      >
+        <el-table-column prop="序号" label="序号" width="80" />
+        <el-table-column prop="精网号" label="精网号" width="120" />
+        <el-table-column prop="姓名" label="姓名" width="120" />
+        <el-table-column prop="订单号" label="订单号" width="180" />
+        <el-table-column prop="充值方式" label="充值方式" width="120" />
+        <el-table-column prop="所属地区" label="所属地区" width="120" />
+        <el-table-column prop="金币数量" label="金币数量" width="120" />
+        <el-table-column prop="金额" label="金额" width="120" />
+        <el-table-column prop="备注" label="备注" />
+        <el-table-column prop="充值时间" label="充值时间" width="180" />
+      </el-table>
+
+      <!-- 空状态提示 -->
+      <template #empty>
+        <el-empty description="暂无充值明细数据" />
+      </template>
+
+      <!-- 分页组件，绑定当前页码、每页显示数量和总数据量 -->
+      <el-pagination
+        class="pagination"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :total="total"
+        layout="prev, pager, next, jumper"
+        @current-change="handlePageChange"
+      />
+    </el-card>
+  </el-card>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import axios from 'axios'
+import { Search } from '@element-plus/icons-vue'
+
+// 定义充值明细数据，初始为空数组
+const rechargeDetailsList = ref([])
+// 加载状态
+const isLoading = ref(false)
+// 当前页码
+const currentPage = ref(1)
+// 每页显示数量
+const pageSize = ref(8)
+// 定义总数据量，初始为 0
+const total = ref(0)
+
+// 搜索表单数据
+const searchForm = ref({
+  jwcode: '', // 精网号，初始为空字符串
+  regions: [], // 地区，初始为空数组
+  orderId: '', // 订单号，初始为空字符串
+  paymentMethods: [], // 充值方式，初始为空数组
+  rechargeTime: [] // 充值时间范围，初始为空数组
+})
+
+/**
+ * 获取充值明细数据的方法
+ * 向服务器发送请求获取充值明细数据，并更新页面显示
+ */
+const fetchRechargeDetails = async () => {
+  isLoading.value = true
+  try {
+    const params = {
+      page: currentPage.value,
+      pageSize: pageSize.value,
+      jwcode: searchForm.value.jwcode,
+      regions: searchForm.value.regions.join(','),
+      orderId: searchForm.value.orderId,
+      paymentMethods: searchForm.value.paymentMethods.join(','),
+    }
+    const response = await axios.post('http://192.168.8.94:8080/recharges/query', params)
+    console.log('后端返回的数据:', response.data)
+    const items = response.data.items || []
+    // 前端计算序号并覆盖后端返回的 `序号` 字段
+    rechargeDetailsList.value = items.map((item, index) => ({
+      ...item,
+      序号: (currentPage.value - 1) * pageSize.value + index + 1
+    }))
+    total.value = response.data.total || 0
+  } catch (error) {
+    console.error('获取充值明细数据失败', error)
+    rechargeDetailsList.value = []
+    total.value = 0
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// 处理搜索
+const handleSearch = () => {
+  currentPage.value = 1
+  fetchRechargeDetails()
+}
+
+// 重置搜索
+const resetSearch = () => {
+  searchForm.value = {
+    jwcode: '',
+    regions: [],
+    orderId: '',
+    paymentMethods: [],
+    rechargeTime: []
+  }
+  currentPage.value = 1
+  fetchRechargeDetails()
+}
+
+// 处理分页变化
+const handlePageChange = (page) => {
+  currentPage.value = page
+  fetchRechargeDetails()
+}
+
+// 组件挂载完成后，获取充值明细数据
+onMounted(() => {
+  fetchRechargeDetails()
+})
+</script>
+
+<style scoped>
+.recharge-card {
+  margin: 20px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.search-card,
+.detail-card {
+  margin-bottom: 20px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.search-form {
+  margin-bottom: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.button-group-wrapper {
+  /* 让这个 div 占据剩余空间 */
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>