From 375513370cc01fcd976987d07797249600b0bb3e Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期四, 07 八月 2025 17:15:09 +0800
Subject: [PATCH] 'first'
---
src/views/login/findPassword.vue | 402 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 402 insertions(+), 0 deletions(-)
diff --git a/src/views/login/findPassword.vue b/src/views/login/findPassword.vue
new file mode 100644
index 0000000..e97ccad
--- /dev/null
+++ b/src/views/login/findPassword.vue
@@ -0,0 +1,402 @@
+<template>
+ <div class="loginPage">
+ <div class="loginContent">
+ <div class="loginFormBox">
+ <div class="title">
+ <span class="active">鎵惧洖瀵嗙爜</span>
+ </div>
+ <!-- 鐢ㄦ埛鍚嶅瘑鐮佺櫥褰� -->
+ <div>
+ <div class="loginContentBox">
+ <div class="errorTips" v-if="errorTipsTxt">
+ {{ errorTipsTxt }}
+ <span
+ v-if="loginFormType == 'password'"
+ class="findPassword"
+ @click="toFindPassword()"
+ >鎵惧洖瀵嗙爜</span
+ >
+ </div>
+ <div class="codeLoginItemBox flex">
+ <el-select
+ style="width: 100px"
+ class="mr10"
+ placeholder="璇烽�夋嫨"
+ v-model="loginForm.region"
+ >
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
+ </el-select>
+ <el-input
+ class="flex1"
+ placeholder="璇疯緭鍏ユ墜鏈哄彿"
+ v-model="loginForm.mobilePhone"
+ @keyup.enter.native="loginFun"
+ ></el-input>
+ </div>
+ <div class="codeLoginItemBox flex">
+ <el-input
+ placeholder="璇疯緭鍏ュ浘褰㈤獙璇佺爜"
+ class="flex1 mr10"
+ v-model="loginForm.imgCode"
+ ></el-input>
+ <div class="imgCode">
+ <img :src="imgCode" alt="" @click="getImgCapcha" />
+ </div>
+ </div>
+ <div class="codeLoginItemBox flex">
+ <el-input
+ placeholder="璇疯緭鍏ラ獙璇佺爜"
+ class="flex1 mr10"
+ v-model="loginForm.verificationCode"
+ @keyup.enter.native="loginFun"
+ ></el-input>
+ <el-button
+ style="width: 140px"
+ @click="getVerifyCode"
+ :disabled="countDown != 0"
+ >{{
+ countDown == 0
+ ? "鑾峰彇鐭俊楠岃瘉鐮�"
+ : "楠岃瘉鐮�(" + countDown + "s)"
+ }}</el-button
+ >
+ </div>
+ <!-- <div class="loginItemBox" v-if="loginFormType == 'password'">
+ <span>鎵嬫満鍙�</span>
+ <el-input
+ class="loginItemIpt"
+ v-model="loginForm.mobilePhone"
+ placeholder="璇疯緭鍏ユ墜鏈哄彿"
+ clearable
+ @keyup.enter.native="loginFun"
+ ></el-input>
+ </div> -->
+ <div class="loginItemBox">
+ <span>鏂板瘑鐮�</span>
+ <el-input
+ class="loginItemIpt"
+ v-model="loginForm.password"
+ type="password"
+ show-password
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ @keyup.enter.native="loginFun"
+ ></el-input>
+ </div>
+ <div class="loginItemBox">
+ <span>纭瀵嗙爜</span>
+ <el-input
+ class="loginItemIpt"
+ v-model="loginForm.repetitionPassword"
+ type="password"
+ show-password
+ placeholder="璇疯緭鍏ョ‘璁ゅ瘑鐮�"
+ @keyup.enter.native="loginFun"
+ ></el-input>
+ </div>
+ <div class="loginBtnBox">
+ <el-button
+ type="primary"
+ class="loginBtn"
+ @click="loginFun"
+ :loading="loading"
+ >閲嶇疆瀵嗙爜</el-button
+ >
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+<script>
+export default {
+ name: "login",
+ data() {
+ return {
+ redirectPath: "",
+ loading: false,
+ errorTipsTxt: "",
+ loginFormType: "code",
+ imgCode: "",
+ loginForm: {
+ region: "涓浗+86",
+ mobilePhone: "",
+ password: "",
+ imgCode: "",
+ verificationCode: "",
+ repetitionPassword: "",
+ },
+ countDown: 0,
+ options: [
+ {
+ value: "涓浗+86",
+ label: "涓浗+86",
+ },
+ ],
+ };
+ },
+ created() {
+ this.redirectPath = this.$route.query.redirectPath;
+ this.getImgCapcha();
+ },
+ methods: {
+ getImgCapcha() {
+ this.MG.identity.getImgCode().then((res) => {
+ this.imgCode = "data:image/png;base64," + res;
+ });
+ },
+ // 鑾峰彇楠岃瘉鐮�
+ getVerifyCode() {
+ if (!this.config.reg_tel.test(this.loginForm.mobilePhone)) {
+ this.$message({
+ message: "璇疯緭鍏ユ纭牸寮忕殑鎵嬫満鍙凤紒",
+ type: "error",
+ });
+ return false;
+ } else if (
+ this.loginForm.imgCode == "" ||
+ this.loginForm.imgCode.length != 4
+ ) {
+ this.$message({
+ message: "璇疯緭鍏ユ纭牸寮忕殑鍥惧舰楠岃瘉鐮�",
+ type: "error",
+ });
+ return false;
+ } else {
+ this.MG.identity
+ .getPhoneCode({
+ phoneNumber: this.loginForm.mobilePhone,
+ imageCaptcha: this.loginForm.imgCode,
+ appRefCode: this.config.appRefCode,
+ })
+ .then((res) => {
+ if (res == "楠岃瘉鐮佸彂閫佹垚鍔�") {
+ this.getSecond(60);
+ this.$message({
+ message: res,
+ type: "success",
+ });
+ } else {
+ this.$message({
+ message: res,
+ type: "error",
+ });
+ this.getImgCapcha();
+ }
+ });
+ }
+ },
+ //楠岃瘉鐮佸�掕鏃�
+ getSecond(time) {
+ if (!this.timer) {
+ this.countDown = time;
+ this.timer = setInterval(() => {
+ this.countDown--;
+ if (this.countDown == 0) {
+ clearInterval(this.timer);
+ this.timer = null;
+ }
+ }, 1000);
+ }
+ },
+ loginFun() {
+ if (!this.loginForm.mobilePhone) {
+ this.$message({
+ message: "璇疯緭鍏ユ墜鏈哄彿锛�",
+ type: "error",
+ });
+ return false;
+ }
+ if (!this.loginForm.verificationCode) {
+ this.$message({
+ message: "璇疯緭鍏ョ煭淇￠獙璇佺爜锛�",
+ type: "error",
+ });
+ return false;
+ }
+ if (!this.loginForm.password) {
+ this.$message({
+ message: "璇疯緭鍏ュ瘑鐮侊紒",
+ type: "error",
+ });
+ return false;
+ }
+ if (this.loginForm.password != this.loginForm.repetitionPassword) {
+ this.$message({
+ message: "涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷达紒",
+ type: "error",
+ });
+ return false;
+ }
+
+ this.loading = true;
+
+ this.MG.identity
+ .changePasswordByMobilePhone({
+ phoneNumber: this.loginForm.mobilePhone,
+ phoneCaptcha: this.loginForm.verificationCode,
+ password: this.loginForm.password,
+ })
+ .then((res) => {
+ this.loading = false;
+ this.$message({
+ message: "瀵嗙爜閲嶇疆鎴愬姛锛�",
+ type: "success",
+ });
+ this.$router.push({
+ path: "/login",
+ });
+ });
+ },
+ },
+};
+</script>
+<style lang="less" scoped>
+@import "@/assets/css/theme.less";
+.loginPage {
+ width: 100%;
+ height: 100%;
+ background-image: url("@/assets/images/login/pageBg.png");
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ position: relative;
+ .loginContent {
+ width: 1200px;
+ height: 570px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-top: -285px;
+ margin-left: -600px;
+ padding: 36px 0;
+ box-shadow: 0px 0px 66px 0px rgb(170 170 170 / 35%);
+ background-image: url("@/assets/images/login/boxBg.png");
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ box-sizing: border-box;
+ text-align: right;
+ .loginFormBox {
+ display: inline-block;
+ width: 420px;
+ height: 496px;
+ padding: 30px 40px;
+ margin-right: 60px;
+ background: #fff;
+ box-sizing: border-box;
+ box-shadow: 0 0 5px 0 hsl(0deg 0% 67% / 35%);
+ .title {
+ font-size: 16px;
+ text-align: center;
+ color: #333333;
+ span {
+ display: inline-block;
+ width: 80px;
+ cursor: pointer;
+ &.active {
+ font-weight: bold;
+ color: @color;
+ }
+ }
+ .division {
+ width: 5px;
+ margin: 0 50px;
+ cursor: initial;
+ color: #d0d0d0;
+ }
+ }
+ .loginContentBox {
+ padding-top: 30px;
+ margin-top: 20px;
+ margin-bottom: 15px;
+ position: relative;
+ .errorTips {
+ position: absolute;
+ top: 8px;
+ left: 10px;
+ font-size: 12px;
+ color: #e50021;
+ .findPassword {
+ cursor: pointer;
+ color: #2b68cd;
+ font-size: 12px;
+ }
+ }
+ .codeLoginItemBox {
+ margin-bottom: 15px;
+ .imgCode {
+ width: 140px;
+ height: 40px;
+ img {
+ width: 100%;
+ height: 100%;
+ background: #efefef;
+ }
+ }
+ }
+ .loginItemBox {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-radius: 4px;
+ margin-bottom: 15px;
+ box-sizing: border-box;
+ border: 1px solid #dcdfe6;
+ span {
+ display: inline-block;
+ width: 100px;
+ text-align: center;
+ }
+ }
+ .changFormBtn {
+ margin-bottom: 15px;
+ overflow: hidden;
+ span {
+ cursor: pointer;
+ }
+ }
+ .loginBtnBox {
+ margin-bottom: 15px;
+ .loginBtn {
+ width: 100%;
+ }
+ }
+ .registerBox {
+ margin-top: 20px;
+ font-size: 14px;
+ text-align: center;
+ color: #666666;
+ span {
+ cursor: pointer;
+ }
+ .division {
+ margin: 0 20px;
+ cursor: initial;
+ color: #d0d0d0;
+ }
+ }
+ }
+ .wechatBox {
+ .wxCodeBox {
+ margin-top: 10px;
+ height: 300px;
+ }
+ }
+ }
+ }
+}
+.mr10 {
+ margin-right: 10px;
+}
+</style>
+<style>
+.loginItemIpt .el-input__inner {
+ height: 38px;
+ line-height: 38px;
+ border: 0;
+}
+</style>
--
Gitblit v1.9.1