freight-web/src/components/NavBar/NavBar.vue

93 lines
2.2 KiB
Vue
Raw Normal View History

2024-03-04 07:10:11 +00:00
<template>
<view
:style="{
paddingTop: navbarRect.top + 'px',
height: navbarRect.height + 'px',
}"
class="navbar"
>
<view class="left" @click="handleMsg()" v-if="title === '工作台'">
2024-03-04 07:10:11 +00:00
<view class="msg-badge">
2024-04-23 02:47:52 +00:00
<up-badge max="99" :value="count"></up-badge>
2024-03-04 07:10:11 +00:00
</view>
<up-image
src="https://backend-common.obs.cn-east-3.myhuaweicloud.com/static/pages/message.png"
2024-03-04 07:10:11 +00:00
width="42rpx"
height="36rpx"
></up-image>
</view>
<view class="title">{{ title }}</view>
2024-03-04 07:10:11 +00:00
</view>
</template>
<script setup lang="ts">
2024-04-12 01:24:26 +00:00
import { ProfileApi,ReceiveApi,ShipmentApi,PictureApi,ReceiveProductApi,DeviceApi,StockCardApi,GoodsApi,SupplierApi,CustomerApi,FinanceApi,MessageApi } from '@/services';
import { formatDate } from "@/utils";
import { UsersType } from "@/utils/enum";
import valid from "@/utils/validate";
console.log(ProfileApi,ReceiveApi,ShipmentApi,PictureApi,ReceiveProductApi,DeviceApi,StockCardApi,GoodsApi,SupplierApi,CustomerApi,FinanceApi,formatDate,UsersType, valid)
2024-04-23 02:47:52 +00:00
const props = withDefaults(
defineProps<{
count: number,
title: string
2024-04-23 02:47:52 +00:00
}>(),
{
count: 0
}
);
2024-03-04 07:10:11 +00:00
const navbarRect = reactive({
height: 32,
top: 28,
msgCount: 10,
});
onMounted(() => {
// #ifdef APP-PLUS || MP-WEIXIN
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
navbarRect.height = menuButtonInfo.height;
navbarRect.top = menuButtonInfo.top;
// #endif
});
const handleMsg = () => {
uni.navigateTo({
2024-04-11 06:06:04 +00:00
url: "/pagesLogin/message/index", // 要跳转到的页面路径
2024-03-04 07:10:11 +00:00
});
};
</script>
<style lang="scss">
.navbar {
background: #f9f9f9;
// box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.18);
2024-03-04 07:10:11 +00:00
padding: 15rpx;
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 999;
.left {
position: absolute;
margin-top: 10px;
.msg-badge {
margin-left: 20rpx;
font-size: 16rpx;
padding: 2px 4px;
position: absolute;
z-index: 9;
margin-top: -10px;
}
}
.title {
font-size: 32rpx;
font-family: Source Han Sans CN;
font-weight: 500;
color: #000000;
line-height: 41rpx;
text-align: center;
padding: 5px;
}
}
</style>