From 45190f969dd8c7d3d2c6e366694f0dadc5ea07e8 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Mon, 19 May 2025 16:43:12 +0800
Subject: [PATCH] 样式修改
---
src/page/changePassword/index.vue | 275 +++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 197 insertions(+), 78 deletions(-)
diff --git a/src/page/changePassword/index.vue b/src/page/changePassword/index.vue
index bcde521..08ca107 100644
--- a/src/page/changePassword/index.vue
+++ b/src/page/changePassword/index.vue
@@ -1,109 +1,228 @@
<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个字符，包括数字或字母')"
+ <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" />
- <button class="btn btnMain" @click="submit">{{
- $t('确定') }}</button>
- </div>
+ <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 ExInput from "@/components/ex-input";
import Axios from "@/API/userCenter.js";
-export default {
- props: {
+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;
},
- components: {
- assetsHead,
- ExInput,
+ 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));
+ }
+ });
},
- data() {
- return {
- oldPassword: '',
- newPassword: '',
- rePassword: '',
- }
- },
- // computed:{
- // hightLight(){
- // if (this.oldPassword.length >= 6 && this.newPassword.length >= 6 && this.rePassword.length >= 6) {
- // return true
- // } else {
- // return false
- // }
- // }
- // },
- methods: {
- submit() {
- Axios.changePassword({
- old_password: this.oldPassword,
- password: this.newPassword,
- re_password: this.rePassword,
- }).then((res) => {
- 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;
+ width: 100%;
+ box-sizing: border-box;
}
-
-
-
-
-
-
.line {
- width: 100%;
- height: 2px;
+ width: 100%;
+ height: 2px;
- @include themify() {
- background: themed("tab_background");
- }
+ @include themify() {
+ background: themed("tab_background");
+ }
}
.content {
- padding: 32px;
- font-size: 26px;
+ // 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 {
- height: 88px;
- line-height: 88px;
- text-align: center;
- font-size: 32px;
- margin-top: 44px;
- border-radius: 10px;
- width: 100%;
- border: none;
+ 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");
- }
+ @include themify() {
+ background: themed("btn_main");
+ }
- color: #fff;
+ color: #fff;
}
</style>
--
Gitblit v1.9.3