uniapp-app/pages_app/myAccount/billDetails.vue

<template>
	<view class="bill-details-page">
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left"
			title="账单明细"
			@clickLeft="goBack"
			fixed
			color="#8B2316"
			height="180rpx"
			:border="false"
			backgroundColor="#eeeeee"
		></uni-nav-bar>

		<!-- 表格头部 -->
		<view class="table-header">
			<view class="header-cell business-type">业务类型</view>
			<view class="header-cell user">用户</view>
			<view class="header-cell date-amount">
				<text class="date-label">日期</text>
				<text class="amount-label">金额</text>
			</view>
		</view>

		<!-- 交易记录列表 -->
		<scroll-view 
			class="transaction-list" 
			scroll-y
			refresher-enabled
			@refresherrefresh="onRefresh"
			:refresher-triggered="refreshing"
			@scrolltolower="onLoadMore"
			:lower-threshold="100"
		>
			<view class="transaction-item" v-for="(item, index) in orderList" :key="item.id">
				<view class="cell business-type">{{ item.typeName }}</view>
				<view class="cell user">{{ item.userName }}</view>
				<view class="cell date-amount">
					<text class="date">{{ formatDate(item.createTime) }}</text>
					<text class="amount" :class="item.accountStr < 0 ? 'negative' : 'positive'">{{ item.accountStr }}</text>
				</view>
			</view>
			
			<!-- 加载更多提示 -->
			<view v-if="loading" class="loading-more">
				<text>加载中...</text>
			</view>
			
			<!-- 空数据状态 -->
			<view v-if="!loading && orderList.length === 0" class="empty-state">
				<text>暂无交易记录</text>
			</view>
			
			<!-- 没有更多数据提示 -->
			<view v-if="isLastPage && orderList.length > 0" class="no-more">
				<text>没有更多数据了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '@/api/api.js'

// 响应式数据
const orderList = ref([])
const loading = ref(false)
const refreshing = ref(false)
const page = ref(1)
const total = ref(0)
const isFirstPage = ref(true)
const isLastPage = ref(false)

// 获取订单列表
const getOrderList = async (isRefresh = false) => {
	if (loading.value) return
	
	loading.value = true
	
	try {
		const res = await api.getOrderList({
			page: page.value,
		})
		
		console.log('订单列表:', res)
		
		if (res && res.code === 200 && res.data) {
			const { list, total: totalCount, isFirstPage: firstPage, isLastPage: lastPage } = res.data
			
			if (isRefresh) {
				orderList.value = []
			}
			
			// 处理订单数据
			const processedList = list.map(item => ({
				id: item.trade_no,
				typeName: item.type_name,
				userName: item.user_name,
				createTime: item.create_time,
				accountStr: item.accountstr,
				payChannel: item.pay_channel,
				orderType: item.order_type,
				status: item.status
			}))
			
			orderList.value.push(...processedList)
			total.value = totalCount
			isFirstPage.value = firstPage
			isLastPage.value = lastPage
		}
	} catch (error) {
		console.error('获取订单列表失败:', error)
		uni.showToast({
			title: '获取数据失败',
			icon: 'none'
		})
	} finally {
		loading.value = false
		refreshing.value = false
	}
}

// 刷新数据
const onRefresh = () => {
	refreshing.value = true
	page.value = 1
	isLastPage.value = false
	getOrderList(true)
}

// 加载更多
const onLoadMore = () => {
	if (loading.value || isLastPage.value) return
	
	page.value++
	getOrderList()
}

// 格式化日期
const formatDate = (dateStr) => {
	if (!dateStr) return ''
	const date = new Date(dateStr)
	const year = date.getFullYear()
	const month = String(date.getMonth() + 1).padStart(2, '0')
	const day = String(date.getDate()).padStart(2, '0')
	return `${year}-${month}-${day}`
}

// 返回上一页
const goBack = () => {
	uni.navigateBack()
}

onMounted(() => {
	getOrderList()
})
</script>

<style lang="scss" scoped>
.bill-details-page {
	background-color: #f5f5f5;
	min-height: 100vh;
}



// 加载状态和空数据状态样式
.loading-more, .no-more, .empty-state {
	text-align: center;
	padding: 30rpx;
	color: #999999;
	font-size: 26rpx;
}

.empty-state {
	padding: 100rpx 30rpx;
	color: #999999;
}



// 表格头部样式
.table-header {
	background-color: #e0e0e0;
	display: flex;
	padding: 20rpx 30rpx;
	margin-top: 170rpx; /* 为固定导航栏留出空间 */
	border-bottom: 1rpx solid #ccc;
	
	.header-cell {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		
		&.business-type {
			flex: 1;
			text-align: left;
		}
		
		&.user {
			flex: 1;
			text-align: center;
		}
		
		&.date-amount {
			flex: 1;
			text-align: right;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			
			.date-label {
				font-size: 24rpx;
				margin-bottom: 4rpx;
			}
			
			.amount-label {
				font-size: 24rpx;
			}
		}
	}
}

// 交易记录列表样式
.transaction-list {
	background-color: #f5f5f5;
}

.transaction-item {
	background-color: #f8f8f8;
	display: flex;
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #e5e5e5;
	
	.cell {
		font-size: 26rpx;
		
		&.business-type {
			flex: 1;
			text-align: left;
			color: #666;
		}
		
		&.user {
			flex: 1;
			text-align: center;
			color: #ff0000;
		}
		
		&.date-amount {
			flex: 1;
			text-align: right;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			
			.date {
				font-size: 24rpx;
				color: #666;
				margin-bottom: 4rpx;
			}
			
			.amount {
				font-size: 24rpx;
				
				&.positive {
					color: #ff0000;
				}
				
				&.negative {
					color: #666;
				}
			}
		}
	}
}
</style>