book-hi/App.vue

<script>
import { eventBus } from '@/utils/event-bus'
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,
	},
	onLaunch(options) {
		this.globalData.isColdLaunch = true;
		console.log('冷启动onLaunch:',this.globalData.isColdLaunch)
		let params = {};
		if (options.query) {
			//微信小程序的场景值解析
			if (options.query.scene) {
				// 对 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");
					// 如果链接参数中有一个名为 upsellCode 的参数
					if (params.upsellCode) {
						uni.setStorageSync('upsellCode', params.upsellCode)
					}
					// 兼容商品详情二维码跳转
					if (params.isbn) {
						// 将 isbn 存入全局或缓存，以便 detail 页面如果在 onLoad 没拿到时可以使用
						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);
				// 如果链接参数中有一个名为 upsellCode 的参数
				if (options.query.upsellCode) {
					uni.setStorageSync('upsellCode', options.query.upsellCode)
				}
			}
		} else {
			this.slientLogin()
		}
	},
    onShow() {
        this.$updateCartBadge();
    },
	onUnload() {
		uni.removeStorageSync('loginType')
	},
	methods: {
		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>