Vent-App/pages/device/index.vue

<template>
	<view>
		<!-- 建议放在外层 -->
		<u-navbar 
      :bgStatusImage="backPic0"
      :bgImage="backPic" title="设备中心" @leftClick="devicemenuShow" :safeAreaInsetTop="true">
			<view class="u-nav-slot" slot="left">
				<u-icon name="list" size="20"> </u-icon>
			</view>
		</u-navbar>

		<view v-if="menushow" class="menupage">
			<DeviceMenu @menuClick="menuClick"></DeviceMenu>
		</view>
		<u-tabs class="devic-box-tab" :current="PageCur" :list="tabList" @click="NavChange"></u-tabs>
		<view class="">
			<home cur="home" :showColum="showColum" v-if="PageCur == '0' && !menushow" :key="0" :deviceType="deviceType"
				@setMenushow="setMenushow"></home>
			<history :key="1" cur="history" :showColum="showColum" :deviceType="deviceType"
				v-if="PageCur == '1' && !menushow" @setMenushow="setMenushow"></history>
			<operation :key="2" :showColum="showColum" :deviceType="deviceType" cur="operation"
				v-if="PageCur == '2' && !menushow" @setMenushow="setMenushow"></operation>
		</view>
	</view>
</template>

<script>
import api from "@/api/api";
import DeviceMenu from "./devicemenu/devicemenu.vue";
export default {
	components: {
		DeviceMenu,
	},
	data() {
		return {
			backPic0: "url(/static/topnavbar0.png)",
			backPic: "url(../../static/topnavbar.png)",
			PageCur: "0",
			showColum: {},
			menushow: false,
			deviceType: '',
			tabList: [
				{
					name: '设备监测'
				},
				{
					name: '历史数据'
				},
				{
					name: '操作记录'
				},
			],
		};
	},
	created() {
		this.getShowColum();
	},
	onLoad: function () {
		this.PageCur = "0";
	},
	methods: {
		NavChange: function (item) {
			this.PageCur = item.index;
			this.menushow = false
		},
		devicemenuShow(e) {
			this.menushow = !this.menushow;
		},
		menuClick(id) {
			debugger
			// this.TabCur = id;
			this.deviceType = id;
			this.menushow = false;
		},
		getShowColum() {
			new Promise((resolve, reject) => {
				api
					.getShowColum({})
					.then((response) => {
						if (response.data.code == 200) {
							var showlist = response.data.result;
							this.$store.commit("SET_SHOWCOLUM", showlist);
							this.showColum = showlist;
						} else {
							resolve(response);
						}
					})
					.catch((error) => {
						console.log("catch===>response", response);
						reject(error);
					});
			});
		},
		setMenushow(params) {
			if (params) {
				this.menushow = params.menushow
			}
		}
	},
};
</script>

<style lang="scss" scoped>
.devic-box-tab {
	// margin-top: 50px;
}
</style>