perry-mall/components/status-nav.vue

<template>
    <view class="status-box statusHNH">
		<!-- 网络、电量栏 start -->
        <view :style="{height: statusBarHeight+'px',background: backgroudColor}"></view>
		<!-- 网络、电量栏 end -->
		
		<!-- 头部状态栏 start -->
        <view class="status-nav" 
			:style="{background: backgroudColor,height: navBarHeight+'px'}">
            <!-- 返回键 -->
			<view class="return-box" @tap="backEv" v-if="ifReturn" 
				:style="{height: navBarHeight+'px'}">
				<i class="icon icon-return" style="font-size: 40rpx;"
					:style="{color: returnColor}"></i>
			</view>
            <!-- 标题 -->
			<view class="tab-title" v-if="ifTitle" 
				:style="{
					color: titleColor,
					justifyContent: ifCenter ? 'center' : '',
					padding: ifCenter ? '0px' : `${ifReturn ? '0 38' : '0 15'}px`}">
				<view class="title-box" :class="['','clips1','clips2'][clipNumber]" :style="{maxWidth: ifCenter ? '360rpx' : '70%'}">{{navBarTitle}}</view>
			</view>
        </view>
		<!-- 头部状态栏 end -->
    </view>
</template>

<script>
    export default {
		name:'status-nav',
        props:{
			//状态栏、导航栏背景颜色
			backgroudColor:{
			    type:String,
			    default:'#FFFFFF'
			},
			// 默认导航栏高度
			navBarHeight: {
				type:Number,
				default:50
			},
			//是否显示返回键
            ifReturn:{
                type:Boolean,
                default:true
            },
			// 返回键颜色
			returnColor: {
				type:String,
				default:'#000'
			},
			//是否显示标题
			ifTitle:{
			    type:Boolean,
			    default:true
			},
			// 导航栏标题
			navBarTitle: {
				type:String,
				default:'佩丽商城'
			},
			// 标题最多几行显示
			clipNumber: {
				type:Number,
				default:1
			},
			//标题颜色
            titleColor:{
                type:String,
                default:'#333333'
            },
			// 标题是否居中
			ifCenter: {
				type:Boolean,
				default: true
			},
			// 来自哪里
			fromWhere: {
				type:Number,
				default:0
			}
        },
		data(){
			return {
				statusBarHeight: uni.getStorageSync('statusBar'),
			}
		},
		mounted() {
			// 缓存状态栏+标题栏的高度
			// const query = wx.createSelectorQuery().in(this)
			// query.select('.statusHNH').boundingClientRect((rect) => {
			// 	uni.setStorageSync('statusHNH',rect.height)
			// }).exec();
			
			// 获取当前页面路径
			let pages = getCurrentPages();
			let route = pages[pages.length - 1].route;
			uni.setStorageSync('url',`/${route}?invite_code=${uni.getStorageSync('invite_code')}`);
			this.log(route,'status-nav组件打印：当前页面路径')
		},
		methods:{
			//返回事件
			backEv(){
				if(uni.getStorageSync('outside')*1==2){
					this.fromWhere = uni.getStorageSync('outside')*1;
				}
				switch (this.fromWhere){
					case 1:
					case 2:
					uni.navigateTo({
						url:'/pages/tabbar/pagehome/pagehome'
					})
					uni.setStorageSync('outside',0)
						break;
					case 0:
					uni.navigateBack({
						delta:1
					})
						break;
					default:
						break;
				}
			}
		}
    }
</script>

<style scoped>
	.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
	.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
	
	.status-box{
		position: fixed;top: 0;left: 0;right: 0;z-index: 10;
	}
	.status-nav{
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
	}
	.return-box {
		display: flex;justify-content: center;align-items: center;flex-shrink: 0;
		position: absolute;
		padding: 0rpx 10rpx;
	}
	.return-box i {font-size: 56rpx;}
	.tab-title{
		width: 100%;
		font-size: 38rpx;
		display: flex;
	}
	.tab-title .title-box{margin-top: -4rpx;}
</style>