perf: app 优化登录页代码

@@ -145,7 +145,7 @@ export function formatToDate(date = undefined, format = DATE_TIME_FORMAT) {
 }
 
 //封装uniapp跳转 navigateTo
-export const useNavigateTo=(path,param)=>{
+export const useNavigateTo = (path,param)=>{
 	if (!path) return
 	if(param){
 		uni.navigateTo({
@@ -156,4 +156,41 @@ export const useNavigateTo=(path,param)=>{
 			url:path
 		});
 	}
-}
\ No newline at end of file
+}
+
+//封装uniapp跳转 reLaunch
+export const useReLaunch = (url)=>{
+	uni.reLaunch({url});
+}
+
+//封装uniapp showToast
+export const useShowToast=(title)=>{
+  return new Promise((resolve,reject)=>{
+    uni.showToast({
+      title: title,
+      icon: 'none',
+      success :(res) =>{
+        resolve(res);
+      },
+      fail:(err)=>{
+        reject(err);
+      }
+    })
+  })
+}
+
+//封装uniapp showModal
+export const useShowModal=(content)=>{
+  return new Promise((resolve,reject)=>{
+    uni.showModal({
+      title: '提示',
+      content: content,
+      success :(res) =>{
+        resolve(res);
+      },
+      fail:(err)=>{
+        reject(err);
+      }
+    })
+  })
+}

 <template>
-	<view class="login-page" :style="{
-      backgroundImage:
-        'url(' +
-        (mpOwnConfig.bg !== undefined ? mpOwnConfig.bg : `${defaultLogo}`) +
-        ')',
-    }">
+	<view class="login-page" :style="{backgroundImage:setLoginBg}">
 		<!-- 公共组件-每个页面必须引入 -->
 		<public-module></public-module>
 		<view class="u-flex login-main">
 			<view class="content">
 				<view class="hello login-text-muted">您好,</view>
-				<view style="width: 587rpx;" class="text-clip hello-welcome login-text-muted">欢迎来到{{
-            mpOwnConfig.name !== undefined ? mpOwnConfig.name : "ThingsKit"
-          }}!</view>
+				<view style="width: 587rpx;" class="text-clip hello-welcome login-text-muted">欢迎来到{{setHeadTitle}}!</view>
 			</view>
 		</view>
-
-		<view class="f__login">
-			<view class="loginPhone">
+		<view class="login-body">
+			<view class="login-phone">
 				<view class="form-row u-flex">
 					<u-input :adjust-position="false" v-model="loginForm.username" type="text" placeholder="请输入登录账号"
 						border="bottom" />
@@ -27,9 +19,7 @@
 						placeholder="请输入登录密码" border="bottom">
 						<template slot="suffix">
 							<view @click="showPasswordMode" style="padding: 10rpx">
-								<u-icon width="18" height="14" :name="
-                    showPassword ? '/static/eye-hide.png' : '/static/eye.png'
-                  "></u-icon>
+								<u-icon width="18" height="14" :name="passwordIcon"></u-icon>
 							</view>
 						</template>
 					</u-input>
@@ -46,16 +36,9 @@
 					<view class="link-text login-text-gray">第三方账号登录</view>
 					<view style="height: 20rpx"></view>
 					<button class="link-image" @tap="handleWenxinAuthorization">
-						<image class="image" src="../../static/weixin.png" mode="aspectFill"></image>
+						<image class="image" src="/static/weixin.png" mode="aspectFill"></image>
 					</button>
 					<!-- #endif -->
-					<!-- #ifdef APP-PLUS -->
-					<!-- 	<view class="link-text login-text-gray">第三方账号登录</view>
-					<view style="height: 20rpx"></view>
-					<button class="link-image" @click="handleAppPlusAuthorization">
-						<image class="image" src="../../static/weixin.png" mode="aspectFill"></image>
-					</button> -->
-					<!-- #endif -->
 				</view>
 			</view>
 		</view>
@@ -69,7 +52,7 @@
 		mapState
 	} from "vuex";
 	import api from '@/api'
