web-app-v1/App.vue

<script>
	import {
		getWxJSSDKConfig
	} from '@/apis/user.js';
	import {
		getQueryString
	} from './common/util/index.js';
	import urlConfig from "./common/util/urlConfig";
	import VConsole from 'vconsole';
	let vConsole = null; //移动H5调试器
	export default {
		onLaunch: function() {
			this.fontSizeSetting();
			uni.toast = (...args) => uni.showToast({
				duration: 5678,
				title: args[0],
				icon: 'none'
			});
			uni.loading = () => uni.showLoading({
				mask: false
			});
			this.loadVConsole();
			// if (location.hash.length > 3) {
			// 	uni.reLaunch({ url: 'pages/index/index' })
			// }
		},
		onShow: function() {
			let code = getQueryString('code');
			if (code) {
				uni.setStorageSync('code', code);
				this.$store.commit('userinfo/SET_CODE', code);
			}
		},
		onHide: function() {
			console.log('App Hide');
		},
		methods: {
			fontSizeSetting() {
				window.onload = function() {
					setAndroidFontsize();
					htmlFontSize()
				}
				window.onresize = function() {
					setAndroidFontsize();
					htmlFontSize()
				}

				// 安卓解决微信浏览器字体被调大导致页面错乱的办法
				function setAndroidFontsize() {
					if (typeof window.WeixinJSBridge == "object" && typeof window.WeixinJSBridge.invoke == "function") {
						handleFontSize();
					} else {
						if (document.addEventListener) {
							document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
						} else if (document.attachEvent) {
							document.attachEvent("WeixinJSBridgeReady", handleFontSize);
							document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
						}
					}
				}

				function handleFontSize() {
					window.WeixinJSBridge.invoke('setFontSizeCallback', {
						'fontSize': 0
					});
					window.WeixinJSBridge.on('menu:setfont', function() {
						window.WeixinJSBridge.invoke('setFontSizeCallback', {
							'fontSize': 0
						});
					});
				}

				function htmlFontSize() {
					var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
					var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
					var width = w > h ? h : w;
					width = width > 720 ? 720 : width
					var fz = ~~(width / 15)
					document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz + "px";
					var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.replace(
							'px', '') *
						10000) / 10000
					if (fz !== realfz) {
						document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) + "px";
					}
				}
			},
			　loadVConsole() { //初始化vConsole，用于H5调试用
			                if (urlConfig.isVConsole) { //开启调试时
			                    // let systemInfo = getSystemInfo();
			                    // if (!(systemInfo.uniPlatform == 'app' || systemInfo.uniPlatform == 'web')) { // 当为app或者H5时
			                    //     return;
			                    // }
			                    vConsole = new VConsole({
			                        defaultPlugins: ['system', 'network', 'element', 'storage'],
			                        // 可以在此设定要默认加载的面板
			                        maxLogNumber: 1000,
			                        // disableLogScrolling: true,
			                        onReady: () => {
			                            console.log('vConsole: onReady');
			                            // 置顶最高层级
			                            var vcSwitch = document.getElementsByClassName('vc-switch')[0];
			                            vcSwitch.style.zIndex = '9999999999';
			                            var vcMask = document.getElementsByClassName('vc-mask')[0];
			                            vcMask.style.zIndex = '9999999999';
			                            var vcPanel = document.getElementsByClassName('vc-panel')[0];
			                            vcPanel.style.zIndex = '9999999999';
			                            // console.log(vcSwitch, vcMask, vcPanel)
			
			                            console.log(this.globalData.systemInfo)
			                        },
			                        onClearLog: () => {
			                            console.log('vConsole: onClearLog');
			                        }
			                    });
			                }
			            },
			            destroyVConsole() {
			                // 结束调试后，可移除掉
			                vConsole.destroy();
			            }
		}
	};
</script>

