|
@@ -1,180 +1,197 @@
|
|
|
<template>
|
|
|
- <view v-if="!hideNavbar" class="nav-bar" :class="{ 'nav-bar-transparent': transparent,'hide_nav_bar':hideNavbar }">
|
|
|
- <view class="nav-bar-status" :style="{ height: statusBarHeight + 'px' }"></view>
|
|
|
- <view class="nav-bar-title">
|
|
|
- <template v-if="showTitle">
|
|
|
- <view class="btn-back" @click="goBack">
|
|
|
- <van-icon name="arrow-left" />
|
|
|
- </view>
|
|
|
- <view class="nav-bar-title-text">{{ title }} </view>
|
|
|
- <view></view>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <slot></slot>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view v-if="!hideNavbar" class="nav-bar" :class="{ 'nav-bar-transparent': transparent,'hide_nav_bar':hideNavbar }">
|
|
|
+ <view class="nav-bar-status" :style="{ height: statusBarHeight + 'px' }"></view>
|
|
|
+ <view class="nav-bar-title">
|
|
|
+ <template v-if="showTitle">
|
|
|
+ <view class="btn-back" @click="goBack">
|
|
|
+ <van-icon name="arrow-left"/>
|
|
|
+ </view>
|
|
|
+ <view class="nav-bar-title-text">{{ title }}</view>
|
|
|
+ <view></view>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <slot></slot>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- props: {
|
|
|
- title: String,
|
|
|
- transparent: Boolean,
|
|
|
- showTitle: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- hasParent() {
|
|
|
- return getCurrentPages().length > 1
|
|
|
- }
|
|
|
- },
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ title: String,
|
|
|
+ transparent: Boolean,
|
|
|
+ showTitle: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ hasParent() {
|
|
|
+ return getCurrentPages().length > 1
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- data() {
|
|
|
- return {
|
|
|
- hideNavbar: false,
|
|
|
- titleBarHeight: 0,
|
|
|
- statusBarHeight: 0,
|
|
|
- isNotchScreen: false
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- const self = this
|
|
|
- const windowInfo = uni.getWindowInfo()
|
|
|
- this.statusBarHeight = windowInfo.statusBarHeight
|
|
|
- const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
|
- this.titleBarHeight = (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height + (windowInfo.screenWidth / 750 * 16)
|
|
|
- if (this.showTitle) {
|
|
|
- uni.getSystemInfo({
|
|
|
- success(res) {
|
|
|
- const os = res.system.toLowerCase()
|
|
|
- self.$config.os = os
|
|
|
- if (os.includes('windows') || os.includes('mac')) {
|
|
|
- self.$emit('init', {
|
|
|
- detail: {
|
|
|
- navbarHeight: 0,
|
|
|
- pageHeight: windowInfo.screenHeight
|
|
|
- }
|
|
|
- })
|
|
|
- self.hideNavbar = true
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ hideNavbar: false,
|
|
|
+ titleBarHeight: 0,
|
|
|
+ statusBarHeight: 0,
|
|
|
+ isNotchScreen: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ const self = this
|
|
|
+ const windowInfo = uni.getWindowInfo()
|
|
|
+ this.statusBarHeight = windowInfo.statusBarHeight
|
|
|
+ const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
|
+ this.titleBarHeight = (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height + (windowInfo.screenWidth / 750 * 16)
|
|
|
+ if (this.showTitle) {
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success(res) {
|
|
|
+ const os = res.system.toLowerCase()
|
|
|
+ self.$config.os = os
|
|
|
+ if (os.includes('windows') || os.includes('mac')) {
|
|
|
+ self.$emit('init', {
|
|
|
+ detail: {
|
|
|
+ navbarHeight: 0,
|
|
|
+ pageHeight: windowInfo.screenHeight
|
|
|
+ }
|
|
|
+ })
|
|
|
+ self.hideNavbar = true
|
|
|
|
|
|
- // self.statusBarHeight = 0
|
|
|
- // self.titleBarHeight = (windowInfo.screenWidth / 750 * 100)
|
|
|
- // self.$emit('init', {
|
|
|
- // detail: {
|
|
|
- // navbarHeight: (windowInfo.screenWidth / 750 * 100),
|
|
|
- // pageHeight: windowInfo.screenHeight - (windowInfo.screenWidth / 750 * 100)
|
|
|
- // }
|
|
|
- // })
|
|
|
- } else {
|
|
|
- self.$emit('init', {
|
|
|
- detail: {
|
|
|
- navbarHeight: self.hideNavbar ? 0 : (self.statusBarHeight + self.titleBarHeight),
|
|
|
- pageHeight: windowInfo.screenHeight - (self.hideNavbar ? 0 : (self.statusBarHeight + self.titleBarHeight)) - res.safeAreaInsets.bottom
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- uni.getSystemInfo({
|
|
|
- success(res) {
|
|
|
- const os = res.system.toLowerCase()
|
|
|
- self.$config.os = os
|
|
|
- if (os.includes('windows') || os.includes('mac')) {
|
|
|
- self.statusBarHeight = 0
|
|
|
- self.titleBarHeight = (windowInfo.screenWidth / 750 * 120)
|
|
|
- self.$emit('init', {
|
|
|
- detail: {
|
|
|
- navbarHeight: (windowInfo.screenWidth / 750 * 120),
|
|
|
- pageHeight: windowInfo.screenHeight - (windowInfo.screenWidth / 750 * 120)
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- self.$emit('init', {
|
|
|
- detail: {
|
|
|
- navbarHeight: self.hideNavbar ? 0 : (self.statusBarHeight + self.titleBarHeight),
|
|
|
- pageHeight: windowInfo.screenHeight - (self.hideNavbar ? 0 : (self.statusBarHeight + self.titleBarHeight))- res.safeAreaInsets.bottom
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- // this.$emit('init', {
|
|
|
- // detail: {
|
|
|
- // navbarHeight: self.hideNavbar ? 0 : (this.statusBarHeight + this.titleBarHeight),
|
|
|
- // pageHeight: windowInfo.screenHeight - (self.hideNavbar ? 0 : (this.statusBarHeight + this.titleBarHeight))
|
|
|
- // }
|
|
|
- // })
|
|
|
- },
|
|
|
- methods: {
|
|
|
- hasSlot() {
|
|
|
- const nodes = this.getRelationNodes(`view`);
|
|
|
- return nodes.length > 0;
|
|
|
- },
|
|
|
- goBack() {
|
|
|
- this.refreshData()
|
|
|
- if (this.hasParent) {
|
|
|
- uni.navigateBack()
|
|
|
- } else if(this.$store.getters.page.length > 0) {
|
|
|
- this.$store.commit('DELETE_PAGE')
|
|
|
- console.log(this.$store.getters.page)
|
|
|
- } else {
|
|
|
- this.navigateTo('/pages/index/index')
|
|
|
+ // self.statusBarHeight = 0
|
|
|
+ // self.titleBarHeight = (windowInfo.screenWidth / 750 * 100)
|
|
|
+ // self.$emit('init', {
|
|
|
+ // detail: {
|
|
|
+ // navbarHeight: (windowInfo.screenWidth / 750 * 100),
|
|
|
+ // pageHeight: windowInfo.screenHeight - (windowInfo.screenWidth / 750 * 100)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ } else {
|
|
|
+ self.$emit('init', {
|
|
|
+ detail: {
|
|
|
+ navbarHeight: self.hideNavbar ? 0 : (self.statusBarHeight + self.titleBarHeight),
|
|
|
+ pageHeight: windowInfo.screenHeight - (self.hideNavbar ? 0 : (self.statusBarHeight + self.titleBarHeight)) - res.safeAreaInsets.bottom
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success(res) {
|
|
|
+ const os = res.system.toLowerCase()
|
|
|
+ self.$config.os = os
|
|
|
+ if (os.includes('windows') || os.includes('mac')) {
|
|
|
+ self.statusBarHeight = 0
|
|
|
+ self.titleBarHeight = (windowInfo.screenWidth / 750 * 120)
|
|
|
+ self.$emit('init', {
|
|
|
+ detail: {
|
|
|
+ navbarHeight: (windowInfo.screenWidth / 750 * 120),
|
|
|
+ pageHeight: windowInfo.screenHeight - (windowInfo.screenWidth / 750 * 120)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ self.$emit('init', {
|
|
|
+ detail: {
|
|
|
+ navbarHeight: self.hideNavbar ? 0 : (self.statusBarHeight + self.titleBarHeight),
|
|
|
+ pageHeight: windowInfo.screenHeight - (self.hideNavbar ? 0 : (self.statusBarHeight + self.titleBarHeight)) - res.safeAreaInsets.bottom
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // this.$emit('init', {
|
|
|
+ // detail: {
|
|
|
+ // navbarHeight: self.hideNavbar ? 0 : (this.statusBarHeight + this.titleBarHeight),
|
|
|
+ // pageHeight: windowInfo.screenHeight - (self.hideNavbar ? 0 : (this.statusBarHeight + this.titleBarHeight))
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ hasSlot() {
|
|
|
+ const nodes = this.getRelationNodes(`view`);
|
|
|
+ return nodes.length > 0;
|
|
|
+ },
|
|
|
+ goBack() {
|
|
|
+ const pages = getCurrentPages();
|
|
|
+ // 获取当前页面的实例
|
|
|
+ const currentPage = pages[pages.length - 1];
|
|
|
+ // 获取当前页面的路径
|
|
|
+ const currentPath = currentPage.route;
|
|
|
+ if (currentPath === 'pages/checkIn/activity-end') {
|
|
|
+ this.navigateTo('/pages/index/index')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ this.refreshData()
|
|
|
+ if (this.hasParent) {
|
|
|
+ uni.navigateBack()
|
|
|
+ } else if (this.$store.getters.page.length > 0) {
|
|
|
+ this.$store.commit('DELETE_PAGE')
|
|
|
+ console.log(this.$store.getters.page)
|
|
|
+ } else {
|
|
|
+ this.navigateTo('/pages/index/index')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
- .nav-bar {
|
|
|
- background: linear-gradient( 270deg, #2b2359 9%, #405491 44%, #2b2359 92%), rgba(0,0,0,0.2);
|
|
|
- width: 100%;
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- z-index: 10;
|
|
|
- height: $navBarHeight;
|
|
|
- top: 0;
|
|
|
+.nav-bar {
|
|
|
+ background: linear-gradient(270deg, #2b2359 9%, #405491 44%, #2b2359 92%), rgba(0, 0, 0, 0.2);
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ z-index: 10;
|
|
|
+ height: $navBarHeight;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ &.nav-bar-transparent {
|
|
|
+ background: none;
|
|
|
+
|
|
|
+ .nav-bar-title {
|
|
|
+ view {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-bar-title {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- &.nav-bar-transparent{
|
|
|
- background: none;
|
|
|
- .nav-bar-title{
|
|
|
- view{
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .nav-bar-title{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 0 16rpx;
|
|
|
- flex: 1;
|
|
|
- min-height: 1px;
|
|
|
- view{
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
- .nav-bar-title-text{
|
|
|
- flex: 1;
|
|
|
- font-weight: 500;
|
|
|
- font-size: $fontSize5;
|
|
|
- //line-height: 42rpx;
|
|
|
- line-height: 1.5;
|
|
|
- text-align: left;
|
|
|
- text-transform: none;
|
|
|
- padding-left: 8rpx;
|
|
|
- }
|
|
|
- .btn-back{
|
|
|
- padding: 0 6rpx;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 16rpx;
|
|
|
+ flex: 1;
|
|
|
+ min-height: 1px;
|
|
|
+
|
|
|
+ view {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-bar-title-text {
|
|
|
+ flex: 1;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: $fontSize5;
|
|
|
+ //line-height: 42rpx;
|
|
|
+ line-height: 1.5;
|
|
|
+ text-align: left;
|
|
|
+ text-transform: none;
|
|
|
+ padding-left: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-back {
|
|
|
+ padding: 0 6rpx;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|