142 lines
3.3 KiB
Vue
142 lines
3.3 KiB
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> |