driverSchool/newPages/orderList/index.vue

<template>
	<view class="page flex-col">
		<view class="block_1 flex-row">
		</view>
		<view class="block_2 flex-col">
			<view class="group_1 flex-row">
				<image class="label_1" referrerpolicy="no-referrer"
					src="/static/lanhu_quanbudingdan/FigmaDDSSlicePNGacf527a62cbe7351c6472edd8f5b2814.png"
					@click="handleBack()" />
				<text class="text_1">订单</text>

			</view>
			<view class="list_1 flex-col">
				<scroll-view class="scroll-view" scroll-y :style="{ height: scrollHeight + 'px' }"
					@scrolltolower="loadMoreData" :refresher-enabled="true" :refresher-triggered="isRefreshing"
					@refresherrefresh="onRefresherrefresh">
					<view class="list-items_1 flex-col" v-for="(item, index) in orderList" :key="index"
						@click="goOrderDetails(item)">
						<view class="box_6 flex-row justify-between">
							<text class="text_2">订单号: {{item.orderNo}}</text>
							<view class="text-wrapper_1 flex-col"
								:style="{ background: statusMap[item.paymentStatus].background }">
								<text class="text_3" :style="{ color: statusMap[item.paymentStatus].color }">{{
                  statusMap[item.paymentStatus].name}}
								</text>
							</view>
						</view>
						<view class="box_7 flex-row">
							<view class="image-text_1 flex-row">
								<image class="image_3" referrerpolicy="no-referrer"
									:src="imageUrl + '/' + item.photo" />
								<view class="text-group_1 flex-col justify-between">
									<text class="text_4">{{item.courseName}}</text>
									<view class="text-wrapper_2 flex-row justify-between">
										<text class="text_5">￥{{item.reserveMoney}}</text>
										<!-- <text class="text_6">{{item.reserveMoney}}</text> -->
									</view>

								</view>

								<view class="text-wrapper_4 flex-col">
									<text class="text_8">{{item.type}}</text>
								</view>
								<!-- <view class="text-wrapper_3 flex-col">
                  <text class="text_7">{{item.type}}</text>
                </view> -->
							</view>
						</view>



					</view>

				</scroll-view>
			</view>
			<view class="group_2 flex-col justify-end">
				<view class="text-wrapper_5 flex-row">
					<text class="text_9" :class="{ 'active-blue': type === 1 }" @click="changeOrderType('',1)">
						全部订单
					</text>
					<text class="text_10" :class="{ 'active-blue': type === 2 }" @click="changeOrderType(2,2)">
						已付款
					</text>
					<text class="text_11" :class="{ 'active-blue': type === 3 }" @click="changeOrderType(4,3)">
						已面签
					</text>
					<text class="text_12" :class="{ 'active-blue': type === 4 }" @click="changeOrderType(2,4)">
						已报名
					</text>
				</view>
				<view class="box_8 flex-row">
					<!-- <view class="group_8 flex-col"></view> -->
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import request from '@/utils/request.js'

	export default {
		data() {
			return {
				imageUrl: this.$imagesUrl,
				loopData0: [{
						lanhutext0: '订单号：44782938752039585',
						lanhuBg2: 'rgba(255,244,228,1.000000)',
						lanhutext1: '已付款',
						lanhufontColor1: 'rgba(237,162,58,1.000000)',
						/* lanhuimage0:
						  'https://lanhu-oss-2537-2.lanhuapp.com/FigmaDDSSlicePNGcdb906a0aec43afcbb43c980454f42f5.png', */
						lanhutext2: 'AI智能+人工教学',
						lanhutext3: '￥3000.00',
						lanhutext4: '￥3000.00',
						lanhutext5: 'C2',
						lanhutext6: '自动挡'
					},
					{
						lanhutext0: '订单号：44782938752039585',
						lanhuBg2: 'rgba(218,255,239,1.000000)',
						lanhutext1: '已面签',
						lanhufontColor1: 'rgba(17,186,113,1.000000)',
						/* lanhuimage0:
						  'https://lanhu-oss-2537-2.lanhuapp.com/FigmaDDSSlicePNGcdb906a0aec43afcbb43c980454f42f5.png', */
						lanhutext2: 'AI智能+人工教学',
						lanhutext3: '￥3000.00',
						lanhutext4: '￥3000.00',
						lanhutext5: 'C2',
						lanhutext6: '自动挡'
					},
					{
						lanhutext0: '订单号：44782938752039585',
						lanhuBg2: 'rgba(227,238,255,1.000000)',
						lanhutext1: '已报名',
						lanhufontColor1: 'rgba(44,120,245,1.000000)',
						/* lanhuimage0:
						  'https://lanhu-oss-2537-2.lanhuapp.com/FigmaDDSSlicePNGcdb906a0aec43afcbb43c980454f42f5.png', */
						lanhutext2: 'AI智能+人工教学',
						lanhutext3: '￥3000.00',
						lanhutext4: '￥3000.00',
						lanhutext5: 'C2',
						lanhutext6: '自动挡'
					}
				],
				type: null,
				orderType: null,
				scrollHeight: 0,
				userId: null,
				orderList: [],
				constants: {},
				courseDetails: {},
				pageNo: 1,
				pageSize: 10,
				total: 0,
				loading: false,
				isRefreshing: false,
				statusMap: {
					8: {
						name: '退款成功',
						background: '#fef0f0',
						color: '#f56c6c'
					}, // 红色柔和
					7: {
						name: '退款中',
						background: '#fef0f0',
						color: '#f56c6c'
					}, // 红色柔和
					6: {
						name: '申请退款',
						background: '#fef0f0',
						color: '#f56c6c'
					}, // 红色柔和

					5: {
						name: '已完成',
						background: '#f0f9eb',
						color: '#67c23a'
					}, // 绿色完成
					4: {
						name: '已面签',
						background: '#ecf5ff',
						color: '#409EFF'
					}, // 蓝色稳定
					3: {
						name: '待面签',
						background: '#fdf6ec',
						color: '#e6a23c'
					}, // 橙色提醒

					2: {
						name: '已支付',
						background: '#f0f9eb',
						color: '#67c23a'
					}, // 绿色支付成功
					1: {
						name: '已取消',
						background: '#f4f4f5',
						color: '#909399'
					}, // 灰色中立
					0: {
						name: '待支付',
						background: '#fdf6ec',
						color: '#e6a23c'
					}, // 橙色提醒
				}
			};
		},
		onLoad(options) {
			// this.orderType = options.orderType; // 读取上个页面传入的 orderType
			this.orderType = options.orderType ? parseInt(options.orderType) : '';
			this.type = options.type ? parseInt(options.type) : 1;
			this.userId = options.userId;
			// this.type = options.type;
			// this.getUserOrderDetails(this.orderType); // 页面加载时请求数据
			// this.getUserOrderDetails(options.orderType);
			this.changeOrderType(this.orderType, this.type)

		},
		onShow() {
			// 当页面显示时刷新数据
			this.pageNo = 1;
			this.getUserOrderDetails(this.orderType);
		},
		onReady() {
			// 动态计算滚动区域高度
			this.calculateScrollHeight();
		},
		mounted() {
			// this.updateUnderlinePosition(this.orderType);
		},

		methods: {
			handleBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			/**
			 * 上滑加载数据
			 */
			loadMoreData() {
				// 如果正在加载或没有更多数据，则直接返回
				if (this.loading || this.pageNo * this.pageSize >= this.total) {
					return;
				}

				this.loading = true;
				this.pageNo++;

				this.getUserOrderDetails(this.orderType, false);
			},
			/**
			 * 下拉刷新数据
			 */
			onRefresherrefresh() {
				if (this.isRefreshing) return;

				this.isRefreshing = true;
				// 重置页码
				this.pageNo = 1;

				this.getUserOrderDetails(this.orderType, true);
			},

			// 获取用户订单详情
			getUserOrderDetails(paymentStatus, isRefresh = false) {
				if (!isRefresh && this.loading) return;

				request({
					url: '/app-api/small/drive/school-course-order/page',
					method: 'GET',
					params: {
						userId: this.userId,
						paymentStatus: paymentStatus,
						pageNo: this.pageNo,
						pageSize: this.pageSize
					},
					tenantIdFlag: false
				}).then(res => {
					if (isRefresh) {
						// 下拉刷新，替换原有数据
						this.orderList = res.data.records;
						this.isRefreshing = false;
						// 停止下拉刷新动画
						uni.stopPullDownRefresh();
					} else if (this.pageNo === 1) {
						// 首次加载或切换tab
						this.orderList = res.data.records;
					} else {
						// 上拉加载更多，追加数据
						this.orderList = [...this.orderList, ...res.data.records];
					}

					this.total = res.data.total;
					this.loading = false;
				}).catch(err => {
					this.loading = false;
					this.isRefreshing = false;
					if (isRefresh) {
						uni.stopPullDownRefresh();
					}
					console.error('获取订单失败', err);
				});
			},

			// 判断选择的标签
			changeOrderType(orderType, type) {
				this.orderType = orderType;
				this.type = type;
				this.pageNo = 1;
				this.getUserOrderDetails(orderType); // 切换 Tab 时重新请求数据
				// this.updateUnderlinePosition(type);
			},
			// 支付状态
			getStatusStyle(status) {
				return this.statusMap[status] || {
					name: '未知状态',
					background: '',
					color: ''
				};
			},

			// 获取课程详情
			getCourseDetails() {
				request({
					url: '/app-api/dl-drive-school-course-small/get',
					method: 'GET',
					params: {
						id: this.courseId,
						tenantId: this.tenantId,
					},
					tenantIdFlag: false
				}).then(res => {
					this.courseDetails = res.data;
				})
			},

			// 订单详情
			goOrderDetails(data) {
				uni.navigateTo({
					// url: `/newPages/orderDetails/index?data=${data}`
					url: `/newPages/orderDetails/index?data=${encodeURIComponent(JSON.stringify(data))}`
				})
			},

			calculateScrollHeight() {
				// 获取屏幕高度
				const screenHeight = uni.getSystemInfoSync().windowHeight;
				// 获取顶部区域高度
				const topHeight = 160;
				// 计算滚动区域高度
				this.scrollHeight = screenHeight - topHeight;
			},
		}
	};
</script>
<style lang='scss'>
	@import '../common/common.scss';
	@import './assets/style/index.rpx.scss';
</style>