298 lines
7.3 KiB
Vue
298 lines
7.3 KiB
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> |