dengrui/components/status-nav.vue

<template>
    <view class="posi-tzy zIn5 statusHNH" style="background: url(https://s3.jpg.cm/2021/07/22/I6PtxL.png) fixed top;background-size: 100%;">
        <view :style="{height:statusBarHeight+'px'}"></view>
        <view class="padding-z20 disac width100 navBarH" :style="{background:backgroudColor}">
            <!-- 返回键 -->
            <view @tap="backEvent">
                <image v-if="statusBackg" class="tab-back margin-y10" src="/static/img/public/back.png"></image>
                <image v-if="statusBackw" class="tab-back margin-y10" src="/static/img/public/white.png"></image>
            </view>
            <!-- 标题 -->
			<view v-if="statusTitle" :class="iscenter?'titlec':'width60 clips1'" class="tab-title " :style="{color:tabcolor}">
				{{titleVal}}
				<image v-if="statusTitleImg" class="margin-z10" src="/static/img/gouwc/map.png" style="width: 35rpx;height: 38rpx;margin-bottom: -5rpx;"></image>
			</view>
            <!-- 输入框 -->
            <view v-if="statusInput" class="searchpradius disac tab-input-box">
                <image src="/static/img/pageh/sousuo.png"></image>
                <input @confirm="confirm" type="text" class="width100 colorh" v-model="serchVal" placeholder="搜索的内容" placeholder-style="color:#c6c6c6;"/>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props:{
            statusTitle:{//是否显示标题
                type:Boolean,
                default:false
            },
			statusTitleImg:{
				type:Boolean,
				default:false
			},
            statusBackg:{//是否显示灰色返回键
                type:Boolean,
                default:false
            },
            statusBackw:{//是否显示白色返回键
                type:Boolean,
                default:false
            },
            statusInput:{//是否显示搜索输入框
                type:Boolean,
                default:false
            },
            backgroudColor:{//标题栏背景颜色
                type:String,
                default:''
            },
            tabcolor:{//标题颜色
                type:String,
                default:'#000000'
            },
            titleVal:{//标题内容
                type:String,
                default:'登锐商城'
            },
			iscenter:{
				type:Boolean,
				default:false
			},
			whereCome:{
				type:Number,
				default:0
			}
        },
		mounted() {
			// 缓存tabber栏的高度
			const query = wx.createSelectorQuery().in(this)
			query.select('.statusHNH').boundingClientRect((rect) => {
			    // console.log('rect.height',rect)
				uni.setStorageSync('statusHNH',rect.height)
			}).exec()
		  },
        data() {
            return {
                serchVal:'',
                statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
            };
        },
		methods:{
			backEvent(){
				// console.log(uni.getStorageInfoSync('token'));
				if(uni.getStorageInfoSync('token')){
					uni.reLaunch({
						url:'/pages/login/login.vue'
					})
				}
                if(this.whereCome==2){
                    uni.reLaunch({url:'/pages/tabbar/homePage/homePage'})
                    return
                }
                if(this.whereCome==1){
                    uni.reLaunch({url:'/pages/tabbar/my/my'})
                    return
                }
				if(this.whereCome==3){
				    uni.reLaunch({url:'/pages/tabbar/product/product'})
				    return
				}
				uni.navigateBack({delta:1})
			},
			confirm(){
				this.$emit('inputConfirm',this.serchVal)
			}
		}
    }
</script>