优化小程序登录工作空间与法律协议
This commit is contained in:
hero920103 committed
1 parent
2e2b837a20
commit
1eace4c082
6 files changed
+1084
-673
No files matched your search
+133
-93
@@ -6,7 +6,7 @@
|
||||
<FaIcon name="shield-halved" color="#ffffff" :size="20" />
|
||||
</view>
|
||||
<text class="brand-name">云泽统一认证</text>
|
||||
<text class="brand-desc">一次登录，全平台通行</text>
|
||||
<text class="brand-desc">欢迎回来，开启云泽服务</text>
|
||||
</view>
|
||||
|
||||
<view class="card">
|
||||
@@ -48,8 +48,8 @@
|
||||
<!-- ============ 登录（小程序端微信/账号密码 Tab 切换；H5/APK 仅账号密码） ============ -->
|
||||
<block v-else>
|
||||
<view class="panel-head">
|
||||
<text class="panel-title">欢迎登录</text>
|
||||
<text class="panel-sub">{{ panelSub }}</text>
|
||||
<text class="panel-title">{{ showMiniLogin && activeTab === 'account' ? '账号登录' : '欢迎登录' }}</text>
|
||||
<text v-if="!(showMiniLogin && activeTab === 'account')" class="panel-sub">{{ panelSub }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="errorMsg" class="error-box">
|
||||
@@ -57,25 +57,7 @@
|
||||
</view>
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- 微信端且服务端已开通：微信登录 / 账号密码登录 Tab 切换 -->
|
||||
<view v-if="showMiniLogin" class="login-tabs">
|
||||
<view
|
||||
class="login-tab"
|
||||
:class="{ on: activeTab === 'wechat' }"
|
||||
@tap="switchTab('wechat')"
|
||||
>
|
||||
<text class="login-tab-text">微信登录</text>
|
||||
<view class="login-tab-bar" />
|
||||
</view>
|
||||
<view
|
||||
class="login-tab"
|
||||
:class="{ on: activeTab === 'account' }"
|
||||
@tap="switchTab('account')"
|
||||
>
|
||||
<text class="login-tab-text">账号密码登录</text>
|
||||
<view class="login-tab-bar" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 微信端默认突出一键登录，账号密码作为次要备用入口 -->
|
||||
|
||||
<!-- 微信登录面板 -->
|
||||
<block v-if="showMiniLogin && activeTab === 'wechat'">
|
||||
@@ -86,19 +68,22 @@
|
||||
@getphonenumber="onGetPhoneNumber"
|
||||
>
|
||||
<FaIcon name="weixin" type="brands" color="#ffffff" :size="18" />
|
||||
<text>微信手机号一键登录</text>
|
||||
<text>{{ submitting ? '登录中...' : '微信一键登录' }}</text>
|
||||
</button>
|
||||
<view class="tip-row">
|
||||
<text class="tip-text">首次使用请先用账号密码登录一次，自动完成微信绑定后即可一键登录</text>
|
||||
<text class="tip-text">微信安全授权，快捷登录云泽统一认证</text>
|
||||
</view>
|
||||
<view class="back-row" @tap="switchTab('account')">
|
||||
<text class="link">使用账号密码登录</text>
|
||||
<view class="account-entry" @tap="switchTab('account')">
|
||||
<text class="account-entry-text">账号登录</text>
|
||||
</view>
|
||||
</block>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- 账号密码面板（未开通微信登录的端始终展示） -->
|
||||
<block v-if="!(showMiniLogin && activeTab === 'wechat')">
|
||||
<view v-if="showMiniLogin" class="account-mode-label" @tap="switchTab('wechat')">
|
||||
<text class="account-mode-back">‹ 微信一键登录</text>
|
||||
</view>
|
||||
<view class="field">
|
||||
<text class="field-label">账号</text>
|
||||
<view class="input-wrap">
|
||||
@@ -167,16 +152,12 @@
|
||||
<view class="agree-dot" :class="{ on: agreed }" />
|
||||
<text class="agree-text">
|
||||
登录即表示同意
|
||||
<text class="agree-link" @tap.stop="showAgreement">《用户协议》</text>
|
||||
<text class="agree-link" @tap.stop="openLegal('user-agreement', '用户协议')">《用户协议》</text>
|
||||
和
|
||||
<text class="agree-link" @tap.stop="showAgreement">《隐私政策》</text>
|
||||
<text class="agree-link" @tap.stop="openLegal('privacy-policy', '隐私政策')">《隐私政策》</text>
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="foot-tip">
|
||||
<FaIcon name="lock" color="#a3acbf" :size="11" />
|
||||
<text class="foot-tip-text">统一身份认证 · 一次登录，全平台通行</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -229,7 +210,10 @@ const showMiniLogin = ref(false)
|
||||
/** 面板副标题：随 Tab 切换提示文案 */
|
||||
const panelSub = computed(() => {
|
||||
if (platform.value === 'mp-weixin' && showMiniLogin.value && activeTab.value === 'wechat') {
|
||||
return '使用微信一键登录，或切换到账号密码登录'
|
||||
return '微信授权，安全快捷地登录'
|
||||
}
|
||||
if (platform.value === 'mp-weixin' && showMiniLogin.value && activeTab.value === 'account') {
|
||||
return '使用已注册的账号继续'
|
||||
}
|
||||
return '请输入您的账号与密码以继续'
|
||||
})
|
||||
@@ -490,11 +474,8 @@ async function onGetPhoneNumber(e) {
|
||||
uni.showToast({ title: '你已取消手机号授权', icon: 'none' })
|
||||
return
|
||||
}
|
||||
// 认证中 / 未开通手机号能力：拿不到动态 code 时降级为「按已绑定 openid 登录」
|
||||
// 手机号授权码可能不可用；仍继续尝试按已绑定的 openid 登录
|
||||
const phoneCode = detail.code && errMsg.indexOf('fail') === -1 ? detail.code : ''
|
||||
if (!phoneCode) {
|
||||
uni.showToast({ title: '手机号能力暂不可用，按已绑定账号登录', icon: 'none' })
|
||||
}
|
||||
if (!agreed.value) {
|
||||
const ok = await confirmAgreement()
|
||||
if (!ok) {
|
||||
@@ -521,12 +502,11 @@ function handleMiniError(err) {
|
||||
const reason = err && err.response && err.response.reason
|
||||
if (reason === 'identity_not_found') {
|
||||
uni.showModal({
|
||||
title: '尚未绑定云泽账号',
|
||||
content: '当前微信未绑定云泽账号，且手机号能力暂不可用。请先用账号密码登录一次（会自动完成微信绑定），之后即可一键登录。',
|
||||
title: '暂无使用权限',
|
||||
content: '您没有该程序使用权，请联系企业管理员。也可以使用已有账号登录。',
|
||||
showCancel: true,
|
||||
cancelText: '知道了',
|
||||
// 微信小程序 showModal 的 confirmText 上限为 4 个汉字，超限会导致 API 失败、弹窗不显示
|
||||
confirmText: '去登录',
|
||||
confirmText: '账号登录',
|
||||
confirmColor: '#2563eb',
|
||||
success: (res) => {
|
||||
if (res.confirm) switchTab('account')
|
||||
@@ -571,9 +551,8 @@ function toggleAgree() {
|
||||
if (agreed.value) showAgreementTip.value = false
|
||||
}
|
||||
|
||||
/** 协议占位：正式接入条款页后改为跳转条款页 */
|
||||
function showAgreement() {
|
||||
uni.showToast({ title: '条款内容待接入', icon: 'none' })
|
||||
function openLegal(path, title) {
|
||||
uni.navigateTo({ url: `/pages/legal/document?path=${encodeURIComponent(path)}&title=${encodeURIComponent(title)}` })
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -627,52 +606,88 @@ function goForget() {
|
||||
@import '@/src/styles/page-common.scss';
|
||||
|
||||
.login-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(160deg, #1e3a8a 0%, #2563eb 100%);
|
||||
padding: 0 32rpx calc(env(safe-area-inset-bottom, 0px) + 40rpx);
|
||||
background: linear-gradient(145deg, #eaf6ff 0%, #f7fbff 48%, #dceeff 100%);
|
||||
padding: calc(env(safe-area-inset-top, 0px) + 24rpx) 32rpx calc(env(safe-area-inset-bottom, 0px) + 40rpx);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-page::before,
|
||||
.login-page::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.login-page::before {
|
||||
width: 460rpx;
|
||||
height: 460rpx;
|
||||
top: -150rpx;
|
||||
right: -130rpx;
|
||||
background: rgba(111, 192, 255, 0.28);
|
||||
}
|
||||
|
||||
.login-page::after {
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
bottom: 100rpx;
|
||||
left: -180rpx;
|
||||
background: rgba(151, 218, 255, 0.2);
|
||||
}
|
||||
|
||||
/* ---------- 品牌区 ---------- */
|
||||
.brand {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: calc(env(safe-area-inset-top, 0px) + 96rpx);
|
||||
padding-bottom: 56rpx;
|
||||
padding-top: calc(env(safe-area-inset-top, 0px) + 56rpx);
|
||||
padding-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
width: 92rpx;
|
||||
height: 92rpx;
|
||||
border-radius: 30rpx;
|
||||
background: linear-gradient(145deg, #79c8ff, #398fe7);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.88);
|
||||
box-shadow: 0 16rpx 36rpx rgba(57, 143, 231, 0.28), inset 0 1rpx 0 rgba(255, 255, 255, 0.48);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
margin-top: 20rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1rpx;
|
||||
color: #ffffff;
|
||||
margin-top: 22rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2rpx;
|
||||
color: #173b67;
|
||||
}
|
||||
|
||||
.brand-desc {
|
||||
margin-top: 8rpx;
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
letter-spacing: 1rpx;
|
||||
color: #7190af;
|
||||
}
|
||||
|
||||
/* ---------- 表单卡片 ---------- */
|
||||
.card {
|
||||
background: $color-card;
|
||||
border-radius: 24rpx;
|
||||
padding: 44rpx 36rpx 36rpx;
|
||||
box-shadow: 0 18rpx 50rpx rgba(37, 96, 169, 0.14);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.92);
|
||||
border-radius: 34rpx;
|
||||
padding: 48rpx 36rpx 40rpx;
|
||||
box-shadow: 0 24rpx 70rpx rgba(74, 132, 184, 0.16), inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
@@ -681,9 +696,10 @@ function goForget() {
|
||||
|
||||
.panel-title {
|
||||
display: block;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text;
|
||||
font-size: 42rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1rpx;
|
||||
color: #183b63;
|
||||
}
|
||||
|
||||
.panel-sub {
|
||||
@@ -723,10 +739,11 @@ function goForget() {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fbfcff;
|
||||
border: 1rpx solid $color-border;
|
||||
border-radius: $radius-md;
|
||||
background: rgba(248, 252, 255, 0.82);
|
||||
border: 1rpx solid #d8e9f7;
|
||||
border-radius: 18rpx;
|
||||
padding: 0 20rpx;
|
||||
box-shadow: inset 0 2rpx 8rpx rgba(104, 158, 202, 0.05);
|
||||
}
|
||||
|
||||
.field-input {
|
||||
@@ -817,11 +834,12 @@ function goForget() {
|
||||
}
|
||||
|
||||
.btn-wechat {
|
||||
margin-top: 0;
|
||||
height: 88rpx;
|
||||
border-radius: $radius-md;
|
||||
background: #07c160;
|
||||
margin-top: 8rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 20rpx;
|
||||
background: linear-gradient(110deg, #18b96b 0%, #09a95e 100%);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 14rpx 28rpx rgba(7, 193, 96, 0.2);
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -839,6 +857,37 @@ function goForget() {
|
||||
}
|
||||
}
|
||||
|
||||
/* 小程序备用登录入口，弱化账号密码路径 */
|
||||
.account-entry {
|
||||
margin: 36rpx auto 0;
|
||||
padding: 8rpx 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.account-entry-text {
|
||||
font-size: 24rpx;
|
||||
color: #7995ad;
|
||||
}
|
||||
|
||||
.account-entry-text {
|
||||
padding-bottom: 4rpx;
|
||||
border-bottom: 1rpx solid #c9dceb;
|
||||
}
|
||||
|
||||
.account-mode-label {
|
||||
margin: -14rpx 0 22rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.account-mode-back {
|
||||
font-size: 24rpx;
|
||||
color: #5688b7;
|
||||
padding: 8rpx 0;
|
||||
}
|
||||
|
||||
/* 登录方式 Tab：微信登录 / 账号密码登录 */
|
||||
.login-tabs {
|
||||
display: flex;
|
||||
@@ -967,12 +1016,14 @@ function goForget() {
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
/* ---------- 协议与页脚 ---------- */
|
||||
/* ---------- 协议 ---------- */
|
||||
.agreement {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12rpx;
|
||||
margin-top: 32rpx;
|
||||
margin-top: 30rpx;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
|
||||
@@ -982,8 +1033,8 @@ function goForget() {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.75);
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
border: 2rpx solid #bad3e8;
|
||||
background: rgba(255, 255, 255, 0.76);
|
||||
flex-shrink: 0;
|
||||
margin-top: 2rpx;
|
||||
|
||||
@@ -1010,12 +1061,13 @@ function goForget() {
|
||||
.agree-text {
|
||||
flex: 1;
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
color: #6e8da8;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.agree-link {
|
||||
color: #ffffff;
|
||||
color: #347fbd;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 未勾选协议时的行内提示 */
|
||||
@@ -1031,20 +1083,8 @@ function goForget() {
|
||||
|
||||
.agree-tip-text {
|
||||
font-size: 22rpx;
|
||||
color: #ffd591;
|
||||
color: #ad6400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.foot-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.foot-tip-text {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.62);
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user