You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

210 lines
5.7 KiB

<template>
<view class="">
<view class="header-com" :style="{paddingTop:headerArea.status_height+'px'}">
<view class="header-com-content" :style="{height:headerArea.title_height+'px',lineHeight:headerArea.title_height+'px',fontSize:headerArea.fontSize+'px'}">
<view class="header-com-title" v-if="left" :style="{height:headerArea.title_height+'px'}">
<img v-if="!isindex && comback" class="header-com-comback" :src="cssUrl+'header_back.svg'" :style="{width:headerArea.backwidth+'px',height:headerArea.backheight+'px'}">
<view v-if="(!isindex && comback) || showClouldPhoto" @click="headerComeBack" class="header-com-comback header-com-comback-opc" :style="{width:headerArea.backwidth+'px',height:headerArea.title_height+'px',padding:'0rpx 0rpx 0rpx 36rpx',left:'-18rpx'}"></view>
<img v-if="!showClouldPhoto && !showUserSetting" class="header-com-logo" :src="cssUrl+'logo.png'" :style="{width:headerArea.logowidth+'px',height:headerArea.logoheight+'px'}">
<view class="header-com-line" :style="{height:headerArea.lineheight+'px'}" v-if="is_admin && !showClouldPhoto"></view>
<view class="header-com-role font24rpx PingFangSCMedium" v-if="is_admin && !showClouldPhoto && !showUserSetting">管理员</view>
<view v-if="showClouldPhoto && typeClouldPhoto == 1" class="clouldPhoto">云相册选择图片</view>
<view v-if="showClouldPhoto && typeClouldPhoto == 2" class="clouldPhoto">云相册选择封面</view>
<view v-if="showUserSetting" class="userSetting">修改资料</view>
</view>
</view>
</view>
<view class="header-com-bt" :style="{width:'100%',height:(headerArea.btheight)+'px'}"></view>
</view>
</template>
<script>
export default {
name:'header',
data() {
return {
cssUrl:this.cssUrl
}
},
props:{
left:{
type:Boolean,
default:()=>false
},
comback:{
type:Boolean,
default:()=>true
},
showClouldPhoto:{
type:Boolean,
default:()=>false
},
typeClouldPhoto:{
type:Number,
default:()=>0
},
showUserSetting:{
type:Boolean,
default:()=>false
},
isindex:{
type:Boolean,
default:()=>false
},
role:{
type:String,
default:()=>'',
},
is_admin:{
type: Boolean,
default: false
}
},
computed:{
headerArea() {
let area = uni.getSystemInfoSync();
// #ifdef MP-WEIXIN
return this.getHeaderInfo();
// #endif
// #ifndef MP-WEIXIN
return {
status_height: area.statusBarHeight,
title_height: uni.upx2px(80),
menuLeft: 0,
fontSize:uni.upx2px(34),
};
// #endif
}
},
methods: {
async getUser() {
await this.$http.req('userapi/index2/getUser').then(data=>{
if(data == -1) return;
uni.removeStorageSync('uuid');
uni.removeStorageSync('nickname');
uni.removeStorageSync('avatar');
uni.removeStorageSync('level_id');
uni.removeStorageSync('level_name');
uni.removeStorageSync('is_admin');
uni.removeStorageSync('avatar_full');
uni.removeStorageSync('create');
uni.removeStorageSync('uuid_str');
if(data.is_admin) uni.removeStorageSync('is_admin');
uni.setStorageSync('uuid', data.userId);
uni.setStorageSync('uuid_str', data.userIdStr);
uni.setStorageSync('nickname', data.nickname);
uni.setStorageSync('avatar', data.avatar);
uni.setStorageSync('avatar_full', data.avatar_full);
uni.setStorageSync('level_id', data.level_id);
uni.setStorageSync('level_name', data.level_name);
uni.setStorageSync('create', data.create);
if(data.is_admin) uni.setStorageSync('is_admin', data.is_admin);
});
},
getHeaderInfo() {
let area = uni.getSystemInfoSync();
// #ifdef MP-WEIXIN
let menu = uni.getMenuButtonBoundingClientRect();
var conheight = menu.height + (menu.top - area.statusBarHeight) * 2;
return {
status_height: area.statusBarHeight,
title_height: conheight,
menuLeft: menu.left,
menuHeight:menu.height,
btheight:menu.top+conheight,
fontSize:uni.upx2px(34),
backwidth: ((22/38)*(conheight*0.5)),
backheight:conheight*0.5,
logowidth: ((556/80)*(conheight*0.48)),
logoheight:conheight*0.48,
lineheight:conheight*0.3
};
// #endif
},
headerComeBack(e){
if(this.showClouldPhoto){
this.$parent.hideClouldPhoto()
return
}
var hpages = getCurrentPages();
if(hpages.length > 1){
uni.navigateBack({
});
}else{
uni.reLaunch({
url:'/pages/index/index'
});
}
}
}
}
</script>
<style>
.header-com{
overflow: hidden;
width: 100%;
position: fixed;
background: #FFFFFF;
z-index: 189;
}
.header-com-content{
width: 100%;
box-sizing: border-box;
color: #292929;
text-align: center;
font-family: MiSans;
font-style: normal;
font-weight: 600;
line-height: normal;
box-sizing: border-box;
overflow: hidden;
box-sizing: border-box;
}
.header-com-title{
position: relative;
display: flex;
align-items: center;
height: 100%;
overflow: hidden;
box-sizing: border-box;
}
.header-com-comback{
color: #000000;
margin-left: 36rpx;
}
.header-com-logo{
margin-left: 36rpx;
}
.header-com-line{
width: 3rpx;
background: #D8D8D8;
border-radius: 1rpx;
margin-left: 20rpx;
}
.header-com-role{
margin-left: 20rpx;
font-weight: 500;
color: #999999;
}
.header-com-bt{
background: #FFFFFF;
}
.clouldPhoto{
width: 100%;
position: absolute;
left: 0;
top: 0;
text-align: center;
}
.header-com-comback-opc{
position: absolute;
left: 0;
top: 0;
opacity: 0;
z-index:8;
}
</style>