<template>
|
<div class="changePassword">
|
<assets-head :title="$t('修改登录密码')" />
|
<div class="line"></div>
|
<div class="content">
|
<!-- <ExInput :label="$t('旧密码')" :placeholderText="$t('请输入旧密码')" v-model="oldPassword" typeText="password" />
|
<ExInput :label="$t('新密码')" :placeholderText="$t('请输入新密码')" :tips="$t('请输入6-12个字符，包括数字或字母')"
|
v-model="newPassword" typeText="password" />
|
<ExInput :label="$t('确认新密码')" :placeholderText="$t('请输入新密码')" :tips="$t('请输入6-12个字符，包括数字或字母')"
|
v-model="rePassword" typeText="password" /> -->
|
<van-form validate-first @submit="submit">
|
<van-field
|
v-model="oldPassword"
|
type="password"
|
:placeholder="$t('请输入原密码')"
|
:error-message="errors.oldPassword"
|
:error="!!errors.oldPassword"
|
/>
|
<van-field
|
v-model="newPassword"
|
type="password"
|
:placeholder="$t('请输入新密码')"
|
:error-message="errors.newPassword"
|
:error="!!errors.newPassword"
|
/>
|
<van-field
|
v-model="rePassword"
|
type="password"
|
:placeholder="$t('请确认新密码')"
|
:error-message="errors.rePassword"
|
:error="!!errors.rePassword"
|
/>
|
<button class="btn" @click="submit">{{ $t("确定") }}</button>
|
</van-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import assetsHead from "@/components/assets-head";
|
// import ExInput from "@/components/ex-input";
|
import Axios from "@/API/userCenter.js";
|
import Vue from "vue";
|
import { Field } from "vant";
|
|
Vue.use(Field);
|
export default {
|
props: {},
|
components: {
|
assetsHead,
|
// ExInput,
|
},
|
data() {
|
return {
|
oldPassword: "",
|
newPassword: "",
|
rePassword: "",
|
errors: {
|
oldPassword: "",
|
newPassword: "",
|
rePassword: "",
|
},
|
};
|
},
|
// computed:{
|
// hightLight(){
|
// if (this.oldPassword.length >= 6 && this.newPassword.length >= 6 && this.rePassword.length >= 6) {
|
// return true
|
// } else {
|
// return false
|
// }
|
// }
|
// },
|
methods: {
|
validateInputs() {
|
let isValid = true;
|
this.errors = {
|
oldPassword: "",
|
newPassword: "",
|
rePassword: "",
|
};
|
|
if (!this.oldPassword) {
|
this.errors.oldPassword = this.$t("旧密码不能为空");
|
isValid = false;
|
}
|
if (!this.newPassword) {
|
this.errors.newPassword = this.$t("新密码不能为空");
|
isValid = false;
|
} else if (this.newPassword.length < 6 || this.newPassword.length > 12) {
|
this.errors.newPassword = this.$t("新密码必须是6-12个字符");
|
isValid = false;
|
}
|
if (!this.rePassword) {
|
this.errors.rePassword = this.$t("确认密码不能为空");
|
isValid = false;
|
} else if (this.rePassword !== this.newPassword) {
|
this.errors.rePassword = this.$t("两次输入的密码不一致");
|
isValid = false;
|
}
|
|
return isValid;
|
},
|
submit() {
|
// 调用校验方法
|
// if (!this.validateInputs()) {
|
// return;
|
// }
|
|
Axios.changePassword({
|
old_password: this.oldPassword,
|
password: this.newPassword,
|
re_password: this.rePassword,
|
})
|
.then((res) => {
|
if (res.code !== 0) {
|
this.$toast(this.$t(res.msg));
|
return;
|
}
|
this.$toast(this.$t("修改成功"));
|
setTimeout(() => {
|
this.$router.push("/home");
|
}, 1000);
|
})
|
.catch((error) => {
|
if (error.code === "ECONNABORTED") {
|
this.$toast(this.$t("网络超时！"));
|
} else if (error.msg !== undefined) {
|
this.$toast(this.$t(error.msg));
|
}
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.changePassword {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.line {
|
width: 100%;
|
height: 2px;
|
|
@include themify() {
|
background: themed("tab_background");
|
}
|
}
|
|
.content {
|
// padding: 32px;
|
// font-size: 26px;
|
// width: 100%;
|
background: #212121;
|
border-radius: 1rem;
|
padding: 2rem;
|
margin: 1.8rem 2rem;
|
box-sizing: border-box;
|
font-weight: 700;
|
color: #fff;
|
font-size: 2rem;
|
:deep(.van-cell.van-field) {
|
margin-top: 4.4rem;
|
display: flex;
|
flex-direction: column;
|
font-size: 1.8rem;
|
color: #303133;
|
}
|
:deep(.van-field__control) {
|
// @include themify() {
|
// background: themed("tab_background");
|
// }
|
// border-radius: 1rem;
|
width: 100%;
|
height: 6.4rem;
|
padding: 0 2.4rem !important;
|
background: #333;
|
box-sizing: border-box;
|
color: #fff;
|
border: 1px solid transparent !important;
|
}
|
|
:deep(.van-cell__value) {
|
height: 6.4rem;
|
line-height: 6.4rem;
|
font-weight: 700;
|
color: rgb(255, 255, 255);
|
font-size: 1.8rem;
|
text-align: left;
|
}
|
|
:deep(.van-field__body) {
|
display: flex;
|
position: relative;
|
width: 100%;
|
height: 100%;
|
background: #212121;
|
-webkit-box-orient: vertical;
|
-webkit-box-direction: normal;
|
-webkit-flex-direction: column;
|
flex-direction: column;
|
-webkit-box-pack: center;
|
-webkit-justify-content: center;
|
justify-content: center;
|
}
|
}
|
|
.btn {
|
width: 100%;
|
background: #f7b328;
|
padding: 1.8rem;
|
border-radius: 1rem;
|
color: #fff;
|
text-align: center;
|
font-size: 2rem;
|
margin: 4.1rem 0 2.4rem;
|
}
|
|
.hightLight {
|
@include themify() {
|
background: themed("btn_main");
|
}
|
|
color: #fff;
|
}
|
</style>
|
