aircraft-pilot/aircraft/server/order/order.vue

<template>
	<view class="aircraft-order">
		<u-image width="100%" :src="fileUrl+banner" mode="widthFix" />
		<view class="order-list">
			<view class="order-item" v-for="(item,index) in orders" :key="index" @click="showDetail(item)">
				<view class="item-first">
					<view class="item-status">{{ orderStatus[item.mainOrderStatus] }}</view>
					<view class="item-type">订单类型：<text>{{ orderTypes[item.orderType] }}</text></view>
				</view>
				<view class="item-second">
					<view class="item-spot">
						<view class="item-dot"/>景区：{{ scenics[item.attractionId] }}
					</view>
					<view class="item-route">
						<view class="item-dot"/>路线：{{ item.routeName }}
					</view>
				</view>
				<view class="item-third">
					<view class="item-identity">
						<u-image class="item-avatar" width="80rpx" height="80rpx" 
						:src="fileUrl+(customers[item.customerId].gender === '男' ? boyIcon : girlIcon)" />
						<view class="item-self">
							<text class="item-name">{{ customers[item.customerId].name }}</text>
							<text class="item-phone">{{ item.customerPhone }}</text>
						</view>
					</view>
					<view class="item-active">
						<u-button type="warning" :custom-style="customStyle" 
						:hair-line="false" @click.stop="handleDoAction(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="order-empty" 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-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import configService from '@/common/config.service.js';
export default {
	// #ifdef MP
	options: {
		styleIsolation: 'shared'
	},
	// #endif
	data(){
		return {
			fileUrl: configService.fileUrl + 'aerocraft/order/',//订单页图标基础路径
			// 轮播图
			banner: 'banner.png',
			// 女生头像
			girlIcon: 'girl.png',
			// 男生头像
			boyIcon: 'boy.png',
			// 订单状态
			orderStatus: {
				0:'未进行',
				1:'进行中',
				2:'已完成',
				3:'已取消'
			},
			// 订单类型
			orderTypes: {
				1: '载物',
				2: '载人'
			},
			// 订单列表
			orders: [],
			// 执行任务按钮样式
			customStyle: {
				backgroundColor: '#FEE547',
				color: '#333333',
				fontSize: '30rpx',
				fontWeight: 'bold',
				fontFamily: 'Source Han Sans SC',
				width: '180rpx',
				height: '72rpx',
				borderRadius: '12rpx',
				border: 'none'
			},
			// 用户信息
			userMessage: this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message),
			// 翻页参数
			form:{
				current: 1,
				size: 10,
				// 是否结束——loadmore加载更多，loading加载中，nomore无更多
				isFinish: 'nomore',
				mainOrderStatusList: '0,1,3',
			},
			// 用户列表
			customers: {},
			// 景区列表
			scenics: {}
		}
	},
	methods:{
		// 初始化
		async init(){
			this.form = {size: 10,current: 1,isFinish: 'nomore',mainOrderStatusList: '0,1,3'};
			// 查询订单列表
			await this.getOrderList();
			// 查询全部客户
			let cusRes = await this.$api.allCustomers();
			if(!cusRes){
				this.$refs.uToast.show({type: 'error',title: "客户获取失败!"});
			}else this.customers = await cusRes.reduce((obj, item) => ({...obj,[item.id]: item}), {})||{};
			// 查询全部景区
			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();
		},
		// 执行任务
		handleDoAction(item){
			uni.navigateTo({
				url: `/aircraft/server/order/detail?id=${item.id}`
			})
		},
		// 查看详情
		showDetail(item){
			uni.navigateTo({
				url: `/aircraft/server/order/add?id=${item.id}`
			})
		},
	}
}
</script>

<style scoped lang="scss">
.aircraft-order{
	height: 100%;
	display: flex;
	flex-direction: column;
	.order-list{
		flex: 1;
		z-index: 1;
		margin-top: -30rpx;
		width: 100%;
		background-color: #F5F5F5;
		border-radius: 24rpx 16rpx 16rpx 16rpx;
		.order-item{
			border-radius: 24rpx 16rpx 16rpx 16rpx;
			display: flex;
			flex-direction: column;
			padding: 0rpx 0rpx 38rpx;
			background: #FFFFFF;
			margin-bottom: 26rpx;
			.item-first{
				display: flex;
				align-items: center;
				.item-status{
					width: 120rpx;
					height: 60rpx;
					background: linear-gradient(0deg, #666666, #333333);
					border-radius: 24rpx 0rpx 30rpx 0rpx;
					margin-right: 30rpx;
					font-family: Source Han Sans SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFEFE;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.item-type{
					margin-top: 20rpx;
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					text{
						font-weight: bold;
						font-size: 30rpx;
					}
				}
			}
			.item-second{
				margin: 38rpx 30rpx 0;
				border-bottom: 2rpx solid #E6E6E6;
				.item-spot,.item-route{
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
					display: flex;
					align-items: center;
					.item-dot{
						background-color: #FCCF16;
						border-radius: 50%;
						width: 12rpx;
						height: 12rpx;
						margin-right: 12rpx;
					}
				}
				.item-spot{
					margin-bottom: 30rpx;
				}
				.item-route{
					margin-bottom: 36rpx;
				}
			}
			.item-third{
				margin: 28rpx 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item-identity{
					display: flex;
					align-items: center;
					.item-avatar{
						margin-right: 14rpx;
					}
					.item-self{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						.item-name{
							margin-top: 6rpx;
						}
						.item-phone{
							margin-bottom: 6rpx;
							font-family: Arial;
						}
					}
				}
				.item-active{
					
				}
			}
		}
	}
	.order-empty{
		&::v-deep .u-icon__label{
			margin-top: 24rpx !important;
			font-weight: 500;
			font-family: Source Han Sans SC;
		}
	}
}
</style>