<template>
? <div class="app-container common-list-page">
? ? <el-form
? ? ? :model="resetForm"
? ? ? :rules="resetFormRules"
? ? ? ref="resetForm"
? ? ? status-icon
? ? ? label-width="100px"
? ? >
? ? ? <el-form-item label="舊密碼：" prop="password">
? ? ? ? <el-input type="password" v-model="resetForm.password" auto-complete="off"></el-input>
? ? ? </el-form-item>
? ? ? <el-form-item label="新密碼：" prop="newpwd">
? ? ? ? <el-input type="password" v-model="resetForm.newpwd" auto-complete="off"></el-input>
? ? ? </el-form-item>
? ? ? <el-form-item label="確認密碼：" prop="newpassword1">
? ? ? ? <el-input type="password" v-model="resetForm.newpassword1" auto-complete="off"></el-input>
? ? ? </el-form-item>
? ? ? <el-form-item>
? ? ? ? <el-button type="primary" @click.native.prevent="toAmend">確認修改</el-button>
? ? ? </el-form-item>
? ? </el-form>
? </div>
</template>
<script>
import api from "@/api";//這是我個人全局定義單獨用來接收url接口的文件，不作參考
import { getUsername } from "@/utils/auth";//這是我個人調(diào)用封裝獲取當前賬戶的username，不作參考
export default {
? data() {
? ? var validatePass = (rule, value, callback) => {
? ? ? if (!value) {
? ? ? ? callback(new Error("請輸入新密碼"));
? ? ? } else if (value.toString().length < 6 || value.toString().length > 18) {
? ? ? ? callback(new Error("密碼長度為6-18位"));
? ? ? } else {
? ? ? ? callback();
? ? ? }
? ? };
? ? var validatePass2 = (rule, value, callback) => {
? ? ? if (value === "") {
? ? ? ? callback(new Error("請再次輸入密碼"));
? ? ? } else if (value !== this.resetForm.newpwd) {
? ? ? ? callback(new Error("兩次輸入密碼不一致!"));
? ? ? } else {
? ? ? ? callback();
? ? ? }
? ? };
? ? return {
? ? ? resetForm: {
? ? ? //傳給后臺所需要的參數(shù)
? ? ? ? newpassword1: "",
? ? ? ? password: "",
? ? ? ? username: ""http://此處只是后臺需要的字段而已，如果前期有公用cookie里面有獲取并且保存過，現(xiàn)在需要另外調(diào)用進來，具體的獲取方法就看個人了
? ? ? },
? ? ? resetFormRules: {
? ? ? ? password: [
? ? ? ? ? ? { required: true, message: "請輸入舊密碼", trigger: 'blur' }
? ? ? ? ],?
? ? ? ? newpwd: [
? ? ? ? ? ? { required: true, validator: validatePass, trigger: 'blur' }
? ? ? ? ],
? ? ? ? newpassword1: [
? ? ? ? ? { required: true, validator: validatePass2, trigger: "blur" }
? ? ? ? ]
? ? ? }
? ? };
? },
? methods: {
? ? toAmend() {
? ? ? this.$refs.resetForm.validate(valid => {
? ? ? ? if (valid) {
? ? ? ? //這里的api.materialQuery.toAmend是調(diào)用前期我們統(tǒng)一的api接口url路徑，不作參考 ，只要把后臺需要的字段正常傳進去即可
? ? ? ? ? api.materialQuery.toAmend(this.resetForm)
? ? ? ? ? ? .then(res => {
? ? ? ? ? ? ? if(res.code === 2){
? ? ? ? ? ? ? ? this.$message({
? ? ? ? ? ? ? ? ? ? message: res.msg,
? ? ? ? ? ? ? ? ? ? type: "error",
? ? ? ? ? ? ? ? ? ? duration: "2000"
? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? }
? ? ? ? ? ? ? if (res.code === 0) {
? ? ? ? ? ? ? ? this.$message.success("修改成功,3秒后跳轉(zhuǎn)到登錄頁！");
? ? ? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? ? this.logout();//調(diào)用跳轉(zhuǎn)到登陸頁的方法
? ? ? ? ? ? ? ? }, 3000);
? ? ? ? ? ? ? }
? ? ? ? ? ? ? ic
? ? ? ? ? ? })
? ? ? ? ? ? .catch(() => {});
? ? ? ? }
? ? ? });
? ? },
? ? //這是修改成功后重新返回登陸頁的方法，看個人需要自行調(diào)整
? ? async logout() {
? ? ? await this.$store.dispatch("user/logout");
? ? ? this.$router.push(`/login`);
? ? }
? },
};
</script>
<style lang="scss" scoped>
.el-form {
? width: 60%;
? margin: 50px auto 0;
? text-align: center;
? button {
? ? margin: 20px 0 0;
? }
}
</style>
————————————————
版權聲明：本文為CSDN博主「修煉中的小妖怪」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42124196/article/details/101063455
