dengrui/components/status-nav.vue

111 lines
3.5 KiB
Vue
Raw Normal View History

2021-08-26 01:49:06 +00:00
<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.switchTab({url:'/pages/tabbar/homePage/homePage'})
return
}
if(this.whereCome==1){
uni.switchTab({url:'/pages/tabbar/my/my'})
return
}
if(this.whereCome==3){
uni.switchTab({url:'/pages/tabbar/product/product'})
return
}
uni.navigateBack({delta:1})
},
confirm(){
this.$emit('inputConfirm',this.serchVal)
}
}
}
</script>