zry
1 month ago
4 changed files with 480 additions and 228 deletions
-
1code/vue-base1/src/components/Sidebar.vue
-
6code/vue-base1/src/router/index.js
-
68code/vue-base1/src/views/Recharge.vue
-
245code/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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue