KeChengJiaoFu/components/status-nav/status-nav.vue

<template>
	<!-- #ifdef MP-WEIXIN -->
	<view class="status-box" :style="{marginBottom:marginBottom,background:backgroudColor}">
		<!-- 网络、电量栏 -->
		<view :style="{height:statusBarHeight+'px'}"></view>
		<!-- 头部状态栏 -->
		<view class="status-nav" :style="{height:navBarHeight}">
			<!-- 返回键 -->
			<view class="left-box" @tap="backEv" v-if="ifReturn" :style="{height:navBarHeight}">
				<slot name="leftcontent">
					<i class="icon icon-return" style="font-size: 38rpx;" :style="{color:returnColor}"></i>
				</slot>
			</view>
			
			<view class="left-box" @tap="backHome" v-if="ifReturnHome" :style="{height:navBarHeight}">
				<u-icon name="home" size="20" :color="returnColor"></u-icon>
			</view>
			<!-- 标题 -->
			<view class="tab-title" :style="{color:titleColor,fontWeight:ifBold?'bold':'',justifyContent:ifCenter?'center':'',padding:ifCenter?'0px':`${ifReturn ?'0 38':'0 15'}px`}">
				<view class="title-box" :class="['','clips1','clips2'][clipNumber*1]" :style="{maxWidth: ifCenter ?'360rpx':'70%'}">
					<!-- 有网络 -->
					<view v-if="ifTitle && ifNet">{{navBarTitle}}</view>
					<!-- 无网络 -->
					<view v-if="!ifNet">{{netText}}<text @tap="refreshEv" style="color: #1f6fbb;margin-left: 20rpx;">刷新</text></view>
				</view>
			</view>
			<!-- 右侧图标 -->
			<view class="right-box" :style="{height:navBarHeight}">
				<slot name="rightcontent"></slot>
			</view>
		</view>
	</view>
	<!--  #endif -->
</template>

<script>
	export default {
		name: 'status-nav',
		props: {
			//状态栏、导航栏背景颜色
			backgroudColor: {
				type: String,
				default: '#f7f7f7'
			},
			// 默认导航栏高度
			navBarHeight: {
				type: String,
				default: '50px'
			},
			//是否显示返回键
			ifReturn: {
				type: Boolean,
				default: true
			},
			ifReturnHome: {
				type: Boolean,
				default: false
			},
			// 返回键颜色
			returnColor: {
				type: String,
				default: '#333333'
			},
			//是否显示标题
			ifTitle: {
				type: Boolean,
				default: true
			},
			// 导航栏标题
			navBarTitle: {
				type: String,
				default: ''
			},
			// 标题最多几行显示
			clipNumber: {
				type: String,
				default: '1'
			},
			//标题颜色
			titleColor: {
				type: String,
				default: '#333333'
			},
			// 标题是否居中
			ifCenter: {
				type: Boolean,
				default: true
			},
			// 标题是否加粗
			ifBold: {
				type: Boolean,
				default: false
			},
			// 底部距离内容多高
			marginBottom: {
				type: String,
				default: '0'
			},
		},
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				ifNet: true, // 是否有网络
				netText: '当前无网络',
				netTimer: null
			}
		},
		mounted() {
			// 网络监测
			this.$toolAll.tools.networkStatus();
			// 获取当前页面路径
			this.$toolAll.tools.obtainPagePath();
			setTimeout(() => {
				this.ifNet = uni.getStorageSync('isNet');
			}, 500)
		},
		methods: {
			// 刷新网络事件
			refreshEv() {
				this.netText = '正在刷新...';
				let outTime = 0; //十秒超时
				this.netTimer = setInterval(() => {
					outTime++;
					this.$toolAll.tools.networkStatus();
					if (uni.getStorageSync('isNet')) {
						clearInterval(this.netTimer);
						this.ifNet = true;
					}
					if (outTime == 10) {
						clearInterval(this.netTimer);
						this.netText = '刷新失败';
						outTime = 0;
					}
				}, 1000)
			},
			//返回事件
			backEv() {
				uni.navigateBack({
					delta: 1,
					fail: () => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})
			},
			backHome() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},
		}
	}
</script>

<style scoped>
	.status-box {
		background-repeat: no-repeat;
		background-size: 750rpx auto;
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}
	
	.status-nav {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.left-box {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		padding: 0 50rpx 0 20rpx;
	}

	.right-box {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 0;
		padding: 0 20rpx 0 50rpx;
	}

	.tab-title {
		display: flex;
		width: 100%;
		font-size: 32rpx;
		line-height: 1.5;
		letter-spacing: 2rpx;
		text-indent: 2rpx;
	}

	.tab-title .title-box {
		margin-top: -4rpx;
	}
</style>