样式修改

lxf

2025-05-19 45190f969dd8c7d3d2c6e366694f0dadc5ea07e8

 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>