Showing
1 changed file
with
221 additions
and
362 deletions
1 | <template> | 1 | <template> |
2 | - <view class="login-page"> | ||
3 | - <!-- 公共组件-每个页面必须引入 --> | ||
4 | - | ||
5 | - <public-module></public-module> | ||
6 | - | ||
7 | - <view class="u-flex login-main"> | ||
8 | - <view class="content"> | ||
9 | - <view class="hello login-text-muted">您好,</view> | ||
10 | - | ||
11 | - <view class="hello-welcome login-text-muted">欢迎来到ThingsKit!</view> | ||
12 | - </view> | ||
13 | - </view> | ||
14 | - | ||
15 | - <view class="f__login"> | ||
16 | - <view class="loginPhone"> | ||
17 | - <view class="form-row u-flex"> | ||
18 | - <view class="v-input" | ||
19 | - ><input | ||
20 | - type="text" | ||
21 | - v-model="loginForm.username" | ||
22 | - maxlength="32" | ||
23 | - placeholder="请输入登录账号" | ||
24 | - /></view> | ||
25 | - | ||
26 | - <u-icon></u-icon> | ||
27 | - </view> | ||
28 | - | ||
29 | - <view class="form-row u-flex"> | ||
30 | - <view class="v-input" | ||
31 | - ><input | ||
32 | - type="text" | ||
33 | - v-model="loginForm.password" | ||
34 | - maxlength="32" | ||
35 | - placeholder="请输入登录密码" | ||
36 | - :password="!showPassword" | ||
37 | - /></view> | ||
38 | - | ||
39 | - <view class="v-password" @click="showPasswordMode"> | ||
40 | - <u-icon | ||
41 | - color="#9a9a9a" | ||
42 | - width="18" | ||
43 | - height="15" | ||
44 | - :name="showPassword ? '/static/eye.png' : '/static/eye-hide.png'" | ||
45 | - ></u-icon> | ||
46 | - </view> | ||
47 | - | ||
48 | - <u-icon></u-icon> | ||
49 | - </view> | ||
50 | - | ||
51 | - <button class="submit" size="default" @click="onSubmitFunc"> | ||
52 | - <text class="text">登录</text> | ||
53 | - </button> | ||
54 | - | ||
55 | - <view class="u-flex row-item"> | ||
56 | - <view class="row-phone login-text-gray" @click="openCodeFunc" | ||
57 | - >手机验证码登录</view | ||
58 | - > | ||
59 | - | ||
60 | - <view class="row-reset login-text-gray" @click="findPassrordFunc" | ||
61 | - >忘记密码</view | ||
62 | - > | ||
63 | - </view> | ||
64 | - | ||
65 | - <view class="u-flex link-login"> | ||
66 | - <view class="link-text login-text-gray">第三方账号登录</view> | ||
67 | - | ||
68 | - <view style="height: 20rpx"></view> | ||
69 | - | ||
70 | - <button class="link-image" @tap="onWenxinAuthorization"> | ||
71 | - <image | ||
72 | - class="image" | ||
73 | - src="../../static/weixin.png" | ||
74 | - mode="aspectFill" | ||
75 | - ></image> | ||
76 | - </button> | ||
77 | - </view> | ||
78 | - </view> | ||
79 | - </view> | ||
80 | - </view> | 2 | + <view class="login-page"> |
3 | + <!-- 公共组件-每个页面必须引入 --> | ||
4 | + <public-module></public-module> | ||
5 | + <view class="u-flex login-main"> | ||
6 | + <view class="content"> | ||
7 | + <view class="hello login-text-muted">您好,</view> | ||
8 | + <view class="hello-welcome login-text-muted">欢迎来到ThingsKit!</view> | ||
9 | + </view> | ||
10 | + </view> | ||
11 | + <view class="f__login"> | ||
12 | + <view class="loginPhone"> | ||
13 | + <view class="form-row u-flex"> | ||
14 | + <view class="v-input"><input type="text" v-model="loginForm.username" maxlength="32" placeholder="请输入登录账号" /></view> | ||
15 | + <u-icon></u-icon> | ||
16 | + </view> | ||
17 | + <view class="form-row u-flex"> | ||
18 | + <view class="v-input"><input type="text" v-model="loginForm.password" maxlength="32" placeholder="请输入登录密码" :password="!showPassword" /></view> | ||
19 | + <view class="v-password" @click.stop="showPasswordMode"> | ||
20 | + <u-icon color="#9a9a9a" width="18" height="15" :name="showPassword ? '/static/eye.png' : '/static/eye-hide.png'"></u-icon> | ||
21 | + </view> | ||
22 | + <u-icon></u-icon> | ||
23 | + </view> | ||
24 | + <button class="submit" size="default" @click="onSubmitFunc"><text class="text">登录</text></button> | ||
25 | + <view class="u-flex row-item"> | ||
26 | + <view class="row-phone login-text-gray" @click="openCodeFunc">手机验证码登录</view> | ||
27 | + <view class="row-reset login-text-gray" @click="findPassrordFunc">忘记密码</view> | ||
28 | + </view> | ||
29 | + <view class="u-flex link-login"> | ||
30 | + <view class="link-text login-text-gray">第三方账号登录</view> | ||
31 | + <view style="height: 20rpx"></view> | ||
32 | + <button class="link-image" @tap="onWenxinAuthorization"><image class="image" src="../../static/weixin.png" mode="aspectFill"></image></button> | ||
33 | + </view> | ||
34 | + </view> | ||
35 | + </view> | ||
36 | + </view> | ||
81 | </template> | 37 | </template> |
82 | 38 | ||
83 | <script> | 39 | <script> |
84 | -import { mapMutations, mapActions } from "vuex"; | ||
85 | - | ||
86 | -import { loginApp } from "@/config/login"; | ||
87 | - | ||
88 | -import baseUrl from "@/config/baseUrl.js"; | ||
89 | - | ||
90 | -import WXBizDataCrypt from "@/config/WXBizDataCrypt.js"; | ||
91 | - | ||
92 | -import { appId, appSecrect } from "@/config/constant.js"; | 40 | +import { mapMutations, mapActions } from 'vuex'; |
41 | +import { loginApp } from '@/config/login'; | ||
42 | +import baseUrl from '@/config/baseUrl.js'; | ||
43 | +import WXBizDataCrypt from '@/config/WXBizDataCrypt.js'; | ||
44 | +import { appId, appSecrect } from '@/config/constant.js'; | ||
93 | 45 | ||
94 | export default { | 46 | export default { |
95 | - data() { | ||
96 | - return { | ||
97 | - loginForm: { | ||
98 | - username: "", | ||
99 | - | ||
100 | - password: "", | ||
101 | - }, | ||
102 | - | ||
103 | - showPassword: false, | ||
104 | - | ||
105 | - code: "", | ||
106 | - | ||
107 | - openid: "", | ||
108 | - }; | ||
109 | - }, | ||
110 | - | ||
111 | - onLoad() { | ||
112 | - wx.login({ | ||
113 | - success: (res) => { | ||
114 | - if (res.code) { | ||
115 | - this.code = res.code; | ||
116 | - | ||
117 | - //这里获取openid | ||
118 | - } else { | ||
119 | - return; | ||
120 | - } | ||
121 | - }, | ||
122 | - }); | ||
123 | - }, | ||
124 | - | ||
125 | - methods: { | ||
126 | - ...mapMutations(["setUserInfo"]), | ||
127 | - | ||
128 | - ...mapActions(["updateBadgeTotal"]), | ||
129 | - | ||
130 | - //微信授权登录 | ||
131 | - | ||
132 | - //#ifdef MP-WEIXIN | ||
133 | - | ||
134 | - onWenxinAuthorization() { | ||
135 | - wx.getUserProfile({ | ||
136 | - desc: "微信第三方授权", | ||
137 | - | ||
138 | - success: (reswenxin) => { | ||
139 | - console.log("res=======>", reswenxin); | ||
140 | - | ||
141 | - if ( | ||
142 | - reswenxin.errMsg === "getUserProfile:ok" && | ||
143 | - reswenxin.encryptedData | ||
144 | - ) { | ||
145 | - console.log("获取code", this.code); | ||
146 | - | ||
147 | - //获取用户信息 | ||
148 | - | ||
149 | - let obj = { | ||
150 | - avatarUrl: reswenxin.userInfo.avatarUrl, | ||
151 | - | ||
152 | - thirdUserId: this.openid, | ||
153 | - }; | ||
154 | - | ||
155 | - //判断是否需要绑定 | ||
156 | - | ||
157 | - uni.$u.http | ||
158 | - | ||
159 | - .get(`/yt/third/login/${this.code}`) | ||
160 | - | ||
161 | - .then((res) => { | ||
162 | - console.log("Res", res); | ||
163 | - | ||
164 | - //设置全局变量openId | ||
165 | - | ||
166 | - // getApp().globalData.openId = res.data.openid; | ||
167 | - | ||
168 | - if ( | ||
169 | - res.token == "" || | ||
170 | - (res.token == null && res.refreshToken) | ||
171 | - ) { | ||
172 | - //需要绑定 | ||
173 | - | ||
174 | - let userInfo = { | ||
175 | - isThirdLogin: true, //用于判断是否是第三方登录并且需要绑定账号 | ||
176 | - | ||
177 | - avatar: obj.avatarUrl, | ||
178 | - }; | ||
179 | - | ||
180 | - this.setUserInfo(userInfo); | ||
181 | - | ||
182 | - //设置全局变量openId | ||
183 | - | ||
184 | - getApp().globalData.openId = res.refreshToken; | ||
185 | - | ||
186 | - uni.reLaunch({ | ||
187 | - url: "../../pages/personal/personal", | ||
188 | - }); | ||
189 | - } else { | ||
190 | - // 不需要绑定,直接第三方登录使用 | ||
191 | - | ||
192 | - let resObj = { | ||
193 | - refreshToken: res.refreshToken, | ||
194 | - | ||
195 | - isToken: res.token, | ||
196 | - }; | ||
197 | - | ||
198 | - let userInfo = { | ||
199 | - ...resObj, | ||
200 | - | ||
201 | - token: true, //token用于判断是否登录 | ||
202 | - | ||
203 | - isThirdLoginAndNoDind: true, //用于判断是否是第三方登录并且不需要绑定账号 | ||
204 | - }; | ||
205 | - | ||
206 | - if (userInfo.token) { | ||
207 | - this.setUserInfo(userInfo); | ||
208 | - } | ||
209 | - | ||
210 | - uni.showToast({ | ||
211 | - title: "第三方账号登录成功~", | ||
212 | - | ||
213 | - icon: "none", | ||
214 | - }); | ||
215 | - | ||
216 | - this.saveUserInfo(); | ||
217 | - | ||
218 | - this.getAlarmTotalData(); | ||
219 | - | ||
220 | - uni.reLaunch({ | ||
221 | - url: "../../pages/personal/personal", | ||
222 | - }); | ||
223 | - } | ||
224 | - }) | ||
225 | - | ||
226 | - .catch((e) => { | ||
227 | - uni.$u.toast(e.data?.message); | ||
228 | - }); | ||
229 | - } | ||
230 | - }, | ||
231 | - | ||
232 | - fail: (res) => { | ||
233 | - //拒绝授权 | ||
234 | - | ||
235 | - return; | ||
236 | - }, | ||
237 | - }); | ||
238 | - }, | ||
239 | - | ||
240 | - //#endif | ||
241 | - | ||
242 | - saveUserInfo() { | ||
243 | - //储存个人信息 | ||
244 | - | ||
245 | - uni.$u.http.get("/yt/user/me/info").then((res) => { | ||
246 | - if (res) { | ||
247 | - this.setUserInfo(res); | ||
248 | - } | ||
249 | - }); | ||
250 | - }, | ||
251 | - | ||
252 | - async getAlarmTotalData() { | ||
253 | - const res = await uni.$u.http.get("/yt/homepage/app"); | ||
254 | - if (res) { | ||
255 | - //异步实时更新告警徽标数 | ||
256 | - this.updateBadgeTotal(res.totalAlarm.activedAlarm); | ||
257 | - } | ||
258 | - }, | ||
259 | - | ||
260 | - onSubmitFunc() { | ||
261 | - if (this.loginForm.username == "") { | ||
262 | - return uni.$u.toast("请输入登录账号~"); | ||
263 | - } | ||
264 | - const passReg = | ||
265 | - /^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){1,})(?!.*\s).{8,}$/; | ||
266 | - | ||
267 | - if (this.loginForm.password == "") { | ||
268 | - uni.showToast({ | ||
269 | - title: "请输入登录密码~", | ||
270 | - | ||
271 | - icon: "none", | ||
272 | - }); | ||
273 | - return; | ||
274 | - } else if (!passReg.test(this.loginForm.password)) { | ||
275 | - uni.showToast({ | ||
276 | - title: | ||
277 | - "密码格式不正确(至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符)~", | ||
278 | - | ||
279 | - icon: "none", | ||
280 | - | ||
281 | - duration: 3000, | ||
282 | - }); | ||
283 | - | ||
284 | - return; | ||
285 | - } | ||
286 | - uni.$u.http | ||
287 | - .post("/auth/login", this.loginForm) | ||
288 | - | ||
289 | - .then((res) => { | ||
290 | - if (res) { | ||
291 | - // 储存登录信息 | ||
292 | - | ||
293 | - let resObj = { | ||
294 | - refreshToken: res.refreshToken, | ||
295 | - | ||
296 | - isToken: res.token, | ||
297 | - }; | ||
298 | - | ||
299 | - let userInfo = { | ||
300 | - ...resObj, | ||
301 | - | ||
302 | - token: true, //token用于判断是否登录 | ||
303 | - | ||
304 | - isThirdLogin: false, | ||
305 | - }; | ||
306 | - | ||
307 | - if (userInfo.token) { | ||
308 | - this.setUserInfo(userInfo); | ||
309 | - } | ||
310 | - | ||
311 | - uni | ||
312 | - .showToast({ | ||
313 | - title: "登录成功~", | ||
314 | - | ||
315 | - icon: "none", | ||
316 | - }) | ||
317 | - .then((res) => { | ||
318 | - /** | ||
319 | - | ||
320 | - * 有些时候不起作用 | ||
321 | - | ||
322 | - */ | ||
323 | - | ||
324 | - // uni.navigateBack({ | ||
325 | - | ||
326 | - // delta: 1 | ||
327 | - | ||
328 | - // }); | ||
329 | - | ||
330 | - // #ifdef APP-PLUS||MP | ||
331 | - | ||
332 | - uni.reLaunch({ | ||
333 | - url: "/pages/personal/personal", | ||
334 | - }); | ||
335 | - | ||
336 | - // #endif | ||
337 | - }); | ||
338 | - | ||
339 | - this.saveUserInfo(); | ||
340 | - | ||
341 | - this.getAlarmTotalData(); | ||
342 | - } | ||
343 | - }) | ||
344 | - | ||
345 | - .catch((e) => { | ||
346 | - uni.$u.toast(e.data?.message); | ||
347 | - }); | ||
348 | - }, | ||
349 | - | ||
350 | - openCodeFunc() { | ||
351 | - uni.navigateTo({ | ||
352 | - url: "../other/code", | ||
353 | - }); | ||
354 | - }, | ||
355 | - | ||
356 | - findPassrordFunc() { | ||
357 | - uni.navigateTo({ | ||
358 | - url: "../other/findPassword", | ||
359 | - }); | ||
360 | - }, | ||
361 | - | ||
362 | - showPasswordMode() { | ||
363 | - this.showPassword = !this.showPassword; | ||
364 | - }, | ||
365 | - }, | 47 | + data() { |
48 | + return { | ||
49 | + loginForm: { | ||
50 | + username: '', | ||
51 | + | ||
52 | + password: '' | ||
53 | + }, | ||
54 | + showPassword: false, | ||
55 | + code: '', | ||
56 | + openid: '' | ||
57 | + }; | ||
58 | + }, | ||
59 | + onLoad() { | ||
60 | + wx.login({ | ||
61 | + success: res => { | ||
62 | + if (res.code) { | ||
63 | + this.code = res.code; | ||
64 | + //这里获取openid | ||
65 | + } else { | ||
66 | + return; | ||
67 | + } | ||
68 | + } | ||
69 | + }); | ||
70 | + }, | ||
71 | + | ||
72 | + methods: { | ||
73 | + ...mapMutations(['setUserInfo']), | ||
74 | + ...mapActions(['updateBadgeTotal']), | ||
75 | + //微信授权登录 | ||
76 | + //#ifdef MP-WEIXIN | ||
77 | + onWenxinAuthorization() { | ||
78 | + wx.getUserProfile({ | ||
79 | + desc: '微信第三方授权', | ||
80 | + success: reswenxin => { | ||
81 | + if (reswenxin.errMsg === 'getUserProfile:ok' && reswenxin.encryptedData) { | ||
82 | + //获取用户信息 | ||
83 | + let obj = { | ||
84 | + avatarUrl: reswenxin.userInfo.avatarUrl, | ||
85 | + thirdUserId: this.openid | ||
86 | + }; | ||
87 | + //判断是否需要绑定 | ||
88 | + uni.$u.http | ||
89 | + .get(`/yt/third/login/${this.code}`) | ||
90 | + .then(res => { | ||
91 | + if (res.token == '' || (res.token == null && res.thirdUserId)) { | ||
92 | + //需要绑定 | ||
93 | + let userInfo = { | ||
94 | + isThirdLogin: true, //用于判断是否是第三方登录并且需要绑定账号 | ||
95 | + avatar: obj.avatarUrl, | ||
96 | + thirdUserId: res.thirdUserId | ||
97 | + }; | ||
98 | + this.setUserInfo(userInfo); | ||
99 | + //设置全局变量openId | ||
100 | + getApp().globalData.openId = res.thirdUserId; | ||
101 | + uni.reLaunch({ | ||
102 | + url: '../../pages/personal/personal' | ||
103 | + }); | ||
104 | + } else { | ||
105 | + // 不需要绑定,直接第三方登录使用 | ||
106 | + let resObj = { | ||
107 | + refreshToken: res.refreshToken, | ||
108 | + isToken: res.token | ||
109 | + }; | ||
110 | + let userInfo = { | ||
111 | + ...resObj, | ||
112 | + token: true, //token用于判断是否登录 | ||
113 | + isThirdLoginAndNoDind: true, //用于判断是否是第三方登录并且不需要绑定账号 | ||
114 | + thirdUserId: res.thirdUserId | ||
115 | + }; | ||
116 | + //设置全局变量openId | ||
117 | + getApp().globalData.openId = res.thirdUserId; | ||
118 | + if (userInfo.token) { | ||
119 | + this.setUserInfo(userInfo); | ||
120 | + } | ||
121 | + uni.showToast({ | ||
122 | + title: '第三方账号登录成功~', | ||
123 | + icon: 'none' | ||
124 | + }); | ||
125 | + this.saveUserInfo(); | ||
126 | + this.getAlarmTotalData(); | ||
127 | + uni.reLaunch({ | ||
128 | + url: '../../pages/personal/personal' | ||
129 | + }); | ||
130 | + } | ||
131 | + }) | ||
132 | + .catch(e => { | ||
133 | + // uni.$u.toast(e.data?.message); | ||
134 | + }); | ||
135 | + } | ||
136 | + }, | ||
137 | + fail: res => { | ||
138 | + //拒绝授权 | ||
139 | + return; | ||
140 | + } | ||
141 | + }); | ||
142 | + }, | ||
143 | + //#endif | ||
144 | + saveUserInfo() { | ||
145 | + //储存个人信息 | ||
146 | + uni.$u.http.get('/yt/user/me/info').then(res => { | ||
147 | + if (res) { | ||
148 | + this.setUserInfo(res); | ||
149 | + } | ||
150 | + }); | ||
151 | + }, | ||
152 | + async getAlarmTotalData() { | ||
153 | + const res = await uni.$u.http.get('/yt/homepage/app'); | ||
154 | + if (res) { | ||
155 | + //异步实时更新告警徽标数 | ||
156 | + this.updateBadgeTotal(res.totalAlarm.activedAlarm); | ||
157 | + } | ||
158 | + }, | ||
159 | + onSubmitFunc() { | ||
160 | + if (this.loginForm.username == '') { | ||
161 | + return uni.$u.toast('请输入登录账号~'); | ||
162 | + } | ||
163 | + const passReg = /^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){1,})(?!.*\s).{8,}$/; | ||
164 | + if (this.loginForm.password == '') { | ||
165 | + uni.showToast({ | ||
166 | + title: '请输入登录密码~', | ||
167 | + icon: 'none' | ||
168 | + }); | ||
169 | + return; | ||
170 | + } else if (!passReg.test(this.loginForm.password)) { | ||
171 | + uni.showToast({ | ||
172 | + title: '密码格式不正确(至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符)~', | ||
173 | + icon: 'none', | ||
174 | + duration: 3000 | ||
175 | + }); | ||
176 | + return; | ||
177 | + } | ||
178 | + uni.$u.http | ||
179 | + .post('/auth/login', this.loginForm) | ||
180 | + .then(res => { | ||
181 | + if (res) { | ||
182 | + // 储存登录信息 | ||
183 | + let resObj = { | ||
184 | + refreshToken: res.refreshToken, | ||
185 | + isToken: res.token | ||
186 | + }; | ||
187 | + let userInfo = { | ||
188 | + ...resObj, | ||
189 | + token: true, //token用于判断是否登录 | ||
190 | + isThirdLogin: false | ||
191 | + }; | ||
192 | + if (userInfo.token) { | ||
193 | + this.setUserInfo(userInfo); | ||
194 | + } | ||
195 | + uni.showToast({ | ||
196 | + title: '登录成功~', | ||
197 | + icon: 'none' | ||
198 | + }).then(async res => { | ||
199 | + this.saveUserInfo(); | ||
200 | + await this.getAlarmTotalData(); | ||
201 | + uni.reLaunch({ | ||
202 | + url: '/pages/personal/personal' | ||
203 | + }); | ||
204 | + }); | ||
205 | + } | ||
206 | + }) | ||
207 | + .catch(e => { | ||
208 | + uni.$u.toast(e.data?.message); | ||
209 | + }); | ||
210 | + }, | ||
211 | + openCodeFunc() { | ||
212 | + uni.navigateTo({ | ||
213 | + url: '../other/code' | ||
214 | + }); | ||
215 | + }, | ||
216 | + findPassrordFunc() { | ||
217 | + uni.navigateTo({ | ||
218 | + url: '../other/findPassword' | ||
219 | + }); | ||
220 | + }, | ||
221 | + showPasswordMode() { | ||
222 | + this.showPassword = !this.showPassword; | ||
223 | + } | ||
224 | + } | ||
366 | }; | 225 | }; |
367 | </script> | 226 | </script> |
368 | 227 | ||
369 | <style lang="scss" scoped> | 228 | <style lang="scss" scoped> |
370 | -@import "./static/login.scss"; | 229 | +@import './static/login.scss'; |
371 | 230 | ||
372 | /deep/ button { | 231 | /deep/ button { |
373 | - background: rgba(0, 0, 0, 0); | 232 | + background: rgba(0, 0, 0, 0); |
374 | } | 233 | } |
375 | -</style> | 234 | +</style> |