From 06cd26d2c8addac899412b54bc9269565a690146 Mon Sep 17 00:00:00 2001
From: wangxia <779219182@qq.com>
Date: Wed, 22 Jan 2025 17:37:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E5=AF=86=E7=A0=81=E9=80=80=E5=87=BA?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Login/updatepsw.vue | 840 +++++++++++++++++++------------------
 1 file changed, 429 insertions(+), 411 deletions(-)

diff --git a/src/components/Login/updatepsw.vue b/src/components/Login/updatepsw.vue
index 5ec9e51..e23df0c 100644
--- a/src/components/Login/updatepsw.vue
+++ b/src/components/Login/updatepsw.vue
@@ -1,447 +1,465 @@
 <template>
-  <div class="center">
-    <div class="formcontainer">
-      <!-- <ul class="loginchange centerall">
+	<div class="center">
+		<div class="formcontainer">
+			<!-- <ul class="loginchange centerall">
         <router-link to="/login"><li class="goback">&lt;返回</li></router-link>
         <li class="loginactive">找回密码</li>
       </ul>-->
-      <div class="formbox">
-        <template>
-          <a-form id="components-form-demo-normal-login" hideRequiredMark :form="form1" class="login-form" @submit="phonehandleSubmit" layout="horizontal" :wrapperCol="{ span: 14 }" :labelCol="{ span: 4 }">
-            <a-form-item label="手机号" style="text-align: left;">
-              <a-input v-decorator="[
-                  'tel',
-                  {
-                    rules: [
-                      { required: true, message: '请输入手机号' },
-                      {
-                        pattern: /^1[3456789]\d{9}$/,
-                        message: '请输入正确手机号',
-                      },
-                    ],
-                    validateTrigger: 'submit',
-                  },
-                ]" autocomplete="off" :maxLength="11" placeholder="请输入手机号">
-                <!-- <i slot="prefix" class="icon-shouji iconfont" style="font-size: 24px" /> -->
-              </a-input>
-            </a-form-item>
-            <a-form-item label="验证码" style="text-align: left">
-              <div class="g_flex_row_start">
-                <div>
-                  <a-input style="width:240px" v-decorator="[
-                    'code',
-                    {
-                      rules: [
-                        {
-                          required: true,
-                          message: '请输入验证码',
-                        },
-                      ],
-                      validateTrigger: 'submit',
-                    },
-                  ]" type="text" placeholder="请输入短信验证码">
-                  <!-- <i slot="prefix" class="icon-duanxinyanzheng iconfont" /> -->
-                  <!-- <span class="getrulecode" slot="suffix">
+			<div class="formbox">
+				<template>
+					<a-form id="components-form-demo-normal-login" hideRequiredMark :form="form1" class="login-form" @submit="phonehandleSubmit" layout="horizontal" :wrapperCol="{ span: 14 }" :labelCol="{ span: 4 }">
+						<a-form-item label="手机号" style="text-align: left">
+							<a-input
+								v-decorator="[
+									'tel',
+									{
+										rules: [
+											{ required: true, message: '请输入手机号' },
+											{
+												pattern: /^1[3456789]\d{9}$/,
+												message: '请输入正确手机号',
+											},
+										],
+										validateTrigger: 'submit',
+									},
+								]"
+								autocomplete="off"
+								:maxLength="11"
+								placeholder="请输入手机号"
+							>
+								<!-- <i slot="prefix" class="icon-shouji iconfont" style="font-size: 24px" /> -->
+							</a-input>
+						</a-form-item>
+						<a-form-item label="验证码" style="text-align: left">
+							<div class="g_flex_row_start">
+								<div>
+									<a-input
+										style="width: 240px"
+										v-decorator="[
+											'code',
+											{
+												rules: [
+													{
+														required: true,
+														message: '请输入验证码',
+													},
+												],
+												validateTrigger: 'submit',
+											},
+										]"
+										type="text"
+										placeholder="请输入短信验证码"
+									>
+										<!-- <i slot="prefix" class="icon-duanxinyanzheng iconfont" /> -->
+										<!-- <span class="getrulecode" slot="suffix">
                     <span @click="getPhoneCode" data-mark="getcode" v-if="timedata.isfinish">获取验证码</span>
                     <timmer :timedata="timedata" v-if="!timedata.isfinish" />
                   </span> -->
