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

<template>
	<view class="container">


		<!-- 切换的页面内容 -->
		<view class="content">
			<!-- 消费页面内容 -->
			<z-paging ref="paging_consume" :fixed="false" height="100vh" v-model="ConsumeDataList"
				@query="loadMoreDataConsume" :default-page-no="1" :default-page-size="4" :auto-show-back-to-top="true">
				<uni-card :title="`车辆编号:${item.bikeCode}`" v-for="(item,index) in ConsumeDataList">
					<view class="flex justify-between card-header">
						<view class="order-time">提交时间：{{item.reportAt}}</view>
					</view>

					<view class="flex justify-between card-info">
						<view class="ride-info">
							<image :src="`${imgPath}static/userui/icon/问题描述.png`"></image>
							<span>问题描述:{{item.faultDescription}}</span>
						</view>
					</view>
					<view class="text-right status-tag">
						<span class="corui-completed">已上报故障</span>
					</view>
				</uni-card> 
			</z-paging>
		</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;
	import {
		showModelMessage,
		jkcBaseEncode,
		jkcBaseDecode
	} from '@/utils/tools.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';

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

	const wechat_user = ref({});
	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 = {
			"userId": wechat_user.value.userId,
			"pageParam": {
				"pageNum": pageNo,
				"pageSize": pageSize
			}
		};
		api.callOrdereApi("ebikeUserFaultreport/getFaultListByWeChatUser", 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);
			}
		});
	};

	onLoad((options) => {
		// 获取设备信息
		const systemInfo = uni.getSystemInfoSync();
		// 获取屏幕高度和状态栏高度
		const screenHeight = systemInfo.screenHeight;
		const statusBarHeight = systemInfo.statusBarHeight;
		// 计算去掉状态栏后的可用区域高度
		scrollHeight.value = screenHeight - statusBarHeight;
		wechat_user.value = JSON.parse(jkcBaseDecode(uni.getStorageSync("wechat_user")));
	})
</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>