Showing
1 changed file
with
221 additions
and
362 deletions
1 | 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 | 37 | </template> |
82 | 38 | |
83 | 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 | 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 | 226 | </script> |
368 | 227 | |
369 | 228 | <style lang="scss" scoped> |
370 | -@import "./static/login.scss"; | |
229 | +@import './static/login.scss'; | |
371 | 230 | |
372 | 231 | /deep/ button { |
373 | - background: rgba(0, 0, 0, 0); | |
232 | + background: rgba(0, 0, 0, 0); | |
374 | 233 | } |
375 | -</style> | |
234 | +</style> | ... | ... |