|
|
@@ -1,59 +1,69 @@
|
|
|
<template>
|
|
|
- <passport-screen :title="copy.title" :subtitle="copy.subtitle" :kicker="copy.kicker" :crumb="copy.crumb" :can-back="canBack">
|
|
|
- <view class="pp-lobby__brand">
|
|
|
- <view class="pp-lobby__logo">
|
|
|
- <image class="pp-lobby__logo-img" :src="logoSrc" mode="aspectFit" />
|
|
|
- </view>
|
|
|
- <text class="pp-lobby__brand-name">{{ copy.appName }}</text>
|
|
|
- <text class="pp-lobby__brand-tag">{{ copy.appTag }}</text>
|
|
|
+ <view class="pp-lobby">
|
|
|
+ <!-- 返回按钮 -->
|
|
|
+ <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__entries">
|
|
|
- <view
|
|
|
- v-for="entry in entryList"
|
|
|
- :key="entry.id"
|
|
|
- class="pp-lobby-card"
|
|
|
- :class="`pp-lobby-card--${entry.id}`"
|
|
|
- @tap="onEntry(entry)"
|
|
|
- >
|
|
|
- <view class="pp-lobby-card__icon">{{ entry.icon }}</view>
|
|
|
- <view class="pp-lobby-card__body">
|
|
|
- <text class="pp-lobby-card__title">{{ entry.title }}</text>
|
|
|
- <text class="pp-lobby-card__desc">{{ entry.desc }}</text>
|
|
|
- </view>
|
|
|
- <text class="pp-lobby-card__arrow">›</text>
|
|
|
+ <!-- 内容层 -->
|
|
|
+ <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>
|
|
|
|
|
|
- <template #footer>
|
|
|
- <view class="pp-lobby__bottom">
|
|
|
- <text class="pp-lobby__tip">{{ copy.bottomTip }}</text>
|
|
|
- <text class="pp-lobby__cta" @tap="goEnroll">{{ copy.enrollCta }}</text>
|
|
|
+ <!-- 底部操作区 -->
|
|
|
+ <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>
|
|
|
- </template>
|
|
|
- </passport-screen>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import PassportScreen from '@/components/passport-kit/passport-screen.vue'
|
|
|
+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: { PassportScreen },
|
|
|
+ components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- canBack: false,
|
|
|
+ isIOS: false, // 是否为 iOS
|
|
|
logoPath: '',
|
|
|
- appBrandName: ''
|
|
|
+ appBrandName: '',
|
|
|
+ bgPath: ''
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
displayAppName() {
|
|
|
const fromApi = (this.appBrandName || '').trim()
|
|
|
if (fromApi) return fromApi
|
|
|
- return this.$t('passport.app-name')
|
|
|
+ return '88Live'
|
|
|
},
|
|
|
logoSrc() {
|
|
|
const raw = (this.logoPath || '').trim()
|
|
|
@@ -63,60 +73,37 @@ export default {
|
|
|
}
|
|
|
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)
|
|
|
- const name = this.displayAppName
|
|
|
return {
|
|
|
- kicker: t('passport.kicker-welcome'),
|
|
|
- crumb: t('passport.crumb-signin'),
|
|
|
- title: t('passport.title-lobby', { name }),
|
|
|
- subtitle: t('passport.subtitle-lobby'),
|
|
|
- appName: name,
|
|
|
- appTag: t('passport.app-tag'),
|
|
|
- enrollCta: t('passport.foot-go-reg-cta'),
|
|
|
- bottomTip: t('passport.foot-no-account')
|
|
|
+ appName: this.displayAppName,
|
|
|
+ appleLogin: t('passport.apple-login'),
|
|
|
+ googleLogin: t('passport.google-login'),
|
|
|
+ lineLogin: t('passport.line-login'),
|
|
|
+ accountLogin: t('passport.account-login')
|
|
|
}
|
|
|
- },
|
|
|
- entryList() {
|
|
|
- const t = this.$t.bind(this)
|
|
|
- return [
|
|
|
- {
|
|
|
- id: 'passcode',
|
|
|
- icon: '✦',
|
|
|
- title: t('passport.entry-passcode-title'),
|
|
|
- desc: t('passport.entry-passcode-desc'),
|
|
|
- target: '/pages/passport/signin?mode=passcode'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 'secret',
|
|
|
- icon: '✱',
|
|
|
- title: t('passport.entry-secret-title'),
|
|
|
- desc: t('passport.entry-secret-desc'),
|
|
|
- target: '/pages/passport/signin?mode=secret'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 'enroll',
|
|
|
- icon: '✚',
|
|
|
- title: t('passport.entry-enroll-title'),
|
|
|
- desc: t('passport.entry-enroll-desc'),
|
|
|
- target: '/pages/passport/enroll'
|
|
|
- }
|
|
|
- ]
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
- this.canBack = getCurrentPages().length > 1
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ this.isIOS = uni.getSystemInfoSync().platform === 'ios'
|
|
|
+ // #endif
|
|
|
this.loadBrand()
|
|
|
},
|
|
|
onBackPress() {
|
|
|
- if (!this.canBack) {
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/index/index',
|
|
|
- fail: () => uni.reLaunch({ url: '/pages/index/index' })
|
|
|
- })
|
|
|
- return true
|
|
|
- }
|
|
|
- return false
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/index',
|
|
|
+ fail: () => uni.reLaunch({ url: '/pages/index/index' })
|
|
|
+ })
|
|
|
+ return true
|
|
|
},
|
|
|
methods: {
|
|
|
async loadBrand() {
|
|
|
@@ -124,145 +111,233 @@ export default {
|
|
|
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' })
|
|
|
}
|
|
|
},
|
|
|
- onEntry(entry) {
|
|
|
- uni.navigateTo({ url: entry.target })
|
|
|
+ goSignin() {
|
|
|
+ uni.navigateTo({ url: '/pages/passport/signin' })
|
|
|
},
|
|
|
- goEnroll() {
|
|
|
- uni.navigateTo({ url: '/pages/passport/enroll' })
|
|
|
+ bounce() {
|
|
|
+ const fallback = '/pages/index/index'
|
|
|
+ uni.switchTab({ url: fallback })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-.pp-lobby__brand {
|
|
|
+.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;
|
|
|
- align-items: center;
|
|
|
- padding-bottom: 28rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 120rpx 60rpx 160rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
-.pp-lobby__logo {
|
|
|
- width: 160rpx;
|
|
|
- height: 160rpx;
|
|
|
- border-radius: 48rpx;
|
|
|
- background: linear-gradient(135deg, #3d5afe 0%, #ff4d6a 100%);
|
|
|
+/* 返回按钮 */
|
|
|
+.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;
|
|
|
- box-shadow: 0 20rpx 60rpx rgba(61, 90, 254, 0.45);
|
|
|
}
|
|
|
|
|
|
-.pp-lobby__logo-img {
|
|
|
- width: 104rpx;
|
|
|
- height: 104rpx;
|
|
|
- border-radius: 32rpx;
|
|
|
+/* 顶部 Logo 区域 */
|
|
|
+.pp-lobby__header {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 80rpx;
|
|
|
}
|
|
|
|
|
|
-.pp-lobby__brand-name {
|
|
|
+.pp-lobby__logo {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.pp-lobby__app-name {
|
|
|
font-size: 48rpx;
|
|
|
font-weight: 800;
|
|
|
- color: #fff;
|
|
|
+ color: #060606;
|
|
|
margin-top: 24rpx;
|
|
|
- letter-spacing: 3rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.pp-lobby__brand-tag {
|
|
|
- font-size: 24rpx;
|
|
|
- color: rgba(255, 255, 255, 0.5);
|
|
|
- margin-top: 8rpx;
|
|
|
+ text-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
|
|
|
letter-spacing: 2rpx;
|
|
|
}
|
|
|
|
|
|
-.pp-lobby__entries {
|
|
|
- margin-top: 28rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.pp-lobby-card {
|
|
|
+/* 底部操作区 */
|
|
|
+.pp-lobby__actions {
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
align-items: center;
|
|
|
- padding: 28rpx 28rpx;
|
|
|
- border-radius: 26rpx;
|
|
|
- margin-bottom: 22rpx;
|
|
|
- background: rgba(255, 255, 255, 0.08);
|
|
|
- border: 1rpx solid rgba(255, 255, 255, 0.15);
|
|
|
-}
|
|
|
-
|
|
|
-.pp-lobby-card--passcode {
|
|
|
- background: linear-gradient(120deg, rgba(255, 181, 71, 0.22), rgba(255, 77, 106, 0.18));
|
|
|
- border-color: rgba(255, 181, 71, 0.35);
|
|
|
-}
|
|
|
-
|
|
|
-.pp-lobby-card--secret {
|
|
|
- background: linear-gradient(120deg, rgba(61, 90, 254, 0.32), rgba(125, 60, 252, 0.2));
|
|
|
- border-color: rgba(61, 90, 254, 0.4);
|
|
|
-}
|
|
|
-
|
|
|
-.pp-lobby-card--enroll {
|
|
|
- background: linear-gradient(120deg, rgba(37, 220, 132, 0.2), rgba(255, 181, 71, 0.22));
|
|
|
- border-color: rgba(37, 220, 132, 0.4);
|
|
|
+ gap: 40rpx;
|
|
|
}
|
|
|
|
|
|
-.pp-lobby-card__icon {
|
|
|
- width: 92rpx;
|
|
|
- height: 92rpx;
|
|
|
- border-radius: 28rpx;
|
|
|
- background: rgba(255, 255, 255, 0.18);
|
|
|
- font-size: 40rpx;
|
|
|
- color: #fff;
|
|
|
+/* 苹果登录主按钮 */
|
|
|
+.pp-lobby__apple-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 12rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- margin-right: 24rpx;
|
|
|
+ gap: 16rpx;
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
-.pp-lobby-card__body {
|
|
|
- flex: 1;
|
|
|
+.pp-lobby__icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
}
|
|
|
|
|
|
-.pp-lobby-card__title {
|
|
|
- display: block;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #fff;
|
|
|
- font-weight: 700;
|
|
|
+.pp-lobby_google_icon {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ width: 34rpx;
|
|
|
+ height: 34rpx;
|
|
|
}
|
|
|
|
|
|
-.pp-lobby-card__desc {
|
|
|
- display: block;
|
|
|
- font-size: 22rpx;
|
|
|
- color: rgba(255, 255, 255, 0.7);
|
|
|
- margin-top: 8rpx;
|
|
|
+.pp-lobby_text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #000000;
|
|
|
+ letter-spacing: 0.5rpx;
|
|
|
}
|
|
|
|
|
|
-.pp-lobby-card__arrow {
|
|
|
- color: rgba(255, 255, 255, 0.6);
|
|
|
- font-size: 40rpx;
|
|
|
- font-weight: 200;
|
|
|
+
|
|
|
+
|
|
|
+// 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__bottom {
|
|
|
+/* 其他登录方式 */
|
|
|
+.pp-lobby__others {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
+ gap: 32rpx;
|
|
|
}
|
|
|
|
|
|
-.pp-lobby__tip {
|
|
|
- color: rgba(255, 255, 255, 0.55);
|
|
|
- font-size: 24rpx;
|
|
|
+.pp-lobby__other-link {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
+ text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
|
|
|
+ padding: 12rpx 24rpx;
|
|
|
}
|
|
|
|
|
|
-.pp-lobby__cta {
|
|
|
- color: #ffb547;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 700;
|
|
|
- margin-left: 12rpx;
|
|
|
- padding: 10rpx 16rpx;
|
|
|
- border-radius: 24rpx;
|
|
|
- background: rgba(255, 181, 71, 0.16);
|
|
|
+.pp-lobby__divider {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: rgba(255, 255, 255, 0.5);
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|