ebike-ui/ebike-user/pages/user/login/RepairReport.vue

<template>
	<view class="container">
		<view class="flex justify-center padding">
			<!-- 消费选项 -->
			<view class="text-center" style="width: 80px;">
				<view class="wztitle" :class="{ active: selectedTab === 'consume' }" @click="selectTab('consume')">
					消费
				</view>
				<view class="selectTop" v-if="selectedTab === 'consume'"></view>
			</view>

			<!-- 分隔符 -->
			<view class="separator">|</view>

			<!-- 退款选项 -->
			<view class="text-center" style="width: 80px;">
				<view class="wztitle" :class="{ active: selectedTab === 'refund' }" @click="selectTab('refund')">
					退款
				</view>
				<view class="selectTop" v-if="selectedTab === 'refund'"></view>
			</view>
		</view>

		<!-- 切换的页面内容 -->
		<view class="content">
			<view v-show="selectedTab === 'consume'">
				<!-- 消费页面内容 -->
				<z-paging ref="paging_consume" :fixed="false" height="85vh" v-model="ConsumeDataList"
					@query="loadMoreDataConsume" :default-page-no="1" :default-page-size="4"
					:auto-show-back-to-top="true">
					<uni-card :title="'电车'">
						<view class="flex justify-between card-header">
							<view class="order-time">提交时间：2025-04-07 14:25:12</view> 
						</view>

						<view class="flex justify-between card-info">
							<view class="ride-info">
								<image :src="`${imgPath}static/userui/icon/问题描述.png`"></image>
								<span>问题描述:车把坏了……</span>
							</view> 
						</view>
						<view class="text-right status-tag">
							<span class="corui-ride-in-progress">骑行中</span>
						</view>
					</uni-card>
					<uni-card :title="'电车'">
						<view class="flex justify-between card-header">
							<view class="order-time">提交时间：2025-04-07 14:25:12</view>  
						</view>

						<view class="flex justify-between card-info">
							<view class="ride-info">
								<image :src="`${imgPath}userui/icon/问题描述.png`"></image>
								<span>问题描述:车把坏了……</span>
							</view> 
						</view>
						<view class="text-right status-tag">
							<span class="corui-completed">已完成</span>
						</view>
					</uni-card>
				</z-paging>
			</view>

			<view v-show="selectedTab === 'refund'">
				<!-- 退款页面内容 -->
				<z-paging ref="paging_refund" :fixed="false" height="85vh" v-model="RefundDataList"
					@query="loadMoreDataRefund" :default-page-no="1" :default-page-size="4"
					:auto-show-back-to-top="true">
					<uni-card :title="'电车'" @click="goToRepairDetails">
						<view class="flex justify-between card-header">
							<view class="order-time">提交时间：2025-04-07 14:25:11</view> 
						</view> 
						<view class="flex justify-between card-info">
							<view class="ride-info">
								<image :src="`${imgPath}static/userui/icon/问题描述.png`"></image>
								<span>问题描述:车把坏了……</span>
							</view> 
						</view>
						<view class="text-right status-tag">
							<span class="corui-processing">处理中</span>
						</view>
					</uni-card>
					<uni-card :title="'电车'">
						<view class="flex justify-between card-header">
							<view class="order-time">提交时间：2025-04-07 14:25:12</view> 
						</view> 
						<view class="flex justify-between card-info">
							<view class="ride-info">
								<image :src="`${imgPath}static/userui/icon/问题描述.png`"></image>
								<span>问题描述:车把坏了……</span>
							</view> 
						</view>
						<view class="text-right status-tag">
							<span class="corui-completed">已完成</span>
						</view>
					</uni-card>
				</z-paging>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import * as api from '@/utils/api.js';
	import config from '@/utils/config';
	const imgPath = config.imgPath;

	// 使用ref来声明选中的标签
	const selectedTab = ref('consume');
	// 切换选中的标签
	const selectTab = (tab) => {
		selectedTab.value = tab;
	};

	const paging_consume = ref(null);
	const paging_refund = ref(null); 
	const RefundDataList = ref([]);
	const ConsumeDataList = ref([]);
	const scrollHeight = ref(null);

	// 加载消费数据
	const loadMoreDataConsume = (pageNo, pageSize) => {
		const params = {
			"用户ID": 123,
			"pageParam": { "pageNum": pageNo, "pageSize": pageSize }
		};

		api.callEbikeInfo("订单接口？？？", params).then((res) => {
			if (res.code === 200) {
				const records = res.data;
				paging_consume.value.complete(records);
			} else {
				paging_consume.value.complete(false);
			}
		});
	};
	const goToRepairDetails =()=>{ 
			uni.navigateTo({
				url: '/pages/user/login/RepairDetails'
			});
	}

	// 加载退款数据
	const loadMoreDataRefund = (pageNo, pageSize) => {
		const params = {
			"用户ID": 123,
			"pageParam": { "pageNum": pageNo, "pageSize": pageSize }
		};
	
		api.callEbikeInfo("订单接口？？？", params).then((res) => {
			if (res.code === 200) {
				const records = res.data;
				paging_refund.value.complete(records);
			} else {
				paging_refund.value.complete(false);
			}
		});
	};

	onMounted(() => {
		// 获取设备信息
		const systemInfo = uni.getSystemInfoSync();
		const screenHeight = systemInfo.screenHeight;
		const statusBarHeight = systemInfo.statusBarHeight;
		scrollHeight.value = screenHeight - statusBarHeight;
	});
</script>

<style scoped>
	.container {
		height: 100vh;
		background-color: white;
	}

	.selectTop {
		width: 20px;
		height: 2px;
		background-color: rgb(76, 188, 74);
		margin-left: 30px;
		margin-top: 5px;
		border-radius: 2px;
	}

	.separator {
		color: rgb(202, 202, 202);
	}

	.wztitle {
		font-size: 16px;
		font-weight: bold;
	}

	.active {
		color: rgb(76, 188, 74);
	}

	.card-header {
		font-size: 14px;
		color: #333;
	}

	.card-header .order-time {
		font-size: 12px;
		color: #a2a2a2;
	}

	.card-info {
		margin-top: 2px;
		font-size: 16px;
	}

	.card-info .ride-info {
		color: rgb(15, 27, 38);
		font-size: 15px;
	}

	.card-info .ride-info image {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	.status-tag {
		margin-top: 2px;
	}

	.corui-ride-in-progress {
		background-color: rgb(37, 172, 51);
		color: #fff;
		padding: 4px 10px;
		font-size: 12px;
		border-radius: 5px;
	}

	.corui-completed { 
		background-color: rgb(195, 198, 203);
		color: #fff;
		padding: 4px 10px;
		font-size: 12px;
		border-radius: 5px;
	}

	.corui-processing  {
		background-color: rgb(218, 102, 17);
		color: #fff;
		padding: 4px 10px;
		font-size: 12px;
		border-radius: 5px;
	}
</style>