-	import { loginPasswordReg } from '@/plugins/utils.js'
+	import { loginPasswordReg, useReLaunch, useShowToast,useShowModal,useNavigateTo } from '@/plugins/utils.js'
 
 	export default {
 		data() {
@@ -89,42 +72,69 @@
 			//#ifdef MP-WEIXIN
 			wx.login({
 				success: (res) => {
-					if (res.code) {
-						this.code = res.code;
-						//这里获取openid
-					} else {
-						return;
-					}
+					if(!res.code)return
+					this.code = res.code;
 				},
 			});
 			//#endif
 			uni.setStorageSync('getConfiguration', {
 				isConfiguration: false
 			});
+			this.getPlateForm();
 		},
 		computed: {
-			...mapState(["plateInfo"]),
+			passwordIcon(){
+				return this.showPassword ? '/static/eye-hide.png' : '/static/eye.png'
+			},
+			setHeadTitle(){
+				return this.mpOwnConfig.name !== undefined ?  this.mpOwnConfig.name : "ThingsKit"
+			},
+			setLoginBg(){
+				return 'url('+(this.mpOwnConfig.bg !== undefined ? this.mpOwnConfig.bg : `${this.defaultLogo}`) +')'
+			}
 		},
 		onShow() {
 			uni.setStorageSync('getConfiguration', {
 				isConfiguration: false
 			});
-			this.getPlateForm();
 		},
 		methods: {
+			...mapState(["plateInfo"]),
+			...mapMutations(["setUserInfo", "setPlateInfo"]),
+			...mapActions(["updateBadgeTotal"]),
 			//获取平台定制信息
 			async getPlateForm() {
 				const res = await api.loginApi.getPlateCustomApi()
-				if (res) {
-					this.mpOwnConfig = {
-						bg: res.background,
-						logo: res.logo,
-						name: res.name,
-					};
+				if(!res) return
+				this.mpOwnConfig = {
+					bg: res.background,
+					logo: res.logo,
+					name: res.name,
+				};
+			},
+			saveLoginInfo(res,isThirdLoginAndNoDind,isThirdLogin,toastText){
+				let tokenInfo = {
+					refreshToken: res.refreshToken,
+					isToken: res.token,
+				};
+				let userInfo = {
+					...tokenInfo,
+					token: true, //token用于判断是否登录
+					isThirdLoginAndNoDind, //用于判断是否是第三方登录并且不需要绑定账号
+					isThirdLogin,//用于判断是否是第三方登录并且需要绑定账号
+					thirdUserId: res.thirdUserId,
+				};
+				//设置全局变量openId
+				getApp().globalData.openId = res.thirdUserId;
+				if (userInfo.token) {
+					this.setUserInfo(userInfo);
 				}
+				useShowToast(toastText).then(async (res) => {
+					this.saveUserInfo();
+					await this.getAlarmTotalData();
+					useReLaunch("/pages/personal/personal")
+				});
 			},
-			...mapMutations(["setUserInfo", "setPlateInfo"]),
-			...mapActions(["updateBadgeTotal"]),
 			//微信授权登录
 			//#ifdef MP-WEIXIN
 			handleWenxinAuthorization() {
@@ -136,53 +146,25 @@
 							reswenxin.encryptedData
 						) {
 							//获取用户信息
-							let obj = {
+							let wenxinUserInfo = {
 								avatarUrl: reswenxin.userInfo.avatarUrl,
 								thirdUserId: this.openid,
 							};
 							const res = await api.loginApi.getThirdLoginApi(this.code)
-							if (res.token == "" || (res.token == null && res.thirdUserId)) {
-								//需要绑定
+							if (!res.token  && res.thirdUserId) {
+								//需要进行三方绑定
 								let userInfo = {
 									isThirdLogin: true, //用于判断是否是第三方登录并且需要绑定账号
-									avatar: obj.avatarUrl,
+									avatar: wenxinUserInfo.avatarUrl,
 									thirdUserId: res.thirdUserId,
 								};
 								this.setUserInfo(userInfo);
 								//设置全局变量openId
 								getApp().globalData.openId = res.thirdUserId;
-								uni.reLaunch({
-									url: "../../pages/personal/personal",
-								});
+								useReLaunch("/pages/personal/personal")
 							} else {
 								// 不需要绑定,直接第三方登录使用
-								let resObj = {
-									refreshToken: res.refreshToken,
-									isToken: res.token,
-								};
-								let userInfo = {
-									...resObj,
-									token: true, //token用于判断是否登录
-									isThirdLoginAndNoDind: true, //用于判断是否是第三方登录并且不需要绑定账号
-									thirdUserId: res.thirdUserId,
-								};
-								//设置全局变量openId
-								getApp().globalData.openId = res.thirdUserId;
-								if (userInfo.token) {
-									this.setUserInfo(userInfo);
-								}
-								uni
-									.showToast({
-										title: "第三方账号登录成功",
-										icon: "none",
-									})
-									.then(async (res) => {
-										this.saveUserInfo();
-										await this.getAlarmTotalData();
-										uni.reLaunch({
-											url: "/pages/personal/personal",
-										});
-									});
+								this.saveLoginInfo(res,true,null,"第三方账号登录成功")
 							}
 						}
 					},
@@ -193,107 +175,35 @@
 				});
 			},
 			//#endif
-			//#ifdef APP-PLUS
-			// handleAppPlusAuthorization() {
-			// 	var that = this;
-			// 	uni.getProvider({
-			// 		service: 'oauth',
-			// 		success: function(res) {
-			// 			if (~res.provider.indexOf('weixin')) {
-			// 				uni.login({
-			// 					provider: 'weixin',
-			// 					success: function(loginRes) {
-			// 						// loginRes 包含access_token，expires_in，openid，unionid等信息
-			// 						uni.showToast({
-			// 							title: "第三方账号登录成功",
-			// 							icon: "none",
-			// 						})
-			// 					},
-			// 					fail: function(res) {
-			// 						// that.$refs.uToast.show({
-			// 						// 	title: '微信登录失败',
-			// 						// 	type: 'warning'
-			// 						// });
-			// 					}
-			// 				});
-			// 			}
-			// 		}
-			// 	});
-			// },
-			//#endif
 			async saveUserInfo() {
 				const userInfoRes = await api.loginApi.setUserInfoApi()
 				const plateInfoRes = await api.loginApi.setPlateInfoApi()
-				if (userInfoRes) {
-					this.setUserInfo(userInfoRes);
-				}
-				if (plateInfoRes) {
-					this.setPlateInfo(plateInfoRes);
-				}
+				Promise.all([userInfoRes,plateInfoRes]).then(res=>{
+					this.setUserInfo(res[0])
+					this.setPlateInfo(res[0])
+				})
 			},
 			async getAlarmTotalData() {
 				const res = await api.loginApi.getAlarmTotalApi()
-				if (res) {
-					this.updateBadgeTotal(res.totalAlarm?.activedAlarm);
-				}
+				if(!res) return
+				this.updateBadgeTotal(res.totalAlarm?.activedAlarm);
 			},
 			async onSubmitFunc() {
-				if (this.loginForm.username == "") {
-					return uni.$u.toast("请输入登录账号~");
-				}
-				if (this.loginForm.password == "") {
-					uni.showToast({
-						title: "请输入登录密码~",
-						icon: "none",
-					});
-					return;
-				} else if (!loginPasswordReg.test(this.loginForm.password)) {
-					uni.showModal({
-						title: "提示",	
-						content: "密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~",
-						showCancel: false,
-					});
-					return;
-				}
+				const validateValue = Object.values(this.loginForm)
+				if(!validateValue[0])return uni.$u.toast("请输入登录账号~");
+				if(!validateValue[1])return uni.$u.toast("请输入登录密码~");
+				if(!loginPasswordReg.test(validateValue[1])) return useShowModal("密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~",)
 				const res = await api.loginApi.postLoginApi(this.loginForm)
 				if (res) {
 					// 储存登录信息
-					let resObj = {
-						refreshToken: res.refreshToken,
-						isToken: res.token,
-					};
-					let userInfo = {
-						...resObj,
-						token: true, //token用于判断是否登录
-						isThirdLogin: false,
-						isThirdLoginAndNoDind: false,
-					};
-					if (userInfo.token) {
-						this.setUserInfo(userInfo);
-					}
-					uni
-						.showToast({
-							title: "登录成功~",
-							icon: "none",
-						})
-						.then(async (res) => {
-							await this.saveUserInfo();
-							await this.getAlarmTotalData();
-							uni.reLaunch({
-								url: "/pages/personal/personal",
-							});
-						});
+					this.saveLoginInfo(res,false,false,"登录成功~")
 				}
 			},
 			openCodeFunc() {
-				uni.navigateTo({
-					url: "../other/code",
-				});
+				useNavigateTo("../other/code")
 			},
 			findPassrordFunc() {
-				uni.navigateTo({
-					url: "../other/findPassword",
-				});
+				useNavigateTo("../other/findPassword")
 			},
 			showPasswordMode() {
 				this.showPassword = !this.showPassword;

@@ -28,14 +28,14 @@
 	}
 }
 
-.f__login {
+.login-body {
 	padding: 8rpx 32rpx;
 	border-radius: 18rpx 18rpx 0 0;
 	z-index: 99;
 	position: relative;
 }
 
-.loginPhone {
+.login-phone {
 	.form-row {
 		justify-content: space-between;
 		margin-top: 30rpx;