You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
320 lines
9.7 KiB
320 lines
9.7 KiB
<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>
|