hengmei-two/components/status-nav.vue

<template>
    <view class="status-box statusHNH">
        <view :style="{height:statusBarHeight+'px',background:backgroudColor}"></view>
        <view class="status-nav" :style="{background:backgroudColor}">
            <!-- 返回键 -->
			<view @tap="backEvent" v-if="statusBack" style="height: 33rpx;width: 120rpx;flex-shrink: 0;position: absolute;">
				<image v-if="backColor==0" class="tab-back" src="/static/public/backBlackm.png"></image>
				<image v-if="backColor==1" class="tab-back" src="/static/public/videoBack.png"></image>
			</view>
            <!-- 标题 -->
			<!-- <view v-if="statusTitle" :class="statusBack ? 'tcenter' : 'tleft'" class="tab-title" :style="{color:tabcolor}">{{titleVal}}</view> -->
			<view v-if="statusTitle" class="tab-title tcenter" :style="{color:tabcolor}">{{titleVal}}</view>
			<view v-else class="tab-title tcenter" :style="{color:tabcolor}"> </view>
        </view>
    </view>
</template>

<script>
    export default {
		name:'status-nav',
        props:{
            statusTitle:{//是否显示标题
                type:Boolean,
                default:false
            },
            statusBack:{//是否显示返回键
                type:Boolean,
                default:true
            },
            backgroudColor:{//标题栏背景颜色
                type:String,
                default:'#FFFFFF'
            },
            tabcolor:{//标题颜色
                type:String,
                default:'#333333'
            },
            titleVal:{//标题内容
                type:String,
                default:''
            },
			whereCome:{//来自哪个页面
				type:Number,
				default:0
			},
			backColor:{//返回键颜色
				type:Number,
				default:0
			}
        },
		mounted() {
			// 缓存状态栏+标题栏的高度
			const query = wx.createSelectorQuery().in(this)
			query.select('.statusHNH').boundingClientRect((rect) => {
				// console.log('状态栏+标题栏：',rect.height);
				uni.setStorageSync('statusHNH',rect.height);
				this.$store.commit('updateHeightEv',rect.height)
			}).exec()
			
			// 转发进入：获取页面路径
			let pages = getCurrentPages(); //获取加载的页面
			let currentPage = pages[pages.length - 1]; //获取当前页面的对象
			// console.log(currentPage.route,'获取当前页面路径');
			// console.log(currentPage.$page.fullPath,'获取当前页面完整路径带参数');
			uni.setStorageSync('url',`/${currentPage.route}`);
			uni.setStorageSync('paramsUrl',currentPage.$page.fullPath);
			// console.log(uni.getStorageSync('paramsUrl'),66);
			// console.log(uni.getStorageSync('url'),64);
		},
        data() {
            return {
                statusBarHeight:uni.getSystemInfoSync().statusBarHeight,//获取手机状态栏高度
            };
        },
		methods:{
			backEvent(){//返回事件
				if(getApp().globalData.outside){
					this.whereCome = 6;
				}
				switch (this.whereCome){
					case 0:
					uni.navigateBack({delta:1})
						break;
					case 1:
					case 6:
					uni.removeStorageSync('outside');
					uni.reLaunch({
						url:'/pages/tabbar/pagehome/pagehome'
					})
						break;
					case 2:
					uni.reLaunch({
						url:'/pages/tabbar/my/my'
					})
						break;
					default:
						break;
				}
			}
		}
    }
</script>

<style scoped>
	.status-box{position: fixed;top: 0;left: 0;right: 0;z-index: 10;}
	.status-nav{width: 100%;position: relative;padding: 30rpx 0;display: flex;align-items: center;}
	.tab-back{width: 33rpx;height: 33rpx;flex-shrink: 0;position: absolute;left: 20rpx;}
	.tab-title{font-size: 36rpx;font-weight: bold;color: #333333;width: 100%;}
	.tcenter{text-align: center;}
	.tleft{margin-left: 40rpx;}
</style>