更新

uniapp/pages/login/login.vue

@@ -45,20 +45,40 @@
 				</view>
 			</block>
 
-			<!-- ============ 登录（小程序端微信认证优先，其次账号密码；H5/APK 仅账号密码） ============ -->
+			<!-- ============ 登录（小程序端微信/账号密码 Tab 切换；H5/APK 仅账号密码） ============ -->
 			<block v-else>
 				<view class="panel-head">
 					<text class="panel-title">欢迎登录</text>
-					<text class="panel-sub">{{ showMiniLogin ? '使用微信一键登录，或使用账号密码继续' : '请输入您的账号与密码以继续' }}</text>
+					<text class="panel-sub">{{ panelSub }}</text>
 				</view>
 
 				<view v-if="errorMsg" class="error-box">
 					<text class="error-text">{{ errorMsg }}</text>
 				</view>
 
-				<!-- 微信小程序：微信认证登录为主入口 -->
 				<!-- #ifdef MP-WEIXIN -->
-				<block v-if="showMiniLogin">
+				<!-- 微信端且服务端已开通：微信登录 / 账号密码登录 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'">
 					<button
 						class="btn-wechat"
 						open-type="getPhoneNumber"
@@ -71,14 +91,14 @@
 					<view class="tip-row">
 						<text class="tip-text">首次使用请先用账号密码登录一次，自动完成微信绑定后即可一键登录</text>
 					</view>
-					<view class="divider">
-						<view class="divider-line" />
-						<text class="divider-text">使用账号密码登录</text>
-						<view class="divider-line" />
+					<view class="back-row" @tap="switchTab('account')">
+						<text class="link">使用账号密码登录</text>
 					</view>
 				</block>
 				<!-- #endif -->
 
+				<!-- 账号密码面板（未开通微信登录的端始终展示） -->
+				<block v-if="!(showMiniLogin && activeTab === 'wechat')">
 				<view class="field">
 					<text class="field-label">账号</text>
 					<view class="input-wrap">
@@ -128,15 +148,18 @@
 				>
 					<text>{{ submitting ? '登录中...' : '登 录' }}</text>
 				</view>
-				<view v-if="!agreed && showAgreementTip" class="agree-tip">
-					<FaIcon name="circle-info" color="#f79009" :size="12" />
-					<text class="agree-tip-text">请先阅读并勾选同意《用户协议》和《隐私政策》</text>
-				</view>
 
 				<view class="back-row">
 					<text class="tip-text">还没有账号？</text>
 					<text class="link" @tap="goRegister">立即注册</text>
 				</view>
+				</block>
+
+				<!-- 未勾选协议提示：两个 Tab 面板共用 -->
+				<view v-if="!agreed && showAgreementTip" class="agree-tip">
+					<FaIcon name="circle-info" color="#f79009" :size="12" />
+					<text class="agree-tip-text">请先阅读并勾选同意《用户协议》和《隐私政策》</text>
+				</view>
 			</block>
 		</view>
 
@@ -158,7 +181,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import {
 	loginUAC,
 	switchTenant,
@@ -186,6 +209,8 @@ import { showGeetest4 } from '@/utils/geetest.js'
 import FaIcon from '@/components/FaIcon.vue'
 
 const step = ref('password')
+/** 小程序端登录方式 Tab：wechat / account（其他端固定账号密码） */
+const activeTab = ref('wechat')
 const account = ref('')
 const password = ref('')
 const showPassword = ref(false)
@@ -201,6 +226,22 @@ const verifyCfg = ref({ needGeetest: false, captchaId: '' })
 /** 仅微信小程序端且服务端已开通时展示「一键登录」入口 */
 const showMiniLogin = ref(false)
 
+/** 面板副标题：随 Tab 切换提示文案 */
+const panelSub = computed(() => {
+	if (platform.value === 'mp-weixin' && showMiniLogin.value && activeTab.value === 'wechat') {
+		return '使用微信一键登录，或切换到账号密码登录'
+	}
+	return '请输入您的账号与密码以继续'
+})
+
+/** 切换登录方式 Tab：清掉上一次残留的错误提示 */
+function switchTab(tab) {
+	if (submitting.value) return
+	if (activeTab.value === tab) return
+	activeTab.value = tab
+	errorMsg.value = ''
+}
+
 /** 运行端检测：h5 / apk(app-plus) / mp-weixin，决定登录方式优先级 */
 const platform = ref('')
 // #ifdef H5
@@ -223,6 +264,8 @@ onMounted(async () => {
 	if (remembered.rememberMe) {
 		rememberMe.value = true
 		account.value = remembered.account
+		// 记住了账号，默认落在账号密码 Tab 更顺手
+		activeTab.value = 'account'
 	}
 
 	loadVerifyConfig()
@@ -479,10 +522,15 @@ function handleMiniError(err) {
 	if (reason === 'identity_not_found') {
 		uni.showModal({
 			title: '尚未绑定云泽账号',
-			content: '当前微信未绑定云泽账号，且手机号能力暂不可用。请先在下方用账号密码登录一次（会自动完成微信绑定），之后即可一键登录。',
-			showCancel: false,
+			content: '当前微信未绑定云泽账号，且手机号能力暂不可用。请先用账号密码登录一次（会自动完成微信绑定），之后即可一键登录。',
+			showCancel: true,
+			cancelText: '知道了',
 			// 微信小程序 showModal 的 confirmText 上限为 4 个汉字，超限会导致 API 失败、弹窗不显示
-			confirmText: '密码登录'
+			confirmText: '去登录',
+			confirmColor: '#2563eb',
+			success: (res) => {
+				if (res.confirm) switchTab('account')
+			}
 		})
 		return
 	}
@@ -791,22 +839,48 @@ function goForget() {
 	}
 }
 
-.divider {
+/* 登录方式 Tab：微信登录 / 账号密码登录 */
+.login-tabs {
 	display: flex;
 	align-items: center;
-	gap: 16rpx;
-	margin: 40rpx 0 24rpx;
+	gap: 48rpx;
+	margin-bottom: 36rpx;
+	border-bottom: 1rpx solid $color-border;
 }
 
-.divider-line {
-	flex: 1;
-	height: 1rpx;
-	background: $color-border;
+.login-tab {
+	position: relative;
+	padding: 0 4rpx 20rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }
 
-.divider-text {
-	font-size: 24rpx;
-	color: #a3acbf;
+.login-tab-text {
+	font-size: 28rpx;
+	color: $color-text-secondary;
+}
+
+.login-tab.on .login-tab-text {
+	font-size: 30rpx;
+	font-weight: 600;
+	color: #2563eb;
+}
+
+.login-tab-bar {
+	position: absolute;
+	bottom: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 0;
+	height: 6rpx;
+	border-radius: 6rpx;
+	background: #2563eb;
+	transition: width 0.2s ease;
+}
+
+.login-tab.on .login-tab-bar {
+	width: 56rpx;
 }
 
 .tip-row {