Sfoglia il codice sorgente

Merge remote-tracking branch 'origin/master'

wwh 3 settimane fa
parent
commit
201b45121f

+ 11 - 6
huimv-employment/app/common/fe.scss

@@ -1269,9 +1269,9 @@ page {
1269 1269
 .fe-login-visual {
1270 1270
 	background: linear-gradient(135deg, $fe-primary 0%, $fe-primary-dark 100%);
1271 1271
 	border-radius: $fe-radius-xl;
1272
-	padding: 64rpx 48rpx;
1272
+	padding: 32rpx 48rpx;
1273 1273
 	color: #fff;
1274
-	margin-bottom: 64rpx;
1274
+	margin-bottom: 32rpx;
1275 1275
 }
1276 1276
 
1277 1277
 .fe-login-visual__title {
@@ -1302,6 +1302,7 @@ page {
1302 1302
 	font-size: 44rpx;
1303 1303
 	font-weight: 700;
1304 1304
 	margin-bottom: 12rpx;
1305
+	margin-right: 12rpx;
1305 1306
 }
1306 1307
 
1307 1308
 .fe-login-card__subtitle {
@@ -1311,24 +1312,28 @@ page {
1311 1312
 }
1312 1313
 
1313 1314
 .fe-login-tabs {
1314
-	display: grid;
1315
-	grid-template-columns: 1fr 1fr;
1316
-	gap: 24rpx;
1315
+	display: flex;
1316
+	flex-direction: row;
1317 1317
 	margin-bottom: 40rpx;
1318 1318
 }
1319 1319
 
1320 1320
 .fe-login-tab {
1321
+	flex: 1;
1321 1322
 	height: 96rpx;
1322 1323
 	display: flex;
1323 1324
 	align-items: center;
1324 1325
 	justify-content: center;
1325
-	gap: 12rpx;
1326
+	margin-right: 24rpx;
1326 1327
 	border-radius: $fe-radius-md;
1327 1328
 	font-size: 30rpx;
1328 1329
 	font-weight: 600;
1329 1330
 	border: 4rpx solid $fe-border;
1330 1331
 	background: $fe-surface;
1331 1332
 	color: $fe-gray-600;
1333
+
1334
+	&:last-child {
1335
+		margin-right: 0;
1336
+	}
1332 1337
 }
1333 1338
 
1334 1339
 .fe-login-tab--active {

+ 1 - 1
huimv-employment/app/pages.json

@@ -3,7 +3,7 @@
3 3
 		{
4 4
 			"path": "pages/auth/login",
5 5
 			"style": {
6
-				"navigationBarTitleText": ""
6
+				"navigationBarTitleText": "登录"
7 7
 			}
8 8
 		},
9 9
 		{

+ 224 - 56
huimv-employment/app/pages/auth/login.vue

@@ -24,66 +24,105 @@
24 24
 				</view>
25 25
 
26 26
 				<view class="fe-login-card">
27
-					<text class="fe-login-card__title">欢迎回来</text>
28
-					<text class="fe-login-card__subtitle">请选择您的身份登录</text>
29
-
30
-					<view class="fe-login-tabs">
31
-						<view
32
-							class="fe-login-tab"
33
-							:class="{ 'fe-login-tab--active': tab === 'enterprise' }"
34
-							@tap="tab = 'enterprise'"
35
-						>🏢 企业登录</view>
36
-						<view
37
-							class="fe-login-tab"
38
-							:class="{ 'fe-login-tab--active': tab === 'worker' }"
39
-							@tap="tab = 'worker'"
40
-						>👤 临时工登录</view>
27
+					<view class="login-card-header">
28
+						<text class="login-card-header__title">{{ loginTab === 'enterprise' ? '企业登录' : '临时工登录' }}</text>
29
+						<text
30
+							class="login-card-header__switch"
31
+							@tap="switchLoginTab(loginTab === 'enterprise' ? 'worker' : 'enterprise')"
32
+						>{{ loginTab === 'enterprise' ? '临时工登录' : '企业登录' }}</text>
41 33
 					</view>
42 34
 
43
-					<view v-if="tab === 'enterprise'">
44
-						<view class="fe-form-group">
45
-							<text class="fe-form-label">企业名称</text>
46
-							<input class="fe-form-input" placeholder="请输入企业名称或统一社会信用代码" />
47
-						</view>
48
-						<view class="fe-form-group">
49
-							<text class="fe-form-label">登录手机号</text>
50
-							<input class="fe-form-input" type="number" placeholder="请输入手机号" />
35
+					<!-- 手机号 / 验证码登录 -->
36
+					<view v-if="loginView === 'phone'">
37
+						<view>
38
+							<view class="fe-form-group">
39
+								<text class="fe-form-label">手机号</text>
40
+								<input class="fe-form-input" type="number" placeholder="请输入手机号" />
41
+							</view>
42
+							<view v-if="authMode === 'sms'" class="fe-form-group">
43
+								<text class="fe-form-label">验证码</text>
44
+								<view class="fe-form-row">
45
+									<input class="fe-form-input" placeholder="请输入验证码" />
46
+									<view class="fe-btn fe-btn--secondary" style="white-space:nowrap;padding:0 24rpx;height:96rpx;" @tap="toast('验证码已发送')">获取验证码</view>
47
+								</view>
48
+							</view>
49
+							<view v-else class="fe-form-group">
50
+								<text class="fe-form-label">登录密码</text>
51
+								<input class="fe-form-input" password placeholder="请输入登录密码" />
52
+							</view>
51 53
 						</view>
52
-						<view class="fe-form-group">
53
-							<text class="fe-form-label">验证码</text>
54
-							<view class="fe-form-row">
55
-								<input class="fe-form-input" placeholder="请输入验证码" />
56
-								<view class="fe-btn fe-btn--secondary" style="white-space:nowrap;padding:0 24rpx;height:96rpx;" @tap="toast('验证码已发送')">获取验证码</view>
54
+
55
+						<view class="login-agreement">
56
+							<view class="login-agreement__row">
57
+								<checkbox :checked="agreed" color="#7C3AED" @tap.stop="toggleAgreed" />
58
+								<text class="login-agreement__text" @tap="toggleAgreed">
59
+									登录即同意
60
+									<text class="login-agreement__link" @tap.stop="showServiceAgreement">《服务协议》</text>
61
+									和
62
+									<text class="login-agreement__link" @tap.stop="showPrivacyPolicy">《隐私政策》</text>
63
+								</text>
57 64
 							</view>
58 65
 						</view>
59
-						<view class="fe-btn fe-btn--primary fe-btn--lg fe-btn--full" style="margin-top:24rpx;" @tap="loginEnterprise">
60
-							登录并绑定企业
66
+
67
+						<view class="login-auth-switch">
68
+							<text
69
+								class="login-auth-switch__link"
70
+								@tap="switchAuthMode(authMode === 'sms' ? 'password' : 'sms')"
71
+							>{{ authMode === 'sms' ? '账号密码登录' : '验证码登录' }}</text>
72
+						</view>
73
+
74
+						<view
75
+							class="fe-btn fe-btn--primary fe-btn--lg fe-btn--full login-submit-btn"
76
+							:class="{ 'login-btn--disabled': !agreed }"
77
+							@tap="submitLogin"
78
+						>
79
+							{{ loginTab === 'enterprise' ? '登录' : '登录' }}
61 80
 						</view>
62
-						<view class="fe-login-divider">或</view>
63
-						<view class="fe-btn fe-btn--wechat fe-btn--lg fe-btn--full" @tap="loginEnterprise">
64
-							微信快捷登录
81
+						<!-- <text v-if="loginTab === 'worker'" class="login-note">首次登录将自动创建临时工档案</text> -->
82
+
83
+						<view class="fe-login-divider">其他登录</view>
84
+						<view class="login-other-icon">
85
+							<image
86
+								class="login-other-icon__img"
87
+								src="/static/images/wechat.png"
88
+								mode="aspectFit"
89
+								@tap="switchLoginView('wechat')"
90
+							/>
65 91
 						</view>
66 92
 					</view>
67 93
 
68
-					<view v-else>
69
-						<view class="fe-form-group">
70
-							<text class="fe-form-label">手机号</text>
71
-							<input class="fe-form-input" type="number" placeholder="请输入手机号" />
72
-						</view>
73
-						<view class="fe-form-group">
74
-							<text class="fe-form-label">验证码</text>
75
-							<view class="fe-form-row">
76
-								<input class="fe-form-input" placeholder="请输入验证码" />
77
-								<view class="fe-btn fe-btn--secondary" style="white-space:nowrap;padding:0 24rpx;height:96rpx;" @tap="toast('验证码已发送')">获取验证码</view>
94
+					<!-- 微信快捷登录 -->
95
+					<view v-else class="login-wechat-panel">
96
+						<view class="login-agreement login-agreement--wechat">
97
+							<view class="login-agreement__row">
98
+								<checkbox :checked="agreed" color="#7C3AED" @tap.stop="toggleAgreed" />
99
+								<text class="login-agreement__text" @tap="toggleAgreed">
100
+									登录注册即表示同意
101
+									<text class="login-agreement__link" @tap.stop="showServiceAgreement">用户协议</text>
102
+									、
103
+									<text class="login-agreement__link" @tap.stop="showPrivacyPolicy">隐私条款</text>
104
+								</text>
78 105
 							</view>
79 106
 						</view>
80
-						<view class="fe-btn fe-btn--primary fe-btn--lg fe-btn--full" style="margin-top:24rpx;" @tap="loginWorker">
81
-							登记并扫码入场
107
+
108
+						<view
109
+							class="fe-btn fe-btn--wechat fe-btn--lg fe-btn--full login-wechat-submit"
110
+							:class="{ 'login-btn--disabled': !agreed }"
111
+							@tap="submitWechatLogin"
112
+						>
113
+							微信一键登录
82 114
 						</view>
83
-						<text class="login-note">首次登录将自动创建临时工档案</text>
84
-					</view>
85 115
 
86
-					<text class="login-agreement">登录即同意 服务协议 和 隐私政策</text>
116
+						<view class="fe-login-divider">其他登录</view>
117
+						<view class="login-other-icon">
118
+							<image
119
+								class="login-other-icon__img login-other-icon__img--sms"
120
+								src="/static/images/sms.png"
121
+								mode="aspectFit"
122
+								@tap="switchLoginView('phone')"
123
+							/>
124
+						</view>
125
+					</view>
87 126
 				</view>
88 127
 			</view>
89 128
 		</scroll-view>
@@ -96,7 +135,12 @@ import { showToast } from '@/common/chat-data.js'
96 135
 
97 136
 export default {
98 137
 	data() {
99
-		return { tab: 'enterprise' }
138
+		return {
139
+			loginTab: 'enterprise',
140
+			authMode: 'sms',
141
+			loginView: 'phone',
142
+			agreed: false
143
+		}
100 144
 	},
101 145
 	onShow() {
102 146
 		if (store.getState().loggedIn) {
@@ -108,6 +152,47 @@ export default {
108 152
 	},
109 153
 	methods: {
110 154
 		toast: showToast,
155
+		switchLoginTab(type) {
156
+			this.loginTab = type
157
+		},
158
+		switchLoginView(view) {
159
+			this.loginView = view
160
+		},
161
+		switchAuthMode(mode) {
162
+			this.authMode = mode
163
+		},
164
+		toggleAgreed() {
165
+			this.agreed = !this.agreed
166
+		},
167
+		ensureAgreed() {
168
+			if (!this.agreed) {
169
+				showToast('请先阅读并同意服务协议和隐私政策')
170
+				return false
171
+			}
172
+			return true
173
+		},
174
+		showServiceAgreement() {
175
+			showToast('服务协议弹框待接入')
176
+		},
177
+		showPrivacyPolicy() {
178
+			showToast('隐私政策弹框待接入')
179
+		},
180
+		submitLogin() {
181
+			if (!this.ensureAgreed()) return
182
+			if (this.loginTab === 'worker') {
183
+				this.loginWorker()
184
+			} else {
185
+				this.loginEnterprise()
186
+			}
187
+		},
188
+		submitWechatLogin() {
189
+			if (!this.ensureAgreed()) return
190
+			if (this.loginTab === 'worker') {
191
+				this.loginWorker()
192
+			} else {
193
+				this.loginEnterprise()
194
+			}
195
+		},
111 196
 		loginEnterprise() {
112 197
 			store.login('enterprise')
113 198
 			uni.redirectTo({ url: '/pages/chat/index' })
@@ -126,23 +211,106 @@ export default {
126 211
 }
127 212
 
128 213
 .login-scroll {
129
-	height: 100%;
214
+	height: 100vh;
130 215
 }
131 216
 
132 217
 .login-inner {
133
-	padding: 48rpx;
134
-	padding-bottom: calc(48rpx + #{$fe-h-safe-bottom});
218
+	padding: 16rpx 32rpx;
219
+	padding-bottom: calc(32rpx + #{$fe-h-safe-bottom});
135 220
 }
136 221
 
137
-.login-note {
138
-	display: block;
139
-	text-align: center;
140
-	margin-top: 32rpx;
141
-	font-size: 26rpx;
222
+.login-card-header {
223
+	display: flex;
224
+	align-items: center;
225
+	justify-content: space-between;
226
+	margin-bottom: 40rpx;
227
+}
228
+
229
+.login-card-header__title {
230
+	font-size: 28rpx;
231
+	font-weight: 500;
142 232
 	color: $fe-gray-500;
143 233
 }
144 234
 
235
+.login-card-header__switch {
236
+	font-size: 40rpx;
237
+	color: $fe-primary;
238
+	font-weight: 700;
239
+}
240
+
241
+.login-auth-switch {
242
+	display: flex;
243
+	justify-content: flex-end;
244
+	margin-bottom: 24rpx;
245
+}
246
+
247
+.login-auth-switch__link {
248
+	font-size: 28rpx;
249
+	color: $fe-info;
250
+	font-weight: 500;
251
+}
252
+
145 253
 .login-agreement {
254
+	margin-top: 8rpx;
255
+	margin-bottom: 16rpx;
256
+}
257
+
258
+.login-agreement--wechat {
259
+	margin-top: 0;
260
+	margin-bottom: 48rpx;
261
+}
262
+
263
+.login-agreement__row {
264
+	display: flex;
265
+	align-items: flex-start;
266
+	gap: 12rpx;
267
+}
268
+
269
+.login-agreement__text {
270
+	flex: 1;
271
+	font-size: 26rpx;
272
+	line-height: 1.6;
273
+	color: $fe-gray-500;
274
+}
275
+
276
+.login-agreement__link {
277
+	color: $fe-primary;
278
+	font-weight: 600;
279
+}
280
+
281
+.login-submit-btn {
282
+	margin-top: 0;
283
+}
284
+
285
+.login-wechat-panel {
286
+	padding-top: 8rpx;
287
+}
288
+
289
+.login-wechat-submit {
290
+	margin-top: 0;
291
+}
292
+
293
+.login-btn--disabled {
294
+	opacity: 0.5;
295
+}
296
+
297
+.login-other-icon {
298
+	display: flex;
299
+	justify-content: center;
300
+	margin-top: 8rpx;
301
+}
302
+
303
+.login-other-icon__img {
304
+	width: 96rpx;
305
+	height: 96rpx;
306
+}
307
+
308
+.login-other-icon__img--sms {
309
+	width: 88rpx;
310
+	height: 88rpx;
311
+}
312
+
313
+.login-note {
146 314
 	display: block;
147 315
 	text-align: center;
148 316
 	margin-top: 32rpx;

BIN
huimv-employment/app/static/images/sms.png


BIN
huimv-employment/app/static/images/wechat.png