hldy_app_mini/pages/Warehouse/index/index.vue

<template>
	<view>
		<view class="flex">
		<!-- 	<leftcontent :list="tabbrarr" @navurl="navurl"></leftcontent> -->
			<!-- 主页 -->
			<!-- <index :isShow="menuop" v-if="!ckindex" /> -->
			<!-- <material></material> -->
			<view class="left">
				<leftcontent :list="tabbrarr" @navurl="navurl"></leftcontent>
			</view>
			<view class="boxrt">
				<index :isShow="menuop" v-if="!ckindex" />
				<material :isShow="ckindex == 1"></material>
				<picking :isShow="ckindex == 2"></picking>
				<finish :isShow="ckindex == 3"></finish>
				<outbound v-if="ckindex == 4"></outbound>
				<retstock v-if="ckindex == 5"></retstock>
				<inventory :isShow="ckindex == 6"></inventory>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
	import leftcontent from "@/pages/NursingNew/component/leftcontent/leftcontent.vue"
	import material from "@/pages/procurement/material.vue";
	import index from "./component/index.vue"

	import picking from "../picking.vue";

	import finish from "@/pages/Warehouse/finish.vue"
	import outbound from "@/pages/procurement/outbound.vue";
	import inventory from "@/pages/procurement/inventory.vue";
	import retstock from "@/pages/procurement/retstock.vue";

	const tabbrarr = ref([
		{ name: '首页', url: '/static/shouye/ck/h0.png', urls: '/static/shouye/ck/h1.png' },
		{ name: '采购', url: '/static/shouye/ck/c0.png', urls: '/static/shouye/ck/c1.png' },
		{ name: '拣货', url: '/static/shouye/ck/j0.png', urls: '/static/shouye/ck/j1.png' },
		{ name: '完结', url: '/static/shouye/ck/w0.png', urls: '/static/shouye/ck/w1.png' },
		{ name: '请领', url: '/static/shouye/ck/q0.png', urls: '/static/shouye/ck/q1.png' },
		{ name: '退货', url: '/static/shouye/ck/t0.png', urls: '/static/shouye/ck/t1.png' },
		{ name: '盘点', url: '/static/shouye/ck/p0.png', urls: '/static/shouye/ck/p1.png' },
		{ name: '返回', url: '/static/shouye/sy/f0.png', urls: '/static/shouye/sy/f1.png' },
	])

	const menuop = ref(false)
	onMounted(() => {
		// 处理响应式
		navurl(0)
	})
	const ckindex = ref(-1)
	const navurl = (e : number) => {
		// 最后一个直接返回
		if (e === tabbrarr.value.length - 1) {
			uni.navigateBack()
			return
		}
		ckindex.value = e;
		// 这个是为了触发渐变动画
		menuop.value = false
		setTimeout(() => {
			menuop.value = true
		}, 50)

	}
</script>

<style scoped lang="less">
	.flex {

		display: flex;
		position: relative;
		width: 100%;
		height: 100vh;
		background-color: #eff0f4;
		overflow: hidden;
		z-index: 12;
	}

	.left {
		width: 8.2vw;
		height: 100vh;
	}

	.boxrt {
		width: calc(100vw - 8.2vw);
		background: RGBA(239, 240, 244, 1);
		display: flex;
	}
</style>