caimei-applets-hehe/components/cm-module/headerNavbar/header-order.vue

<template name="headerNavbar">
    <!-- 自定义导航栏 -->
    <view class="navbar-wrap" :style="{ height: navbarHeight + 'px', paddingTop: statusBarHeight + 'px' }">
        <view
            class="navbar-text"
            :style="{ lineHeight: navbarHeight - statusBarHeight + 'px;', fontSize: fontSizeSetting + 'px;' }"
            :class="platformClass"
        >
            {{ navbarData.title ? navbarData.title : ' ' }}
        </view>
        <view
            class="navbar-icon"
            v-if="navbarData.showCapsule == 1 ? true : false"
            :style="{
                top: navbarBtn.top + statusBarHeight + 'px;',
                left: navbarBtn.right + 'px;',
                height: navbarBtn.height + 'px;',
                lineHeight: navbarBtn.height + 'px;'
            }"
        >
            <text v-if="haveBack" @click="_goBack" class="iconfont icon-daohangfanhui"></text>
        </view>
        <view
            class="navbar-icon"
            v-if="navbarData.showSearch == 1 ? true : false"
            :style="{
                top: navbarBtn.top + statusBarHeight + 'px;',
                right: navbarBtn.width + 'px;',
                height: navbarBtn.height + 'px;',
                lineHeight: navbarBtn.height + 'px;'
            }"
        >
            <text @click.stop="_goSearchPath" class="iconfont icon-sousuo"></text>
        </view>
    </view>
</template>

<script>
var self
export default {
    name: 'headerNavbar',
    props: {
        navbarData: {
            // 由父页面传递的数据
            type: Object
        },
        systeminfo: {
            type: Object
        },
        headerBtnPosi: {
            type: Object
        },
        isShare: {
            type: Boolean
        },
        isDelete: {
            type: Boolean
        },
        isConfim: {
            type: Boolean
        },
        isUsertype: {
            type: Number
        }
    },
    data() {
        return {
            haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则为 false
            statusBarHeight: 0, // 状态栏高度
            navbarHeight: 0, // 顶部导航栏高度
            navbarBtn: {
                // 胶囊位置信息
                height: 0,
                width: 0,
                top: 0,
                bottom: 0,
                right: 0
            },
            platformClass: '',
            fontSizeSetting: 0
        }
    },
    created() {
        let statusBarHeight = this.systeminfo.statusBarHeight // 状态栏高度
        let headerPosi = this.headerBtnPosi // 胶囊位置信息
        this.fontSizeSetting = this.systeminfo.fontSizeSetting
        if (this.systeminfo.platform == 'android') {
            this.platformClass = 'left'
        } else {
            this.platformClass = 'center'
        }
        /**
         * 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
        }
        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.navbarBtn = btnPosi)
    },
    onLoad() {},
    methods: {
        _goBack: function() {
            if (this.isShare) {
                this._goHome()
            } else if (this.isDelete) {
                this._goUser()
            } else if (this.isConfim) {
                this._goOrderList()
            } else {
                uni.navigateBack({
                    delta: 1
                })
            }
        },
        _goHome: function() {
            uni.switchTab({
                url: '/pages/tabBar/index/index'
            })
        },
        _goUser: function() {
            uni.switchTab({
                url: '/pages/tabBar/user/index'
            })
        },
        _goOrderList: function() {
            uni.navigateTo({
                url: '/pages/user/order/order-list?state=0'
            })
        },
        _goSearchPath: function() {
            this.$emit('goSearchPath')
        }
    },
    onShow() {}
}
</script>

<style lang="scss">
.navbar-wrap {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100000;
    box-sizing: border-box;
    background: #ffffff;
}
.navbar-text {
    font-size: 30rpx;
    color: #000000;
    font-weight: 500;
}
.navbar-text.center {
    text-align: center;
}
.navbar-text.left {
    text-align: left;
    padding-left: 38px;
}
.navbar-icon {
    position: fixed;
    display: flex;
    box-sizing: border-box;
    border: 0;
}
.navbar-icon .iconfont {
    display: inline-block;
    overflow: hidden;
    font-size: 42rpx;
    padding-right: 40rpx;
    margin-top: 1px;
}
.navbar-icon .icon-sousuo {
    color: #000000;
}
.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;
}
</style>