vue3_YDHL/pages/components/navbar/index.vue

<template>
	<view
		:class="'nav-wrap ' + (navbarDataClone.bottom ? 'border-bottom-after' : '')"
		:style="
			'height: 80rpx;' +
			'margin-top: 35rpx;' +
			'background: ' +
			(navbarDataClone.background ? navbarDataClone.background : '#fff') +
			' no-repeat; background-size: 100% 100%;'
		">
		<!-- 导航栏 中间的标题 -->
		<view
			class="nav-title"
			:style="
				'line-height: 80' +
				'rpx; color: ' +
				(navbarDataClone.background ? '#fff' : '#333') +
				' ; text-align: ' +
				(navbarDataClone.titleAlign ? navbarDataClone.titleAlign : 'center') +
				' ;  left:' +
				(navbarDataClone.isGoHome && navbarDataClone.titleAlign == 'left' ? '200rpx' : '0') +
				' '
			">
			{{ navbarDataClone.title }}
		</view>
		<!-- 导航栏  左上角的返回按钮 和home按钮 -->
		<view class="nav-capsule" :style="'line-height: 80' + 'rpx;'" v-if="navbarDataClone.isGoHome || navbarDataClone.isGoBack">
			<image style="width: 38rpx; height: 38rpx;"
				class="iconfont" 
				mode="scaleToFill" 
				src="../../../assets/image/icon_home.png"  
				v-if="navbarDataClone.isGoHome"
				@tap="backhomeFun"></image>	
		</view>
	</view>
</template>

<script setup>
import { ref, watch, onMounted, nextTick } from 'vue';
import { httpconfig } from '../../../config/httpconfig';

// 定义props
const props = defineProps({
    navbarData: {
        type: Object,
        default: () => ({})
    }
});

// 响应式数据
const visible = ref(false);
const message = ref('');
const received = ref(false);
const overlayVisible = ref(false);
const receivedMessage = ref({});
const patInfo = ref({});
const messagePopupBg = ref(httpconfig.imgDomain + 'images/icon/message-popup.png');
const roomNo = ref('');
const x = ref('');
const y = ref('');
const clickMenu = ref(false);
const share = ref('');
const docName = ref('');
const patName = ref('');

const navbarDataClone = ref({
    bottom: false,
    background: false,
    titleAlign: false,
    isGoHome: '',
    title: '',
    isGoBack: '',
    overlayVisible: '',
    login: false
});

// 监听navbarData变化
watch(
    () => props.navbarData,
    (newVal) => {
        navbarDataClone.value = { ...newVal };
    },
    { immediate: true, deep: true }
);

// 生命周期 - 挂载后
onMounted(() => {
    attached();
    nextTick(() => {
        ready();
    });
});

// 方法定义
const handlePageShow = () => {
    const app = getApp();
    const navbarData = navbarDataClone.value;
    navbarData.overlayVisible = app.globalData.overlayVisible;
    const globalData = app.globalData || {};
    const quickMenu = globalData.quickMenu || { x: 0, y: 0 };
    
    overlayVisible.value = globalData.overlayVisible;
    x.value = quickMenu.x;
    y.value = quickMenu.y;
    clickMenu.value = false;
    navbarDataClone.value = navbarData;
    
    if (navbarData.cleanPat === 'Y') {
        uni.removeStorageSync('patientData');
    }
};

const handlePageHide = () => {
    visible.value = false;
};

const attached = () => {
    const app = getApp();
    share.value = app.globalData.share;
    const globalData = app.globalData || {};
    const quickMenu = globalData.quickMenu || { x: 0, y: 0 };
    x.value = quickMenu.x;
    y.value = quickMenu.y;
    visible.value = false;
    
    if (props.navbarData && props.navbarData.background) {
        uni.setNavigationBarColor({
            frontColor: '#ffffff',
            backgroundColor: '#ffffff'
        });
    }
};

const ready = () => {};

// 返回上一页面
const navbackFun = () => {
    if (!props.navbarData) {
        uni.navigateBack({
            fail: (res) => {
                uni.switchTab({
                    url: '/pages/tabBar/index/index'
                });
            }
        });
    } else {
        if (props.navbarData.backflag !== '0') {
            uni.navigateBack({
                fail: (res) => {
                    uni.switchTab({
                        url: '/pages/tabBar/index/index'
                    });
                }
            });
        }
    }
};

// 返回到首页
const backhomeFun = () => {
    const navbarData = navbarDataClone.value;
    uni.redirectTo({
        url: '/pages/index/index'
    });
};

// 关闭弹窗
const handleClose = () => {
    visible.value = false;
};

// 显示遮罩层
const handleOverlayShow = () => {
    const app = getApp();
    app.globalData.overlayVisible = true;
    const navbarData = navbarDataClone.value;
    navbarData.overlayVisible = true;
    overlayVisible.value = true;
    navbarDataClone.value = navbarData;
};

// 关闭遮罩层
const handleOverlayHide = (event) => {
    const app = getApp();
    app.globalData.overlayVisible = false;
    const navbarData = navbarDataClone.value;
    navbarData.overlayVisible = false;
    overlayVisible.value = false;
    navbarDataClone.value = navbarData;
};

// 拖动快捷菜单
const onChange = (e) => {
    const app = getApp();
    const { x: newX, y: newY } = e.detail;
    x.value = newX;
    y.value = newY;
    app.globalData.quickMenu = {
        x: newX,
        y: newY
    };
};

// 点击快捷菜单
const menuclick = (e) => {
    clickMenu.value = !clickMenu.value;
};

const catchtap = () => {};


/**
 * 下载小程序新版本并重启应用
 */
const downLoadAndUpdate = (updateManager) => {
    uni.showLoading();
    // 静默下载更新小程序新版本
    updateManager.onUpdateReady(() => {
        uni.hideLoading();
        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
        updateManager.applyUpdate();
    });
    updateManager.onUpdateFailed(() => {
        // 新的版本下载失败
        uni.showModal({
            title: '已经有新版本了哟~',
            content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~'
        });
    });
};

const seeADoctorImmediately = () => {
    console.log('占位：函数 seeADoctorImmediately 未声明');
};

const goMyConsultation = () => {
    console.log('占位：函数 goMyConsultation 未声明');
};

const loginTim = () => {
    console.log('占位：函数 loginTim 未声明');
};
</script>
<style>
@import '../../../assets/css/iconfont.css';
@import '../../../assets/css/common.css';

.nav-wrap {
    position: relative;
    width: 100%;
    top: 0;
    color: #000;
    z-index: 9999999;
    background-size: 100% auto;
}

.weui-icon {
    margin-top: 0rpx;
}

.nav-title {
    position: absolute;
    text-align: center;
    max-width: 600rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    font-size: 37rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
}

.nav-capsule {
    display: flex;
    width: 110rpx;
    justify-content: space-between;
    position: absolute;
    left: 30rpx;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.navbar-v-line {
    color: #ddd;
}

.nav-content {
    display: inline-block;
    width: 0;
}

.nav-capsule .iconfont {
	margin-top: 20rpx;
}
</style>