fix

virgo.wzfrontend/workark/public/index.html

@@ -7,7 +7,7 @@
 		<link rel="icon" href="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/2f7b4bfaf9e64817bc2cb46f3a632b01">
 		<title>WORKARK</title>
 		<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>reset.css" />
-		<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>/font/font.css" />
+		<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>font/font.css" />
 		<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4358860_x6rz68eryv.css">
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>

virgo.wzfrontend/workark/src/layout/components/indexNav.vue

@@ -60,6 +60,7 @@
 			logout() {
 				this.$confirm('是否要退出登录?', () => {
 					removeToken();
+					this.$chat.disConnect();
 					this.$store.dispatch('app/resetState');
 					this.$message.success('退出成功');
 					this.init();

virgo.wzfrontend/workark/src/layout/components/login.vue

@@ -4,29 +4,43 @@
 			<div class="close-icon-box">
 				<i class="el-icon-circle-close close-icon" @click="$emit('callback')"></i>
 			</div>
-			<div class="login-form">
+			<div class="login-form">
+				<div class="login-tab" :class="{
+						active1:nowTab.id === 1,
+						active2:nowTab.id === 2
+					}">
+					<div class="tab-item" :class="{
+						active:nowTab.id === tab.id
+					}" v-for="(tab, index) in tabs" :key="index" @click="nowTab = tab">
+						{{ tab.name }}
+					</div>
+				</div>
 				<el-form :model="loginForm" :rules="loginRules" status-icon ref="loginForm" label-position="left">
 					<el-form-item prop="phone">
 						<el-input type="text" prefix-icon="iconfont huifont-shoujihao" v-model="loginForm.phone"
 							placeholder="手机号" maxlength="11">
 						</el-input>
 					</el-form-item>
-					<el-form-item prop="code" class="image-item">
-						<el-input type="text" prefix-icon="iconfont huifont-tuxingyanzhengma" v-model="loginForm.code"
-							placeholder="图片验证码" maxlength="4"></el-input>
-						<img v-if="codeImg" :src="codeImg" alt="图片验证码" class="code-image" @click="imgCodeFunc">
-					</el-form-item>
-					<el-form-item prop="phoneCode" class="phone-code">
-						<el-input type="number" prefix-icon="iconfont huifont-duanxinyanzhengma"
-							v-model="loginForm.phoneCode" placeholder="短信验证码"
-							oninput="if(value.length > 6) value=value.slice(0, 6)">
-						</el-input>
-						<div class="get-code-btn">
-							<el-button type="primary" size="samll" @click="getPhoneCode"
-								:disabled="codeName !== '获取验证码'">
-								{{codeName}}
-							</el-button>
-						</div>
+					<el-form-item prop="code" class="image-item" v-if="nowTab.id === 1">
+						<el-input type="text" prefix-icon="iconfont huifont-tuxingyanzhengma" v-model="loginForm.code"
+							placeholder="图片验证码" maxlength="4"></el-input>
+						<img v-if="codeImg" :src="codeImg" alt="图片验证码" class="code-image" @click="imgCodeFunc">
+					</el-form-item>
+					<el-form-item prop="phoneCode" class="phone-code" v-if="nowTab.id === 1">
+						<el-input type="number" prefix-icon="iconfont huifont-duanxinyanzhengma"
+							v-model="loginForm.phoneCode" placeholder="短信验证码"
+							oninput="if(value.length > 6) value=value.slice(0, 6)">
+						</el-input>
+						<div class="get-code-btn">
+							<el-button type="primary" size="samll" @click="getPhoneCode" :disabled="codeName !== '获取验证码'">
+								{{codeName}}
+							</el-button>
+						</div>
+					</el-form-item>
+					<el-form-item prop="password" v-if="nowTab.id === 2">
+						<el-input type="password" prefix-icon="iconfont huifont-mima" v-model="loginForm.password"
+							:show-password="true" placeholder="请输入密码">
+						</el-input>
 					</el-form-item>
 				</el-form>
 				<el-button class="submit" type="primary" @click="loginSubmit" :loading="loginLoading">登录</el-button>
@@ -53,7 +67,8 @@
 				loginForm: {
 					phone: '',
 					code: '',
-					phoneCode: ''
+					phoneCode: '',
+					password: ''
 				},
 				loginLoading: false,
 				codeImg: '',
@@ -84,7 +99,18 @@
 						message: '请输入短信验证码',
 						trigger: 'blur'
 					}]
