taimed-international-app/pages/user/points/index.vue

<template>
	<z-paging ref="paging" v-model="bookList" auto-show-back-to-top class="my-book-page" @query="pointsList"
		:default-page-size="10">
		<template #top>
			<!-- 自定义导航栏 -->
			<nav-bar :title="$t('user.consumptionRecord')"></nav-bar>
		</template>
		<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">{{$t('order.pointsRecord')}}</view>
			<view class="recharge-record-block" v-for="(item, index) in bookList" :key="index" @click="toDetails(item)">
				<view class="recharge-record-block-row">{{item.remark.slice(0, (item.remark.indexOf(',')))}}<text
						:class="item.actType === 1 ? 'text1' : 'text2'">{{item.actType === 1 ? '' : '+'}}{{item.changeAmount}}</text>
				</view>
				<view class="time">{{item.createTime}}</view>
				<view style="font-size: 24rpx;">{{item.remark.slice((item.remark.indexOf(','))+1)}}<wd-icon name="file-copy"
						size="14px" color="#65A1FA" style="margin-left: 10rpx;" @click="copyToClipboard()"></wd-icon></view>
			</view>
		</view>
	</z-paging>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useI18n } from 'vue-i18n'
	import { useUserStore } from '@/stores/user'
	import { getPointsData } from '@/api/modules/user'
	import { copyToClipboard } from '@/utils/index'

	const { t } = useI18n()
	const paging = ref<any>()
	const userStore = useUserStore()

	// 数据状态
	const bookList = ref([])
	const loading = ref(false)
	const firstLoad = ref(true)

	// 充值记录列表
	async function pointsList(pageNo : number, pageSize : number) {
		const userId = userStore.userInfo.id
		loading.value = true
		try {
			const res = await getPointsData(pageNo, pageSize, userId)
			console.log(res, 'res');
			paging.value.complete(res.transactionDetailsList)
		} catch (error) {
			paging.value.complete(false)
			console.error('Failed to load book list:', error)
		} finally {
			firstLoad.value = false
			loading.value = false
		}
	}

	/**
	 * 跳转充值页面
	 */
	const goRecharge = () => {
		uni.navigateTo({
			url: '/pages/user/recharge/index'
		})
	}
	
	/**
	 * 跳转订单详情
	 */
	const toDetails = (order: IOrder) => {
		console.log(order.relationId, "order");
	  uni.navigateTo({
	    url: '/pages/user/order/details?orderId=' + order.relationId
	  })
	}
</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: 30rpx;
				font-weight: bold;
				color: #fff;
				padding: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center
			}

			.title {
				font-size: 30rpx;
				padding-left: 20rpx;
				margin-bottom: 30rpx;
				color: #007bff;
				font-weight: bold;
			}

			.recharge-record-block {
				border-bottom: 1px solid #e0e0e0;
				padding: 20rpx;

				.time {
					font-size: 24rpx;
					margin-bottom: 20rpx;
				}

				.recharge-record-block-row {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
					font-weight: 700;
					.text1 {
						color: #ff0000;
					}

					.text2 {
						color: #228B22;
					}
				}
			}
		}
	}

	.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>