congming_huose-apk/common/components/SideMenu.vue

<template>
	<view>
		<!-- 侧边菜单遮罩 -->
		<view class="side-menu-overlay" v-if="visible" @click="closeMenu"></view>
		
		<!-- 侧边菜单 -->
		<view class="side-menu" :class="{ 'side-menu-open': visible }">
			<view class="menu-items">
				<view 
					v-for="(item, index) in menuItems" 
					:key="index"
					class="menu-item" 
					@click="handleMenuClick(item.type)"
				>
					<image :src="item.icon" mode="aspectFill"></image>
					<text class="menu-text">{{ item.text }}</text>
				</view>
			</view>
			<view class="add-room-btn" @click="handleAddRoom">
				<text class="add-icon">+</text>
				<text class="add-text">{{ $i18n.t('addSpace') }}</text>
			</view>
			<view class="menu-footer">
				<!-- <text class="footer-text">{{ $i18n.t('termsOfService') }}</text>
				<text class="version-text">{{ $i18n.t('version') }}</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'SideMenu',
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			logoflag: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				menuItems: []
			}
		},
		created() {
			this.updateMenuItems()
		},
		computed: {
			// 计算当前语言，用于触发更新
			currentLanguage() {
				return this.$i18n.getCurrentLanguage()
			}
		},
		watch: {
			// 监听语言变化
			currentLanguage() {
				console.log('侧边菜单语言变化:', this.currentLanguage)
				this.updateMenuItems()
			}
		},
		mounted() {
			// 监听语言变化事件
			uni.$on('languageChanged', this.handleLanguageChange)
		},
		beforeDestroy() {
			// 移除事件监听
			uni.$off('languageChanged', this.handleLanguageChange)
		},
		methods: {
			handleLanguageChange(lang) {
				console.log('侧边菜单语言切换事件:', lang)
				this.updateMenuItems()
			},
			updateMenuItems() {
				console.log('更新侧边菜单项')
				// 重新构建菜单项数据，确保所有文本都通过 $i18n.t() 获取
				this.menuItems = [
					{
						icon: 'https://api.ccttiot.com/smartmeter/img/static/uGtk76T66OVczIXbgdFu',
						text: this.$i18n.t('appSettings'),
						type: 'settings'
					},
					// {
					// 	icon: 'https://api.ccttiot.com/smartmeter/img/static/uv0CwUtlw72qu7Ei8m7l',
					// 	text: this.$i18n.t('help'),
					// 	type: 'help'
					// },
					// {
					// 	icon: 'https://api.ccttiot.com/smartmeter/img/static/u2cqtL7bQsmpWqS6SrcP',
					// 	text: this.$i18n.t('reportIssue'),
					// 	type: 'report'
					// },
					// {
					// 	icon: 'https://api.ccttiot.com/smartmeter/img/static/uSqoSqhsp6xM4KqUjpQN',
					// 	text: this.$i18n.t('videoMonitor'),
					// 	type: 'video'
					// },
					// {
					// 	icon: 'https://api.ccttiot.com/smartmeter/img/static/u4rAifHkzk2nyXThCNQp',
					// 	text: this.$i18n.t('integration'),
					// 	type: 'integration'
					// },
					{
						icon: 'https://api.ccttiot.com/smartmeter/img/static/uxrWbrTpoWFOGkfY2jUu',
						text: this.$i18n.t('languageSettings'),
						type: 'language'
					}
				];
				// 强制更新组件
				this.$forceUpdate()
			},
			closeMenu() {
				this.$emit('close')
			},
			// 点击判断跳转登录或添加空间页面
			handleAddRoom() {
				this.closeMenu()
				if(this.logoflag == true){
					uni.reLaunch({
						url:'/pages/login/index'
					})
				}else{
					uni.navigateTo({
						url:'/pages/kongjian/index'
					})
				}
			},
			// 菜单栏点击跳转事件
			handleMenuClick(type) {
				console.log('侧边菜单点击了:', type)
				if (type == 'language') {
					uni.reLaunch({
						url: '/pages/yuyan',
					})
				} else if(type == 'settings'){
					if(this.logoflag == true){
						uni.reLaunch({
							url:'/pages/login/index'
						})
					}else{
					   uni.navigateTo({
					   	url: '/subpackage/user/index',
					   	success: () => {
					   		this.closeMenu()
					   		uni.hideLoading()
					   	},
					   })	
					}
				}else{
					this.$emit('menu-click', type)
					this.closeMenu()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.side-menu-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 1000;
	}

	.side-menu {
		position: fixed;
		top: 0;
		left: -590rpx;
		width: 590rpx;
		height: 100vh;
		background-color: #fff;
		box-shadow: 4rpx 0 20rpx rgba(0, 0, 0, 0.15);
		z-index: 1001;
		transition: left 0.3s ease-out;
		display: flex;
		flex-direction: column;
		padding: 0;
		padding-top: 130rpx;
		box-sizing: border-box;
	}

	.side-menu-open {
		left: 0;
	}

	.menu-items {
		flex: 1;
		padding: 40rpx 0 0 0;
		image{
			width: 56rpx;
			height: 56rpx;
		}
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx 40rpx;
		border-bottom: 1rpx solid #f5f5f5;
		transition: background-color 0.2s;
	}

	.menu-item:active {
		background-color: #f8f8f8;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-icon-item {
		font-size: 40rpx;
		margin-right: 30rpx;
		color: #666;
		width: 40rpx;
		text-align: center;
	}

	.menu-item:nth-child(2) .menu-icon-item {
		background-color: #f0f0f0;
		border-radius: 50%;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.menu-text {
		font-size: 30rpx;
		color: #333;
		font-weight: 400;
	}

	.add-room-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 25rpx 40rpx;
		color: #fff;
		margin: 30rpx 40rpx;
		border-radius: 12rpx;
		transition: all 0.2s;
		border-radius: 50rpx;
		border: 1px solid #000;
		color: #000;
	}

	.add-room-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
	}

	.add-icon {
		font-size: 32rpx;
		margin-right: 15rpx;
		font-weight: bold;
	}

	.add-text {
		font-size: 30rpx;
		font-weight: 500;
	}

	.menu-footer {
		padding: 40rpx;
		border-top: 1rpx solid #f0f0f0;
		background-color: #fafafa;
	}

	.footer-text {
		display: block;
		color: #999;
		font-size: 26rpx;
		margin-bottom: 10rpx;
	}

	.version-text {
		display: block;
		color: #bbb;
		font-size: 24rpx;
	}

	.lang-select {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
	}
</style>