sxc-frontend/miniprogram/components/SsHeader.vue

<template>
	<view class="ss-header" :class="{ spread: spread }" :style="{ paddingTop: navBarHeight + 'px' }">
		<view class="header-left" :class="{ show: showLogo }">
			<view class="menus" :class="{ open: switchMenu }" @tap="toggleMenus">
				<view class="menus-line left"></view>
				<image class="menus-arrow" mode="aspectFill" :src="getStaticImageUrl('/images/header-menu-arrow.png')"></image>
				<view class="menus-line right"></view>
			</view>
			<image class="logo" mode="aspectFill" src="/static/images/logo-round.png" @tap="goHome"></image>
			<view class="title">商小川</view>
		</view>
	</view>
</template>

<script>
import { useGlobalStore } from '@/stores/global';
import { MessageApi } from '@/api/message';

export default {
	name: 'SsHeader',
	data() {
		return {
			globalStore: useGlobalStore(),
			navBarHeight: 0,
			showLogo: false
		};
	},
	computed: {
		spread() {
			return this.globalStore.spread;
		},
		switchMenu() {
			return this.globalStore.menuSwitch;
		}
	},
	mounted() {
		this.calculateNavBarHeight();
	},
	methods: {
		calculateNavBarHeight() {
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.navBarHeight = menuButtonInfo.top + 1;
			setTimeout(() => {
				this.showLogo = true;
				this.globalStore.setPaddingTop(this.navBarHeight + menuButtonInfo.height);
			}, 100);
		},
		toggleMenus() {
			this.globalStore.toggleMenuSwitch();
		},
		goHome() {
			this.globalStore.setMenuSwitch(false);
			this.globalStore.setSpread(false);
			this.globalStore.setChatLoading(false);
			MessageApi.stop();
		}
	}
};
</script>

<style scoped lang="scss">
.ss-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	padding: 0 32rpx 0 32rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.header-left {
		display: none;
		align-items: center;
		transition: padding-left 0.3s linear;

		.menus {
			display: none;
			align-items: center;
			justify-content: space-between;
			width: 46rpx;
			height: 42rpx;
			margin-right: 32rpx;
			border-top: 4rpx solid #101333;
			border-bottom: 4rpx solid #101333;

			.menus-line {
				height: 12rpx;
				border-top: 4rpx solid #101333;
				border-bottom: 4rpx solid #101333;
				transition: width 0.3s linear;

				&.left {
					width: 0;
					margin-left: 2rpx;
				}

				&.right {
					margin-right: 2rpx;
					width: calc(100% - 22rpx);
				}
			}

			.menus-arrow {
				width: 16rpx;
				height: 14rpx;
				margin-left: 0;
				margin-right: 4rpx;
				transition: transform 0.3s linear;
			}

			&.open {
				.menus-line {
					&.left {
						width: calc(100% - 20rpx);
					}

					&.right {
						width: 0;
					}
				}

				.menus-arrow {
					margin-left: 4rpx;
					margin-right: 0;
					transform: rotateY(180deg);
				}
			}
		}

		.logo {
			width: 60rpx;
			height: 60rpx;
			border-radius: 12rpx;
			margin-right: 16rpx;
		}

		.title {
			color: #101333;
			font-size: 32rpx;
			line-height: 32rpx;
			font-weight: bold;
		}

		&.show {
			display: flex;
		}
	}

	&.spread {
		.header-left {
			.menus {
				display: flex;
			}
		}
	}
}
</style>