book-hi/App.vue

<script>
	export default {
		globalData: {
			// 胶囊距上距离
			menuTop: 0,
			// 导航栏高度
			navBarHeight: 0,
			// 胶囊距右方间距（方保持左、右间距一致）
			menuRight: 0,
			// 胶囊距底部间距（保持底部间距一致）
			menuBotton: 0,
			// 胶囊高度（自定义内容可与胶囊高度保证一致）
			menuHeight: 0,
			// 状态栏高度
			statusBarHeight: 0,
			// 安全距离
			safeAreaHeight: 0,
			// 胶囊宽度
			menuWidth: 0,
			// 窗口宽度
			windowWidth: 0,
			// 窗口宽度高度
			windowHeight: 0,
			// 常规子页面可操作区域高度
			pageContentHeight: 0,
		},
		onLaunch(options) {
			const that = this;
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync();
			// 胶囊按钮位置信息
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
			console.log(menuButtonInfo);
			// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
			that.globalData.menuTop = menuButtonInfo.top - systemInfo.statusBarHeight;
			that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
			that.globalData.menuWidth = menuButtonInfo.width;
			that.globalData.navBarHeight =
				(menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
			that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
			that.globalData.menuHeight = menuButtonInfo.height;
			that.globalData.statusBarHeight = systemInfo.statusBarHeight;
			that.globalData.safeAreaHeight = systemInfo.safeAreaInsets.bottom;
			that.globalData.windowWidth = systemInfo.windowWidth;
			that.globalData.windowHeight = systemInfo.windowHeight;
			that.globalData.pageContentHeight =
				systemInfo.windowHeight -
				(that.globalData.navBarHeight + that.globalData.menuTop + that.globalData.menuBotton);

			const scene = options.query.scene ? decodeURIComponent(options.query.scene) : "";
			const inviteCode = scene ? scene.split("=")[1] : "";
			console.log(inviteCode, "inviteCode");
			if (inviteCode) {
				wx.setStorageSync('inviteCode', inviteCode)
			}
			this.slientLogin(inviteCode);
		},
		methods: {
			slientLogin(inviteCode) {
				uni.login({
					success(res) {
						uni.$u.http
							.post("/user/wxLogin", {
								code: res.code,
								inviteCode,
							})
							.then((response) => {
								if (response.code == 200) {
									uni.setStorageSync("token", response.data.token);
								}
							});
					},
					fail: (err) => {
						console.log(err, "wx.login登录失败");
					},
				});
			},
		},
	};
</script>

<style lang="scss">
	// ===
	// === 注意：此处导入的css，会作用于全部.vue文件，请适量导入
	// ===
	body {
		font-family: PingFang-SC-Regular, PingFang-SC;
	}

	page {
		background-color: $app-theme-bg-gray-deep-color;
	}

	@import "uview-ui/index.scss";
	@import "./static/css/common.scss";

	/* 解决小程序和app滚动条的问题 */
	/* #ifdef MP-WEIXIN || APP-PLUS */
	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}

	/* #endif */

	/* 解决H5 的问题 */
	/* #ifdef H5 */
	uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}

	/* #endif */

	.shu-elip-1 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.shu-elip-2 {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	// 导出 scss 变量用于在 script 下使用
	.price_color {
		color: $app-theme-text-money-color;
	}

	.color_blue {
		color: $app-theme-blue;
	}

	.btnGroup {
		display: flex;
		align-items: center;

		.btn {
			margin: 0 10rpx;
		}
	}

	.mallbtn {
		min-width: 200rpx;
		line-height: 66rpx;
		padding: 0 20rpx;
		border-radius: 36rpx;
		color: #ffffff;
		margin-right: 20rpx;
		text-align: center;
		flex: 1;
		padding: 0 30rpx;
	}

	.soldOutBtn {
		@extend .mallbtn;
		background-color: $app-theme-nobuy-bg-color;
	}

	.joinCartBtn {
		@extend .mallbtn;
		background-color: $app-theme-joincart-bg-color;
	}

	.buyBtn {
		@extend .mallbtn;
		background-color: $app-theme-buybtn-bg-color;
	}
</style>