teaching-uniapp/App.vue

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>
<script>
	import Vue from 'vue'
	// import msgPop from './components/msgPop/msgPop.vue'
	// import app from './utils/api.js'
	export default {
		onLaunch() {

			// 获取未读信息
			// this.getAllMessage()

			// 微信登录
			wx.login({
				success({
					code
				}) {
					// console.log('code', code);
					uni.request({
						url:'https://teacherapi.cocorobo.cn/api/pbl/weChatCode',
						// url: 'http://localhost:7333/api/pbl/weChatCode', //接口地址：前缀+方法中传入的地址
						method: 'GET',
						data: {
							codes: code
						}
					}).then(res => {
						// console.log('微信登录',res);
						uni.setStorageSync('oId', res.data)
						// uni.getStorageSync('oId')
					})
				}
			})

			// 获取设备信息
			uni.getSystemInfo({
				success: function(res) {
					Vue.prototype.screenHeight = res.screenHeight
					Vue.prototype.screenWidth = res.screenWidth
					// console.log(res);
					const tabBarHeight = res.screenHeight - res.windowHeight;
					Vue.prototype.tabBarHeight = tabBarHeight
					if (uni.getMenuButtonBoundingClientRect()) {
						console.log('小程序');
						// 小程序状态栏是指显示电量的那一小部分
						thisWechat(res.statusBarHeight)
					} else {
						console.log('app');
						thisApp(res.statusBarHeight)
					}
				}
			});

			// 微信
			function thisWechat(statusBarHeight) {
				// 获取胶囊位置
				let meunButtonInfo = uni.getMenuButtonBoundingClientRect()
				// console.log(meunButtonInfo);

				Vue.prototype.meunButtonInfo = meunButtonInfo.height

				// 计算出导航栏高度+动态栏
				let allHeight = meunButtonInfo.bottom + (meunButtonInfo.top - statusBarHeight) * 2;
				// console.log(allHeight);
				let navheight;
				Vue.prototype.navheight = allHeight

				// 按钮离顶
				let alltop = meunButtonInfo.top
				Vue.prototype.navTop = alltop

				// 动态栏高度
				let statusHeight
				Vue.prototype.statusHeight = statusBarHeight
			};

			// 这个app的
			function thisApp(statusBarHeight) {
				// console.log(uni.getSystemInfoSync());
				// 导航栏高度
				let customBarHeight;
				if (uni.getSystemInfoSync().platform === 'android') {

					customBarHeight = statusBarHeight + 50;

				} else if (uni.getSystemInfoSync().platform === 'ios') {
					// iOS 平台
					// 在这里根据 iOS 平台的特性计算自定义状态栏高度
					// ...
					customBarHeight = statusBarHeight + 45;
				} else {
					// 其他平台
					// ...
					customBarHeight = statusBarHeight;
				}
				// console.log(customBarHeight);
				Vue.prototype.customBar = customBarHeight;
			}

		},
		onShow() {

		},
		onLoad() {
			// this.animation = uni.createAnimation()
		},
		methods: {
			// 获取未读信息
			getAllMessage() {
				this.$request('/selectAllMessage', "POST", {
					oid: this.$store.state.user.openid
				}).then(res => {
					
					console.log('获取未读信息',res[0][0]);
					let num = res[0][0].msg
		
					if (num == 0) {
						uni.hideTabBarRedDot({
							index: 4
						})
					} else {
						Vue.prototype.msgnum = num
						uni.setTabBarBadge({
							index: 4,
							text: num.toString()
						})
					}
				})
			}
		
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	body,
	html {
		background-color: #f0f2f5;
		/* font-family: PingFang SC; */
		height: 100vh;
		width: 750rpx;
	}

	

	view {
		box-sizing: border-box;
		padding: 0;
	}
	
	
	/* 确认弹窗 */
	.mask { //弹窗背景色
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 999;
		overflow: hidden;
		// display: none;
	}
	.popup-container {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 520rpx;
		height: 260rpx;
		z-index: 1000;
		border-radius: 16rpx;
		overflow: hidden;
		.popup {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;
	
			.header {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin-top: 24px;
				font-size: 34rpx;
				font-weight: 600;
	
				image {
					width: 150rpx;
					height: 150rpx;
					margin-top: 15px;
					margin-bottom: 15px;
				}
			}
	
			.footer {
				width: 100%;
				display: flex;
				overflow: hidden;
	
				.cancel-btn {
					width: 50%;
					height: 100rpx;
					background-color: #F7F7F7;
					color: #000;
					font-size: 34rpx;
					text-align: center;
					border-bottom-left-radius: 16rpx;
					line-height: 50px;
				}
	
				.confirm-btn {
					width: 50%;
					height: 100rpx;
					background-color: #0081FE;
					color: #fff;
					font-size: 34rpx;
					text-align: center;
					line-height: 50px;
				}
			}
		}
	}
	/* 触底加载更多 */
	.loading {
		height: 30rpx;
		text-align: center;
		padding-top: 20rpx;
		padding-bottom: 100rpx;
		font-size: 26rpx;
		color: #888;
		line-height: 2em;
	}


	/* 公共字体大小类 */

	.one-font {
		font-size: 48rpx;
		line-height: 72rpx;
		font-weight: 600;
	}

	.two-font {
		font-size: 40rpx;
		line-height: 56rpx;
	}

	.twoZ-font {
		font-size: 40rpx;
		line-height: 56rpx;
		font-weight: 500;
	}

	.three-font {
		font-size: 34rpx;
		line-height: 48rpx;
		font-weight: 500;
	}

	.num-font {
		font-size: 36rpx;
		line-height: 56rpx;
		font-weight: 700;
	}

	.bmTit-font {
		font-size: 36rpx;
		line-height: 44rpx;
		font-weight: 500;
	}

	.fNum-font {
		font-size: 44rpx;
		line-height: 56rpx;
		font-weight: 700;
	}

	.zw-font {
		font-size: 34rpx;
		line-height: 48rpx;
	}

	.btn-font {
		font-size: 28rpx;
		line-height: 40rpx;
		font-weight: 600;
	}

	.fwb-font {
		font-size: 28rpx;
		line-height: 40rpx;
		font-size: 400;
	}

	.sZw-font {
		font-size: 26rpx;
		line-height: 42rpx;
		font-size: 400;
	}

	.sBtn-font {
		font-size: 24rpx;
		line-height: 32rpx;
		font-weight: 600;
	}

	.fz-font {
		font-size: 24rpx;
		line-height: 32rpx;
		font-weight: 400;
	}

	.bq-font {
		font-size: 20rpx;
		line-height: 24rpx;
	}

	.bqZ-font {
		font-size: 20rpx;
		line-height: 24rpx;
		font-weight: 600;
	}
</style>