增加other分包页面
我的页面里增加跳转other分包跳转（仅在ios不是浏览器审核时展示）
This commit is contained in:
355
tuniao-ui/components/tn-nav-bar/tn-nav-bar.vue
Normal file
355
tuniao-ui/components/tn-nav-bar/tn-nav-bar.vue
Normal file
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<view
|
||||
class="tn-custom-nav-bar-class tn-custom-nav-bar"
|
||||
:style="[navBarStyle]"
|
||||
>
|
||||
<view
|
||||
class="tn-custom-nav-bar__bar"
|
||||
:class="[barClass]"
|
||||
:style="[barStyle]"
|
||||
>
|
||||
<view v-if="isBack">
|
||||
<view v-if="customBack">
|
||||
<view
|
||||
:style="{
|
||||
width: customBackStyleInfo.width + 'px',
|
||||
height: customBackStyleInfo.height + 'px',
|
||||
marginLeft: customBackStyleInfo.left + 'px'
|
||||
}"
|
||||
>
|
||||
<slot name="back"></slot>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="tn-custom-nav-bar__bar__action" @tap="handlerBack">
|
||||
<text class="tn-custom-nav-bar__bar__action--nav-back" :class="[`tn-icon-${backIcon}`]"></text>
|
||||
<text class="tn-custom-nav-bar__bar__action--nav-back-text" v-if="backTitle">{{ backTitle }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-custom-nav-bar__bar__content" :style="[contentStyle]">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view>
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentsColorMixin from '../../libs/mixin/components_color.js'
|
||||
export default {
|
||||
name: 'tn-nav-bar',
|
||||
mixins: [componentsColorMixin],
|
||||
props: {
|
||||
// 层级
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 导航栏的高度
|
||||
height: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 高度单位
|
||||
unit: {
|
||||
type: String,
|
||||
default: 'px'
|
||||
},
|
||||
// 是否显示返回按钮
|
||||
isBack: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 返回按钮的图标
|
||||
backIcon: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
// 返回按钮旁显示的文字
|
||||
backTitle: {
|
||||
type: String,
|
||||
default: '返回'
|
||||
},
|
||||
// 透明状态栏
|
||||
alpha: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否固定在顶部
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示底部阴影
|
||||
bottomShadow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否自定义返回按钮
|
||||
customBack: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 返回前回调
|
||||
beforeBack: {
|
||||
type: Function,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
navBarStyle() {
|
||||
let style = {}
|
||||
style.height = this.height === 0 ? this.customBarHeight + this.unit : this.height + this.unit
|
||||
if (this.fixed) {
|
||||
style.position = 'fixed'
|
||||
}
|
||||
style.zIndex = this.elZIndex
|
||||
|
||||
return style
|
||||
},
|
||||
barClass() {
|
||||
let clazz = ''
|
||||
if (this.backgroundColorClass) {
|
||||
clazz += ` ${this.backgroundColorClass}`
|
||||
}
|
||||
if (this.fontColorClass) {
|
||||
clazz += `${this.fontColorClass}`
|
||||
}
|
||||
if (this.fixed) {
|
||||
clazz += ' tn-custom-nav-bar__bar--fixed'
|
||||
}
|
||||
if (this.alpha) {
|
||||
clazz += ' tn-custom-nav-bar__bar--alpha'
|
||||
}
|
||||
if (this.bottomShadow) {
|
||||
clazz += ' tn-custom-nav-bar__bar--bottom-shadow'
|
||||
}
|
||||
|
||||
return clazz
|
||||
},
|
||||
barStyle() {
|
||||
let style = {}
|
||||
style.height = this.height === 0 ? this.customBarHeight + this.unit : this.height + this.unit
|
||||
|
||||
if (this.fixed) {
|
||||
style.paddingTop = this.statusBarHeight + 'px'
|
||||
}
|
||||
|
||||
if(!this.backgroundColorClass) {
|
||||
style.backgroundColor = this.backgroundColor !== '' ? this.backgroundColor : '#FFFFFF'
|
||||
}
|
||||
if (!this.fontColorClass && this.fontColor) {
|
||||
style.color= this.fontColor
|
||||
}
|
||||
|
||||
style.zIndex = this.elZIndex
|
||||
|
||||
return style
|
||||
},
|
||||
contentStyle() {
|
||||
let style = {}
|
||||
style.top = this.fixed ? this.statusBarHeight + 'px' : '0px'
|
||||
style.height = this.height === 0 ? (this.customBarHeight - this.statusBarHeight) + this.unit : this.height + this.unit
|
||||
style.lineHeight = style.height
|
||||
|
||||
if (this.isBack) {
|
||||
if (this.customBack) {
|
||||
const width = (this.customBackStyleInfo.width + this.customBackStyleInfo.left) * 2
|
||||
style.width = `calc(100% - ${width}px)`
|
||||
} else {
|
||||
style.width = 'calc(100% - 340rpx)'
|
||||
}
|
||||
} else {
|
||||
style.width = '100%'
|
||||
}
|
||||
|
||||
return style
|
||||
},
|
||||
elZIndex() {
|
||||
return this.zIndex ? this.zIndex : this.$t.zIndex.navbar
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 状态栏的高度
|
||||
statusBarHeight: 0,
|
||||
// 自定义导航栏的高度
|
||||
customBarHeight: 0,
|
||||
// 自定义返回按钮时，返回容器的宽高边距信息
|
||||
customBackStyleInfo: {
|
||||
width: 86,
|
||||
height: 32,
|
||||
left: 15
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 获取vuex中的自定义顶栏的高度
|
||||
this.updateNavBarInfo()
|
||||
},
|
||||
created() {
|
||||
// 获取胶囊信息
|
||||
// #ifdef MP-WEIXIN
|
||||
let custom = wx.getMenuButtonBoundingClientRect()
|
||||
this.customBackStyleInfo.width = custom.width
|
||||
this.customBackStyleInfo.height = custom.height
|
||||
this.customBackStyleInfo.left = uni.upx2px(750) - custom.right
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
// 更新导航栏的高度
|
||||
async updateNavBarInfo() {
|
||||
// 获取vuex中的自定义顶栏的高度
|
||||
let customBarHeight = this.vuex_custom_bar_height
|
||||
let statusBarHeight = this.vuex_status_bar_height
|
||||
// 如果获取失败则重新获取
|
||||
if (!customBarHeight) {
|
||||
try {
|
||||
const navBarInfo = await this.$t.updateCustomBar()
|
||||
customBarHeight = navBarInfo.customBarHeight
|
||||
statusBarHeight = navBarInfo.statusBarHeight
|
||||
} catch(e) {
|
||||
setTimeout(() => {
|
||||
this.updateNavBarInfo()
|
||||
}, 10)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 更新vuex中的导航栏信息
|
||||
this && this.$t.vuex('vuex_status_bar_height', statusBarHeight)
|
||||
this && this.$t.vuex('vuex_custom_bar_height', customBarHeight)
|
||||
|
||||
this.customBarHeight = customBarHeight
|
||||
this.statusBarHeight = statusBarHeight
|
||||
},
|
||||
// 处理返回事件
|
||||
async handlerBack() {
|
||||
if (this.beforeBack && typeof(this.beforeBack) === 'function') {
|
||||
// 执行回调，同时传入索引当作参数
|
||||
// 在微信，支付宝等环境(H5正常)，会导致父组件定义的函数体中的this变成子组件的this
|
||||
// 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文
|
||||
let beforeBack = this.beforeBack.bind(this.$t.$parent.call(this))()
|
||||
// 判断是否返回了Promise
|
||||
if (!!beforeBack && typeof beforeBack.then === 'function') {
|
||||
await beforeBack.then(res => {
|
||||
// Promise返回成功
|
||||
this.navBack()
|
||||
}).catch(err => {})
|
||||
} else if (beforeBack === true) {
|
||||
this.navBack()
|
||||
}
|
||||
} else {
|
||||
this.navBack()
|
||||
}
|
||||
},
|
||||
// 返回上一页
|
||||
navBack() {
|
||||
|
||||
// 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
|
||||
const pages = getCurrentPages()
|
||||
if (pages && pages.length > 0) {
|
||||
const firstPage = pages[0]
|
||||
if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index/index')) {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
} else {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.tn-custom-nav-bar {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
&__bar {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
min-height: 100rpx;
|
||||
justify-content: space-between;
|
||||
min-height: 0px;
|
||||
/* #ifdef MP-WEIXIN */
|
||||
padding-right: 220rpx;
|
||||
/* #endif */
|
||||
/* #ifdef MP-ALIPAY */
|
||||
padding-right: 150rpx;
|
||||
/* #endif */
|
||||
box-shadow: 0rpx 0rpx 0rpx;
|
||||
z-index: 9999;
|
||||
|
||||
&--fixed {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&--alpha {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&--bottom-shadow {
|
||||
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&__action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
max-width: 100%;
|
||||
|
||||
&--nav-back {
|
||||
/* position: absolute; */
|
||||
/* top: 50%; */
|
||||
/* left: 20rpx; */
|
||||
/* margin-top: -15rpx; */
|
||||
// width: 25rpx;
|
||||
// height: 25rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 38rpx;
|
||||
line-height: 100%;
|
||||
// border-width: 0 0 4rpx 4rpx;
|
||||
// border-color: #000000;
|
||||
// border-style: solid;
|
||||
// transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
||||
}
|
||||
|
||||
&--nav-back-text {
|
||||
padding: 20rpx 20rpx 20rpx 0rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
font-size: 32rpx;
|
||||
// cursor: none;
|
||||
// pointer-events: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user