aircraft-pilot/aircraft/server/my/child_pages/history.vue

<!-- 历史订单 -->
<template>
	<view class="aircraft-history" :style="{backgroundImage: `url(${fileUrl+topBg})`}">
		<Topnav :topLevel="topLevel" title="历史订单" defaultBackColor="#333333"
		 defaultNavTextColor="#333333" showBack />
		<view class="history-content">
			<view class="order-history" :style="{marginTop: CustomBar+'px'}">
				<view class="history-item" v-for="(item,index) in orders" :key="index">
					<view class="hi-top">
						<view class="hi-top-left">
							<u-icon :name="fileUrl+(item.orderType===1?goods:manned)" size="60" 
							style="margin-right: 10rpx;" />
							{{ orderTypes[item.orderType] }}
						</view>
						<view class="hi-top-right" :style="{color: item.mainOrderStatus===0?'#F8B500':'#666666'}">
							{{ orderStatus[item.mainOrderStatus] }}
						</view>
					</view>
					<view class="hi-second">
						<view class="hi-second-lam">
							<view class="lam-circle" />
							景区： {{ scenics[item.attractionId] }}
						</view>
						<view class="hi-second-lam">
							<view class="lam-circle" />
							路线： {{ item.routeName }}
						</view>
					</view>
					<view class="hi-bottom">
						<view class="hi-bottom-left">
							下单时间：{{ item.orderCreateTime }}
						</view>
						<u-button type="warning" :custom-style="customStyle" :hair-line="false"
						@click="showDetail(item)">
							查看详情
						</u-button>
					</view>
				</view>
			</view>
			<u-loadmore v-if="orders.length>0" @loadmore="getMore" :status="form.isFinish" color="#333333" marginTop="30" marginBottom="20" />
			<view class="history-empty" :style="{marginTop: CustomBar+'px'}" v-else>
				<u-empty text="历史订单为空" mode="list"
				src="/static/empty.png" icon-size="300" font-size="40"
				margin-top="250"></u-empty>
			</view>
		</view>
		<u-back-top :scrollTop="scrollTop" zIndex="100" :duration="500"
		:iconStyle="{ color: '#fff' }" :customStyle="{background: 'linear-gradient(180deg, #f8b500 0%, #fceabb 100%)',
		boxShadow: '0rpx 0rpx 12rpx rgba(202,202,182,0.5)',
		filter: 'opacity(0.96)'}"></u-back-top>
		<u-toast ref="uToast"></u-toast>
		<Loading :show="loading" />
	</view>
</template>

<script>
import configService from '@/common/config.service.js';
import Topnav from '@/components/topnav/index.vue';
export default {
	// #ifdef MP
	options: {
		styleIsolation: 'shared'
	},
	// #endif
	components: { Topnav },
	data() {
		return {
			// #ifdef MP
			// 微信小程序自定义导航栏参数
			CustomBar: this.CustomBar || 0,
			// #endif
			// 订单页图标基础路径
			fileUrl: configService.fileUrl + 'aerocraft/order/',
			// 顶部背景图
			topBg: 'bg.png',
			// 载人图标
			manned: 'manned.png',
			// 载物图标
			goods: 'goods.png',
			loading: true, // 加载
			// 订单状态
			orderStatus: {
				0:'未进行',
				1:'进行中',
				2:'已完成',
				3:'已取消',
				4:'待确认',
			},
			// 订单类型
			orderTypes: {
				1: '载物',
				2: '载人'
			},
			// 页面是否滚动到顶
			topLevel: 0,
			// 滚动顶部
			scrollTop: 0,
			// 查看详情按钮样式
			customStyle: {
				backgroundColor: '#FEE547',
				color: '#333333',
				fontSize: '28rpx',
				fontWeight: 'bold',
				fontFamily: 'Source Han Sans SC',
				width: '160rpx',
				height: '68rpx',
				borderRadius: '12rpx',
				border: 'none'
			},
			// 景区列表
			scenics: {},
			// 订单列表
			orders: [],
			// 翻页参数
			form:{
				current: 1,
				size: 10,
				// 是否结束——loadmore加载更多，loading加载中，nomore无更多
				isFinish: 'nomore',
				mainOrderStatusList: '0,1,2,3,4',
			},
		}
	},
	onPageScroll(e) {
		const level = e.scrollTop/60;
		if(level<=1) this.topLevel = level;
		else this.topLevel = 1;
		this.scrollTop = e.scrollTop;
	},
	onLoad(options) {
		this.loading = false;
		this.init();
	},
	methods: {
		// 返回
		back() {
			uni.navigateBack();
		},
		async init(){
			this.form = {size: 10,current: 1,isFinish: 'nomore',mainOrderStatusList: '0,1,2,3,4'};
			// 查询订单列表
			await this.getOrderList();
			// 查询全部景区
			let scenRes = await this.$api.allScenic();
			if(!scenRes)
				this.$refs.uToast.show({type: 'error',title: "景区列表获取失败!"});
			else this.scenics = await scenRes.reduce((obj, item) => ({...obj,[item.id]: item.name}), {})||{};
		},
		// 查询订单列表
		async getOrderList(){
			this.form.isFinish = 'loading';
			let ordRes = await this.$api.getOrders(this.form);
			if(ordRes){
				const { records, size, total, current } = ordRes;
				if(current == 1) this.orders = records || [];
				else this.orders.push(...records);
				this.form.isFinish = size*current >= total ? 'nomore' : 'loadmore';
			}else{
				this.$refs.uToast.show({type:'error',title: "订单列表获取失败!"});
				this.form.isFinish = 'loadmore';
			}
		},
		// 加载更多
		getMore(){
			if(this.form.isFinish === 'nomore') return;
			this.form.current++;
			this.getOrderList();
		},
		// 查看详情
		showDetail(item){
			uni.navigateTo({
				url: `/aircraft/server/order/detail?id=${item.id}`
			})
		},
	},
}
</script>

<style scoped lang="scss">
.aircraft-history {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #F5F5F5;
	background-size: contain;
	background-repeat: no-repeat;
	padding-bottom: 30rpx;
	.history-content{
		width: 100%;
		position: relative;
		.history-empty{
			width: 100%;
			&::v-deep .u-icon__label{
				margin-top: 24rpx !important;
				font-weight: 500;
				font-family: Source Han Sans SC;
			}
		}
		.order-history{
			display: flex;
			flex-direction: column;
			padding: 0 24rpx 30rpx;
			width: 100%;
			.history-item{
				margin-top: 26rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				padding: 20rpx 30rpx 20rpx 20rpx;
				.hi-top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					&-left{
						display: flex;
						align-items: center;
						font-family: SourceHanSansCN;
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
					}
					&-right{
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #F8B500;
					}
				}
				.hi-second{
					margin-top: 8rpx;
					display: flex;
					flex-direction: column;
					&-lam{
						display: flex;
						align-items: center;
						font-family: SourceHanSansCN;
						font-weight: 400;
						font-size: 30rpx;
						color: #333333;
						margin-top: 20rpx;
						.lam-circle{
							width: 12rpx;
							height: 12rpx;
							background: #FCCF16;
							border-radius: 50%;
							margin-right: 12rpx;
						}
					}
				}
				.hi-bottom{
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					margin-bottom: 20rpx;
					&-left{
						font-family: SourceHanSansCN;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
					}
				}
			}
		}
	}
}
</style>