登录页

src/views/sys/login/components/login-form.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="login-form-wrapper">
 		<div class="login_config">
-			<el-dropdown trigger="click" placement="bottom-end">
+			<!--<el-dropdown trigger="click" placement="bottom-end">
 				<el-button circle text>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -36,71 +36,131 @@
 						>
 					</el-dropdown-menu>
 				</template>
-			</el-dropdown>
+			</el-dropdown>-->
 		</div>
-		<div class="login-form-title">登录</div>
-		<div class="login-form-sub-title">{{ $t2("t_login_description") }}</div>
-		<div class="login-form-error-msg">{{ errorMessage }}</div>
-		<el-form
-			ref="loginForm"
-			:model="inputForm"
-			size="large"
-			:rules="rules"
-			class="login-form"
-			@keyup.enter="login()"
-			@submit.prevent
-		>
-			<el-form-item prop="username">
-				<el-input
-					prefix-icon="user"
-					placeholder="请输入账号"
-					clearable
-					v-model="inputForm.username"
-					@blur="getLoginCodeNumber($event.target.value)"
-				></el-input>
-			</el-form-item>
-			<el-form-item prop="password">
-				<el-input
-					type="password"
-					prefix-icon="lock"
-					placeholder="请输入密码"
-					clearable
-					v-model="inputForm.password"
-				></el-input>
-			</el-form-item>
+		<div v-if="whichPage === '1'" class="login-border">
+			<div class="login-form-title">登录</div>
+			<div class="login-form-sub-title">{{ $t2("t_login_description") }}</div>
+			<div class="login-form-error-msg">{{ errorMessage }}</div>
+			<el-form
+				ref="loginForm"
+				:model="inputForm"
+				size="large"
+				:rules="rules"
+				class="login-form"
+				@keyup.enter="login()"
+				@submit.prevent
+			>
+				<el-form-item prop="username">
+					<el-input
+						prefix-icon="user"
+						placeholder="请输入账号"
+						clearable
+						v-model="inputForm.username"
+						@blur="getLoginCodeNumber($event.target.value)"
+					></el-input>
+				</el-form-item>
+				<el-form-item prop="password">
+					<el-input
+						type="password"
+						prefix-icon="lock"
+						placeholder="请输入密码"
+						clearable
+						v-model="inputForm.password"
+					></el-input>
+				</el-form-item>
 
-			<el-row :gutter="10" v-if="inputForm.isShow">
-				<el-col :span="16">
-					<el-form-item prop="code">
-						<el-input
-							placeholder="请输入验证码"
-							v-model="inputForm.code"
-							text
-							clearable
-						></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :span="8"
-					><el-image
-						@click="getCaptcha"
-						:src="captchaImg"
-						style="height: 34px"
-					></el-image
-				></el-col>
-			</el-row>
+				<el-form-item>
+					<el-row :gutter="10" v-if="inputForm.isShow">
+						<el-col :span="16">
+							<el-form-item prop="code">
+								<el-input
+									placeholder="请输入验证码"
+									v-model="inputForm.code"
+									text
+									clearable
+								></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="8"
+						><el-image
+							@click="getCaptcha"
+							:src="captchaImg"
+							style="height: 34px"
+						></el-image
+						></el-col>
+					</el-row>
+				</el-form-item>
+
+				<el-form-item>
+					<div style="width: 100%">
+						<div style ="margin-left: 5px;margin-bottom: 20px; float: left;height: 40px;line-height:40px;">
+							<!-- 记住我 -->
+							<el-checkbox v-model="checked" class="rememberMe">记住我</el-checkbox>
+						</div>
+						<!-- 找回密码 -->
+						<div style="float:right;margin-bottom: 20px;margin-right: 5px;color: #1890ff;">
+							<el-button style="float: right" type="text" @click="openForgetPassword" class="forgetPw">忘记密码</el-button>
+						</div>
+					</div>
+
+				</el-form-item>
 
-			<el-form-item>
-				<el-button
-					type="primary"
+				<el-form-item>
+					<el-button
+						type="primary"
+						:loading="loading"
+						class="login-submit"
+						@click="login"
+					>登录</el-button>
+				</el-form-item>
+			</el-form></div>
+		<div v-else-if="whichPage === '2'" class="login-border">
+			<div class="login-main">
+				<div class="login-form-title">修改密码</div>
+				<div class="login-form-sub-title">使用账号绑定的手机号找回密码</div>
+				<el-form
+					size="large"
+					ref="loginForm2"
+					:model="inputForm"
 					:loading="loading"