-                  </a-input>
-                </div>
-                <div class="g_ml_12">
-                  <!-- <a-button>
+									</a-input>
+								</div>
+								<div class="g_ml_12">
+									<!-- <a-button>
                     <span @click="getPhoneCode" data-mark="getcode" v-if="timedata.isfinish">获取验证码</span>
                     <timmer :timedata="timedata" v-if="!timedata.isfinish" />
                   </a-button> -->
-                  <div class="getrulecode sms-btn" style="line-height: 32px;">
-                    <span @click="getPhoneCode" data-mark="getcode" v-if="timedata.isfinish">获取验证码</span>
-                    <timmer :timedata="timedata" v-if="!timedata.isfinish" />
-                  </div>
-                </div>
-              </div>
-            </a-form-item>
-            <a-form-item label="新密码" style="text-align: left">
-              <a-input @input="getpassword" v-decorator="[
-                  'password',
-                  {
-                    rules: [
-                      {
-                        required: true,
-                        message: '请输入新密码',
-                      },
-                    ],
-                    validateTrigger: 'submit',
-                  },
-                ]" type="password" placeholder="请输入密码">
-                <!-- <i slot="prefix" class="iconfont icon-mima" /> -->
-              </a-input>
-            </a-form-item>
-            <a-form-item label="确认密码" style="text-align: left">
-              <a-input v-decorator="[
-                  'newpassword',
-                  {
-                    rules: [
-                      {
-                        required: true,
-                        message: '请再次输入新密码',
-                      },
-                      {
-                        validator: replacepassword,
-                      },
-                    ],
-                    validateTrigger: 'submit',
-                    validateFirst: true,
-                  },
-                ]" type="password" placeholder="请再次输入密码">
-                <!-- <i slot="prefix" class="iconfont icon-mima" /> -->
-              </a-input>
-            </a-form-item>
-            <a-form-item label class="submit" style="height: 40px;position: relative;margin-bottom: 0;">
-              <div class="state-box">
-				      <a-button type="primary" class="cancel login-form-button" @click="cancel">取消</a-button>
-				    <a-button 
-				  	style="border: 1px solid #1890ff;"
-				    type="primary" html-type="submit" :loading="btnLoading" class="login-form-button">确定</a-button>
-			  </div>
-			</a-form-item>
-          </a-form>
-          <!-- <div class="register">
+									<div class="getrulecode sms-btn" style="line-height: 32px">
+										<span @click="getPhoneCode" data-mark="getcode" v-if="timedata.isfinish">获取验证码</span>
+										<timmer :timedata="timedata" v-if="!timedata.isfinish" />
+									</div>
+								</div>
+							</div>
+						</a-form-item>
+						<a-form-item label="新密码" style="text-align: left">
+							<a-input
+								@input="getpassword"
+								v-decorator="[
+									'password',
+									{
+										rules: [
+											{
+												required: true,
+												message: '请输入新密码',
+											},
+										],
+										validateTrigger: 'submit',
+									},
+								]"
+								type="password"
+								placeholder="请输入密码"
+							>
+								<!-- <i slot="prefix" class="iconfont icon-mima" /> -->
+							</a-input>
+						</a-form-item>
+						<a-form-item label="确认密码" style="text-align: left">
+							<a-input
+								v-decorator="[
+									'newpassword',
+									{
+										rules: [
+											{
+												required: true,
+												message: '请再次输入新密码',
+											},
+											{
+												validator: replacepassword,
+											},
+										],
+										validateTrigger: 'submit',
+										validateFirst: true,
+									},
+								]"
+								type="password"
+								placeholder="请再次输入密码"
+							>
+								<!-- <i slot="prefix" class="iconfont icon-mima" /> -->
+							</a-input>
+						</a-form-item>
+						<a-form-item label class="submit" style="height: 40px; position: relative; margin-bottom: 0">
+							<div class="state-box">
+								<a-button type="primary" class="cancel login-form-button" @click="cancel">取消</a-button>
+								<a-button style="border: 1px solid #1890ff" type="primary" html-type="submit" :loading="btnLoading" class="login-form-button">确定</a-button>
+							</div>
+						</a-form-item>
+					</a-form>
+					<!-- <div class="register">
             <router-link to="/register">还没有账号，立即注册</router-link>
           </div>-->
