|
|
@@ -9,72 +9,135 @@
|
|
|
<div class="editPanel">
|
|
|
<div class="partTitle"><span class="orangeLine"></span>修改密码</div>
|
|
|
<div class="editDiv">
|
|
|
- <div class="editD">
|
|
|
- <div class="editItem">
|
|
|
- <img src="@assets/user.png" alt="" />
|
|
|
- <span>用户名：</span>
|
|
|
+ <el-form
|
|
|
+ class="editD"
|
|
|
+ ref="form"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="180px"
|
|
|
+ >
|
|
|
+ <el-form-item prop="loginName">
|
|
|
+ <span slot="label">
|
|
|
+ <img src="@assets/user.png" alt="" />
|
|
|
+ 用户名：
|
|
|
+ </span>
|
|
|
<el-input
|
|
|
- v-model="username"
|
|
|
+ v-model="form.loginName"
|
|
|
placeholder="请输入用户名/登录账号"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- <div class="editItem">
|
|
|
- <img src="@assets/lock.png" alt="" />
|
|
|
- <span>旧密码：</span>
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="oldPassword">
|
|
|
+ <span slot="label">
|
|
|
+ <img src="@assets/lock.png" alt="" />
|
|
|
+ 旧密码：
|
|
|
+ </span>
|
|
|
<el-input
|
|
|
- v-model="oldPassword"
|
|
|
+ v-model="form.oldPassword"
|
|
|
type="password"
|
|
|
placeholder="请输入旧密码"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- <div class="editItem">
|
|
|
- <img src="@assets/lock.png" alt="" />
|
|
|
- <span>新密码：</span>
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="newPassword">
|
|
|
+ <span slot="label">
|
|
|
+ <img src="@assets/lock.png" alt="" />
|
|
|
+ 新密码：
|
|
|
+ </span>
|
|
|
+ <el-input v-model="form.newPassword" placeholder="请输入新密码" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="surePassword">
|
|
|
+ <span slot="label">
|
|
|
+ <img src="@assets/lock.png" alt="" />
|
|
|
+ 确认密码：
|
|
|
+ </span>
|
|
|
<el-input
|
|
|
- v-model="newPassword"
|
|
|
- placeholder="请输入新密码"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- <div class="editItem">
|
|
|
- <img src="@assets/lock.png" alt="" />
|
|
|
- <span>确认密码：</span>
|
|
|
- <el-input
|
|
|
- v-model="surePassword"
|
|
|
+ v-model="form.surePassword"
|
|
|
placeholder="请再次输入新密码"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
<div class="btnDiv">
|
|
|
- <el-button class="submitBtn" type="text" size="small">提交</el-button>
|
|
|
+ <el-button
|
|
|
+ class="submitBtn"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ @click="validate"
|
|
|
+ >提交</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
-<script>
|
|
|
+<script lang="ts">
|
|
|
import { Component, Vue, Watch } from "vue-property-decorator";
|
|
|
-export default {
|
|
|
- name: "app",
|
|
|
- components: {},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- username: "",
|
|
|
- oldPassword: "",
|
|
|
- newPassword: "",
|
|
|
- surePassword: ""
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleClick(tab, event) {
|
|
|
- console.log(tab, event);
|
|
|
- },
|
|
|
- handleCurrentChange(val) {
|
|
|
- this.currentPage = val;
|
|
|
- this.requestData();
|
|
|
- }
|
|
|
+import { RegAccount } from "@/utils";
|
|
|
+import { ElForm } from "element-ui/types/form";
|
|
|
+@Component
|
|
|
+export default class extends Vue {
|
|
|
+ private form = {
|
|
|
+ loginName: "",
|
|
|
+ oldPassword: "",
|
|
|
+ newPassword: "",
|
|
|
+ surePassword: ""
|
|
|
+ };
|
|
|
+ private rules = {
|
|
|
+ loginName: [
|
|
|
+ { required: true, message: "请输入用户名", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: (rule: any, value: string, callback: any) =>
|
|
|
+ callback(
|
|
|
+ RegAccount.test(value)
|
|
|
+ ? undefined
|
|
|
+ : new Error("用户名必须为9到16位由数字字母组合")
|
|
|
+ ),
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ oldPassword: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
|
|
|
+ newPassword: [
|
|
|
+ { required: true, message: "请输入新密码", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: (rule: any, value: string, callback: any) =>
|
|
|
+ callback(
|
|
|
+ RegAccount.test(value)
|
|
|
+ ? undefined
|
|
|
+ : new Error("密码必须为9到16位由数字字母组合")
|
|
|
+ ),
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ surePassword: [
|
|
|
+ { required: true, message: "请再次输入密码", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: (rule: any, value: string, callback: any) => {
|
|
|
+ if (value === "") {
|
|
|
+ callback(new Error("请再次输入密码"));
|
|
|
+ } else if (value !== this.form.newPassword) {
|
|
|
+ callback(new Error("两次输入密码不一致!"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ get DomForm() {
|
|
|
+ console.log(this.$refs);
|
|
|
+ return this.$refs.form as ElForm;
|
|
|
}
|
|
|
-};
|
|
|
+ validate() {
|
|
|
+ this.DomForm.validate(x => x && this.submit());
|
|
|
+ }
|
|
|
+ async submit() {
|
|
|
+ const [err] = await this.$post("/", this.form);
|
|
|
+ if (err) return;
|
|
|
+ this.DomForm.resetFields();
|
|
|
+ this.$message.success("密码修改成功");
|
|
|
+ // this.$router.push("/");
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.breadcrumb {
|
|
|
@@ -106,22 +169,6 @@ export default {
|
|
|
background: #fff5f2;
|
|
|
padding: 2rem;
|
|
|
box-sizing: border-box;
|
|
|
- .editItem {
|
|
|
- height: 6rem;
|
|
|
- line-height: 6rem;
|
|
|
- border-bottom: 0.1rem solid #e5e5e5;
|
|
|
- padding: 0 0.6rem;
|
|
|
- box-sizing: border-box;
|
|
|
- img {
|
|
|
- height: 1.4rem;
|
|
|
- vertical-align: middle;
|
|
|
- margin-right: 1rem;
|
|
|
- }
|
|
|
- span {
|
|
|
- font-size: 1.4rem;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
.btnDiv {
|
youyawu