zx_flk_app/pages/index_1231/components/NavBar/index.vue

<template>
    <view>
        <view class="custom-bar custom-bar-animation":style="{ 'padding-top': statusBarHeight + 'px' }" v-if="show">
            <!-- #ifdef MP-ALIPAY-->
            <view 
                class="custom-status-bar" 
                :style="{ 'height': navabarHeight + 'px', 'margin-left': '40rpx' }"
            >
                <image v-if="imgUrl" :src="imgUrl" style="width: 298rpx;height: 36rpx;" />
				<view v-else class="img-name">Hi 你好 <text>{{app_name}}</text></view>
                <view class="tag-wrap">放心租</view>
            </view>
            <!-- #endif  -->

            <!-- #ifdef MP-WEIXIN -->
            <view 
                class="custom-status-bar" 
                :style="{ 'height': navabarHeight + 'px' }"
            >
                <image v-if="imgUrl" :src="imgUrl" style="width: 298rpx;height: 36rpx;" />
				<view v-else class="img-name">Hi 你好 <text>{{app_name}}</text></view>
                <view class="tag-wrap">放心租</view>
            </view>
            <!-- #endif -->
        </view>
        <view class="custom-bar":style="{ 'padding-top': statusBarHeight + 'px' }" v-else>
            <view 
                class="custom-status-bar" 
                :style="{ 'height': navabarHeight + 'px' }"
            >
            </view>
        </view>
    </view>
</template>

<script>
	const config = require('../../../../common/config.js');
	var storage = require('../../../../common/storage.js');
	import { APP_ID_NAME } from '@/common/constant.js'
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            statusBarHeight: 0,
            navabarHeight: 0,
			imgUrl: '',
			app_name:''
        }
    },
    mounted() {
		this.setShopName()
        this._getCustomBar()
    },
    methods: {
        // 获取顶部状态栏高度（各机型不同）
        _getCustomBar() {
            const clientRect = uni.getMenuButtonBoundingClientRect()
            const sysinfo = uni.getSystemInfoSync()
            let GAP = 8
            // #ifdef MP-ALIPAY
            GAP = 0
            // #endif
            const navabarHeight = (clientRect.bottom - sysinfo.statusBarHeight) + (clientRect.top - sysinfo.statusBarHeight) + GAP
            this.navabarHeight = navabarHeight
            this.statusBarHeight = sysinfo.statusBarHeight
            this.$emit('customBarInfo', {
                navabarHeight,
                statusBarHeight: sysinfo.statusBarHeight
            })
        },
		setShopName(){
			const appId =  uni.getAccountInfoSync().miniProgram.appId;
			const app_name=storage.getAppConfig().app_name
			var img_url='https://qiniu.bms16.com/FgUti3mvD9L4U-LzTNF70PP1BI5E' //默认小众出行 防止支付宝未配置
			// #ifdef MP-WEIXIN
			img_url=APP_ID_NAME.find(v => v.wx_id === appId)?.img_url ||''
			// #endif
			this.setData({
				imgUrl: img_url,
				app_name:app_name
			})
		}
    }
}
</script>


<style scoped>
.img-name {
	font-size: 32rpx;
	color: #FFFFFF;
	font-weight: bold;
	font-family: DIN;
}

.img-name text {
	font-size: 36rpx;
	margin-left: 20rpx;
}

.custom-bar {
	background: #0074FF;
	position: fixed;
	z-index: 999;
	left: 0;
	right: 0;
	top: 0;
}
.custom-bar-animation {
    /* animation: opacityAnimation 0.2s ease-in-out 0s 1; */
}

@keyframes opacityAnimation {
    0% {
        transform: translateY(-60px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.custom-status-bar {
	display: flex;
	align-items: center;
	padding-left: 32rpx;
}
.tag-wrap {
    margin-left: 10rpx;
    background: #FFFFFF;
    padding: 8rpx 14rpx;
    border-radius: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 22rpx;
    color: #0074FF;
    line-height: 20rpx;
    text-align: center;
    font-style: normal;
}
</style>