-					class="login-submit"
-					@click="login"
-					>登录</el-button
-				>
-			</el-form-item>
-			<el-form-item> </el-form-item>
-		</el-form>
+					:rules="rules"
+					class="login-form"
+					@keyup.enter.native="saveNewPass()"
+					@submit.native.prevent>
+					<el-form-item  prop="phoneNumber">
+						<el-input type="text" placeholder="请输入绑定手机号" v-model="inputForm.phoneNumber"></el-input>
+					</el-form-item>
+					<el-form-item  prop="phoneCode">
+						<el-input type="text" placeholder="请输入验证码" v-model="inputForm.phoneCode" style="width: 300px"></el-input>
+							<el-button slot="append" type="primary" @click="pushPhoneCode" :loading="!showPhoneCode" style="background-color: #3595f9;width: 100px">
+							<span v-if="showPhoneCode" style="color: blue">获取验证码</span>
+							<span v-else class="count" style="color: blue">请等待 {{count}} s</span>
+						</el-button>
+					</el-form-item>
+					<el-form-item prop="newPassword">
+						<el-input type="password" placeholder="新密码" v-model="inputForm.newPassword"></el-input>
+					</el-form-item>
+					<el-form-item prop="newPasswordAgain">
+						<el-input type="password" placeholder="确认密码" v-model="inputForm.newPasswordAgain"></el-input>
+					</el-form-item>
+					<el-form-item style="float:right;margin-bottom: 20px;color: #1890ff;">
+						<!-- 返回登录页面 -->
+						<div >
+							<el-button type="text" @click="backLogin()" class="forgetPw">前往登录页面</el-button>
+						</div>
+					</el-form-item>
+
+					<el-form-item>
+						<el-button type="primary" :loading="loading" class="login-submit" @click="saveNewPass">保存</el-button>
+					</el-form-item>
+
+
+				</el-form>
+			</div>
+		</div>
 	</div>
+
 </template>
 
 <script>
@@ -117,11 +177,18 @@ export default {
 			loading: false,
 			isShow: false,
 			captchaImg: "",
+			checked: false,
 			inputForm: {
 				username: "",
 				password: "",
 				uuid: "",
 				captcha: "",
+				/*修改密码*/
+				phoneNumber:'',
+				phoneCode:'',
+				oldPassword: '',
+				newPassword: '',
+				newPasswordAgain: ''
 			},
 			rules: {
 				username: [
@@ -145,8 +212,27 @@ export default {
 						trigger: "blur",
 					},
 				],
+				phoneNumber: [
+					{required: true, message: '手机号不能为空', trigger: 'blur'}
+				],
+				phoneCode: [
+					{required: true, message: '验证码不能为空', trigger: 'blur'}
+				],
+				oldPassword: [
+					{required: true, message: '旧密码不能为空', trigger: 'blur'}
+				],
+				newPassword: [
+					{required: true, message: '新的密码不能为空', trigger: 'blur'}
+				],
+				newPasswordAgain: [
+					{required: true, message: '再次输入的新密码不能为空', trigger: 'blur'}
+				]
 			},
 			captchaPath: "",
+			whichPage: '1', // 1为登录页面，2为忘记密码页面
+			showPhoneCode: true,
+			count: '', // 初始化次数
+			timer: null
 		};
 	},
 	created() {
@@ -288,6 +374,82 @@ export default {
 			this.$TOOL.data.set("APP_LANG", language);
 			this.$store.commit("updateLanguage", language);
 		},
+		openForgetPassword () {
+			this.inputForm.username = ''
+			this.inputForm.password = ''
+			this.inputForm.code = ''
+			this.$refs.loginForm.resetFields()
+			this.$nextTick(() => {
+				this.whichPage = '2' // 打开忘记密码页面
+			})
+		},
+		backLogin () {
+			this.inputForm.phoneNumber = ''
+			this.inputForm.phoneCode = ''
+			this.inputForm.newPassword = ''
+			this.inputForm.newPasswordAgain = ''
+			this.$refs.loginForm2.resetFields()
+			this.whichPage = '1' // 打开登录页面
+		},
+		pushPhoneCode () {
+			// 验证手机号码格式是否正确
+			if (this.commonJS.isNotEmpty(this.inputForm.phoneNumber) && this.validateXG.isMobile(this.inputForm.phoneNumber)) {
+				// 向手机号发送验证码
+				loginService.getPhoneCode(this.inputForm.phoneNumber).then((data) => {
+					if (data.success) {
+						this.$message.success(data.message)
+						// ‘发送验证码’按钮倒计时
+						const TIME_COUNT = 60 // 更改倒计时时间
+						if (!this.timer) {
+							this.count = TIME_COUNT
+							this.showPhoneCode = false
+							this.timer = setInterval(() => {
+								if (this.count > 0 && this.count <= TIME_COUNT) {
+									this.count--
+								} else {
+									this.showPhoneCode = true
+									clearInterval(this.timer) // 清除定时器
+									this.timer = null
+								}
+							}, 1000)
+						}
+					} else {
+						this.$message.error(data.message)
+					}
+				})
+			} else {
+				this.$message.error('请填写正确的手机号')
+			}
+		},
+		saveNewPass () {
+			this.loading = true
+			this.$refs['loginForm2'].validate((valid) => {
+				if (valid) {
+					if (this.inputForm.newPassword !== this.inputForm.newPasswordAgain) {
+						this.loading = false
+						this.$message.error('两次输入的密码不相同，请重新输入!')
+						throw new Error('两次输入的密码不相同，请重新输入!')
+					}
+					loginService.savePwd(this.inputForm).then((data) => {
+						if (data.success) {
+							this.$message.success(data1.message)
+							this.inputForm.username = this.inputForm.phoneNumber
+							this.inputForm.newPassword = this.inputForm.newPassword
+							this.backLogin() // 修改密码成功后返回登录页面
+							this.loading = false
+						} else {
+							this.$message.error(data.message)
+							this.loading = false
+						}
+					}).catch(() => {
+						this.loading = false
+					})
+				} else {
+					this.loading = false
+				}
+			})
+		},
+
 	},
 };
 </script>
@@ -339,5 +501,9 @@ export default {
 		background-color: #1890ff;
 		border-color: #1890ff;
 	}
+
+
 }
+
+
 </style>