h5-meike/pages/ticket/orderlist.vue

<template>
	<view class="page mm-page">
		<gmy-back-touch></gmy-back-touch>
		<!-- xuchao: 页头徽章（自定义导航无标题栏，补一个页面标识） -->
		<view class="head mm-fade-up">
			<view class="mm-badge">
				<view class="mm-badge__dot"></view>
				<text class="mm-badge__text">门票订单</text>
			</view>
		</view>

		<!-- xuchao: 订单卡片列表 —— 整卡可点进详情 -->
		<view class="list mm-stagger">
			<view class="order mm-card mm-fade-up" v-for="(item,index) in lookList" :key="index"
				@tap="toOrderDetail(item.id)">
				<view class="order__head">
					<text class="order__no">订单编号：{{item.id}}</text>
					<text :class="['order__status', statusClass(item.orderStatus)]">{{getText(item.orderStatus,1)}}</text>
				</view>
				<view class="order__body">
					<view class="order__name">{{item.skuName}}</view>
					<view class="order__foot">
						<text class="order__date">使用日期：{{item.orderDate}}</text>
						<view class="order__price">
							<text class="order__cur">¥</text>
							<text class="order__num mm-display mm-grad-text">{{(item.orderAmount/100).toFixed(2)}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- xuchao: 空态（首次请求返回空列表才显示） -->
		<view class="empty mm-fade-up" v-if="showEmpty">
			<u-icon name="empty-order" color="#CBD5E1" size="120"></u-icon>
			<view class="empty__text">暂无相关订单</view>
		</view>

		<u-loadmore v-if="lookList.length > 0" :status="status" />
	</view>
</template>

<script>
	var that=''
	import gmyBackTouch from "@/components/gmy-back-touch/gmy-back-touch.vue"
	export default{
		components: {
			'gmy-back-touch': gmyBackTouch
		},
		data(){
			return{
				status: 'loadmore',
				obj: {
					"orderPhone": "",
					"orderStatus": "",
					"pageSize": 10,
					"pageNum": 1,

				},
				pageAll:2,
				isLoad:true,
				lookList:[],
				// xuchao: 首次请求是否已返回，用于区分"加载中"与"真没数据"
				firstLoaded: false,
				orderList:[{
					text:'待支付',
					value:'WAITPAY',
					label:'逾期未支付订单将自动关闭'
				},{
					text:'出票中',
					value:'WAITSEND',
					label:'正在出票中，预计30分钟内出票，超时未出票系统将为您自动退款'
				},{
					text:'已出票',
					value:'HAVESEND',
					label:'已出票，如有疑问请及时联系客服'
				},{
					text:'已完成',
					value:'COMPLETED',
					label:'订单已完成'
				},{
					text:'已取消',
					value:'CANCELLED',
					label:'订单已取消'
				},{
					text:'退款中',
					value:'REFUNDING',
					label:'已确认退款，款项将在1-7个工作日内退回您的付款渠道，请耐心等待'
				},{
					text:'已退款',
					value:'BACKPAYED',
					label:'退款完成，款项已退回您的付款渠道'
				}]
			}
		},
		computed: {
			showEmpty() {
				return this.firstLoaded && this.lookList.length === 0
			}
		},
		onLoad(){
			that=this
			this.obj.orderPhone=uni.getStorageSync('phone')


		},
		onShow() {
			this.pageAll=2
			this.obj.pageNum=1
			this.lookList=[]
			this.queryTicketsOrderPageMethod()
		},
		onReachBottom() {
			this.queryTicketsOrderPageMethod()
		},
		methods:{
			getText(e,f){
				if(f==1){
					let str=this.orderList.filter(item=>{
						return item.value==e
					})[0].text
					return str
				}else if(f==2){
					let str=this.orderList.filter(item=>{
						return item.value==e
					})[0].label
					return str
				}
			},
			// xuchao: 订单状态 → 徽章色调（待办类用主题蓝强调，终态用中性灰）
			statusClass(e) {
				if (['WAITPAY', 'WAITSEND', 'REFUNDING'].indexOf(e) > -1) {
					return 'order__status--active'
				}
				return ''
			},
			queryTicketsOrderPageMethod() {
				if (that.obj.pageNum <= that.pageAll&&this.isLoad) {
					this.isLoad=false
				this.$u.api.queryTicketsOrderPage(this.obj).then(res => {
					this.isLoad=true
					this.firstLoaded = true
					that.obj.pageNum = that.obj.pageNum * 1 + 1;
					that.pageAll = Math.ceil(res.data.total / 10)
					if (that.page == 2) {
						that.lookList = res.data.list
					} else {
						that.lookList = that.lookList.concat(res.data.list)
					}
					if (that.obj.pageNum > that.pageAll) {
						that.status = "nomore"
					}
				})
				}
			},
			toOrderDetail(e){
				uni.navigateTo({
					url:'orderdetail?id='+e
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 32rpx 32rpx 40rpx;
	}

	.head {
		display: flex;
		margin-bottom: 32rpx;
	}

	.list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.order {
		padding: 24rpx;
		transition: transform 0.2s ease-out, box-shadow 0.3s ease-out;
	}

	.order:active {
		transform: scale(0.985);
		box-shadow: var(--mm-shadow-sm);
	}

	.order__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.order__no {
		font-size: 22rpx;
		letter-spacing: 0.02em;
		color: var(--mm-muted-fg);
	}

	.order__status {
		flex: none;
		font-size: 22rpx;
		color: var(--mm-muted-fg);
		background: var(--mm-muted);
		border-radius: 999rpx;
		padding: 4rpx 20rpx;
	}

	/* xuchao: 待办类状态（待支付/出票中/退款中）—— 主题蓝强调 */
	.order__status--active {
		color: var(--mm-accent);
		background: rgba(0, 82, 255, 0.08);
	}

	.order__body {
		margin-top: 20rpx;
		background: var(--mm-muted);
		border-radius: 20rpx;
		padding: 24rpx;
	}

	.order__name {
		font-size: 30rpx;
		font-weight: 600;
		color: var(--mm-fg);
	}

	.order__foot {
		margin-top: 16rpx;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
	}

	.order__date {
		font-size: 24rpx;
		color: var(--mm-muted-fg);
	}

	.order__price {
		display: flex;
		align-items: baseline;
	}

	.order__cur {
		font-size: 24rpx;
		font-weight: 600;
		color: var(--mm-accent);
		margin-right: 2rpx;
	}

	.order__num {
		font-size: 40rpx;
		line-height: 1;
	}

	.empty {
		margin-top: 160rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24rpx;
	}

	.empty__text {
		font-size: 26rpx;
		color: var(--mm-muted-fg);
	}
</style>