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

<template>
	<view class="route-detail" :style="{backgroundImage: `url(${fileUrl+bgIcon})`}">
		<Topnav :topLevel="topLevel" title="路线详情" defaultBackColor="#333333"
		defaultNavTextColor="#333333" showBack />
		<view :style="{height: CustomBar+'px'}" />
		<u-section :title="form.name" :right="false" font-size="40" 
		color="#111827" line-color="#FBBF24" class="route-detail-title" />
		<view class="route-detail-content">
			<view class="rd-aim">
				<u-icon style="margin-right: 8rpx;" name="map" size="30" color="#F59E0B" />
				起飞点
			</view>
			<view class="rd-value">
				经纬度：<text>{{ form.startPoint || '暂无' }}</text>
			</view>
		</view>
		<view class="route-detail-content">
			<view class="rd-aim">
				<u-icon style="margin-right: 8rpx;" name="map" size="30" color="#F59E0B" />
				降落点
			</view>
			<view class="rd-value">
				经纬度：<text>{{ form.endPoint || '暂无' }}</text>
			</view>
		</view>
		<view class="route-detail-content">
			<view class="rd-aim">备注信息</view>
			<view class="rd-remark">
				{{ form.remark || '运载路线' }}
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</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/route/',//路线页图标基础路径
			// 背景
			bgIcon: 'detail-bg.png',
			// 页面是否滚动到顶
			topLevel: 0,
			// 表单
			form:{
				id: ''
			}
		}
	},
	onPageScroll(e) {
		const level = e.scrollTop/60;
		if(level<=1) this.topLevel = level;
		else this.topLevel = 1;
	},
	onLoad(e) {
		this.form.id = e.id;
		this.init(e.id);
	},
	methods:{
		// 初始化
		async init(id = this.form.id){
			if(!id) return;
			let res = await this.$api.singleRoute(id);
			if(res){
				this.form = res;
			}else{
				this.$refs.uToast.show({type:'error',title: "路线详情获取失败!"});
			}
		},
	}
}
</script>

<style scoped lang="scss">
.route-detail{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #FFFFFF;
	background-size: contain;
	background-repeat: no-repeat;
	&-title{
		margin: 36rpx 28rpx 42rpx;
		padding-bottom: 26rpx;
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.05);
		&::v-deep .u-section__title__text{
			margin-left: 10rpx !important;
		}
	}
	&-content{
		border-radius: 20rpx;
		box-shadow: 0rpx -4rpx 6rpx 0rpx rgba(234,233,217,0.3), 0rpx 4rpx 6rpx 0rpx rgba(234,233,217,0.3);
		background: #FFFFFF;
		margin: 0 28rpx 40rpx;
		padding: 40rpx 40rpx 36rpx 40rpx;
		display: flex;
		flex-direction: column;
		.rd-aim{
			font-family: Source Han Sans SC;
			font-size: 32rpx;
			font-weight: 500;
			display: flex;
			align-items: center;
		}
		.rd-value{
			margin-top: 26rpx;
			font-family: Source Han Sans SC;
			font-size: 28rpx;
			color: #6B7280;
			display: flex;
			align-items: center;
			margin-left: 40rpx;
			text{
				margin-left: 4rpx;
				color: #374151;
			}
		}
		.rd-remark{
			margin-top: 26rpx;
			font-family: Source Han Sans SC;
			font-size: 28rpx;
			color: #374151;
			padding: 28rpx;
			background: #FFFBEB;
			border-radius: 14rpx;
		}
	}
}
</style>