Commit 3899dcb71ef532e08eb4e9c96d6a56a8dc6eb625

Authored by fengwotao
1 parent f51c6473

perf: app 优化登录页代码

@@ -145,7 +145,7 @@ export function formatToDate(date = undefined, format = DATE_TIME_FORMAT) { @@ -145,7 +145,7 @@ export function formatToDate(date = undefined, format = DATE_TIME_FORMAT) {
145 } 145 }
146 146
147 //封装uniapp跳转 navigateTo 147 //封装uniapp跳转 navigateTo
148 -export const useNavigateTo=(path,param)=>{ 148 +export const useNavigateTo = (path,param)=>{
149 if (!path) return 149 if (!path) return
150 if(param){ 150 if(param){
151 uni.navigateTo({ 151 uni.navigateTo({
@@ -156,4 +156,41 @@ export const useNavigateTo=(path,param)=>{ @@ -156,4 +156,41 @@ export const useNavigateTo=(path,param)=>{
156 url:path 156 url:path
157 }); 157 });
158 } 158 }
159 -}  
  159 +}
  160 +
  161 +//封装uniapp跳转 reLaunch
  162 +export const useReLaunch = (url)=>{
  163 + uni.reLaunch({url});
  164 +}
  165 +
  166 +//封装uniapp showToast
  167 +export const useShowToast=(title)=>{
  168 + return new Promise((resolve,reject)=>{
  169 + uni.showToast({
  170 + title: title,
  171 + icon: 'none',
  172 + success :(res) =>{
  173 + resolve(res);
  174 + },
  175 + fail:(err)=>{
  176 + reject(err);
  177 + }
  178 + })
  179 + })
  180 +}
  181 +
  182 +//封装uniapp showModal
  183 +export const useShowModal=(content)=>{
  184 + return new Promise((resolve,reject)=>{
  185 + uni.showModal({
  186 + title: '提示',
  187 + content: content,
  188 + success :(res) =>{
  189 + resolve(res);
  190 + },
  191 + fail:(err)=>{
  192 + reject(err);
  193 + }
  194 + })
  195 + })
  196 +}
1 <template> 1 <template>
2 - <view class="login-page" :style="{  
3 - backgroundImage:  
4 - 'url(' +  
5 - (mpOwnConfig.bg !== undefined ? mpOwnConfig.bg : `${defaultLogo}`) +  
6 - ')',  
7 - }"> 2 + <view class="login-page" :style="{backgroundImage:setLoginBg}">
8 <!-- 公共组件-每个页面必须引入 --> 3 <!-- 公共组件-每个页面必须引入 -->
9 <public-module></public-module> 4 <public-module></public-module>
10 <view class="u-flex login-main"> 5 <view class="u-flex login-main">
11 <view class="content"> 6 <view class="content">
12 <view class="hello login-text-muted">您好,</view> 7 <view class="hello login-text-muted">您好,</view>
13 - <view style="width: 587rpx;" class="text-clip hello-welcome login-text-muted">欢迎来到{{  
14 - mpOwnConfig.name !== undefined ? mpOwnConfig.name : "ThingsKit"  
15 - }}!</view> 8 + <view style="width: 587rpx;" class="text-clip hello-welcome login-text-muted">欢迎来到{{setHeadTitle}}!</view>
16 </view> 9 </view>
17 </view> 10 </view>
18 -  
19 - <view class="f__login">  
20 - <view class="loginPhone"> 11 + <view class="login-body">
  12 + <view class="login-phone">
21 <view class="form-row u-flex"> 13 <view class="form-row u-flex">
22 <u-input :adjust-position="false" v-model="loginForm.username" type="text" placeholder="请输入登录账号" 14 <u-input :adjust-position="false" v-model="loginForm.username" type="text" placeholder="请输入登录账号"
23 border="bottom" /> 15 border="bottom" />
@@ -27,9 +19,7 @@ @@ -27,9 +19,7 @@
27 placeholder="请输入登录密码" border="bottom"> 19 placeholder="请输入登录密码" border="bottom">
28 <template slot="suffix"> 20 <template slot="suffix">
29 <view @click="showPasswordMode" style="padding: 10rpx"> 21 <view @click="showPasswordMode" style="padding: 10rpx">
30 - <u-icon width="18" height="14" :name="  
31 - showPassword ? '/static/eye-hide.png' : '/static/eye.png'  
32 - "></u-icon> 22 + <u-icon width="18" height="14" :name="passwordIcon"></u-icon>
33 </view> 23 </view>
34 </template> 24 </template>
35 </u-input> 25 </u-input>
@@ -46,16 +36,9 @@ @@ -46,16 +36,9 @@
46 <view class="link-text login-text-gray">第三方账号登录</view> 36 <view class="link-text login-text-gray">第三方账号登录</view>
47 <view style="height: 20rpx"></view> 37 <view style="height: 20rpx"></view>
48 <button class="link-image" @tap="handleWenxinAuthorization"> 38 <button class="link-image" @tap="handleWenxinAuthorization">
49 - <image class="image" src="../../static/weixin.png" mode="aspectFill"></image> 39 + <image class="image" src="/static/weixin.png" mode="aspectFill"></image>
50 </button> 40 </button>
51 <!-- #endif --> 41 <!-- #endif -->
52 - <!-- #ifdef APP-PLUS -->  
53 - <!-- <view class="link-text login-text-gray">第三方账号登录</view>  
54 - <view style="height: 20rpx"></view>  
55 - <button class="link-image" @click="handleAppPlusAuthorization">  
56 - <image class="image" src="../../static/weixin.png" mode="aspectFill"></image>  
57 - </button> -->  
58 - <!-- #endif -->  
59 </view> 42 </view>
60 </view> 43 </view>
61 </view> 44 </view>
@@ -69,7 +52,7 @@ @@ -69,7 +52,7 @@
69 mapState 52 mapState
70 } from "vuex"; 53 } from "vuex";
71 import api from '@/api' 54 import api from '@/api'
72 - import { loginPasswordReg } from '@/plugins/utils.js' 55 + import { loginPasswordReg, useReLaunch, useShowToast,useShowModal,useNavigateTo } from '@/plugins/utils.js'
73 56
74 export default { 57 export default {
75 data() { 58 data() {
@@ -89,42 +72,69 @@ @@ -89,42 +72,69 @@
89 //#ifdef MP-WEIXIN 72 //#ifdef MP-WEIXIN
90 wx.login({ 73 wx.login({
91 success: (res) => { 74 success: (res) => {
92 - if (res.code) {  
93 - this.code = res.code;  
94 - //这里获取openid  
95 - } else {  
96 - return;  
97 - } 75 + if(!res.code)return
  76 + this.code = res.code;
98 }, 77 },
99 }); 78 });
100 //#endif 79 //#endif
101 uni.setStorageSync('getConfiguration', { 80 uni.setStorageSync('getConfiguration', {
102 isConfiguration: false 81 isConfiguration: false
103 }); 82 });
  83 + this.getPlateForm();
104 }, 84 },
105 computed: { 85 computed: {
106 - ...mapState(["plateInfo"]), 86 + passwordIcon(){
  87 + return this.showPassword ? '/static/eye-hide.png' : '/static/eye.png'
  88 + },
  89 + setHeadTitle(){
  90 + return this.mpOwnConfig.name !== undefined ? this.mpOwnConfig.name : "ThingsKit"
  91 + },
  92 + setLoginBg(){
  93 + return 'url('+(this.mpOwnConfig.bg !== undefined ? this.mpOwnConfig.bg : `${this.defaultLogo}`) +')'
  94 + }
107 }, 95 },
108 onShow() { 96 onShow() {
109 uni.setStorageSync('getConfiguration', { 97 uni.setStorageSync('getConfiguration', {
110 isConfiguration: false 98 isConfiguration: false
111 }); 99 });
112 - this.getPlateForm();  
113 }, 100 },
114 methods: { 101 methods: {
  102 + ...mapState(["plateInfo"]),
  103 + ...mapMutations(["setUserInfo", "setPlateInfo"]),
  104 + ...mapActions(["updateBadgeTotal"]),
115 //获取平台定制信息 105 //获取平台定制信息
116 async getPlateForm() { 106 async getPlateForm() {
117 const res = await api.loginApi.getPlateCustomApi() 107 const res = await api.loginApi.getPlateCustomApi()
118 - if (res) {  
119 - this.mpOwnConfig = {  
120 - bg: res.background,  
121 - logo: res.logo,  
122 - name: res.name,  
123 - }; 108 + if(!res) return
  109 + this.mpOwnConfig = {
  110 + bg: res.background,
  111 + logo: res.logo,
  112 + name: res.name,
  113 + };
  114 + },
  115 + saveLoginInfo(res,isThirdLoginAndNoDind,isThirdLogin,toastText){
  116 + let tokenInfo = {
  117 + refreshToken: res.refreshToken,
  118 + isToken: res.token,
  119 + };
  120 + let userInfo = {
  121 + ...tokenInfo,
  122 + token: true, //token用于判断是否登录
  123 + isThirdLoginAndNoDind, //用于判断是否是第三方登录并且不需要绑定账号
  124 + isThirdLogin,//用于判断是否是第三方登录并且需要绑定账号
  125 + thirdUserId: res.thirdUserId,
  126 + };
  127 + //设置全局变量openId
  128 + getApp().globalData.openId = res.thirdUserId;
  129 + if (userInfo.token) {
  130 + this.setUserInfo(userInfo);
124 } 131 }
  132 + useShowToast(toastText).then(async (res) => {
  133 + this.saveUserInfo();
  134 + await this.getAlarmTotalData();
  135 + useReLaunch("/pages/personal/personal")
  136 + });
125 }, 137 },
126 - ...mapMutations(["setUserInfo", "setPlateInfo"]),  
127 - ...mapActions(["updateBadgeTotal"]),  
128 //微信授权登录 138 //微信授权登录
129 //#ifdef MP-WEIXIN 139 //#ifdef MP-WEIXIN
130 handleWenxinAuthorization() { 140 handleWenxinAuthorization() {
@@ -136,53 +146,25 @@ @@ -136,53 +146,25 @@
136 reswenxin.encryptedData 146 reswenxin.encryptedData
137 ) { 147 ) {
138 //获取用户信息 148 //获取用户信息
139 - let obj = { 149 + let wenxinUserInfo = {
140 avatarUrl: reswenxin.userInfo.avatarUrl, 150 avatarUrl: reswenxin.userInfo.avatarUrl,
141 thirdUserId: this.openid, 151 thirdUserId: this.openid,
142 }; 152 };
143 const res = await api.loginApi.getThirdLoginApi(this.code) 153 const res = await api.loginApi.getThirdLoginApi(this.code)
144 - if (res.token == "" || (res.token == null && res.thirdUserId)) {  
145 - //需要绑定 154 + if (!res.token && res.thirdUserId) {
  155 + //需要进行三方绑定
146 let userInfo = { 156 let userInfo = {
147 isThirdLogin: true, //用于判断是否是第三方登录并且需要绑定账号 157 isThirdLogin: true, //用于判断是否是第三方登录并且需要绑定账号
148 - avatar: obj.avatarUrl, 158 + avatar: wenxinUserInfo.avatarUrl,
149 thirdUserId: res.thirdUserId, 159 thirdUserId: res.thirdUserId,
150 }; 160 };
151 this.setUserInfo(userInfo); 161 this.setUserInfo(userInfo);
152 //设置全局变量openId 162 //设置全局变量openId
153 getApp().globalData.openId = res.thirdUserId; 163 getApp().globalData.openId = res.thirdUserId;
154 - uni.reLaunch({  
155 - url: "../../pages/personal/personal",  
156 - }); 164 + useReLaunch("/pages/personal/personal")
157 } else { 165 } else {
158 // 不需要绑定,直接第三方登录使用 166 // 不需要绑定,直接第三方登录使用
159 - let resObj = {  
160 - refreshToken: res.refreshToken,  
161 - isToken: res.token,  
162 - };  
163 - let userInfo = {  
164 - ...resObj,  
165 - token: true, //token用于判断是否登录  
166 - isThirdLoginAndNoDind: true, //用于判断是否是第三方登录并且不需要绑定账号  
167 - thirdUserId: res.thirdUserId,  
168 - };  
169 - //设置全局变量openId  
170 - getApp().globalData.openId = res.thirdUserId;  
171 - if (userInfo.token) {  
172 - this.setUserInfo(userInfo);  
173 - }  
174 - uni  
175 - .showToast({  
176 - title: "第三方账号登录成功",  
177 - icon: "none",  
178 - })  
179 - .then(async (res) => {  
180 - this.saveUserInfo();  
181 - await this.getAlarmTotalData();  
182 - uni.reLaunch({  
183 - url: "/pages/personal/personal",  
184 - });  
185 - }); 167 + this.saveLoginInfo(res,true,null,"第三方账号登录成功")
186 } 168 }
187 } 169 }
188 }, 170 },
@@ -193,107 +175,35 @@ @@ -193,107 +175,35 @@
193 }); 175 });
194 }, 176 },
195 //#endif 177 //#endif
196 - //#ifdef APP-PLUS  
197 - // handleAppPlusAuthorization() {  
198 - // var that = this;  
199 - // uni.getProvider({  
200 - // service: 'oauth',  
201 - // success: function(res) {  
202 - // if (~res.provider.indexOf('weixin')) {  
203 - // uni.login({  
204 - // provider: 'weixin',  
205 - // success: function(loginRes) {  
206 - // // loginRes 包含access_token,expires_in,openid,unionid等信息  
207 - // uni.showToast({  
208 - // title: "第三方账号登录成功",  
209 - // icon: "none",  
210 - // })  
211 - // },  
212 - // fail: function(res) {  
213 - // // that.$refs.uToast.show({  
214 - // // title: '微信登录失败',  
215 - // // type: 'warning'  
216 - // // });  
217 - // }  
218 - // });  
219 - // }  
220 - // }  
221 - // });  
222 - // },  
223 - //#endif  
224 async saveUserInfo() { 178 async saveUserInfo() {
225 const userInfoRes = await api.loginApi.setUserInfoApi() 179 const userInfoRes = await api.loginApi.setUserInfoApi()
226 const plateInfoRes = await api.loginApi.setPlateInfoApi() 180 const plateInfoRes = await api.loginApi.setPlateInfoApi()
227 - if (userInfoRes) {  
228 - this.setUserInfo(userInfoRes);  
229 - }  
230 - if (plateInfoRes) {  
231 - this.setPlateInfo(plateInfoRes);  
232 - } 181 + Promise.all([userInfoRes,plateInfoRes]).then(res=>{
  182 + this.setUserInfo(res[0])
  183 + this.setPlateInfo(res[0])
  184 + })
233 }, 185 },
234 async getAlarmTotalData() { 186 async getAlarmTotalData() {
235 const res = await api.loginApi.getAlarmTotalApi() 187 const res = await api.loginApi.getAlarmTotalApi()
236 - if (res) {  
237 - this.updateBadgeTotal(res.totalAlarm?.activedAlarm);  
238 - } 188 + if(!res) return
  189 + this.updateBadgeTotal(res.totalAlarm?.activedAlarm);
239 }, 190 },
240 async onSubmitFunc() { 191 async onSubmitFunc() {
241 - if (this.loginForm.username == "") {  
242 - return uni.$u.toast("请输入登录账号~");  
243 - }  
244 - if (this.loginForm.password == "") {  
245 - uni.showToast({  
246 - title: "请输入登录密码~",  
247 - icon: "none",  
248 - });  
249 - return;  
250 - } else if (!loginPasswordReg.test(this.loginForm.password)) {  
251 - uni.showModal({  
252 - title: "提示",  
253 - content: "密码格式不正确(至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符)~",  
254 - showCancel: false,  
255 - });  
256 - return;  
257 - } 192 + const validateValue = Object.values(this.loginForm)
  193 + if(!validateValue[0])return uni.$u.toast("请输入登录账号~");
  194 + if(!validateValue[1])return uni.$u.toast("请输入登录密码~");
  195 + if(!loginPasswordReg.test(validateValue[1])) return useShowModal("密码格式不正确(至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符)~",)
258 const res = await api.loginApi.postLoginApi(this.loginForm) 196 const res = await api.loginApi.postLoginApi(this.loginForm)
259 if (res) { 197 if (res) {
260 // 储存登录信息 198 // 储存登录信息
261 - let resObj = {  
262 - refreshToken: res.refreshToken,  
263 - isToken: res.token,  
264 - };  
265 - let userInfo = {  
266 - ...resObj,  
267 - token: true, //token用于判断是否登录  
268 - isThirdLogin: false,  
269 - isThirdLoginAndNoDind: false,  
270 - };  
271 - if (userInfo.token) {  
272 - this.setUserInfo(userInfo);  
273 - }  
274 - uni  
275 - .showToast({  
276 - title: "登录成功~",  
277 - icon: "none",  
278 - })  
279 - .then(async (res) => {  
280 - await this.saveUserInfo();  
281 - await this.getAlarmTotalData();  
282 - uni.reLaunch({  
283 - url: "/pages/personal/personal",  
284 - });  
285 - }); 199 + this.saveLoginInfo(res,false,false,"登录成功~")
286 } 200 }
287 }, 201 },
288 openCodeFunc() { 202 openCodeFunc() {
289 - uni.navigateTo({  
290 - url: "../other/code",  
291 - }); 203 + useNavigateTo("../other/code")
292 }, 204 },
293 findPassrordFunc() { 205 findPassrordFunc() {
294 - uni.navigateTo({  
295 - url: "../other/findPassword",  
296 - }); 206 + useNavigateTo("../other/findPassword")
297 }, 207 },
298 showPasswordMode() { 208 showPasswordMode() {
299 this.showPassword = !this.showPassword; 209 this.showPassword = !this.showPassword;
@@ -28,14 +28,14 @@ @@ -28,14 +28,14 @@
28 } 28 }
29 } 29 }
30 30
31 -.f__login { 31 +.login-body {
32 padding: 8rpx 32rpx; 32 padding: 8rpx 32rpx;
33 border-radius: 18rpx 18rpx 0 0; 33 border-radius: 18rpx 18rpx 0 0;
34 z-index: 99; 34 z-index: 99;
35 position: relative; 35 position: relative;
36 } 36 }
37 37
38 -.loginPhone { 38 +.login-phone {
39 .form-row { 39 .form-row {
40 justify-content: space-between; 40 justify-content: space-between;
41 margin-top: 30rpx; 41 margin-top: 30rpx;