123

huimv-employment/app/common/fe.scss

@@ -1269,9 +1269,9 @@ page {
 .fe-login-visual {
 	background: linear-gradient(135deg, $fe-primary 0%, $fe-primary-dark 100%);
 	border-radius: $fe-radius-xl;
-	padding: 64rpx 48rpx;
+	padding: 32rpx 48rpx;
 	color: #fff;
-	margin-bottom: 64rpx;
+	margin-bottom: 32rpx;
 }
 
 .fe-login-visual__title {
@@ -1302,6 +1302,7 @@ page {
 	font-size: 44rpx;
 	font-weight: 700;
 	margin-bottom: 12rpx;
+	margin-right: 12rpx;
 }
 
 .fe-login-card__subtitle {
@@ -1311,24 +1312,28 @@ page {
 }
 
 .fe-login-tabs {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: 24rpx;
+	display: flex;
+	flex-direction: row;
 	margin-bottom: 40rpx;
 }
 
 .fe-login-tab {
+	flex: 1;
 	height: 96rpx;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	gap: 12rpx;
+	margin-right: 24rpx;
 	border-radius: $fe-radius-md;
 	font-size: 30rpx;
 	font-weight: 600;
 	border: 4rpx solid $fe-border;
 	background: $fe-surface;
 	color: $fe-gray-600;
+
+	&:last-child {
+		margin-right: 0;
+	}
 }
 
 .fe-login-tab--active {

huimv-employment/app/pages.json

@@ -3,7 +3,7 @@
 		{
 			"path": "pages/auth/login",
 			"style": {
-				"navigationBarTitleText": ""
+				"navigationBarTitleText": "登录"
 			}
 		},
 		{

huimv-employment/app/pages/auth/login.vue

@@ -24,66 +24,105 @@
 				</view>
 
 				<view class="fe-login-card">
-					<text class="fe-login-card__title">欢迎回来</text>
-					<text class="fe-login-card__subtitle">请选择您的身份登录</text>
-
-					<view class="fe-login-tabs">
-						<view
-							class="fe-login-tab"
-							:class="{ 'fe-login-tab--active': tab === 'enterprise' }"
-							@tap="tab = 'enterprise'"
-						>🏢 企业登录</view>
-						<view
-							class="fe-login-tab"
-							:class="{ 'fe-login-tab--active': tab === 'worker' }"
-							@tap="tab = 'worker'"
-						>👤 临时工登录</view>
+					<view class="login-card-header">
+						<text class="login-card-header__title">{{ loginTab === 'enterprise' ? '企业登录' : '临时工登录' }}</text>
+						<text
+							class="login-card-header__switch"
+							@tap="switchLoginTab(loginTab === 'enterprise' ? 'worker' : 'enterprise')"
+						>{{ loginTab === 'enterprise' ? '临时工登录' : '企业登录' }}</text>
 					</view>
 
-					<view v-if="tab === 'enterprise'">
-						<view class="fe-form-group">
-							<text class="fe-form-label">企业名称</text>
-							<input class="fe-form-input" placeholder="请输入企业名称或统一社会信用代码" />
-						</view>
-						<view class="fe-form-group">
-							<text class="fe-form-label">登录手机号</text>
-							<input class="fe-form-input" type="number" placeholder="请输入手机号" />
+					<!-- 手机号 / 验证码登录 -->
+					<view v-if="loginView === 'phone'">
+						<view>
+							<view class="fe-form-group">
+								<text class="fe-form-label">手机号</text>
+								<input class="fe-form-input" type="number" placeholder="请输入手机号" />
+							</view>
+							<view v-if="authMode === 'sms'" class="fe-form-group">
+								<text class="fe-form-label">验证码</text>
+								<view class="fe-form-row">
+									<input class="fe-form-input" placeholder="请输入验证码" />
+									<view class="fe-btn fe-btn--secondary" style="white-space:nowrap;padding:0 24rpx;height:96rpx;" @tap="toast('验证码已发送')">获取验证码</view>
+								</view>
+							</view>
+							<view v-else class="fe-form-group">
+								<text class="fe-form-label">登录密码</text>
+								<input class="fe-form-input" password placeholder="请输入登录密码" />
+							</view>
 						</view>
-						<view class="fe-form-group">
-							<text class="fe-form-label">验证码</text>
-							<view class="fe-form-row">
-								<input class="fe-form-input" placeholder="请输入验证码" />
-								<view class="fe-btn fe-btn--secondary" style="white-space:nowrap;padding:0 24rpx;height:96rpx;" @tap="toast('验证码已发送')">获取验证码</view>
+
+						<view class="login-agreement">
+							<view class="login-agreement__row">
+								<checkbox :checked="agreed" color="#7C3AED" @tap.stop="toggleAgreed" />
+								<text class="login-agreement__text" @tap="toggleAgreed">
+									登录即同意
+									<text class="login-agreement__link" @tap.stop="showServiceAgreement">《服务协议》</text>
+									和
+									<text class="login-agreement__link" @tap.stop="showPrivacyPolicy">《隐私政策》</text>
+								</text>
 							</view>
 						</view>
-						<view class="fe-btn fe-btn--primary fe-btn--lg fe-btn--full" style="margin-top:24rpx;" @tap="loginEnterprise">
-							登录并绑定企业
+
+						<view class="login-auth-switch">
+							<text
+								class="login-auth-switch__link"
+								@tap="switchAuthMode(authMode === 'sms' ? 'password' : 'sms')"
+							>{{ authMode === 'sms' ? '账号密码登录' : '验证码登录' }}</text>
+						</view>
+
+						<view
+							class="fe-btn fe-btn--primary fe-btn--lg fe-btn--full login-submit-btn"
+							:class="{ 'login-btn--disabled': !agreed }"
+							@tap="submitLogin"
+						>
+							{{ loginTab === 'enterprise' ? '登录' : '登录' }}
 						</view>
-						<view class="fe-login-divider">或</view>
-						<view class="fe-btn fe-btn--wechat fe-btn--lg fe-btn--full" @tap="loginEnterprise">
-							微信快捷登录
+						<!-- <text v-if="loginTab === 'worker'" class="login-note">首次登录将自动创建临时工档案</text> -->
+
+						<view class="fe-login-divider">其他登录</view>
+						<view class="login-other-icon">
+							<image
+								class="login-other-icon__img"
+								src="/static/images/wechat.png"
+								mode="aspectFit"
+								@tap="switchLoginView('wechat')"
+							/>
 						</view>
 					</view>
 
-					<view v-else>
-						<view class="fe-form-group">
-							<text class="fe-form-label">手机号</text>
-							<input class="fe-form-input" type="number" placeholder="请输入手机号" />
-						</view>
-						<view class="fe-form-group">
-							<text class="fe-form-label">验证码</text>
-							<view class="fe-form-row">
-								<input class="fe-form-input" placeholder="请输入验证码" />
-								<view class="fe-btn fe-btn--secondary" style="white-space:nowrap;padding:0 24rpx;height:96rpx;" @tap="toast('验证码已发送')">获取验证码</view>
+					<!-- 微信快捷登录 -->
+					<view v-else class="login-wechat-panel">
+						<view class="login-agreement login-agreement--wechat">
+							<view class="login-agreement__row">
+								<checkbox :checked="agreed" color="#7C3AED" @tap.stop="toggleAgreed" />
+								<text class="login-agreement__text" @tap="toggleAgreed">
+									登录注册即表示同意
+									<text class="login-agreement__link" @tap.stop="showServiceAgreement">用户协议</text>
+									、
+									<text class="login-agreement__link" @tap.stop="showPrivacyPolicy">隐私条款</text>
+								</text>
 							</view>
 						</view>
-						<view class="fe-btn fe-btn--primary fe-btn--lg fe-btn--full" style="margin-top:24rpx;" @tap="loginWorker">
-							登记并扫码入场
+
+						<view
+							class="fe-btn fe-btn--wechat fe-btn--lg fe-btn--full login-wechat-submit"
+							:class="{ 'login-btn--disabled': !agreed }"
+							@tap="submitWechatLogin"
+						>
+							微信一键登录
 						</view>
-						<text class="login-note">首次登录将自动创建临时工档案</text>
-					</view>
 
-					<text class="login-agreement">登录即同意 服务协议 和 隐私政策</text>
+						<view class="fe-login-divider">其他登录</view>
+						<view class="login-other-icon">
+							<image
+								class="login-other-icon__img login-other-icon__img--sms"
+								src="/static/images/sms.png"
+								mode="aspectFit"
+								@tap="switchLoginView('phone')"
+							/>
+						</view>
+					</view>
 				</view>
 			</view>
 		</scroll-view>
@@ -96,7 +135,12 @@ import { showToast } from '@/common/chat-data.js'
 
 export default {
 	data() {
-		return { tab: 'enterprise' }
+		return {
+			loginTab: 'enterprise',
+			authMode: 'sms',
+			loginView: 'phone',
+			agreed: false
+		}
 	},
 	onShow() {
 		if (store.getState().loggedIn) {
@@ -108,6 +152,47 @@ export default {
 	},
 	methods: {
 		toast: showToast,
+		switchLoginTab(type) {
+			this.loginTab = type
+		},
+		switchLoginView(view) {
+			this.loginView = view
+		},
+		switchAuthMode(mode) {
+			this.authMode = mode
+		},
+		toggleAgreed() {
+			this.agreed = !this.agreed
+		},
+		ensureAgreed() {
+			if (!this.agreed) {
+				showToast('请先阅读并同意服务协议和隐私政策')
+				return false
+			}
+			return true
+		},
+		showServiceAgreement() {
+			showToast('服务协议弹框待接入')
+		},
+		showPrivacyPolicy() {
+			showToast('隐私政策弹框待接入')
+		},
+		submitLogin() {
+			if (!this.ensureAgreed()) return
+			if (this.loginTab === 'worker') {
+				this.loginWorker()
+			} else {
+				this.loginEnterprise()
+			}
+		},
+		submitWechatLogin() {
+			if (!this.ensureAgreed()) return
+			if (this.loginTab === 'worker') {
+				this.loginWorker()
+			} else {
+				this.loginEnterprise()
+			}
+		},
 		loginEnterprise() {
 			store.login('enterprise')
 			uni.redirectTo({ url: '/pages/chat/index' })
@@ -126,23 +211,106 @@ export default {
 }
 
 .login-scroll {
-	height: 100%;
+	height: 100vh;
 }
 
 .login-inner {
-	padding: 48rpx;
-	padding-bottom: calc(48rpx + #{$fe-h-safe-bottom});
+	padding: 16rpx 32rpx;
+	padding-bottom: calc(32rpx + #{$fe-h-safe-bottom});
 }
 
-.login-note {
-	display: block;
-	text-align: center;
-	margin-top: 32rpx;
-	font-size: 26rpx;
+.login-card-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 40rpx;
+}
+
+.login-card-header__title {
+	font-size: 28rpx;
+	font-weight: 500;
 	color: $fe-gray-500;
 }
 
+.login-card-header__switch {
+	font-size: 40rpx;
+	color: $fe-primary;
+	font-weight: 700;
+}
+
+.login-auth-switch {
+	display: flex;
+	justify-content: flex-end;
+	margin-bottom: 24rpx;
+}
+
+.login-auth-switch__link {
+	font-size: 28rpx;
+	color: $fe-info;
+	font-weight: 500;
+}
+
 .login-agreement {
+	margin-top: 8rpx;
+	margin-bottom: 16rpx;
+}
+
+.login-agreement--wechat {
+	margin-top: 0;
+	margin-bottom: 48rpx;
+}
+
+.login-agreement__row {
+	display: flex;
+	align-items: flex-start;
+	gap: 12rpx;
+}
+
+.login-agreement__text {
+	flex: 1;
+	font-size: 26rpx;
+	line-height: 1.6;
+	color: $fe-gray-500;
+}
+
+.login-agreement__link {
+	color: $fe-primary;
+	font-weight: 600;
+}
+
+.login-submit-btn {
+	margin-top: 0;
+}
+
+.login-wechat-panel {
+	padding-top: 8rpx;
+}
+
+.login-wechat-submit {
+	margin-top: 0;
+}
+
+.login-btn--disabled {
+	opacity: 0.5;
+}
+
+.login-other-icon {
+	display: flex;
+	justify-content: center;
+	margin-top: 8rpx;
+}
+
+.login-other-icon__img {
+	width: 96rpx;
+	height: 96rpx;
+}
+
+.login-other-icon__img--sms {
+	width: 88rpx;
+	height: 88rpx;
+}
+
+.login-note {
 	display: block;
 	text-align: center;
 	margin-top: 32rpx;