新增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/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>