new-88live/pages/passport/lobby.vue

<template>
	<view class="pp-lobby" :style="appSystemFontScaleStyle">
		<!-- 返回按钮 -->
		<view class="pp-lobby__back" @tap="goBack">
			<text class="wlIcon wlIcon-fanhui1"></text>
		</view>
		<!-- 背景图 -->
		<image class="pp-lobby__bg" :src="bgSrc" mode="aspectFill" />

		<!-- 内容层 -->
		<view class="pp-lobby__content">
			<!-- 顶部 Logo -->
			<view class="pp-lobby__header">
				<image class="pp-lobby__logo" :src="logoSrc" mode="aspectFit" />
				<text class="pp-lobby__app-name">{{ copy.appName }}</text>
			</view>

			<!-- 底部操作区 -->
			<view class="pp-lobby__actions">
				<!-- iOS 苹果登录主按钮 -->
				<!-- #ifdef APP-PLUS -->
				<view v-if="isIOS" class="pp-lobby__apple-btn" @tap="onAppleLogin">
					<image class="pp-lobby__icon" src="/static/imgs/Apple_logo.png" mode="aspectFit" />
					<text class="pp-lobby_text">{{ copy.appleLogin }}</text>
				</view>
				<!-- Android Google 登录主按钮 -->
				<view v-else class="pp-lobby__google-btn" @tap="onGoogleLogin">
					<image class="pp-lobby_google_icon" src="/static/imgs/Google_logo.png" mode="aspectFit" />
					<text class="pp-lobby_text">{{ copy.googleLogin }}</text>
				</view>
				<!-- #endif -->

				<!-- 其他登录方式 -->
				<view class="pp-lobby__others">
					<text class="pp-lobby__other-link" @tap="onLineLogin">{{ copy.lineLogin }}</text>
					<text class="pp-lobby__divider">|</text>
					<text class="pp-lobby__other-link" @tap="goSignin">{{ copy.accountLogin }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { appleLogin, googleLogin, lineLogin } from '@/features/passport/social-login'
import { fetchAppBrand } from '@/features/shell/app-config-gateway'

const FALLBACK_LOGO = '/static/logo.png'
const DEFAULT_BG = '/static/imgs/login-bg.png'


export default {
	components: {},
	data() {
		return {
			isIOS: false, // 是否为 iOS 
			logoPath: '',
			appBrandName: '',
			bgPath: ''
		}
	},
	computed: {
		displayAppName() {
			const fromApi = (this.appBrandName || '').trim()
			if (fromApi) return fromApi
			return '88Live'
		},
		logoSrc() {
			const raw = (this.logoPath || '').trim()
			if (!raw) return FALLBACK_LOGO
			if (this.$appKit && typeof this.$appKit.oss === 'function') {
				return this.$appKit.oss(raw, 200, 200)
			}
			return raw
		},
		bgSrc() {
			const raw = (this.bgPath || '').trim()
			if (!raw) return DEFAULT_BG
			if (this.$appKit && typeof this.$appKit.oss === 'function') {
				return this.$appKit.oss(raw, 750, 1334)
			}
			return raw
		},
		copy() {
			const t = this.$t.bind(this)
			return {
				appName: this.displayAppName,
				appleLogin: t('passport.apple-login'),
				googleLogin: t('passport.google-login'),
				lineLogin: t('passport.line-login'),
				accountLogin: t('passport.account-login')
			}
		}
	},
	onLoad() {
		// #ifdef APP-PLUS
		this.isIOS = uni.getSystemInfoSync().platform === 'ios'
		// #endif
		this.loadBrand()
	},
	onBackPress() {
		uni.switchTab({
			url: '/pages/index/index',
			fail: () => uni.reLaunch({ url: '/pages/index/index' })
		})
		return true
	},
	methods: {
		async loadBrand() {
			try {
				const brand = await fetchAppBrand()
				this.logoPath = brand.logo || ''
				this.appBrandName = brand.name || ''
				this.bgPath = brand.login_bg || ''
			} catch (_) {
				this.logoPath = ''
				this.appBrandName = ''
				this.bgPath = ''
			}
		},
		async onAppleLogin() {
			try {
				// #ifdef APP-PLUS
				const result = await appleLogin()
				if (result) {
					this.$store.dispatch('user/login', result)
					this.$store.dispatch('cart/sync')
					const nickname = result.userinfo.nickname
					const toastTitle = nickname || this.$t('passport.tip-signin-ok')
					uni.showToast({ title: toastTitle, icon: 'success' ,duration: 2000})
					this.bounce()
				}
				// #endif
				// #ifndef APP-PLUS
				uni.showToast({ title: this.$t('passport.apple-not-supported'), icon: 'none' })
				// #endif
			} catch (err) {
				uni.showToast({ title: (err && err.message) || this.$t('passport.social-login-failed'), icon: 'none' })
			} finally {
				uni.hideLoading()
			}
		},
		// async onGoogleLogin() {
		// 	try {
		// 		// #ifdef APP-PLUS
		// 		const result = await googleLogin()
		// 		if (result) {
		// 			this.$store.dispatch('user/login', result)
		// 			this.$store.dispatch('cart/sync')
		// 			uni.showToast({ title: this.$t('passport.tip-signin-ok'), icon: 'success' })
		// 			this.bounce()
		// 		}
		// 		// #endif
		// 		// #ifndef APP-PLUS
		// 		uni.showToast({ title: this.$t('passport.google-not-supported'), icon: 'none' })
		// 		// #endif
		// 	} catch (err) {
		// 		uni.showToast({ title: (err && err.message) || this.$t('passport.social-login-failed'), icon: 'none' })
		// 	} finally {
		// 	}
		// },
		goBack() {
			uni.navigateBack({
				fail: () => {
					uni.switchTab({ url: '/pages/index/index' })
				}
			})
		},
		async onLineLogin() {
			try {
				// #ifdef APP-PLUS
				const result = await lineLogin()
				// WebView 打开后立即关闭 loading
				if (result) {
					this.$store.dispatch('user/login', result)
					this.$store.dispatch('cart/sync')
					uni.showToast({ title: this.$t('passport.tip-signin-ok'), icon: 'success' })
					this.bounce()
				}
				// #endif
				// #ifndef APP-PLUS
				uni.showToast({ title: this.$t('passport.line-not-supported'), icon: 'none' })
				// #endif
			} catch (err) {
				console.log('[LINE Login] ❌ 登录失败错误信息:', err)
				console.log('[LINE Login] ❌ 登录失败标题:', err.message)

				uni.showToast({ title: (err && err.message) || this.$t('passport.social-login-failed'), icon: 'none' })
			}
		},
		goSignin() {
			uni.navigateTo({ url: '/pages/passport/signin' })
		},
		bounce() {
			const fallback = '/pages/index/index'
			uni.switchTab({ url: fallback })
		}
	}
}
</script>

<style lang="scss">
.pp-lobby {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.pp-lobby__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.pp-lobby__content {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 120rpx 60rpx 160rpx;
	box-sizing: border-box;
}

/* 返回按钮 */
.pp-lobby__back {
	position: absolute;
	top: 80rpx;
	left: 40rpx;
	z-index: 10;
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(10rpx);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 顶部 Logo 区域 */
.pp-lobby__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 80rpx;
}

.pp-lobby__logo {
	width: 160rpx;
	height: 160rpx;
	border-radius: 40rpx;
}

.pp-lobby__app-name {
	font-size: calc(48rpx * var(--app-font-scale, 1));
	font-weight: 800;
	color: #060606;
	margin-top: 24rpx;
	text-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
	letter-spacing: 2rpx;
}

/* 底部操作区 */
.pp-lobby__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40rpx;
}

/* 苹果登录主按钮 */
.pp-lobby__apple-btn {
	width: 100%;
	height: 88rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.pp-lobby__icon {
	width: 40rpx;
	height: 40rpx;
}

.pp-lobby_google_icon {
	margin-right: 20rpx;
	width: 34rpx;
	height: 34rpx;
}

.pp-lobby_text {
	font-size: calc(32rpx * var(--app-font-scale, 1));
	font-weight: 500;
	color: #000000;
	letter-spacing: 0.5rpx;
}



// Google 登录按钮
.pp-lobby__google-btn {
	width: 100%;
	height: 88rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 其他登录方式 */
.pp-lobby__others {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32rpx;
}

.pp-lobby__other-link {
	font-size: calc(28rpx * var(--app-font-scale, 1));
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
	padding: 12rpx 24rpx;
}

.pp-lobby__divider {
	font-size: calc(30rpx * var(--app-font-scale, 1));
	color: rgba(255, 255, 255, 0.5);
}
</style>