aircraft-pilot/aircraft/server/index/index.vue

<template>
	<view class="mobile-index">
		<Topnav v-if="isPilot?aNavicationList[current].navTitle:bNavicationList[current].navTitle" 
		:topLevel="topLevel" :title="isPilot?aNavicationList[current].navTitle:bNavicationList[current].navTitle" />
		<scroll-view :scroll-top="scrollTop" :scrollY="true" class="u-page upage"
		scroll-with-animation @scroll="scroll" @refresherrefresh="refresh" 
		:refresher-enabled="(isPilot&&current!==3)||(!isPilot&&current!==1)"
		:refresher-triggered="triggered" @refresherpulling="onPulling" lower-threshold="60">
			<!-- #ifdef MP-WEIXIN -->
			<Order ref="pageRef" :isPilot="isPilot" v-if="current===0" />
			<Equipment ref="pageRef" :topLevel="topLevel" v-if="isPilot&&current===1" />
			<Route ref="pageRef" :topLevel="topLevel" v-else-if="isPilot&&current===2" />
			<My ref="pageRef" :isPilot="isPilot" :isLogin="isLogin" @userLogOut="isLogin=''" v-else-if="isPilot&&current===3||current===1" />
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<component ref="pageRef" :topLevel="topLevel" :is="refs[current]"
			:isLogin="isLogin" @userLogOut="isLogin=''"></component>
			<!-- #endif -->
		</scroll-view>
		<view class="navigation">
			<view @click="changeCurrent(index)" class="nav-item"
			:class="current===index?'nav-item-selected':''"
			v-for="(item,index) in isPilot?aNavicationList:bNavicationList" :key="index">
				<image :src="fileUrl+(current===index?item.select:item.icon)"></image>
				<text>{{ item.name }}</text>
			</view>
		</view>
		<Loading :show="loading" />
		<view @click="goTop">
			<u-back-top :scrollTop="oldScrollTop" zIndex="100" :duration="500"
			:iconStyle="{ color: '#fff' }" :customStyle="{background: 'linear-gradient(180deg, #f8b500 0%, #fceabb 100%)',
			boxShadow: '0rpx 0rpx 12rpx rgba(202,202,182,0.5)',
			filter: 'opacity(0.96)'}"></u-back-top>
		</view>
		<Movable v-if="current === 0 && isPilot" :iconName="ordFileUrl+addIcon" />
	</view>
</template>

<script>
import Order from '@/aircraft/server/order/order.vue';
import Equipment from '@/aircraft/server/equipment/equipment.vue';
import Route from '@/aircraft/server/route/route.vue';
import My from '@/aircraft/server/my/my.vue';
import configService from '@/common/config.service.js';
import Topnav from '@/components/topnav/index.vue';
import Movable from '../order/components/movable.vue';
export default {
	components: {
		Order, Equipment, Route, My, Topnav, Movable
	},
	data() {
		return {
			current: uni.getStorageSync('current')||0,// 当前页码下标
			loading: false,
			fileUrl: configService.fileUrl + 'aerocraft/navigation/',//导航栏图标基础路径
			ordFileUrl: configService.fileUrl + 'aerocraft/order/',//订单页图标基础路径
			// 新增图标
			addIcon: 'add.png',
			// a端导航栏按钮
			aNavicationList:[
				{
					name: '订单',
					icon: 'order.png',
					select: 'order-select.png',
					navTitle: '爱尚云'
				},
				{
					name: '设备',
					icon: 'equipment.png',
					select: 'equipment-select.png',
					navTitle: '爱尚云'
				},
				{
					name: '路线',
					icon: 'route.png',
					select: 'route-select.png',
					navTitle: '路线'
				},
				{
					name: '我的',
					icon: 'my.png',
					select: 'my-select.png'
				}
			],
			// b端导航栏按钮
			bNavicationList:[
				{
					name: '订单',
					icon: 'order.png',
					select: 'order-select.png',
					navTitle: '爱尚云'
				},
				{
					name: '我的',
					icon: 'my.png',
					select: 'my-select.png'
				}
			],
			topLevel: 0,// 页面是否滚动到顶
			// 滚动顶部
			scrollTop: 0,
			oldScrollTop: 0,
			// refs组件列表
			refs: ['order','equipment','route','my'],
			// 登录状态
			isLogin: this.$store.state.vuex_token,
			isPilot: this.$store.state.user_type == 1,
			// 下拉刷新触发
			triggered: false,
			_freshing: false
		}
	},
	mounted(){
	},
	onShow(){
		this._freshing = false;
		let index = uni.getStorageSync('current');
		// B端没有设备和路线
		this.current = (!index||(!this.isPilot&&(index===2||index===3)))?0:index;
		this.isLogin = this.$store.state.vuex_token;
		this.isPilot = this.$store.state.user_type;
		this.changeCurrent(this.current);
	},
	methods:{
		// 切换页面
		changeCurrent(index){
			this.current = index;
			uni.setStorageSync('current',index);
			// if(this.current === 1 && !this.isLogin){
			if(!this.isLogin){
				const url = '/aircraft/server/index/index';
				uni.navigateTo({
					url: `/aircraft/server/my/child_pages/login?nextUrl=${url}`
				});
				return;
			}
			this.$nextTick(()=>{
				this.$refs.pageRef.init();
			})
		},
		// 滚动回顶部
		goTop() {
			this.scrollTop = this.oldScrollTop;
			this.$nextTick(()=>{
			    this.scrollTop = 0;
			});
		},
		// 滚动监听
		scroll(e){
			const level = e.detail.scrollTop/60;
			if(level<=1) this.topLevel = level;
			else this.topLevel = 1;
			this.oldScrollTop = e.detail.scrollTop;
		},
		// 上拉刷新
		async refresh(){
			if (this._freshing) return;
			this._freshing = true;
			await this.changeCurrent(this.current);
			this.triggered = false;
			this._freshing = false;
		},
		// 拉动高度
		onPulling(e) {
			if (e.detail.deltaY < 0) {
				return;
			}
			this.triggered = true;
		}
	}
}
</script>

<style lang="scss" scoped>
.mobile-index{
	position: relative;
	// width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	height: 100%;
	.upage{
		background-color: #F5F5F5;
		width: 100%;
		height: calc(100vh - 114rpx - constant(safe-area-inset-bottom));
		height: calc(100vh - 114rpx - env(safe-area-inset-bottom));
		overflow-y: auto;
	}
	.navigation{
		width: 100%;
		// height: 126rpx;
		position: fixed;
		bottom: 0;
		z-index: 90;
		display: flex;
		background-color: #ffffff;
		justify-content: space-around;
		padding-top: 18rpx;
		padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
		align-items: center;
		border-top: 2rpx solid #E6E6E6;
		.nav-item-selected{
			color: #333333 !important;
		}
		.nav-item{
			font-family: Source Han Sans SC;
			font-size: 26rpx;
			color: #666666;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width: 42rpx;
				height: 42rpx;
				margin-bottom: 10rpx;
			}
		}
	}
}
</style>