h5-webgl-program/src/App.vue

<template>
	<div id="app">
		<!-- IOS机器会跳转两次到其他路由，当from路由被缓存时，原因未知 -->
		<keep-alive >
			<!-- <transition name="fade"> -->
			<router-view v-if="$route.meta.keepAlive"></router-view>
			<!-- </transition> -->
		</keep-alive>
		<router-view v-if="!$route.meta.keepAlive"></router-view>
		<div class="loadingShadow" v-show="loading">
			<div class="loadData">
				<img src="https://skyforest.static.elaber.cn/detail/loading.gif" alt="" />
				<div class="loadingMsg">{{loadingMsg}}</div>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		setStorage,
		getStorage,
		pxoveItem
	} from '@/utils/localStorage';
	const util = require('@/utils/util.js').default;
	export default {
		name: "App",
		// provide() {
		// 	return {
		// 		reload: this.reload,
		// 	};
		// },
		data() {
			return {
				themeColor: "rgba(0,97,232,1)",
				themeColor2: "rgba(0,97,232,0.2)",
				isRouterAlive: true,
				showAccountView: false, //是否显示用户账号列表
				acountList: [], //弹出层账号列表数据
				selectAccount: null, //选中的账号
				isIOS: false,
				include: []
			};
		},
		created() {
			let userInfo = getStorage('userInfo') ? JSON.parse(getStorage('userInfo')) : null;
			let userId = this.$route.query.leavePhoneCustomerId ? this.$route.query.leavePhoneCustomerId : (userInfo?userInfo.userId:'');
			let xcxHouseId = this.$route.query.xcxHouseId ? this.$route.query.xcxHouseId : (this.$route.query.houseId || '');
			let query = this.$route.query;
			let brandId = this.$route.query.brandId || this.$route.query.special_ID;
			if (brandId) { //如果存在集团id
				$config.brandId = brandId;
			}
			if (xcxHouseId) { //如果存在houseid
				this.$store.dispatch('setHouseId', xcxHouseId);
			}
			if (query) { //如果存在入参
				setStorage('queryObj', query);
			}
			if (userId) { //如果存在用户id
				this.$store.dispatch('setUserId', userId);
				// 开启websocket连接
				util.initWebsocket();
			}else{
				this.webLogin()
			}
			let isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
			this.isIOS = isIOS;
			window.addEventListener('error', (error) => {
				console.warn("***error***",error)
				// 区分是否是js错误
				if (error.message) {
					console.warn("error" + error.message)
				}
			}, true)
			
			// window.onerror = function(message,source,line,column,error) {
			// };
		},
		watch: {
			loading: {
				handler(newVal) {
					if (!newVal) {
						this.$store.state.loadingMsg = ''
					}
				}
			},
			
		},
		computed: {
			loading() {
				return this.$store.state.loading;
			},
			loadingMsg() {
				if (this.$store.state.loadingMsg) {
					return this.$store.state.loadingMsg;
				} else {
					return "正在查询，请耐心等待";
				}
			}
		},
		mounted() {
			// 禁止图片单机事件，防止出现图片点击浏览器自动预览功能
			document.body.addEventListener("click", function(e) {
				if (e.target.nodeName.toLowerCase() == "img") {
					e.preventDefault();
				}
			});
		},
		methods: {
			async webLogin(){
				let xcxHouseId = this.$route.query.xcxHouseId ? this.$route.query.xcxHouseId : (this.$route.query.houseId || '');
				let param = {
				    "terminal": 7,
				    "brandId": $config.brandId,
				    "houseId": xcxHouseId,
				    "shareToken": '',
				};
				let res = await requestConfig('webXcxLogin', param, true);
				if (res && res.single && res.single.id) { //如果存在用户id
					let userId = res.single.id;
					let userInfo = {
						userId:userId,
						openId:res.single.openId,
						token:res.single.token,
					}
					this.$store.dispatch('setUserId', userId);
					setStorage('userInfo', userInfo);
					// 开启websocket连接
					util.initWebsocket();
				}
			}
		},
	};
</script>

<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		/* text-align: center;
		color: #2c3e50;
		margin-top: 60px; */
	}

	body {
		background: #181C28;
	}


	.el-tooltip__popper .popper__arrow,
	.el-tooltip__popper .popper__arrow::after {
		border-style: none !important;
	}

	.el-picker-panel__body .el-date-picker__header .el-picker-panel__icon-btn {
		color: #FFFFFF;
	}

	.el-picker-panel__body .el-date-picker__header .el-date-picker__header-label {
		color: #FFFFFF;
	}

	.el-picker-panel__body .el-picker-panel__content .el-date-table th {
		color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	@import "./assets/common.scss";
</style>