mahjong_group/pages/me/my-record.vue

<template>
	<view class="content column">
		<z-paging ref="pagePaging" v-model="repList" @query="queryList" :refresher-enabled="true"
			:loading-more-enabled="true" :auto="true" :empty-view-text="'暂无记录'"
			:empty-view-img="'@@:app/static/index/no.png'" style="flex: 1; width: 100%; margin-top: 30rpx;">
			<template #top>
				<view class="row header-row" :style="{ marginTop: statusBarHeight + 'px' }">
					<image src="/static/back.png" class="back-icon" @click="goBack()" mode=""></image>
					<text class="page-title">我的记录</text>
					<view class="spacer-40"></view>
				</view>

				<view class="row tab-row">
					<up-tag text="信誉分记录" shape="circle" @click="switchTab(0)"
						:plain="currentIndex == 0 ? false : true"></up-tag>
					<up-tag text="其它记录" shape="circle" @click="switchTab(1)" style="margin-left: 20rpx;"
						:plain="currentIndex == 1 ? false : true"></up-tag>
				</view>
			</template>

			<view class="list-wrapper">
				<view class="column list-inner">
					<view class="reservation-item reservation-box" v-for="(item, index) in repList"
						:key="index">
						<view class="column reservation-inner">
							<view class="row title title-row">
								<view class="title">{{ item.title || '记录' }}</view>
								<view
									:class="['value-text', Number(item.reputation_value) >= 0 ? 'value-pos' : 'value-neg']">
									{{ formatValue(item.reputation_value) }}
								</view>
							</view>

							<view class="row row-text row-center mt-20">
								<text class="ml-20">{{ item.created_at || '' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue'
	import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
	import {
		sqInterface
	} from '@/common/server/interface/sq.js'

	const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight);
	const currentIndex = ref(0)
	const repList = ref([])
	const pagePaging = ref(null)

	const switchTab = (idx) => {
		currentIndex.value = idx
	}

	watch(currentIndex, () => {
		if (pagePaging.value) {
			pagePaging.value.reload()
		}
	})

	const queryList = async (pageNo, pageSize) => {
		try {
			let data = []
			if (currentIndex.value === 0) {
				data = await sqInterface.getReputationByUser(pageNo, pageSize) || []
			} else {
				data = []
			}
			pagePaging.value.complete(data)
		} catch (error) {
			console.error('获取记录失败:', error)
			pagePaging.value.complete(false)
			uni.showToast({
				title: '获取记录失败',
				icon: 'none'
			})
		}
	}

	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}

	const formatValue = (val) => {
		const num = Number(val)
		if (isNaN(num)) return val
		return num > 0 ? `+${num}` : `${num}`
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background: #F7F7F7;
	}

	.header-row {
		width: 90%;
		margin: 100rpx auto 0;
		justify-content: space-between;
	}

	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.page-title {
		font-size: 30rpx;
	}

	.spacer-40 {
		width: 40rpx;
	}

	.tab-row {
		width: 90%;
		margin: 35rpx auto 0;
		font-size: 26rpx;
	}

	.list-wrapper {
		width: 100%;
		overflow-y: auto;
		margin-top: 30rpx;
	}

	.list-inner {
		width: 90%;
		margin: 0 auto 0;
		font-size: 24rpx;
	}

	.title {

		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 35rpx;
		color: #322A2A;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.title-row {
		justify-content: space-between;
	}

	.row-text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #575757;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.reservation-item {
		background: linear-gradient(180deg, #D7F0DD 0%, #FFFFFF 100%);
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.25);
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		transition: transform 0.2s;

		&:active {
			transform: scale(0.98);
		}
	}

	.reservation-box {
		width: 100%;
		border-radius: 10rpx;
		background-color: #F2F3F5;
		margin-bottom: 40rpx;
	}

	.reservation-inner {
		width: 95%;
		margin: 20rpx auto 20rpx;
	}

	.row-center {
		align-items: center;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.ml-20 {
		margin-left: 20rpx;
	}

	.value-text {
		font-size: 26rpx;
	}

	.value-pos {
		color: #2ecc71;
	}

	.value-neg {
		color: #e74c3c;
	}
</style>