aircraft-pilot/aircraft/server/route/route.vue

<template>
	<!-- <view class="">
		路线 -->
	<view class="aircraft-route" :style="{backgroundImage: `url(${fileUrl+bgIcon})`}">
		<view class="route-content">
			<view class="top-abs" :style="{top: StatusBar+'px',height: CustomBar-StatusBar+'px'}">
				路线
			</view>
			<view :style="{height: CustomBar + 'px'}" />
			<view class="route-search">
				<u-icon class="route-search-icon" :name="fileUrl+searchIcon" size="36" @click="search" />
				<searchCombox style="flex: 1;margin: 0 10rpx;" :candidates="scenics" :isJSON="true" keyName="name" placeholder="搜索景区" 
				v-model="query" @select="handleSearchSelect" selectedColor="#F8B500" />
				<u-icon class="triangle" :name="fileUrl+triangleIcon" size="24" />
			</view>
			<view class="route-item" v-for="(item, index) in routes" :key="index" @click="showDetail(item)">
				<view class="route-item-top">
					<u-icon :name="fileUrl+routeIcon" size="36" />
					<text>{{ item.name }}</text>
				</view>
				<view class="route-item-second">
					<view class="route-detail">
						<view class="route-detail-aim">起飞点</view>
						<view class="route-detail-center" :style="{backgroundImage: `url(${fileUrl+aimIcon})`}">
							目的地<u-icon style="margin-left: 8rpx;" :name="fileUrl+rightIcon" size="18" />
						</view>
						<view class="route-detail-aim">降落点</view>
					</view>
					<view class="route-detail">
						<view class="route-detail-value">{{ item.startPoint || '暂无' }}</view>
						<view class="route-detail-value">{{ item.endPoint || '暂无' }}</view>
					</view>
				</view>
				<view class="route-item-remark">
					{{ item.remark || '运载路线' }}
				</view>
			</view>
			<u-loadmore v-if="routes.length>0" @loadmore="getMore" :status="form.isFinish" color="#333333" marginTop="30" marginBottom="20" />
			<view class="route-empty" :style="{marginTop: CustomBar+100+'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-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import configService from '@/common/config.service.js';
import searchCombox from './components/search-combox.vue';
export default {
	// #ifdef MP
	options: {
		styleIsolation: 'shared'
	},
	// #endif
	components: {searchCombox},
	data(){
		return{
			// #ifdef MP
			// 微信小程序自定义导航栏参数
			StatusBar: this.StatusBar || 0,
			CustomBar: this.CustomBar || 0,
			// #endif
			fileUrl: configService.fileUrl + 'aerocraft/route/',//路线页图标基础路径
			// 背景
			bgIcon: 'bg.png',
			// 搜索图标
			searchIcon: 'search.png',
			// 下拉三角图标
			triangleIcon: 'inverted-triangle.png',
			// 路线图标
			routeIcon: 'route.png',
			// 向右图标
			rightIcon: 'right.png',
			// 目标图标
			aimIcon: 'aim.png',
			// 景区列表
			scenics: [],
			// 路线列表
			routes: [],
			// 搜索值
			query: '',
			// 翻页参数
			form:{
				current: 1,
				size: 10,
				// 是否结束——loadmore加载更多，loading加载中，nomore无更多
				isFinish: 'nomore',
				scenicId: ''
			},
		}
	},
	methods:{
		// 初始化
		async init(){
			this.form = {size: 10,current: 1,isFinish: 'nomore',scenicId: ''};
			await this.getRouteList();
			// 查询全部景区
			let scenRes = await this.$api.allScenic();
			if(!scenRes)
				this.$refs.uToast.show({type: 'error',title: "景区列表获取失败!"});
			else this.scenics = await scenRes;
		},
		// 搜索
		search(){
			this.form = { ...this.form, current: 1, isFinish: 'nomore' };
			if(!this.query) this.form.scenicId = '';
			this.getRouteList();
		},
		// 查询订单列表
		async getRouteList(){
			this.form.isFinish = 'loading';
			let routeRes = await this.$api.getRoutes(this.form);
			if(routeRes){
				const { records, size, total, current } = routeRes;
				if(current == 1) this.routes = records || [];
				else this.routes.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.getRouteList();
		},
		// 搜索
		handleSearchSelect(e){
			this.form.scenicId = e.id;
			this.search();
		},
		// 查看详情
		showDetail(item){
			if(item.id){
				uni.navigateTo({
					url: `/aircraft/server/route/detail?id=${item.id}`
				})
			}
		}
	}
}
</script>

<style scoped lang="scss">
.aircraft-route{
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #F5F5F5;
	background-size: contain;
	background-repeat: no-repeat;
	padding-bottom: 30rpx;
	.route-content{
		width: 100%;
		position: relative;
		padding: 0 24rpx 0;
		.top-abs{
			position: absolute;
			display: flex;
			align-items: center;
			font-family: Source Han Sans SC;
			font-weight: 800;
			font-size: 44rpx;
			color: #333333;
		}
		.route-search{
			margin-top: 18rpx;
			margin-bottom: 4rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 22rpx 30rpx;
			display: flex;
			align-items: center;
			.triangle{
				animation: spinBack 0.1s linear;
			}
			&-icon{
				&:active{
					opacity: 0.7;
				}
			}
		}
		.route-item{
			margin-top: 26rpx;
			display: flex;
			flex-direction: column;
			padding: 36rpx 30rpx 30rpx 30rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			&-top{
				display: flex;
				align-items: center;
				text{
					margin-left: 12rpx;
					font-family: Source Han Sans SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}
			}
			&-second{
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				.route-detail{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-family: Source Han Sans SC;
					width: 100%;
					&-aim{
						padding: 10rpx 0;
						font-weight: bold;
						font-size: 34rpx;
						color: #333333;
						overflow: auto;
						white-space: nowrap;
					}
					&-center{
						white-space: nowrap;
						margin: 0 auto;
						display: flex;
						align-items: center;
						background-size: contain;
						background-repeat: no-repeat;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						padding: 12rpx 62rpx 12rpx 66rpx;
					}
					&-value{
						white-space: nowrap;
						overflow: auto;
						margin-top: 20rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
			&-remark{
				margin-top: 30rpx;
				background: #FFFADD;
				border-radius: 10rpx;
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				padding: 16rpx 20rpx;
			}
		}
		&-empty{
			width: 100%;
			&::v-deep .u-icon__label{
				margin-top: 24rpx !important;
				font-weight: 500;
				font-family: Source Han Sans SC;
			}
		}
		&:focus-within{
			.triangle{
				animation: spin 0.3s linear;
				transform: rotate(180deg);
			}
		}
	}
}
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(180deg);
	}
}
@keyframes spinBack {
	from {
		transform: rotate(180deg);
	}
	to {
		transform: rotate(0deg);
	}
}
::v-deep .search-combox__input-plac{
	color: #999999 !important;
}
::v-deep .search-combox__input{
	margin-top: 2rpx;
	font-family: Source Han Sans SC !important;
	font-weight: 400;
	font-size: 30rpx !important;
}
</style>