更新：充值消费列表

pages/user/virtual/index.vue

@@ -1,65 +1,46 @@
 <template>
-	<z-paging ref="paging" v-model="bookList" auto-show-back-to-top class="my-book-page" @query="loadBookList">
+	<z-paging ref="paging" v-model="bookList" auto-show-back-to-top class="my-book-page" @query="rechargeList" :default-page-size="10">
 		<template #top>
 			<!-- 自定义导航栏 -->
-			<nav-bar :title="$t('book.myBook')"></nav-bar>
+			<nav-bar :title="$t('user.consumptionRecord')"></nav-bar>
 		</template>
-
-		<!-- 充值列表 -->
-		<!-- <uni-icons fontFamily="CustomFont" :size="26">{{'\uebc6'}}</uni-icons> -->
-		
-		<view class="recharge-record">
-			<view><uni-icons type="right" size="30"></uni-icons></view>
-			<view class="go-gecharge">
-				立即充值
-				<uni-icons type="contact" size="30"></uni-icons>
+		<view class="recharge-record" v-if="(bookList && bookList.length > 0)">
+			<view class="go-gecharge" @click="goRecharge">
+				<view>{{$t('order.recharge')}}</view>
+				<view><wd-icon name="arrow-right" size="16px" color="#fff"/></view>
 			</view>
-			<view class="title">充值消费记录</view>
-			<view class="recharge-record-block" v-for="(item) in 5">
-				<view class="recharge-record-block-row">购买商品<text class="text">90</text></view>
-				<view class="time">2025-10-20</view>
+			<view class="title">{{$t('order.rechargeConsumptionList')}}</view>
+			<view class="recharge-record-block" v-for="(item, index) in bookList" :key="index">
+				<view class="recharge-record-block-row">{{item.orderType}}<text class="text">{{item.changeAmount}}</text></view>
+				<view class="time">{{item.createTime}}</view>
 			</view>
 		</view>
-		<!-- <view v-if="(bookList && bookList.length > 0)" class="book-list">
-      <BookCard 
-        v-for="item in bookList" 
-        :key="item.id"
-        :book="item"
-      />
-    </view> -->
-
-		<!-- 空状态 -->
-		<!-- <view v-else-if="!loading && !firstLoad" class="empty-state">
-      <image src="@/static/null_img.png" mode="aspectFit" />
-      <text class="empty-text">{{ $t('book.nullText') }}</text>
-      <wd-button type="primary" @click="goToBuy">
-        {{ $t('book.choose') }}
-      </wd-button>
-    </view> -->
 	</z-paging>
 </template>
 
 <script setup lang="ts">
 	import { ref } from 'vue'
 	import { useI18n } from 'vue-i18n'
-	import { bookApi } from '@/api/modules/book'
-	import type { IBook } from '@/types/book'
-	import BookCard from '@/components/book/BookCard.vue'
+	import { useUserStore } from '@/stores/user'
+	import { getTransactionDetailsList } from '@/api/modules/user'
 
 	const { t } = useI18n()
 	const paging = ref<any>()
+	const userStore = useUserStore()
 
 	// 数据状态
-	const bookList = ref<IBook[]>([])
+	const bookList = ref([])
 	const loading = ref(false)
 	const firstLoad = ref(true)
 
-	// 加载书单列表
-	async function loadBookList(pageNo : number, pageSize : number) {
+	// 充值记录列表
+	async function rechargeList(pageNo : number, pageSize : number) {
+		const userId = userStore.userInfo.id
 		loading.value = true
 		try {
-			const res = await bookApi.getMyBooks(pageNo, pageSize)
-			paging.value.complete(res.page.records)
+			const res = await getTransactionDetailsList(pageNo, pageSize, userId)
+			console.log(res, 'res');
+			paging.value.complete(res.transactionDetailsList.records)
 		} catch (error) {
 			paging.value.complete(false)
 			console.error('Failed to load book list:', error)
@@ -68,6 +49,15 @@
 			loading.value = false
 		}
 	}
+	
+	/**
+	 * 跳转充值页面
+	 */
+	const goRecharge = () => {
+		uni.navigateTo({
+			url: '/pages/user/recharge/index'
+		})
+	}
 </script>
 
 <style lang="scss" scoped>
@@ -86,15 +76,16 @@
 			.go-gecharge{
 				//height: 100rpx;
 				background: linear-gradient(to right, #007bff, #17a2b8);
-				font-size: 40rpx;
+				font-size: 30rpx;
 				font-weight: bold;
 				color: #fff;
 				padding: 20rpx;
 				margin-bottom: 20rpx;
+				display: flex;justify-content:space-between;align-items:center
 			}
 			
 			.title {
-				font-size: 40rpx;
+				font-size: 30rpx;
 				padding-left:20rpx;
 				margin-bottom: 30rpx;
 				color: #007bff;
@@ -120,6 +111,25 @@
 				}
 			}
 		}
-
 	}
+	.empty-state {
+	  display: flex;
+	  flex-direction: column;
+	  align-items: center;
+	  justify-content: center;
+	  padding-top: 200rpx;
+	  
+	  image {
+	    width: 400rpx;
+	    height: 300rpx;
+	    margin-bottom: 40rpx;
+	  }
+	  
+	  .empty-text {
+	    font-size: 28rpx;
+	    color: #999;
+	    margin-bottom: 50rpx;
+	  }
+	}
+	
 </style>