|
|
@@ -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;
|