-				},
+				},
+				tabs: [{
+					id: 1,
+					name: '验证码登录'
+				}, {
+					id: 2,
+					name: '账号密码登录'
+				}],
+				nowTab: {
+					id: 1,
+					name: '验证码登录'
+				}
 			};
 		},
 		mounted() {
@@ -182,7 +208,48 @@
 	};
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>
+	.login-tab {
+		display: flex;
+		border: 1px solid #bebebe;
+		margin-bottom: 28px;
+		height: 36px;
+		border-radius: 4px;
+		align-items: center;
+		position: relative;
+	
+		&:before {
+			content: '';
+			position: absolute;
+			background: #bebebe;
+			width: 159px;
+			height: 28px;
+			border-radius: 4px;
+			z-index: 8;
+			transition: left 0.3s;
+		}
+	
+		&.active1:before {
+			left: 4px;
+		}
+	
+		&.active2:before {
+			left: 167px;
+		}
+	}
+	
+	.tab-item {
+		flex: 1;
+		text-align: center;
+		z-index: 9;
+		cursor: pointer;
+		transition: color 0.3s;
+	
+		&.active {
+			color: #fff;
+		}
+	}
+	
 	.website-login-box {
 		width: 100%;
 		height: 100%;

virgo.wzfrontend/workark/src/views/login/login.vue

@@ -1,22 +1,32 @@
 <template>
 	<div class="login-box">
 		<div class="login-title">
-			<div class="login-title-value">登录</div>
+			<div class="login-title-value">{{nowTab.name}}</div>
 			<div class="login-title-line"></div>
 		</div>
 		<div class="login-form">
+			<div class="login-tab" :class="{
+					active1:nowTab.id === 1,
+					active2:nowTab.id === 2
+				}">
+				<div class="tab-item" :class="{
+					active:nowTab.id === tab.id
+				}" v-for="(tab, index) in tabs" :key="index" @click="nowTab = tab">
+					{{ tab.name }}
+				</div>
+			</div>
 			<el-form :model="loginForm" :rules="loginRules" status-icon ref="loginForm" label-position="left">
 				<el-form-item prop="phone">
 					<el-input type="text" prefix-icon="iconfont huifont-shoujihao" v-model="loginForm.phone"
 						placeholder="手机号" maxlength="11">
 					</el-input>
 				</el-form-item>
-				<el-form-item prop="code" class="image-item">
+				<el-form-item prop="code" class="image-item" v-if="nowTab.id === 1">
 					<el-input type="text" prefix-icon="iconfont huifont-tuxingyanzhengma" v-model="loginForm.code"
 						placeholder="图片验证码" maxlength="4"></el-input>
 					<img v-if="codeImg" :src="codeImg" alt="图片验证码" class="code-image" @click="imgCodeFunc">
 				</el-form-item>
-				<el-form-item prop="phoneCode" class="phone-code">
+				<el-form-item prop="phoneCode" class="phone-code" v-if="nowTab.id === 1">
 					<el-input type="number" prefix-icon="iconfont huifont-duanxinyanzhengma"
 						v-model="loginForm.phoneCode" placeholder="短信验证码"
 						oninput="if(value.length > 6) value=value.slice(0, 6)">
@@ -27,6 +37,11 @@
 						</el-button>
 					</div>
 				</el-form-item>
+				<el-form-item prop="password" v-if="nowTab.id === 2">
+					<el-input type="password" prefix-icon="iconfont huifont-mima" v-model="loginForm.password"
+						:show-password="true" placeholder="请输入密码">
+					</el-input>
+				</el-form-item>
 			</el-form>
 			<el-button class="submit" type="primary" @click="loginSubmit" :loading="loginLoading">登录</el-button>
 		</div>
@@ -51,7 +66,8 @@
 				loginForm: {
 					phone: '',
 					code: '',
-					phoneCode: ''
+					phoneCode: '',
+					password: ''
 				},
 				loginLoading: false,
 				codeImg: '',
@@ -81,8 +97,24 @@
 						required: true,
 						message: '请输入短信验证码',
 						trigger: 'blur'
+					}],
+					password: [{
+						required: true,
+						message: '请输入密码',
+						trigger: 'blur'
 					}]
 				},
+				tabs: [{
+					id: 1,
+					name: '验证码登录'
+				}, {
+					id: 2,
+					name: '账号密码登录'
+				}],
+				nowTab: {
+					id: 1,
+					name: '验证码登录'
+				}
 			};
 		},
 		mounted() {
@@ -140,10 +172,13 @@
 				})
 			},
 			loginFunc() {
-				let postData = {
+				let postData = this.nowTab.id === 1 ? {
 					phone: this.loginForm.phone,
 					phoneCode: this.loginForm.phoneCode
-				}
+				} : {
+					phone: this.loginForm.phone,
+					password: this.loginForm.password
+				};
 				login(postData).then(res => {
 					if (res.state) {
 						setToken(res.data.token);
@@ -170,7 +205,7 @@
 					}
 				})
 			},
-			successLogin(url) {
+			successLogin(url) {
 				this.$chat.connect();
 				this.loginLoading = false;
 				this.$router.push(url);
@@ -181,6 +216,47 @@
 </script>
 
 <style lang="scss" scoped>
+	.login-tab {
+		display: flex;
+		border: 1px solid #bebebe;
+		margin-bottom: 28px;
+		height: 36px;
+		border-radius: 4px;
+		align-items: center;
+		position: relative;
+
+		&:before {
+			content: '';
+			position: absolute;
+			background: #bebebe;
+			width: 159px;
+			height: 28px;
+			border-radius: 4px;
+			z-index: 8;
+			transition: left 0.3s;
+		}
+
+		&.active1:before {
+			left: 4px;
+		}
+
+		&.active2:before {
+			left: 167px;
+		}
+	}
+
+	.tab-item {
+		flex: 1;
+		text-align: center;
+		z-index: 9;
+		cursor: pointer;
+		transition: color 0.3s;
+
+		&.active {
+			color: #fff;
+		}
+	}
+
 	.login-box {
 		width: 440px;
 		background: $--color-white;
@@ -191,7 +267,7 @@
 	}
 
 	.login-title {
-		padding: 52px 52px 48px 52px;
+		padding: 52px 52px 20px 52px;
 	}
 
 	.login-title-value {