zk-driver-wechat-applet/components/power-change-header/power-change-header - 副本.vue

<template>
	<view class="header">
		<navigator url="/pages/monitoring/index" open-type="redirect" :class="{'active':currentPage===1}">换电流程
		</navigator>
		<navigator url="/pages/carinfo/index" open-type="redirect" :class="{'active':currentPage===2}">车辆信息</navigator>
		<navigator url="/pages/batteryinfo/index" open-type="redirect" :class="{'active':currentPage===3}">电池信息
		</navigator>
	</view>
</template>

<script>
	export default {
		name: "power-change-header",
		data() {
			return {
				currentPage: 0,
				socketOpen: false
			};
		},
		mounted() {
			this.getRoute()
			this.initWs()
		},
		methods: {
			initWs11() {
				let msg = {
					type: "subscribeExchange",
					payLoad: {
						exchangeNo: "aaab"
					}
				}
				this.$ws.connect()
				this.$ws.onSocketOpen=()=>{
					this.$ws.sendmessage(msg)
				}
				this.$ws.onSocketMsg=(res)=>{
					console.log(res)
				}
			},
			initWs() {
				let that = this
				uni.connectSocket({
					url: 'ws://192.168.0.89:8088/ws/abbbccc/SSSSSSSS', //仅为示例，并非真实接口地址。
					complete: (res) => {
						console.log(res)
					}
				});
				uni.onSocketOpen(function(res) {
					//扫码成功之后发送订阅消息
					that.socketOpen = true;
					let msg = {
						type: "subscribeExchange",
						payLoad: {
							exchangeNo: "aaab"
						}
					}
					//确认换电发送订阅消息
					let msg2 = {
						type: "startExchange",
						payLoad: {
							exchangeNo: "aaab"
						}
					}
					if (that.socketOpen) {
						uni.sendSocketMessage({
							data: JSON.stringify(msg)
						});
						setTimeout(() => {
							uni.sendSocketMessage({
								data: JSON.stringify(msg2)
							});
						}, 3000)
					}
					console.log('WebSocket连接已打开！');
				});
				uni.onSocketError(function(res) {
					console.log('WebSocket连接打开失败，请检查！');
				});
				uni.onSocketMessage(function(res) {
					console.log('收到服务器内容：' + res.data);
				});
				uni.onSocketClose(function(res) {
					console.log('WebSocket 已关闭！');
				});
			},
			getRoute() {
				let curPage = getCurrentPages();
				let route = curPage[curPage.length - 1].route
				if (route === 'pages/monitoring/index') {
					this.currentPage = 1
				} else if (route === 'pages/carinfo/index') {
					this.currentPage = 2
				} else if (route === 'pages/batteryinfo/index') {
					this.currentPage = 3
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		display: flex;
		padding: 30rpx;
		width: 690rpx;
		color: #86909c;
		font-size: 32rpx;
		justify-content: space-around;

		.active {
			color: #1d2129;
			font-weight: bold;
			position: relative;
		}

		.active::after {
			content: '';
			background-image: url('@/static/line.png');
			background-size: 100% 100%;
			width: 52rpx;
			height: 9rpx;
			position: absolute;
			bottom: -25rpx;
			left: 32%;
		}
	}
</style>