Yizhan-app/components/navBar/index.vue

95 lines
1.7 KiB
Vue

<template>
<view class="navbar" :style="{background: backGround?'linear-gradient(180deg, #E1FAF9 0%, #FFFFFF 100%)':''}">
<image v-if="backShow" class="navbar_img" src="../../static/index3/back.png" @click="back()"></image>
<view class="left_nav" v-else></view>
<view class="navbar_tle">{{title}}</view>
<view class="right_nav">
<slot name="right"></slot>
</view>
</view>
</template>
<script>
import '@/common/webview.js'
export default {
name: 'navBar',
props: {
title: {
type: String,
default: ''
},
backGround: {
type: Boolean,
default: true
},
close: {
type: Boolean,
default: false
}
},
data() {
return {
backShow: true
}
},
mounted() {
uni.webView.getEnv((res) => {
if(this.close && JSON.stringify(res.nvue) !== 'true') {
this.backShow = false
}
})
},
methods: {
back() {
// #ifdef H5
if(this.close) {
uni.webView.postMessage({
data: { action: 'stage_navigateBack' },
})
}else{
history.back()
}
// #endif
// #ifndef H5
uni.navigateBack()
// #endif
}
}
}
</script>
<style scoped lang="scss">
.navbar {
width: 100%;
height: 100rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20rpx;
position: fixed;
top: 0;
left: 0;
z-index: 888;
.navbar_img {
display: block;
width: 40rpx;
height: 40rpx;
}
.left_nav {
width: 40rpx;
height: 40rpx;
}
.navbar_tle {
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 36rpx;
color: #0E1A24;
font-style: normal;
text-transform: none;
}
.right_nav {
width: 50rpx;
height: 50rpx;
}
}
</style>