123 lines
2.5 KiB
Vue
123 lines
2.5 KiB
Vue
|
<!--
|
||
|
|
* @Descripttion:
|
||
|
|
* @version:
|
||
|
|
* @Author: kBank
|
||
|
|
* @Date: 2022-11-21 16:46:09
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="navBar"
|
||
|
|
:style="{height: navBarHeight+ 'px',background: backColor}">
|
||
|
|
<!-- 返回 -->
|
||
|
|
<view class="left-btn"
|
||
|
|
v-if="isBack"
|
||
|
|
:style="{marginTop: jn.top + 3+'px',left:jnRight + 'px'}"
|
||
|
|
@tap="toBack()">
|
||
|
|
<view class="left_item"
|
||
|
|
:style="{width: jn.height+ 'px',height: jn.height+ 'px'}">
|
||
|
|
<u-icon name="arrow-left"
|
||
|
|
size="14"
|
||
|
|
color="#333"></u-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="left-btn"
|
||
|
|
v-else>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<!-- title -->
|
||
|
|
<view class="title"
|
||
|
|
:style="{marginTop: jn.top + 3+ 'px',lineHeight:jn.height+ 'px',}">
|
||
|
|
{{title}}
|
||
|
|
</view>
|
||
|
|
<view class="right-btn">
|
||
|
|
<slot name="rightBtn"></slot>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="isKong"
|
||
|
|
:style="{height: navBarHeight+ 'px'}"></view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'navBar',
|
||
|
|
props: {
|
||
|
|
// 标题
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: 'title',
|
||
|
|
},
|
||
|
|
// 背景色
|
||
|
|
backColor: {
|
||
|
|
type: String,
|
||
|
|
default: '#fcb71e',
|
||
|
|
},
|
||
|
|
// 是否显示返回
|
||
|
|
isBack: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
// 是否占文档流
|
||
|
|
isKong: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
navBarHeight: 40,
|
||
|
|
jn: {},
|
||
|
|
jnRight: '',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// 胶囊位置
|
||
|
|
let btnInfo = uni.getMenuButtonBoundingClientRect()
|
||
|
|
// 手机信息
|
||
|
|
let mobileInfo = uni.getSystemInfoSync()
|
||
|
|
|
||
|
|
this.jn = btnInfo
|
||
|
|
this.navBarHeight = btnInfo.top + btnInfo.height + 8
|
||
|
|
this.jnRight = mobileInfo.windowWidth - btnInfo.right
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
toBack() {
|
||
|
|
let pages = getCurrentPages()
|
||
|
|
let prevPage = pages[pages.length - 1]
|
||
|
|
// 分享进来
|
||
|
|
if (prevPage.route == 'pages/index/goodsDetails/index') {
|
||
|
|
uni.switchTab({ url: '/pages/index/index' })
|
||
|
|
} else {
|
||
|
|
uni.navigateBack()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.navBar {
|
||
|
|
position: fixed;
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
/* align-items: center; */
|
||
|
|
justify-content: space-between;
|
||
|
|
color: #333;
|
||
|
|
z-index: 9999;
|
||
|
|
}
|
||
|
|
.left-btn {
|
||
|
|
position: relative;
|
||
|
|
.left_item {
|
||
|
|
position: absolute;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.title {
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
</style>
|