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/changeFundsPassword/index.vue | 449 +++++++++++++++++++++++++++++++++----------------------
1 files changed, 270 insertions(+), 179 deletions(-)
diff --git a/src/page/changeFundsPassword/index.vue b/src/page/changeFundsPassword/index.vue
index 4a2b425..43ba71a 100644
--- a/src/page/changeFundsPassword/index.vue
+++ b/src/page/changeFundsPassword/index.vue
@@ -1,9 +1,9 @@
<template>
- <div class="changePassword">
- <assets-head :title="$t('修改资金密码')" />
- <div class="line"></div>
- <div class="content">
- <ExInput :label="$t('新密码')" :placeholderText="$t('请输入密码')" :tips="$t('请输入6位数字')" v-model="password"
+ <div class="changePassword">
+ <assets-head :title="$t('修改资金密码')" />
+ <div class="line"></div>
+ <div class="content">
+ <!-- <ExInput :label="$t('新密码')" :placeholderText="$t('请输入密码')" :tips="$t('请输入6位数字')" v-model="password"
typeText="password" />
<ExInput :label="$t('确认新密码')" :placeholderText="$t('请输入密码')" :tips="$t('请输入6位数字')" v-model="rePassword"
typeText="password" />
@@ -13,213 +13,304 @@
<input class="inputBackground textColor" type="text" :placeholder="$t('请输入验证码')" v-model="verifyCode">
<span v-if="type != 3" @click="senCode">{{ $t('发送验证码') }}<template v-if="time"> ({{ time
}})s</template></span>
- </div>
- <div class="btn" @click="submit">{{ $t('确定') }}</div>
- </div>
+ </div> -->
+ <van-form validate-first @submit="submit">
+ <van-field
+ v-model="password"
+ type="password"
+ :placeholder="$t('请输入原密码')"
+ />
+ <van-field
+ v-model="rePassword"
+ type="password"
+ :placeholder="$t('请输入新密码')"
+ />
+ <van-field
+ v-model="newPassword"
+ type="password"
+ :placeholder="$t('请确认新密码')"
+ />
+ <div class="btn" @click="submit">{{ $t("确定") }}</div>
+ </van-form>
</div>
+ </div>
</template>
<script>
import assetsHead from "@/components/assets-head";
-import ExInput from "@/components/ex-input";
-import ExChecked from "@/components/ex-checked";
+// import ExInput from "@/components/ex-input";
+// import ExChecked from "@/components/ex-checked";
import Axios from "@/API/userCenter.js";
import ApiLogin from "@/API/login.js";
+import Vue from "vue";
+import { Field } from "vant";
+
+Vue.use(Field);
export default {
- props: {
-
- },
- components: {
- assetsHead,
- ExInput,
- ExChecked
- },
- data() {
- return {
- password: '', //密码
- rePassword: '',//确认密码
- verifcode_type: '',// 验证类型：1/手机；2/邮箱；3/谷歌验证器；
- verifyCode: '', //验证码
- type: 2, //默认选中邮箱
- list: [
- // {
- // name: this.$t('手机验证'),
- // type: 1
- // },
- {
- name: this.$t('邮箱验证'),
- type: 2
- },
- {
- name: this.$t('谷歌验证'),
- type: 3
- },
- ],
- email_authority: false, //是否绑定邮箱
- google_auth_bind: false,//是否绑定谷歌
- phone_authority: false,//是否绑定手机
- email: '',
- phone: '',
- google_auth_secret: '',
- account: '',
- timer: '',
- time: 0
- }
- },
- mounted() {
- this.getVerifTarget();
- clearInterval(this.timer)
- },
- methods: {
- onChecked(type) {
- this.type = type;
- if (this.type == 3 && !this.google_auth_bind) {
- this.$toast(this.$t('请绑定谷歌验证器'))
- }
- if (this.type == 1) {
- this.account = this.phone;
- } else if (this.type == 2) {
- this.account = this.email;
- } else if (this.type == 3) {
- this.account = this.google_auth_secret;
- }
+ props: {},
+ components: {
+ assetsHead,
+ // ExInput,
+ // ExChecked,
+ },
+ data() {
+ return {
+ password: "", //密码
+ newPassword: "", //新密码
+ rePassword: "", //确认密码
+ verifcode_type: "", // 验证类型：1/手机；2/邮箱；3/谷歌验证器；
+ verifyCode: "", //验证码
+ type: 2, //默认选中邮箱
+ list: [
+ // {
+ // name: this.$t('手机验证'),
+ // type: 1
+ // },
+ {
+ name: this.$t("邮箱验证"),
+ type: 2,
},
- submit() {
- if (this.password.length < 6) {
- this.$toast(this.$t('资金密码(6位数字)'))
- return false
- }
- Axios.setSafeword({
- safeword: this.password,
- verifcode_type: this.type,
- verifcode: this.verifyCode
- }).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)); }
- });
+ {
+ name: this.$t("谷歌验证"),
+ type: 3,
},
- async getVerifTarget() {
- Axios.getVerifTarget({
-
- }).then((res) => {
- this.email_authority = res.data.email_authority
- this.google_auth_bind = res.data.google_auth_bind
- this.phone_authority = res.data.phone_authority
- this.email = res.data.email
- this.phone = res.data.phone
- this.google_auth_secret = res.data.google_auth_secret
- }).catch((error) => {
- if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
- else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
- });
-
- },
- senCode() {
- if (this.type == 1 && !this.phone_authority) {
- this.$toast(this.$t('请绑定手机'));
- return false
- }
- if (this.type == 2 && !this.email_authority) {
- this.$toast(this.$t('请绑定邮箱'));
- return false
- }
- this.onChecked(this.type)
+ ],
+ email_authority: false, //是否绑定邮箱
+ google_auth_bind: false, //是否绑定谷歌
+ phone_authority: false, //是否绑定手机
+ email: "",
+ phone: "",
+ google_auth_secret: "",
+ account: "",
+ timer: "",
+ time: 0,
+ };
+ },
+ mounted() {
+ this.getVerifTarget();
+ clearInterval(this.timer);
+ },
+ methods: {
+ onChecked(type) {
+ this.type = type;
+ if (this.type == 3 && !this.google_auth_bind) {
+ this.$toast(this.$t("请绑定谷歌验证器"));
+ }
+ if (this.type == 1) {
+ this.account = this.phone;
+ } else if (this.type == 2) {
+ this.account = this.email;
+ } else if (this.type == 3) {
+ this.account = this.google_auth_secret;
+ }
+ },
+ submit() {
+ if (this.password.length < 6) {
+ this.$toast(this.$t("资金密码(6位数字)"));
+ return false;
+ }
+ Axios.setSafeword({
+ safeword: this.password,
+ verifcode_type: this.type,
+ // verifcode: this.verifyCode,
+ })
+ .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));
+ }
+ });
+ },
+ async getVerifTarget() {
+ Axios.getVerifTarget({})
+ .then((res) => {
+ this.email_authority = res.data.email_authority;
+ this.google_auth_bind = res.data.google_auth_bind;
+ this.phone_authority = res.data.phone_authority;
+ this.email = res.data.email;
+ this.phone = res.data.phone;
+ this.google_auth_secret = res.data.google_auth_secret;
+ })
+ .catch((error) => {
+ if (error.code === "ECONNABORTED") {
+ this.$toast(this.$t("网络超时！"));
+ } else if (error.msg !== undefined) {
+ this.$toast(this.$t(error.msg));
+ }
+ });
+ },
+ senCode() {
+ if (this.type == 1 && !this.phone_authority) {
+ this.$toast(this.$t("请绑定手机"));
+ return false;
+ }
+ if (this.type == 2 && !this.email_authority) {
+ this.$toast(this.$t("请绑定邮箱"));
+ return false;
+ }
+ this.onChecked(this.type);
+ if (this.time > 0) {
+ return false;
+ }
+ ApiLogin.sendVerifyCode({
+ target: this.account,
+ })
+ .then((res) => {
+ this.$toast(this.$t("发送成功"));
+ this.time = 30;
+ this.timer = setInterval(() => {
if (this.time > 0) {
- return false
+ this.time = this.time - 1;
+ } else {
+ this.time = 0;
+ clearInterval(this.timer);
}
- ApiLogin.sendVerifyCode({
- target: this.account,
- }).then((res) => {
- this.$toast(this.$t('发送成功'));
- this.time = 30;
- this.timer = setInterval(() => {
- if (this.time > 0) {
- this.time = this.time - 1
- } else {
- this.time = 0;
- clearInterval(this.timer)
- }
- }, 1000);
- }).catch((error) => {
- if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
- else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
- });
- },
+ }, 1000);
+ })
+ .catch((error) => {
+ if (error.code === "ECONNABORTED") {
+ this.$toast(this.$t("网络超时！"));
+ } else if (error.msg !== undefined) {
+ this.$toast(this.$t(error.msg));
+ }
+ });
},
- beforeDestroy() {
- clearInterval(this.timer)
- },
-}
+ },
+ beforeDestroy() {
+ clearInterval(this.timer);
+ },
+};
</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;
}
.btn {
- @include themify() {
- background: themed("btn_main");
- }
+ // @include themify() {
+ // background: themed("btn_main");
+ // }
- color: #fff;
- height: 88px;
- line-height: 88px;
- text-align: center;
- font-size: 32px;
- margin-top: 44px;
- border-radius: 10px;
- width: 100%;
- border: none;
+ // color: #fff;
+ // height: 88px;
+ // line-height: 88px;
+ // text-align: center;
+ // font-size: 32px;
+ // margin-top: 44px;
+ // border-radius: 10px;
+ // width: 100%;
+ // border: none;
}
-
.iptbox {
- height: 88px;
- margin-top: 16px;
- padding: 0 20px;
+ height: 88px;
+ margin-top: 16px;
+ padding: 0 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-radius: 6px;
+
+ input {
+ flex: 1;
+ height: 100%;
+ border: none;
+ }
+
+ span {
+ color: #1d91ff;
+ }
+}
+
+.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;
- justify-content: space-between;
- align-items: center;
- border-radius: 6px;
+ 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;
+ }
- input {
- flex: 1;
- height: 100%;
- border: none;
- }
+ /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;
+ }
- span {
- color: #1D91FF;
- }
+ /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;
}
</style>
--
Gitblit v1.9.3