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.
351 lines
7.3 KiB
351 lines
7.3 KiB
<template>
|
|
<view class="gold-detail-container">
|
|
<!-- 顶部导航栏 -->
|
|
<view class="top-bar">
|
|
<view class="title">金币明细</view>
|
|
</view>
|
|
|
|
<!-- 总金币数 -->
|
|
<view class="total-gold">
|
|
<view class="total-label">总金币数</
|
|
|
|
view>
|
|
<view class="total-value">{{ totalGold }}</view>
|
|
</view>
|
|
|
|
<!-- 列表容器 -->
|
|
<view class="list-container">
|
|
<!-- 错误提示 -->
|
|
<view class="error" v-if="errorMsg">
|
|
<text>{{ errorMsg }}</text>
|
|
<button @click="fetchData">重新加载</button>
|
|
</view>
|
|
|
|
<!-- 列表为空 -->
|
|
<view class="empty" v-if="!loading && !errorMsg && goldList.length === 0">
|
|
<text>暂无金币明细数据</text>
|
|
</view>
|
|
|
|
<!-- 金币明细列表 -->
|
|
<view class="gold-item" v-for="(item, index) in goldList" :key="index">
|
|
<view class="item-header">
|
|
<view class="user-info">
|
|
<view class="name">{{ item.name }}</view>
|
|
<view class="jwcode">ID: {{ item.jwcode }}</view>
|
|
</view>
|
|
<view class="gold-amount">
|
|
<text class="amount">+{{ item.sumGold }}</text>
|
|
<text class="unit">金币</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item-body">
|
|
<view class="detail-item">
|
|
<text class="label">市场：</text>
|
|
<text class="value">{{ item.market }}</text>
|
|
</view>
|
|
<view class="detail-item">
|
|
<text class="label">平台：</text>
|
|
<text class="value">{{ item.payPlatform }}</text>
|
|
</view>
|
|
<view class="detail-item">
|
|
<text class="label">商品：</text>
|
|
<text class="value">{{ item.goodsName }}</text>
|
|
</view>
|
|
<view class="detail-item">
|
|
<text class="label">时间：</text>
|
|
<text class="value">{{ item.auditTime }}</text>
|
|
</view>
|
|
<view class="detail-item" v-if="item.orderCode">
|
|
<text class="label">订单号：</text>
|
|
<text class="value">{{ item.orderCode }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item-footer">
|
|
<view class="gold-breakdown">
|
|
<text>永久金币：{{ item.permanentGold }}</text>
|
|
<text>免费金币：{{ item.freeGold }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 下拉加载更多提示 -->
|
|
<view class="load-more" v-if="hasMore && !loading">
|
|
<text>上拉加载更多</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
// 修正生命周期导入来源（uni-app的生命周期需从@dcloudio/uni-app导入）
|
|
import { ref } from 'vue'
|
|
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
|
|
|
|
// 数据状态
|
|
const goldList = ref([])
|
|
const totalGold = ref(0)
|
|
const loading = ref(false)
|
|
const errorMsg = ref('')
|
|
const page = ref(1)
|
|
const pageSize = ref(10)
|
|
const hasMore = ref(true)
|
|
|
|
// 接口地址
|
|
const API_URL = 'https://hwjb.homilychart.com/dev/admin/goldDetail/getGoldDetail'
|
|
|
|
// 获取数据
|
|
const fetchData = async (isLoadMore = false) => {
|
|
// 如果是加载更多且没有更多数据，直接返回
|
|
if (isLoadMore && !hasMore.value) return
|
|
|
|
// 如果正在加载，直接返回
|
|
if (loading.value) return
|
|
|
|
// 显示加载状态（使用uni-app内置API）
|
|
loading.value = true
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask: true
|
|
})
|
|
errorMsg.value = ''
|
|
|
|
try {
|
|
// 发起请求
|
|
const res = await uni.request({
|
|
url: API_URL,
|
|
method: 'GET',
|
|
data: {
|
|
page: page.value,
|
|
pageSize: pageSize.value
|
|
}
|
|
})
|
|
|
|
// 处理响应
|
|
if (res[1].code === 200) {
|
|
const result = res[1].data
|
|
if (result.code === 200) {
|
|
// 更新总金币数
|
|
totalGold.value = result.data.total
|
|
|
|
// 如果是加载更多，追加数据，否则替换数据
|
|
if (isLoadMore) {
|
|
goldList.value = [...goldList.value, ...result.data.list]
|
|
} else {
|
|
goldList.value = result.data.list
|
|
}
|
|
|
|
// 判断是否还有更多数据
|
|
hasMore.value = result.data.list.length >= pageSize.value
|
|
|
|
// 加载更多时页码加1
|
|
if (isLoadMore) {
|
|
page.value++
|
|
}
|
|
} else {
|
|
errorMsg.value = `获取数据失败: ${result.msg}`
|
|
}
|
|
} else {
|
|
errorMsg.value = `请求失败: ${res[1].statusCode}`
|
|
}
|
|
} catch (err) {
|
|
errorMsg.value = `网络错误: ${err.message}`
|
|
} finally {
|
|
// 隐藏加载状态
|
|
loading.value = false
|
|
uni.hideLoading() // 关闭内置加载提示
|
|
}
|
|
}
|
|
|
|
// 页面加载时获取数据
|
|
onLoad(() => {
|
|
fetchData()
|
|
})
|
|
|
|
// 下拉加载更多
|
|
onReachBottom(() => {
|
|
if (!loading.value && hasMore.value) {
|
|
fetchData(true)
|
|
}
|
|
})
|
|
|
|
// 下拉刷新
|
|
onPullDownRefresh(() => {
|
|
// 重置页码和数据
|
|
page.value = 1
|
|
hasMore.value = true
|
|
fetchData().then(() => {
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.gold-detail-container {
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* 顶部导航 */
|
|
.top-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 30rpx 20rpx;
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.title {
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
/* 总金币数 */
|
|
.total-gold {
|
|
background-color: #fff;
|
|
padding: 40rpx 30rpx;
|
|
margin-bottom: 20rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.total-label {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.total-value {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
color: #ff7d00;
|
|
}
|
|
|
|
/* 列表容器 */
|
|
.list-container {
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
/* 错误提示 */
|
|
.error {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 60rpx 0;
|
|
}
|
|
|
|
.error text {
|
|
font-size: 28rpx;
|
|
color: #f5222d;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.error button {
|
|
background-color: #36bffa;
|
|
color: #fff;
|
|
border-radius: 30rpx;
|
|
padding: 10rpx 30rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
/* 空状态 */
|
|
.empty {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 100rpx 0;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
/* 列表项 */
|
|
.gold-item {
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 25rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.item-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 20rpx;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
|
|
.user-info .name {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
|
|
.user-info .jwcode {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.gold-amount {
|
|
text-align: right;
|
|
}
|
|
|
|
.gold-amount .amount {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #00b42a;
|
|
}
|
|
|
|
.gold-amount .unit {
|
|
font-size: 26rpx;
|
|
color: #00b42a;
|
|
margin-left: 5rpx;
|
|
}
|
|
|
|
.item-body {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.detail-item {
|
|
display: flex;
|
|
margin-bottom: 15rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.detail-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.detail-item .label {
|
|
color: #666;
|
|
width: 120rpx;
|
|
}
|
|
|
|
.detail-item .value {
|
|
flex: 1;
|
|
color: #333;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.item-footer {
|
|
padding-top: 15rpx;
|
|
border-top: 1px dashed #f5f5f5;
|
|
}
|
|
|
|
.gold-breakdown {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
/* 加载更多 */
|
|
.load-more {
|
|
text-align: center;
|
|
padding: 30rpx 0;
|
|
color: #999;
|
|
font-size: 26rpx;
|
|
}
|
|
</style>
|