mahjong_group/pages/other/payment-records.vue

<template>
	<view class="content column">
		<z-paging
			ref="pagePaging"
			v-model="orderList"
			@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>
			</template>

			<view class="list-wrapper">
				<view class="column list-inner">
					<view class="reservation-item reservation-box" v-for="(item, index) in orderList" :key="index">
						<view class="column reservation-inner">
							<view class="row title title-row">
								<view class="title">{{ item.title || '订单' }}</view>
								<view :class="['status-text', statusClass(item)]">{{ item.is_refund_text || '' }}</view>
							</view>

							<view class="row row-text row-center mt-20">
								<text class="label">订单号：</text>
								<text class="value">{{ item.paymentId || '' }}</text>
							</view>

							<view class="row row-text row-center mt-10">
								<text class="label">加入时间：</text>
								<text class="value">{{ item.join_time || '' }}</text>
							</view>

							<view class="row row-text row-center mt-10" v-if="item.status === 1">
								<text class="label">预约状态：</text>
								<text class="value status-quit">已退出</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
import { ref } 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 orderList = ref([])
const pagePaging = ref(null)

const queryList = async (pageNo, pageSize) => {
	try {
		const data = await sqInterface.getPaymentRecords(pageNo, pageSize) || []
		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 statusClass = (item) => {
	switch (Number(item?.is_refund)) {
		case 1: return 'status-wait-pay'
		case 2: return 'status-paid'
		case 3: return 'status-wait-refund'
		case 4: return 'status-refunded'
		default: return ''
	}
}
</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;
}

.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-10 { margin-top: 10rpx; }
.mt-20 { margin-top: 20rpx; }

.label { color: #888; }
.value { color: #333; }

.status-text { font-size: 26rpx; }
.status-wait-pay { color: #e67e22; }
.status-paid { color: #2ecc71; }
.status-wait-refund { color: #3498db; }
.status-refunded { color: #7f8c8d; }
.status-quit { color: #e74c3c; }
</style>