OpenDoorManageMini/pages/globalPages/home.vue

<template>
	<view class="container">
		<view class="pages">
			<Home ref="home" v-if="tabName=='首页'" />
			<Equipment ref="equipment" v-if="tabName=='设备'" />
			<Commodity ref="commodity" v-if="tabName=='商品'" />
			<Account v-if="tabName=='我的'" />
		</view>

		<u-tabbar v-if="menu&&menu.length>0" :value="current" @change="tabChange" :fixed="true" :placeholder="false"
			:safeAreaInsetBottom="true">
			<u-tabbar-item :text="item.name" v-for="(item,index) in menu" :key="item.id" @click="tabClick(item)">
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="tabIcon[item.name][0]"></image>
				<image class="u-page__item__slot-icon" slot="active-icon" :src="tabIcon[item.name][1]"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import Home from './components/home.vue'
	import Equipment from './components/equipment.vue'
	import Commodity from './components/commodity.vue'
	import Account from './components/account.vue'
	let mqtt = require('../../static/js/mqtt.min.js')

	export default {
		components: {
			Home,
			Equipment,
			Commodity,
			Account
		},

		data() {
			return {
				current: 0,
				tabIcon: {
					'首页': [require('../../static/images/tabbar/home.png'), require(
						'../../static/images/tabbar/home_.png')],
					'设备': [require('../../static/images/tabbar/equipment.png'), require(
						'../../static/images/tabbar/equipment_.png')],
					'商品': [require('../../static/images/tabbar/commodity.png'), require(
						'../../static/images/tabbar/commodity_.png')],
					'我的': [require('../../static/images/tabbar/mine.png'), require(
						'../../static/images/tabbar/mine_.png')],
				},
				client: null,
				tabName: null
			}
		},
		onShow() {
			// 版本自动更新代码
			const updateManager = wx.getUpdateManager()
			updateManager.onUpdateReady(function() {
				wx.showModal({
					title: '更新检测',
					content: '检测到新版本，是否重启小程序？',
					success: function(res) {
						if (res.confirm) {
							// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
							updateManager.applyUpdate()
						}
					}
				})
			})
			updateManager.onUpdateFailed(function() {
				// 新的版本下载失败
				wx.showModal({
					title: '已有新版本咯',
					content: '请您删除当前小程序，重新打开呦~',
					showCancel: false
				})
			})

			//onshow刷新设备状态
			if(this.current==0){
				this.$refs.home.onshow()
			}
			if (this.current == 1) {
				this.$refs.equipment.onshow()
			}
			if(this.current==2){
				this.$refs.commodity.onshow()
			}
		},

		computed: {
			menu() {
				return JSON.parse(this.$store.state.permission.permissions_menu)
			},
		},

		watch: {
			menu: {
				handler(newVal, oldVal) {
					if (newVal.length > 0) {
						this.tabName = newVal[0].name
					} else {
						this.tabName = null
					}
				},
				deep: true,
				immediate: true
			}
		},

		onLoad(o) {
			if (o.tabName) { //公库添加商品到私库完毕，显示商品界面
				this.tabName = o.tabName;
				if (this.menu && this.menu.length > 0) {
					this.menu.forEach((item, index) => {
						if (item.name == o.tabName) {
							this.current = index
						}
					})
				}

			}
			// this.mqttConnect()
		},

		methods: {
			mqttConnect() {
				let _this = this;

				//测试用，生产通过接口（/sys/user-info/webUserMqtt）获取options
				const options = {
					clean: true, // true: 清除会话, false: 保留会话
					connectTimeout: 4000, // 超时时间
					// 认证信息
					clientId: 'web-user-wxc-1',
					username: 'webuser',
					password: 'xy20220101',
				}
				// 连接字符串, 通过协议指定使用的连接方式
				// ws 未加密 WebSocket 连接
				// wss 加密 WebSocket 连接
				// mqtt 未加密 TCP 连接
				// mqtts 加密 TCP 连接
				// wxs 微信小程序连接
				// alis 支付宝小程序连接
				const connectUrl = 'wxs://mqtt.mxrvending.com:8084/mqtt'
				this.client = mqtt.connect(connectUrl, options)
				this.client.on('connect', function() {
					//订阅消息
					_this.client.subscribe('web-user-wxc-1', function(err) {
						if (!err) {
							console.log('订阅成功', err)
						} else {
							console.log('订阅失败', err)
						}
					})
				}).on('reconnect', function() {
					console.log('正在重连')
				}).on('error', function() {
					console.log('错误')
				}).on('end', function() {
					console.log('连接结束')
				}).on('message', function(topic, message) {
					console.log('接收到的消息==========>>>>>>>>', message.toString())
				})
			},

			tabChange(e) {
				this.current = e
			},

			tabClick(e) {
				this.tabName = e.name
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.pages {
			height: 100%;
		}

		.u-page__item__slot-icon {
			width: 44rpx;
			height: 44rpx;
		}
	}
</style>