<style lang="scss">
	@import 'common/style/main.scss'; //引入 ColorUI 组件库主样式
	@import 'common/style/icon.scss'; //引入 ColorUI 组件库图标样式
	@import 'common/style/animation.scss'; //引入 ColorUI 组件库动画样式
	@import 'common/style/shop.scss'; //引入店铺的公用样式
	@import 'common/style/chat_icon.css'; //引入微聊的icon
	@import 'common/style/new_iconfont.css'; //引入iconfont

	@import 'uview-ui/index.scss'; //引入uview-ui样式
	@import './static/css/iconfont.css';
	@import './static/css/base.css';

	// @font-face {
	// 	font-family: pingfang;
	// 	src: url('http://api.app.jiuweiyun.cn/PINGFANG_BOLD.TTF');
	// }

	view,
	text {
		color: #333;
		font-family: pingfang;
	}

	.uni-tabbar__label {
		font-weight: bold;
	}

	page,
	#app,
	html,
	body {
		margin: 0;
		padding: 0;
		-moz-text-size-adjust: 100% !important;
		-webkit-text-size-adjust: 100% !important;
		text-size-adjust: 100% !important;
		-moz-text-size-adjust: 100% !important;
	}

	::-webkit-scrollbar {
		display: none;
	}



	uni-tabbar {
		width: 100vw;

		.uni-tabbar {
			width: 100vw;
			font-family: pingfang;
		}
	}

	page {
		//uniapp 中的 page 标签相当于 html 中的 body, 默认高度为 auto, 但是高度为 100% 更利于 app 布局,你也可以在 page 中设置一些全局样式,比如全局背景色
		height: 100%;
		background: #f9f9fb;
		color: $app-main-text-color;
	}

	/deep/ .uni-modal__bd {
		font-size: 24px !important;
	}

	.pro_name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.total {
		font-size: 32rpx;

		// margin-top:12rpx;
		text {
			font-weight: bold;
			color: #f76454;
		}

		text:first-child {
			font-size: 28rpx;
			margin-right: 5rpx;
		}
	}

	.flexV {
		display: flex;
		align-items: center;
	}

	.flexC {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flexS {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.flexSS {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.flexE {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.flexA {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.flexB {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flexBS {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.flexCC {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}


	.safeguard {
		font-size: 24rpx;
		width: 140rpx;
		text-align: center;
		height: 46rpx;
		line-height: 46rpx;
		color: #999;
		background: #f8f8f8;
		margin-top: 16rpx;
		border-radius: 8rpx;
		box-sizing: border-box;
	}

	.gray {
		font-size: 28rpx;
		color: #999;
		margin-right: 5rpx;
	}

	.block {
		width: 750rpx;
		height: 20rpx;
		background-color: #f9f9fb;
	}

	//复制按钮
	.copy_btn {
		width: 100rpx;
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		display: inline-block;
		background: $base-line-bg;
		border-radius: 24rpx;
		color: #fff;
		margin-left: 30rpx;
	}

	.base_btn {
		width: 176rpx;
		text-align: center;
		height: 68rpx;
		line-height: 68rpx;
		background: $base-line-bg;
		border-radius: 34rpx;
		font-size: 28rpx;
		color: #fff;
		margin-left: 15rpx;
	}

	.after_btn {
		width: 192rpx;
		height: 68rpx;
		background: #fff4f3;
		opacity: 1;
		border-radius: 34rpx;
		color: $base-color;
		text-align: center;
		line-height: 68rpx;
	}

	//查询按钮
	.search_btn {
		width: 124rpx;
		height: 64rpx;
		text-align: center;
		line-height: 64rpx;
		background: $base-line-bg;
		font-size: 28rpx;
		color: #fff;
		border-radius: 44rpx;
	}

	//提交按钮
	.sub_btn {
		width: 530rpx;
		margin: 0 auto;
		height: 88rpx;
		background: $base-line-bg;
		opacity: 1;
		border-radius: 44rpx;
		color: #fff;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
	}

	.search_inp {
		width: 540rpx;
	}

	.iconxuanzhong {
		color: $base-color;
	}

	.iconfont {
		vertical-align: middle;
	}

	//无数据时显示
	.noData {
		width: 100%;
		text-align: center;
		margin-top: 15vh;

		image {
			width: 485rpx;
			height: 351rpx;
		}

		view {
			margin-top: 40rpx;
		}
	}

	//一年零一天，不满意退钱
	.one_year {
		padding: 5rpx 20rpx;
		background: #fff4f3;
		color: $base-color;
		border-radius: 8rpx;
		margin-top: 15rpx;
		font-size: 24rpx;
	}
</style>