luban-mall/components/status-navs/status-nav.vue

<template>
	<view class="status-box" :style="{marginBottom: marginBottom}">
		<!-- 网络、电量栏 -->
		<view :style="{height: statusBarHeight+'px',background: backgroudColor}"></view>
		<!-- 头部状态栏 -->
		<view class="status-nav flex" :style="{background: backgroudColor,height:navBarHeight}">
			<!-- 返回键 -->
			<view class="left-box flex" @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="tab-title" :style="{color: titleColor,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: #3875F6;margin-left: 20rpx;">刷新</text></view>
				</view>
			</view>
			<!-- 右侧图标 -->
			<view class="right-box flex" :style="{height: navBarHeight}">
				<slot name="rightcontent"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'status-nav',
		props: {
			//状态栏、导航栏背景颜色
			backgroudColor: {
				type: String,
				default: '#FFFFFF'
			},
			// 默认导航栏高度
			navBarHeight: {
				type: String,
				default: '50px'
			},
			//是否显示返回键
			ifReturn: {
				type: Boolean,
				default: true
			},
			// 返回键颜色
			returnColor: {
				type: String,
				default: '#000000'
			},
			//是否显示标题
			ifTitle: {
				type: Boolean,
				default: true
			},
			// 导航栏标题
			navBarTitle: {
				type: String,
				default: ''
			},
			// 标题最多几行显示
			clipNumber: {
				type: String,
				default: '1'
			},
			//标题颜色
			titleColor: {
				type: String,
				default: '#000000'
			},
			// 标题是否居中
			ifCenter: {
				type: Boolean,
				default: true
			},
			// 底部距离内容多高
			marginBottom: {
				type: String,
				default: '20rpx'
			},
		},
		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/tabbar/index/index'
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.status-box {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}

	.status-nav {
		align-items: center;
		width: 100%;
		position: relative;
	}

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

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

	.tab-title {
		width: 100%;
		font-size: 36rpx;
		display: flex;
	}

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