更新：充值功能页面、充值记录页面

2025-11-25 18:58:44 +08:00
parent c444c03400
commit d3849a90b0
2 changed files with 566 additions and 0 deletions
--- a/pages/user/virtual/index.vue
+++ b/pages/user/virtual/index.vue
@@ -0,0 +1,125 @@
+<template>
+	<z-paging ref="paging" v-model="bookList" auto-show-back-to-top class="my-book-page" @query="loadBookList">
+		<template #top>
+			<!-- 自定义导航栏 -->
+			<nav-bar :title="$t('book.myBook')"></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>
+			<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>
+		</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'
+
+	const { t } = useI18n()
+	const paging = ref<any>()
+
+	// 数据状态
+	const bookList = ref<IBook[]>([])
+	const loading = ref(false)
+	const firstLoad = ref(true)
+
+	// 加载书单列表
+	async function loadBookList(pageNo : number, pageSize : number) {
+		loading.value = true
+		try {
+			const res = await bookApi.getMyBooks(pageNo, pageSize)
+			paging.value.complete(res.page.records)
+		} catch (error) {
+			paging.value.complete(false)
+			console.error('Failed to load book list:', error)
+		} finally {
+			firstLoad.value = false
+			loading.value = false
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.my-book-page {
+		background: #f7faf9;
+		min-height: 100vh;
+
+		.recharge-record {
+			background: #fff;
+			border-radius: 15rpx;
+			overflow: hidden;
+			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+			// padding: 20rpx;
+			margin: 20rpx;
+			
+			.go-gecharge{
+				//height: 100rpx;
+				background: linear-gradient(to right, #007bff, #17a2b8);
+				font-size: 40rpx;
+				font-weight: bold;
+				color: #fff;
+				padding: 20rpx;
+				margin-bottom: 20rpx;
+			}
+			
+			.title {
+				font-size: 40rpx;
+				padding-left:20rpx;
+				margin-bottom: 30rpx;
+				color: #007bff;
+				font-weight: bold;
+			}
+
+			.recharge-record-block {
+				border-bottom: 1px solid #e0e0e0;
+				padding: 20rpx;
+				
+				.time{
+					font-size: 20rpx;
+				}
+
+				.recharge-record-block-row {
+					display: flex;
+					justify-content: space-between;
+					margin-bottom: 20rpx;
+					
+					.text{
+						color: #007bff;
+					}
+				}
+			}
+		}
+
+	}
+</style>