left-window.uvue

<template>
	<view class="left-window-style">
		<view class="second-menu">
			<keep-alive>
        <component :is="active" :hasLeftWin="hasLeftWin" :leftWinActive="leftWinActive"></component>
			</keep-alive>
		</view>
	</view>
</template>

<script lang="uts">
	import componentPage from '@/pages/tabBar/component.uvue'
	import API from '@/pages/tabBar/API.uvue'
	import CSS from '@/pages/tabBar/CSS.uvue'
	import templatePage from '@/pages/tabBar/template.uvue'
  import { state, setMatchLeftWindow, setActive, setLeftWinActive } from '@/store/index.uts'
	let isPcObserver, isPhoneObserver
	export default {
		data() {
			return {
				nav: [
					'component',
					'API',
					'CSS',
					'template'
				],
				isPC: false
			}
		},
		components: {
			componentPage,
			API,
			CSS,
			templatePage
		},
		computed: {
      active():string{
        return state.active
      },
      hasLeftWin():boolean{
        return !state.noMatchLeftWindow
      },
      leftWinActive():string{
        return state.leftWinActive.split('/')[3]
      }
		},
		mounted() {
			isPcObserver = uni.createMediaQueryObserver(this)
			isPhoneObserver = uni.createMediaQueryObserver(this)
			isPcObserver.observe({
				minWidth: 768
			}, matched => {
				this.isPC = matched
				const pageUrl = this.$route.path
				if (!pageUrl) return
				const pageName = this.$route.path.split('/')[4]
        if(pageUrl === '/'){
          uni.reLaunch({
          	url: "/pages/component/public-properties/public-properties"
          })
        }else{
          uni.reLaunch({
          	url: pageUrl
          })
        }
			})
			isPhoneObserver.observe({
				maxWidth: 767
			}, matched => {
				this.isPC = !matched
				if (matched) {
					const pageUrl = this.$route.path
					const tabbarName = this.$route.path.split('/')[2]
					const tabbarUrl = tabbarName && (tabbarName === 'component' ? '/' : `/pages/tabBar/${tabbarName}`)
					uni.switchTab({
						url: tabbarUrl,
						success(e) {
							uni.navigateTo({
								url: pageUrl
							})
						}
					})
				}
			})
		},
		unmounted() {
			isPcObserver.disconnect()
			isPhoneObserver.disconnect()
		},
		watch: {
			isPC: {
				immediate: true,
				handler(newMatches:boolean) {
					setMatchLeftWindow(newMatches)
				}
			},
			$route(newRoute) {
				this.handlerRoute(newRoute)
			}
		},
		methods: {
			handlerRoute(newRoute) {
				if (this.isPC) {
					if (newRoute.path === '/') {
						uni.redirectTo({
							url: '/pages/component/public-properties/public-properties'
						})
					} else if (!newRoute.matched.length) {
						uni.redirectTo({
							url: '/pages/error/404'
						})
					} else {
						setLeftWinActive(newRoute.path)
						let active = newRoute.path.split('/')[2]
						if (this.nav.includes(active)) {
							if (active === 'component') {
								active = 'componentPage'
							}
							if (active === 'template') {
								active = 'templatePage'
							}
							setActive(active)
						}
					}
				}
			}
		}
	}
</script>

<style>
	.left-window-style {
		min-height: calc(100vh - var(--top-window-height));
		background-color: #f8f8f8;
	}
	.second-menu {
		width: 350px;
		background-color: #F8F8F8;
	}
</style>