|
|
@@ -0,0 +1,237 @@
|
|
|
+<template name="headerNavbar">
|
|
|
+ <!-- 自定义导航栏 -->
|
|
|
+ <view class='navbar-wrap' :class="[headerColor? 'bg-color' : 'bg-color']" :style="{height:navbarHeight+'px',paddingTop:CustomBar/2+'px'}">
|
|
|
+ <view class="navbar-icon" v-if="navbarData.showCapsule ? navbarData.showCapsule : true"
|
|
|
+ :style="{top:navbarBtn.top + statusBarHeight+'px;',lineHeight:navbarBtn.height+'px;',left:12+'px;',width:navbarBtn.height+'px;',height:navbarBtn.height+'px;'}">
|
|
|
+ <text v-if='haveBack' @click="_goBack" class="iconfont icon-fanhui"></text>
|
|
|
+ <text v-else @click="_goHome" class="iconfont icon-shouye"></text>
|
|
|
+ </view>
|
|
|
+ <view class="navbar-text" :style="{top:navbarBtn.top + statusBarHeight+'px;',height:navbarBtn.height+'px;',fontSize:fontSizeSetting+'px;'}">
|
|
|
+ <image class="logo" :style="{width:106+'px;',height:navbarBtn.height+'px;'}" src="https://static.caimei365.com/app/img/icon/logo-top@2x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <!--<view class="navbar-text" :style="{top:navbarBtn.top + statusBarHeight+'px;',height:navbarBtn.height+'px;',fontSize:fontSizeSetting+'px;'}">
|
|
|
+ <view class="gosearch-btn" :style="{paddingLeft:navbarBtn.height+'px;',right:(navbarBtn.width+30)+'px;',borderRadius:(navbarBtn.height/2)+'px;',width:(375-navbarBtn.width*2)+'px;',lineHeight:navbarBtn.height+'px;'}">
|
|
|
+ <text class="iconfont icon-sousuo" :style="{width:navbarBtn.height+'px;',height:navbarBtn.height+'px;',lineHeight:navbarBtn.height+'px;'}"></text>
|
|
|
+ <view class="input" @click="this.$api.navigateTo(clickPath)">搜索商品/供应商/项目仪器</view>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ var self;
|
|
|
+ export default{
|
|
|
+ name:'headerNavbar',
|
|
|
+ props:{
|
|
|
+ navbarData: { // 由父页面传递的数据
|
|
|
+ type: Object
|
|
|
+ },
|
|
|
+ systeminfo:{
|
|
|
+ type:Object
|
|
|
+ },
|
|
|
+ headerBtnPosi:{
|
|
|
+ type:Object
|
|
|
+ },
|
|
|
+ page:{
|
|
|
+ type:Number
|
|
|
+ },
|
|
|
+ headerColor:{
|
|
|
+ type:Boolean
|
|
|
+ },
|
|
|
+ headerTitle:{
|
|
|
+ type:String
|
|
|
+ },
|
|
|
+ type:{
|
|
|
+ type:String
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return{
|
|
|
+ headerType:'',
|
|
|
+ CustomBar:this.CustomBar,// 顶部导航栏高度
|
|
|
+ clickPath:'/pages/search/search',
|
|
|
+ haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则为 false
|
|
|
+ statusBarHeight: 0, // 状态栏高度
|
|
|
+ navbarHeight: 0, // 顶部导航栏高度,
|
|
|
+ navbarBtn: { // 胶囊位置信息
|
|
|
+ height: 0,
|
|
|
+ width: 0,
|
|
|
+ top: 0,
|
|
|
+ bottom: 0,
|
|
|
+ right: 0
|
|
|
+ },
|
|
|
+ platform:'',
|
|
|
+ fontSizeSetting:0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.headerType = this.type
|
|
|
+ this.fontSizeSetting = this.systeminfo.fontSizeSetting
|
|
|
+ let statusBarHeight = this.systeminfo.statusBarHeight // 状态栏高度
|
|
|
+ let headerPosi = this.headerBtnPosi // 胶囊位置信息
|
|
|
+ /**
|
|
|
+ * wx.getMenuButtonBoundingClientRect() 坐标信息以屏幕左上角为原点
|
|
|
+ * 菜单按键宽度： 87
|
|
|
+ * 菜单按键高度： 32
|
|
|
+ * 菜单按键左边界坐标： 278
|
|
|
+ * 菜单按键上边界坐标： 26
|
|
|
+ * 菜单按键右边界坐标： 365
|
|
|
+ * 菜单按键下边界坐标： 58
|
|
|
+ */
|
|
|
+ let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点
|
|
|
+ height: headerPosi.height,
|
|
|
+ width: headerPosi.width,
|
|
|
+ // 胶囊top - 状态栏高度
|
|
|
+ top: headerPosi.top - statusBarHeight,
|
|
|
+ // 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）
|
|
|
+ bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
|
|
|
+ // 屏幕宽度 - 胶囊right
|
|
|
+ right: this.systeminfo.screenWidth - headerPosi.right
|
|
|
+ }
|
|
|
+ console.log(btnPosi)
|
|
|
+ let haveBack;
|
|
|
+ if (getCurrentPages().length === 1) { // 当只有一个页面时
|
|
|
+ haveBack = false;
|
|
|
+ } else {
|
|
|
+ haveBack = true;
|
|
|
+ }
|
|
|
+ this.haveBack=haveBack, // 获取是否是通过分享进入的小程序
|
|
|
+ this.statusBarHeight=statusBarHeight,
|
|
|
+ this.navbarHeight= headerPosi.bottom + btnPosi.bottom, // 原胶囊bottom + 现胶囊bottom
|
|
|
+ this.$parent.navbarHeight = this.navbarHeight
|
|
|
+ this.$parent.statusBarHeight = this.statusBarHeight
|
|
|
+ // console.log(this.navbarHeight);
|
|
|
+ this.navbarBtn=btnPosi
|
|
|
+ },
|
|
|
+ onLoad(){
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ _goBack: function () {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: this.page
|
|
|
+ });
|
|
|
+ },
|
|
|
+ _goHome: function () {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/tabBar/home/index'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow(){
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .navbar-wrap {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ top: 0;
|
|
|
+ z-index: 100000;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &.bg-color{
|
|
|
+ animation: showColor 0.3s ease-in-out both;
|
|
|
+ }
|
|
|
+ &.no-color{
|
|
|
+ animation: hideColor 0.3s ease-in-out both;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .navbar-text {
|
|
|
+ width: 100%;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: 500;
|
|
|
+ position: fixed;
|
|
|
+ .logo{
|
|
|
+ margin: 0 auto;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .gosearch-btn{
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(255, 255, 255, 0.6);
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999999;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position:absolute ;
|
|
|
+ top: 0;
|
|
|
+ border: 0.5px solid rgba(0, 0, 0, 0.1);
|
|
|
+ .icon-sousuo{
|
|
|
+ height: 100%;
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ font-size: 34rpx;
|
|
|
+ color: #999999;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ .input{
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .navbar-icon {
|
|
|
+ position: fixed;
|
|
|
+ display: flex;
|
|
|
+ border-radius: 50%;
|
|
|
+ text-align: center;
|
|
|
+ background: rgba(255,255,255,0.6);
|
|
|
+ border: 0.5px solid rgba(0,0,0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ z-index: 9999;
|
|
|
+ }
|
|
|
+ .navbar-icon .iconfont {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 38rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .navbar-icon view {
|
|
|
+ height: 18px;
|
|
|
+ border-left: 0.5px solid rgba(0,0,0, 0.3);
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
+ .navbar-loading {
|
|
|
+ background: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ @keyframes showColor {
|
|
|
+ 0% {background: rgba(255,255,255,0);}
|
|
|
+ 50% {background: rgba(255,255,255,0.5);}
|
|
|
+ 100% {background: rgba(255,255,255,1);}
|
|
|
+ }
|
|
|
+ @keyframes hideColor {
|
|
|
+ 0% {background: rgba(255,255,255,1);}
|
|
|
+ 50% {background: rgba(255,255,255,0.5);}
|
|
|
+ 100% {background: rgba(255,255,255,0);}
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
