book-hi/App.vue

<script>
import { eventBus } from '@/utils/event-bus'
import { isPolicyConsented, requestShowPrivacyPopup } from '@/utils/policy-consent-manager.js'

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,

		// 是否是冷启动
		isColdLaunch: false,
		needPolicyConsent: false,
		needPrivacyPopup: false,
		pendingLaunchOptions: null,
	},
	onLaunch(options) {
		this.globalData.isColdLaunch = true;
		console.log('冷启动onLaunch:', this.globalData.isColdLaunch)
		this.initPrivacyAuthorization()
		this.handleLaunchWithPolicy(options)
	},
	onShow(options) {
		this.$updateCartBadge();
		this.handleAppShowOptions(options);
	},
	onUnload() {
		uni.removeStorageSync('loginType')
	},
	methods: {
		initPrivacyAuthorization() {
			// #ifdef MP-WEIXIN
			if (typeof wx !== 'undefined' && wx.onNeedPrivacyAuthorization) {
				wx.onNeedPrivacyAuthorization((resolve) => {
					requestShowPrivacyPopup(resolve)
				})
			}
			// #endif
		},
		handleLaunchWithPolicy(options = {}) {
			this.globalData.pendingLaunchOptions = options
			if (!isPolicyConsented()) {
				this.globalData.needPolicyConsent = true
				return
			}
			this.runPendingLaunchLogin()
		},
		runPendingLaunchLogin() {
			const options = this.globalData.pendingLaunchOptions || {}
			let params = {};
			if (options.query) {
				if (options.query.scene) {
					const decodeScene = decodeURIComponent(options.query.scene);
					const paramPairs = decodeScene.split('&');
					paramPairs.forEach((pair) => {
						const [key, value] = pair.split('=');
						params[key] = value;
					});

					let keys = Object.keys(params)
					if (keys.length > 0) {
						console.log(params, "params");
						if (params.upsellCode) {
							uni.setStorageSync('upsellCode', params.upsellCode)
						}
						if (params.reduceCode) {
							uni.setStorageSync('reduceCode', params.reduceCode)
						}
						if (params.isbn) {
							uni.setStorageSync('scene_isbn', params.isbn);
						}
						if (params.bianhao) {
							uni.setStorageSync('scene_bianhao', params.bianhao);
						}
						this.slientLogin(params);
					} else {
						this.slientLogin();
					}
				} else {
					this.slientLogin(options.query);
					if (options.query.upsellCode) {
						uni.setStorageSync('upsellCode', options.query.upsellCode)
					}
					if (options.query.reduceCode) {
						uni.setStorageSync('reduceCode', options.query.reduceCode)
					}
				}
			} else {
				this.slientLogin()
			}
		},
		parseEntryOptions(options = {}) {
			let params = {};
			if (!options || !options.query) return params;

			if (options.query.scene) {
				const decodeScene = decodeURIComponent(options.query.scene);
				const paramPairs = decodeScene.split('&');
				paramPairs.forEach((pair) => {
					const [key, value] = pair.split('=');
					params[key] = value;
				});
				return params;
			}

			return options.query || {};
		},
		cacheEntryParams(params = {}) {
			if (params.upsellCode) {
				uni.setStorageSync('upsellCode', params.upsellCode)
			}
			if (params.reduceCode) {
				uni.setStorageSync('reduceCode', params.reduceCode)
			}
			if (params.isbn) {
				uni.setStorageSync('scene_isbn', params.isbn);
			}
			if (params.bianhao) {
				uni.setStorageSync('scene_bianhao', params.bianhao);
			}
		},
		handleAppShowOptions(options = {}) {
			const params = this.parseEntryOptions(options);
			if (!Object.keys(params).length) return;

			this.cacheEntryParams(params);
			if (this.globalData.isColdLaunch) return;

			if (params.upsellCode || params.reduceCode) {
				eventBus.emit('appShowActivity', { params });
			}
		},
		slientLogin(params = {}) {
			let that = this;
			uni.login({
				success(res) {
					//plat	integer($int32)平台 1-微信 2-支付宝
					let platform = uni.getSystemInfoSync().uniPlatform
					let data = { code: res.code, plat: platform === 'mp-alipay' ? 2 : 1 }
					data = { ...data, ...params }
					uni.setStorageSync('loginType', data)
					console.log('登录参数:', data)

					uni.$u.http
						.post("/user/miniLogin", data)
						.then((response) => {
							if (response.code == 200) {
								uni.setStorageSync("loginSuccess", response.data);
								uni.setStorageSync("token", response.data.token);
								console.log("登录成功返回参数", response.data, data);

								eventBus.emit('loginSuccess', { response: response.data, params: data })
								that.globalData.isColdLaunch = false;
								that.$updateCartBadge();
							}
						});
				},
				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>