-        </template>
-      </div>
-    </div>
-  </div>
+				</template>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
-import { getPhoneCodeApi, updatePswApi } from '../../api/login'
-import timmer from './components/countback.vue'
+import { getPhoneCodeApi, updatePswApi } from "../../api/login";
+import timmer from "./components/countback.vue";
 
 export default {
-  inject: ['reload'],
-  // 组件名称
-  name: 'updatepsw',
-  // 局部注册的组件
-  components: {
-    timmer,
-  },
-  // 组件参数 接收来自父组件的数据
-  props: {
-    loginShow: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  // 组件状态值
-  data() {
-    return {
-      loginway: 1,
-      ischecked: false,
-      setpassword: '', // 重置密码的密码字段
-      form1: this.$form.createForm(this),
-      timedata: {
-        isfinish: true,
-        deadline: 60,
-        timmer: null,
-      },
-      btnLoading: false,
-    }
-  },
-  // 计算属性
-  computed: {},
-  // 侦听器
-  watch: {},
-  // 生命周期钩子   注：没用到的钩子请自行删除
-  /**
-   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
-   */
-  created() {},
-  /**
-   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
-   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
-   */
-  mounted() {},
-  // 组件方法
-  methods: {
-    cancel() {
-      this.$emit('update:loginShow', false)
-    },
-    phonehandleSubmit(e) {
-      e.preventDefault()
-      let params = new FormData()
-      this.form1.validateFields(async (err, values) => {
-        console.log(err)
-        console.log(values)
-        if (!err) {
-          this.btnLoading = true
-          params.code = values.code
-          params.newpassword = values.newpassword
-          params.password = values.password
-          params.tel = values.tel
-          console.log(params)
-          try {
-            const { data } = await updatePswApi(params)
-            console.log(data)
-            if (data.status == 200) {
-              this.$message.success('密码修改成功')
-              this.$emit('update:loginShow', false)
-              this.$router.push('/login')
-            } else {
-              this.$message.warning(data.msg)
-            }
+	inject: ["reload","logout"],
+	// 组件名称
+	name: "updatepsw",
+	// 局部注册的组件
+	components: {
+		timmer,
+	},
+	// 组件参数 接收来自父组件的数据
+	props: {
+		loginShow: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	// 组件状态值
+	data() {
+		return {
+			loginway: 1,
+			ischecked: false,
+			setpassword: "", // 重置密码的密码字段
+			form1: this.$form.createForm(this),
+			timedata: {
+				isfinish: true,
+				deadline: 60,
+				timmer: null,
+			},
+			btnLoading: false,
+		};
+	},
+	// 计算属性
+	computed: {},
+	// 侦听器
+	watch: {},
+	// 生命周期钩子   注：没用到的钩子请自行删除
+	/**
+	 * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
+	 */
+	created() {},
+	/**
+	 * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
+	 * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
+	 */
+	mounted() {},
+	// 组件方法
+	methods: {
+		cancel() {
+			this.$emit("update:loginShow", false);
+		},
+		phonehandleSubmit(e) {
+			e.preventDefault();
+			let params = new FormData();
+			this.form1.validateFields(async (err, values) => {
+				console.log(err);
+				console.log(values);
+				if (!err) {
+					this.btnLoading = true;
+					params.code = values.code;
+					params.newpassword = values.newpassword;
+					params.password = values.password;
+					params.tel = values.tel;
+					console.log(params);
+					try {
+						const { data } = await updatePswApi(params);
+						console.log(data);
+						if (data.status == 200) {
+							this.$message.success("密码修改成功");
+							this.$emit("update:loginShow", false);
+							this.logout();
+							this.$router.push("/login");
+						} else {
+							this.$message.warning(data.msg);
+						}
 
-            // localStorage.setItem("LOGIN_DATA", JSON.stringify(data.data));
-            setTimeout(() => {
-              this.btnLoading = false
+						// localStorage.setItem("LOGIN_DATA", JSON.stringify(data.data));
+						setTimeout(() => {
+							this.btnLoading = false;
 
-              // this.reload()
-            }, 2000)
-          } catch (err) {
-            this.btnLoading = false
-            console.log(err)
-          }
-        }
-      })
-    },
-    async getPhoneCode() {
-      const that = this
+							// this.reload()
+						}, 2000);
+					} catch (err) {
+						this.btnLoading = false;
+						console.log(err);
+					}
+				}
+			});
+		},
+		async getPhoneCode() {
+			const that = this;
 
-      this.form1.validateFields(['tel'], async (err, values) => {
-        console.log(values)
+			this.form1.validateFields(["tel"], async (err, values) => {
+				console.log(values);
 
-        if (!err) {
-          that.timedata.isfinish = false
+				if (!err) {
+					that.timedata.isfinish = false;
 
-          try {
-            const { data } = await getPhoneCodeApi({ tel: values.tel })
-            console.log(data)
-            if (data.status !== 200) {
-              this.$message.warning(data.msg)
-            }
-          } catch (error) {
-            console.log(error)
-          }
-        } else {
-          console.log(err)
-        }
-      })
-    },
-    checked() {
-      console.log(this.ischecked)
-    },
-    getpassword(e) {
-      this.setpassword = e.target.value
-      console.log(e)
-    },
-    // 检验密码不一致的回调
-    replacepassword(rule, value, callback) {
-      console.log(rule)
-      console.log(value)
-      if (this.setpassword !== value) {
-        callback('两次密码不一致')
-      }
-      callback()
+					try {
+						const { data } = await getPhoneCodeApi({ tel: values.tel });
+						console.log(data);
+						if (data.status !== 200) {
+							this.$message.warning(data.msg);
+						}
+					} catch (error) {
+						console.log(error);
+					}
+				} else {
+					console.log(err);
+				}
+			});
+		},
+		checked() {
+			console.log(this.ischecked);
+		},
+		getpassword(e) {
+			this.setpassword = e.target.value;
+			console.log(e);
+		},
+		// 检验密码不一致的回调
+		replacepassword(rule, value, callback) {
+			console.log(rule);
+			console.log(value);
+			if (this.setpassword !== value) {
+				callback("两次密码不一致");
+			}
+			callback();
 
-      // console.log(callback);
-    },
-  },
-}
+			// console.log(callback);
+		},
+	},
+};
 </script>
 
 <style scoped lang="less">
 .submit {
-  display: flex;
-  justify-content: center;
+	display: flex;
+	justify-content: center;
 }
 .center {
-  width: unset !important;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  // margin: 0 auto;
-  /deep/ .login-form {
-    background-color: #fff !important;
-  }
-  .centerall {
-    margin: 0 auto;
-  }
-  .loginchange {
-    display: flex;
-    position: relative;
-    width: 230px;
-    justify-content: center;
-    margin-top: 32px;
-    .loginactive {
-      color: #4d575e;
-      border-bottom: 1px solid #4d575e;
-    }
-    a {
-      li {
-        position: absolute;
-        left: 0;
-        top: 0;
-        font-size: 14px;
-        margin-bottom: 0;
-        padding: 0;
-        color: #4d575e;
-        &:hover {
-          color: #ff6a00cc;
-        }
-      }
-    }
-    li {
-      padding: 0 0 4px 0;
-      margin-bottom: 24px;
-      font-size: 14px;
-      text-align: left;
-      color: #cccccc;
-      line-height: 22px;
-      cursor: pointer;
-    }
-  }
-  .formbox {
-    width: 444px;
-    margin: 0 auto;
-    .ant-form-item {
-      display: flex;
-      margin-bottom: 16px;
-      // align-items: center;
-    }
-    /deep/ .ant-form-explain {
-      // margin-top: -2px;
-      // line-height: 20px;
-      min-height: 20px !important;
-    }
-    /deep/.ant-form-item-control {
-      width: 360px !important;
-      .ant-input-affix-wrapper {
-        display: flex;
-        flex: 1;
-      }
-    }
+	width: unset !important;
+	overflow: hidden;
+	display: flex;
+	justify-content: center;
+	// margin: 0 auto;
+	/deep/ .login-form {
+		background-color: #fff !important;
+	}
+	.centerall {
+		margin: 0 auto;
+	}
+	.loginchange {
+		display: flex;
+		position: relative;
+		width: 230px;
+		justify-content: center;
+		margin-top: 32px;
+		.loginactive {
+			color: #4d575e;
+			border-bottom: 1px solid #4d575e;
+		}
+		a {
+			li {
+				position: absolute;
+				left: 0;
+				top: 0;
+				font-size: 14px;
+				margin-bottom: 0;
+				padding: 0;
+				color: #4d575e;
+				&:hover {
+					color: #ff6a00cc;
+				}
+			}
+		}
+		li {
+			padding: 0 0 4px 0;
+			margin-bottom: 24px;
+			font-size: 14px;
+			text-align: left;
+			color: #cccccc;
+			line-height: 22px;
+			cursor: pointer;
+		}
+	}
+	.formbox {
+		width: 444px;
+		margin: 0 auto;
+		.ant-form-item {
+			display: flex;
+			margin-bottom: 16px;
+			// align-items: center;
+		}
+		/deep/ .ant-form-explain {
+			// margin-top: -2px;
+			// line-height: 20px;
+			min-height: 20px !important;
+		}
+		/deep/.ant-form-item-control {
+			width: 360px !important;
+			.ant-input-affix-wrapper {
+				display: flex;
+				flex: 1;
+			}
+		}
 
-    /deep/.ant-input-affix-wrapper {
-      i {
-        font-size: 26px;
-        // margin: 0 8px 0 4px;
-        color: #4d575e;
-      }
-      .ant-input {
-        height: 32px;
-        // background-color: #f6f6f6;
-        // width: 430px;
-        text-indent: 15px;
-        font-size: 14px;
-        // border: none;
-        padding: 0 !important;
-        border: 1px solid #dddddd;
-        &:hover {
-          border-color: #1890ff;
-        }
-        &:focus {
-          box-shadow: none;
-        }
-        &::placeholder {
-          opacity: 0.4;
-          color: #4d575e;
-          font-size: 14px;
-          text-indent: 15px;
-        }
-      }
-    }
-    .ant-input {
-      height: 32px;
-      // background-color: #f6f6f6;
-      // width: 430px;
-      text-indent: 15px;
-      font-size: 14px;
-      // border: none;
-      padding: 0 !important;
-      border: 1px solid #dddddd;
-      &:hover {
-        border-color: #1890ff;
-      }
-      &:focus {
-        box-shadow: none;
-      }
-      &::placeholder {
-        opacity: 0.4;
-        color: #4d575e;
-        font-size: 14px;
-        text-indent: 15px;
-      }
-    }
+		/deep/.ant-input-affix-wrapper {
+			i {
+				font-size: 26px;
+				// margin: 0 8px 0 4px;
+				color: #4d575e;
+			}
+			.ant-input {
+				height: 32px;
+				// background-color: #f6f6f6;
+				// width: 430px;
+				text-indent: 15px;
+				font-size: 14px;
+				// border: none;
+				padding: 0 !important;
+				border: 1px solid #dddddd;
+				&:hover {
+					border-color: #1890ff;
+				}
+				&:focus {
+					box-shadow: none;
+				}
+				&::placeholder {
+					opacity: 0.4;
+					color: #4d575e;
+					font-size: 14px;
+					text-indent: 15px;
+				}
+			}
+		}
+		.ant-input {
+			height: 32px;
+			// background-color: #f6f6f6;
+			// width: 430px;
+			text-indent: 15px;
+			font-size: 14px;
+			// border: none;
+			padding: 0 !important;
+			border: 1px solid #dddddd;
+			&:hover {
+				border-color: #1890ff;
+			}
+			&:focus {
+				box-shadow: none;
+			}
+			&::placeholder {
+				opacity: 0.4;
+				color: #4d575e;
+				font-size: 14px;
+				text-indent: 15px;
+			}
+		}
 
-    .register {
-      display: flex;
-      justify-content: center;
-      font-size: 12px;
-      span {
-        color: #4d575e;
-        i {
-          vertical-align: middle;
-          margin-right: 10px;
-        }
-      }
-      a {
-        color: #353649;
-      }
-    }
+		.register {
+			display: flex;
+			justify-content: center;
+			font-size: 12px;
+			span {
+				color: #4d575e;
+				i {
+					vertical-align: middle;
+					margin-right: 10px;
+				}
+			}
+			a {
+				color: #353649;
+			}
+		}
 
-    .getrulecode {
-      font-size: 12px;
-      width: 67px;
-      text-align: center;
-      border-left: 1px #cccccc solid;
-      line-height: 12px;
-      color: #4d575e;
-      span[data-mark='getcode'] {
-        padding: 0 0 0 5px;
-        cursor: pointer;
-      }
-    }
-  }
-  .cancel.login-form-button {
-    background-color: #fff;
-    color: #1890ff;
-    border: 1px solid #1890ff;
-    margin-right: 16px;
-  }
-  .login-form-button {
-    width: 60px;
-    height: 32px;
-    margin-top: 16px;
-    border-radius: 0px;
-    background-color: #1890ff;
-    font-size: 14px;
-    border: none;
-    color: white;
-    padding: 0 !important;
-    line-height: 32px;
-    border-radius: 6px;
-  }
-  .login-form-button span {
-    letter-spacing: 1px;
-  }
+		.getrulecode {
+			font-size: 12px;
+			width: 67px;
+			text-align: center;
+			border-left: 1px #cccccc solid;
+			line-height: 12px;
+			color: #4d575e;
+			span[data-mark="getcode"] {
+				padding: 0 0 0 5px;
+				cursor: pointer;
+			}
+		}
+	}
+	.cancel.login-form-button {
+		background-color: #fff;
+		color: #1890ff;
+		border: 1px solid #1890ff;
+		margin-right: 16px;
+	}
+	.login-form-button {
+		width: 60px;
+		height: 32px;
+		margin-top: 16px;
+		border-radius: 0px;
+		background-color: #1890ff;
+		font-size: 14px;
+		border: none;
+		color: white;
+		padding: 0 !important;
+		line-height: 32px;
+		border-radius: 6px;
+	}
+	.login-form-button span {
+		letter-spacing: 1px;
+	}
 }
-.state-box{
-    position: absolute;
-    left: -37px;
-    width: 430px;
-    top: -15px;
+.state-box {
+	position: absolute;
+	left: -37px;
+	width: 430px;
+	top: -15px;
 }
-.sms-btn{
-  width: 102px !important;
-  height: 32px !important;
-  border: 1px solid #1890ff !important;
-  color: #1677ff !important;
-  background-color: transparent;
-  border-color: #1677ff;
-  box-shadow: none;
-  font-size: 14px !important;
-  // padding: 7px 12.5px;
-  border-radius: 6px;
-  position: relative;
-  top: 4px;
+.sms-btn {
+	width: 102px !important;
+	height: 32px !important;
+	border: 1px solid #1890ff !important;
+	color: #1677ff !important;
+	background-color: transparent;
+	border-color: #1677ff;
+	box-shadow: none;
+	font-size: 14px !important;
+	// padding: 7px 12.5px;
+	border-radius: 6px;
+	position: relative;
+	top: 4px;
 }
 </style>