ebike-ui/ebike-maintenance/pages/user/login/AccountDetails.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 style="color: rgb(202, 202, 202);">
				|
			</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="'订单号:5263215413311'">
						<view class="flex justify-between card-header">
							<view class="order-time">
								2025-04-07 14:25:12
							</view>
							<view class="order-no">
								NO.6543123142
							</view>
						</view>

						<view class="flex justify-between card-info">
							<view class="ride-info">
								<image :src="`${imgPath}static/userui/icon/riding-line.png`"></image>
								<span>骑行35分钟15秒 5.6km</span>
							</view>
							<view class="ride-cost">
								￥5.5元
							</view>
						</view>
						<view class="text-right status-tag">
							<!-- 标签 -->
							<span class="corui-ride-in-progress">骑行中</span>
						</view>
					</uni-card>
					<uni-card :title="'订单号:5263215413311'">
						<view class="flex justify-between card-header">
							<view class="order-time">
								2025-04-07 14:25:12
							</view>
							<view class="order-no">
								NO.6543123142
							</view>
						</view>

						<view class="flex justify-between card-info">
							<view class="ride-info">
								<image :src="`${imgPath}/static/userui/icon/riding-line.png`"></image>
								<span>骑行35分钟15秒 5.6km</span>
							</view>
							<view class="ride-cost">
								￥5.5元
							</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="'订单号:5263215413311'">
						<view class="flex justify-between card-header">
							<view class="order-time">
								2025-04-07 14:25:12
							</view>
							<view class="order-no">
								NO.6543123142
							</view>
						</view>

						<view class="flex justify-between card-info">
							<view class="ride-info">
								<image :src="`${imgPath}/static/userui/icon/riding-line.png`"></image>
								<span>骑行35分钟15秒 5.6km</span>
							</view>
							<view class="ride-cost">
								￥5.5元
							</view>
						</view>
						<view class="text-right status-tag">
							<!-- 标签 -->
							<span class="corui-processing">处理中</span>
						</view>
					</uni-card>
					<uni-card :title="'订单号:5263215413311'">
						<view class="flex justify-between card-header">
							<view class="order-time">
								2025-04-07 14:25:12
							</view>
							<view class="order-no">
								NO.6543123142
							</view>
						</view>

						<view class="flex justify-between card-info">
							<view class="ride-info">
								<image :src="`${imgPath}/static/userui/icon/riding-line.png`"></image>
								<span>骑行35分钟15秒 5.6km</span>
							</view>
							<view class="ride-cost">
								￥5.5元
							</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 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;
	}

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

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

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

	.content {}

	.order-card {
		padding: 16px;
		background-color: #fff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
	}

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

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

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

	.card-info {
		margin-top: 12px;
		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;
	}


	.card-info .ride-cost {
		font-weight: bold;
		font-size: 15px;
		color: rgb(226, 42, 72);
		letter-spacing: 1px;
	}

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

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