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

<template>
  <!-- 整个页面容器 -->
  <div class="recharge-details-page">
    <!-- 整个页面的卡片容器 -->
    <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 组件，支持筛选和创建新选项 -->
            <el-select
              v-model="searchForm.region"
              placeholder="请选择或输入地区"
              filterable
              allow-create
              default-first-option
            >
              <!-- 动态生成地区选项 -->
              <el-option
                v-for="region in regionList"
                :key="region"
                :label="region"
                :value="region"
              ></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="备注" min-width="150"/>
          <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>
  </div>
</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: '', // 精网号，初始为空字符串
  region: '', // 地区，初始为空字符串
  orderId: '', // 订单号，初始为空字符串
  paymentMethod: '', // 充值方式，初始为空字符串
  rechargeTime: [] // 充值时间范围，初始为空数组
})

// 地区列表
const regionList = ref([])

/**
 * 获取地区数据的方法
 * 向服务器发送请求获取地区数据，并更新地区列表
 */
const fetchRegionList = async () => {
  try {
    // 请替换为实际的地区数据接口地址
    const response = await axios.post('http://192.168.8.94:5173/users/getRegion', {}); 
    if (response.data && Array.isArray(response.data)) {
      regionList.value = response.data;
    } else {
      throw new Error('后端返回的地区数据格式不正确');
    }
  } catch (error) {
    console.error('获取地区数据失败', error);
  }
};

/**
 * 获取充值明细数据的方法
 * 向服务器发送请求获取充值明细数据，并更新页面显示
 */
const fetchRechargeDetails = async () => {
  isLoading.value = true;
  try {
    const params = {
      page: currentPage.value,
      size: pageSize.value,
      jwcode: searchForm.value.jwcode,
      region: searchForm.value.region, // 修改为 region
      orderId: searchForm.value.orderId,
      paymentMethod: searchForm.value.paymentMethod,
    };
    console.log('发送的请求参数:', params);
    const response = await axios.post('http://192.168.8.94:5173/recharges/query', params, {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    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 = () => {
  // 清除搜索表单中字符串类型字段的所有空格
  searchForm.value.jwcode = searchForm.value.jwcode.replace(/\s/g, '');
  searchForm.value.region = searchForm.value.region.replace(/\s/g, '');
  searchForm.value.orderId = searchForm.value.orderId.replace(/\s/g, '');
  console.log('搜索表单数据:', searchForm.value); // 打印搜索表单数据
  currentPage.value = 1;
  fetchRechargeDetails();
};

// 重置搜索
const resetSearch = () => {
  searchForm.value = {
    jwcode: '',
    region: '',
    orderId: '',
    paymentMethod: '',
    rechargeTime: []
  };
  currentPage.value = 1;
  fetchRechargeDetails();
};

// 处理分页变化
const handlePageChange = (page) => {
  currentPage.value = page
  fetchRechargeDetails()
}

// 组件挂载完成后，获取充值明细数据和地区数据
onMounted(() => {
  fetchRechargeDetails()
  fetchRegionList()
})
</script>

<style scoped>
/* 充值明细页面样式 */
.recharge-details-page {
  /* 假设导航栏宽度为 180px，根据实际情况修改 */
  margin-left: 180px; 
  /* 调整页面宽度，使用百分比适应剩余空间 */
  width: calc(100% - 250px); 
  min-width: auto; 
  margin-top: 2px;
  padding: 20px;
  /* 设置页面完全透明 */
  background-color: transparent; 
}

.recharge-card {
  margin: 1px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  min-height: 890px;
  /* 设置卡片半透明背景 */
  background-color: rgba(255, 255, 255, 0.4); 
}

.search-card,
.detail-card {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* 设置卡片半透明背景 */
  background-color: transparent; 
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000; /* 假设背景较暗，设置文字颜色为白色以便查看 */
}

.search-form {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* 输入框和选择框样式 */
.search-form .el-input__inner,
.search-form .el-select .el-input__inner {
  background-color: rgba(255, 255, 255, 0.5); 
  border: 1px solid #ccc;
  color: #000;
}

.button-group-wrapper {
  /* 让这个 div 占据剩余空间 */
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
}

/* 表格样式 */
.el-table {
  background-color: rgba(255, 255, 255, 0.5); 
}

.el-table th,
.el-table td {
  background-color: transparent; 
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>