Merge branch 'master' of ssh://dev.zhiheiot.com:29418/mob-components

Tevin

2025-03-04 948a19c73263a495bb065e9cb48db7baba99ff12

Merge branch 'master' of ssh://dev.zhiheiot.com:29418/mob-components

 layout/navCustomBar/CNavCustomBar.vue

New file
@@ -0,0 +1,99 @@
/**
 * CNavCustomBar - 自定义导航条
 * @author chensi
 */

<template>
    <view
        class="c-nav-custom-bar"
        :style="{height:navBarHeight + 'px',paddingTop:statusBarHeight + 'px',boxSizing:'border-box'}"
    >
        <view
            class="c-nav-icon"
            :style="{height:(navBarHeight - statusBarHeight) + 'px'}"
        >
            <view
                v-if="!isNeedBackIcon"
                class="c-nav-menu-icon"
            >
                <slot name="icon"></slot>
            </view>
            <view
                v-if="isNeedBackIcon"
                class="c-nav-back-icon"
                @tap="evt => onBack()"
            >
                <AtIcon
                    value='chevron-left'
                    size='26'
                    color='#000'
                ></AtIcon>
            </view>
        </view>
        <view class="c-nav-title">
            {{ title }}
        </view>
    </view>
</template>

<script>
import Taro from '@tarojs/taro';
import { AtIcon } from 'taro-ui-vue';
import './cNavCustomBar.scss';
import { helper } from '@components/plugins/echarts/echarts';

export default {
    name: 'CNavCustomBar',
    components: {
        AtIcon,
    },
    props: {
        isNeedBackIcon: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            default: '',
        },
    },
    computed: {},
    data() {
        return {
            navBarHeight: 0,
            statusBarHeight: 0,
        };
    },
    mounted() {
        this.getNavBarHeight();
    },
    methods: {
        getNavBarHeight() {
            //获取胶囊对象
            let menuButtonObject = Taro.getMenuButtonBoundingClientRect();
            // 获取设备系统对象
            var sysInfo = wx.getSystemInfoSync();
            // 获取状态栏高度
            let statusBarHeight = sysInfo.statusBarHeight;
            // 获取胶囊高度
            let menuButtonHeight = menuButtonObject.height;
            // 获取胶囊距离顶部的高度
            let distanceTop = menuButtonObject.top;
            let navBarHeight =
                statusBarHeight + menuButtonHeight + (distanceTop - statusBarHeight) * 2; //计算nav导航栏的高度（上图蓝色线段的长度）
            this.navBarHeight = navBarHeight;
            this.statusBarHeight = statusBarHeight;
        },

        onBack() {
            Taro.navigateBack({
                delta: 1,
            });
        },

        $getStatusBarHeight() {
            return this.statusBarHeight;
        },
    },
};
</script>

 layout/navCustomBar/cNavCustomBar.scss

New file
@@ -0,0 +1,35 @@
/**
 * cNavCustomBar - 自定义导航条
 * @author chensi
 */

@import "../../common/sassMixin";

.c-nav-custom-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    .c-nav-icon {
        position: absolute;
        left: 0px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .c-nav-menu-icon {
            margin-left: 14px;
        }
        .c-nav-back-icon {
            display: flex;
            align-items: center;
        }
    }
    .c-nav-title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-size: 32px;
    }
}

 layout/navCustomBar/index.js

New file
@@ -0,0 +1,8 @@
/**
 * CNavCustomBar
 * @author chensi
 */

import CNavCustomBar from '@components/layout/navCustomBar/CNavCustomBar.vue';

export { CNavCustomBar };