mahjong_group/pages/me/appointment-record-page.vue

<template>
	<com-page-container-base ref="_containerBase">
		<view class="content column">
			<z-paging ref="pagePaging" v-model="reservationList" @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="currentIndex = 0;"
							:plain="currentIndex == 0 ? false : true"></up-tag>

						<up-tag text="我发起的" shape="circle" @click="currentIndex = 1;" style="margin-left: 20rpx;"
							:plain="currentIndex == 1 ? false : true"></up-tag>

					</view>
				</template>
				<!-- 预约记录列表 -->
				<view class="list-wrapper">
					<view class="column list-inner">
						<reservation-item v-for="item in reservationList" :key="item.id" :reservation="item"
							@evaluate="_containerBase.openEvaluatePop" @click="_containerBase.openReservationPopup" />
					</view>
				</view>

			</z-paging>
		</view>
	</com-page-container-base>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue'
import { sqInterface } from '@/common/server/interface/sq.js'
import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import ReservationItem from '@/components/com/page/reservation-item.vue'
import ContainerBase from '@/components/com/page/container-base.vue'
import { onShareAppMessage } from '@dcloudio/uni-app';
import { getShareConfig } from '@/common/server/config'
// 响应式数据
const currentIndex = ref(0)
const reservationList = ref([])
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight);
const pagePaging = ref(null)
const _containerBase = ref(null)

// z-paging 查询
const queryList = async (pageNo, pageSize) => {
	try {

		const data = await sqInterface.getMyReservation(currentIndex.value, pageNo, pageSize)
		if (data && data.length > 0) {
			pagePaging.value.complete(data)
		} else {
			pagePaging.value.complete([])
		}
	} catch (error) {
		console.error('获取预约记录失败:', error)
		pagePaging.value.complete(false)
		uni.showToast({
			title: '获取预约记录失败',
			icon: 'none'
		})
	}
}

// 监听标签切换
watch(currentIndex, (newIndex) => {
	if (pagePaging.value) {
		pagePaging.value.reload()
	}
})

// 返回上一页
const goBack = () => {
	uni.navigateBack({
		delta: 1
	})
}
onShareAppMessage(({ from, target, webViewUrl }) => {
	// console.log('onShareAppMessage', from, target, webViewUrl);
	var resid = 0;
	if (target != null) {
		var item = target.dataset.item;
		console.log('item', item);
		resid = item.id;
	}
	var obj = getShareConfig("pages/index/loading?id=" + resid);
	return obj
});
// 页面加载时交由 z-paging 自动触发加载
onMounted(() => { })
</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;
}

.tab-second {
	margin-left: 50rpx;
}

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

.status-text {
	font-size: 24rpx;
}

.loading-container,
.empty-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400rpx;
	font-size: 28rpx;
	color: #999;
}

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

.avatar {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.evaluate-btn {
	width: 120rpx;
	height: 30px;
	background-color: #1989FA;
	border-radius: 10rpx;
	margin-left: auto;
}

.evaluate-btn-text {
	font-size: 24rpx;
	color: #FFFFFF;
}

.popup-container {
	width: 650rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
}

.popup-inner {
	width: 90%;
	margin: 0 auto 0;
}

.popup-title {
	font-size: 26rpx;
	margin-top: 30rpx;
	text-align: center;
}

.popup-desc {
	font-size: 24rpx;
	margin-top: 20rpx;
}

.panel-box {
	width: 100%;
	background-color: #F2F3F5;
	border-radius: 10rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	margin-top: 20rpx;
}

.down-icon {
	width: 40rpx;
	height: 40rpx;
	margin-left: auto;
	margin-right: 20rpx;
}

.font-24 {
	font-size: 24rpx;
}

.action-row {
	margin-top: 50rpx;
	height: 80rpx;
	color: #FFFFFF;
	font-size: 28rpx;
}

.action-btn {
	flex: 1;
	background-color: #1989FA;
	border-radius: 10rpx;
}

.info-tip {
	font-size: 24rpx;
	text-align: center;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
}
</style>