first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 src/page/register/verify.vue

@@ -1,176 +1,196 @@
<template>
    <div class="verify">
        <div class="header">
            <div @click="$router.go(-1)"><img src="../../assets/image/assets-center/left-arrow.png" alt=""
                    class="w-14 h-27" /></div>
<!--            <div class="textColor" @click="$router.push('/setFond')">{{ $t('跳过') }}</div>-->
        </div>
        <div class="content">
            <div class="title textColor" v-if="type==1">{{ $t('邮箱验证') }}</div>
            <div class="title textColor" v-if="type==2">{{ $t('手机验证') }}</div>
            <p v-if="type == 1">{{ $t('verifyEmailTips', { 'account': account }) }}</p>
            <p v-if="type == 2">{{ $t('verifyPhoneTips', { 'account': account }) }}</p>
            <div class="iptbox inputBackground">
                <input class="inputBackground textColor" type="text" :placeholder="$t('请输入验证码')" v-model="verifyCode">
                <span @click="senCode">{{ $t('重新发送验证码') }} <template v-if="time"> ({{ time }})s</template></span>
            </div>
            <div class="btn btnMain" @click="bound">{{ $t('绑定') }}</div>
        </div>
  <div class="verify">
    <div class="header">
      <div @click="$router.go(-1)">
        <img
          src="../../assets/image/assets-center/left-arrow.png"
          alt=""
          class="w-14 h-27"
        />
      </div>
      <!--            <div class="textColor" @click="$router.push('/setFond')">{{ $t('跳过') }}</div>-->
    </div>
    <div class="content">
      <div class="title textColor" v-if="type == 1">{{ $t("邮箱验证") }}</div>
      <div class="title textColor" v-if="type == 2">{{ $t("手机验证") }}</div>
      <p v-if="type == 1">{{ $t("verifyEmailTips", { account: account }) }}</p>
      <p v-if="type == 2">{{ $t("verifyPhoneTips", { account: account }) }}</p>
      <div class="iptbox inputBackground">
        <input
          class="inputBackground textColor"
          type="text"
          :placeholder="$t('请输入验证码')"
          v-model="verifyCode"
        />
        <span @click="senCode"
          >{{ $t("重新发送验证码") }}
          <template v-if="time"> ({{ time }})s</template></span
        >
      </div>
      <div class="btn btnMain" @click="bound">{{ $t("绑定") }}</div>
    </div>
  </div>
</template>

<script>
import API from "@/API/login.js";
import Axios from "@/API/userCenter.js";
    export default {
        props: {

        },
        components: {

        },
        data(){
            return {
                verifyCode:'',
                type:'',
                account: '',
                timer:'',
                time:0
export default {
  props: {},
  components: {},
  data() {
    return {
      verifyCode: "",
      type: "",
      account: "",
      timer: "",
      time: 0,
    };
  },
  mounted() {
    let type = this.$route.query.type;
    this.type = type;
    let account = this.$route.query.account;
    this.account = account;
    clearInterval(this.timer);
    this.senCode();
  },
  methods: {
    bound() {
      if (this.verifyCode.length < 6) {
        this.$toast(this.$t("请输入6位验证码"));
        return;
      }
      switch (this.type) {
        case 1: {
          this.bindEmail();
          break;
        }
        case 2: {
          this.bindPhone();
          break;
        }
      }
    },
    bindEmail() {
      Axios.bindEmail({
        email: this.account,
        verifcode: this.verifyCode,
      })
        .then((res) => {
          this.$toast(this.$t("绑定成功"));
          this.$router.push("/setFond");
        })
        .catch((error) => {
          if (error.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时！"));
          } else if (error.msg !== undefined) {
            this.$toast(this.$t(error.msg));
          }
        });
    },
    bindPhone() {
      Axios.bindPhone({
        phone: this.account,
        verifcode: this.verifyCode,
      })
        .then((res) => {
          this.$toast(this.$t("绑定成功"));
          this.$router.push("/setFond");
        })
        .catch((error) => {
          if (error.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时！"));
          } else if (error.msg !== undefined) {
            this.$toast(this.$t(error.msg));
          }
        });
    },
    senCode() {
      if (this.time > 0) {
        return false;
      }
      API.sendVerifyCode({
        target: this.account,
      })
        .then((res) => {
          this.time = 30;
          this.timer = setInterval(() => {
            if (this.time > 0) {
              this.time = this.time - 1;
            } else {
              this.time = 0;
              clearInterval(this.timer);
            }
        },
        mounted(){
            let type = this.$route.query.type;
            this.type = type;
            let account = this.$route.query.account;
            this.account = account;
            clearInterval(this.timer)
            this.senCode();
        },
        methods: {
            bound(){
                if (this.verifyCode.length<6){
                    this.$toast(this.$t('请输入6位验证码'));
                    return
                }
                switch(this.type){
                    case 1:
                        {
                            this.bindEmail()
                            break;
                        }
                    case 2:
                        {
                            this.bindPhone()
                            break;
                        }
                }
               
            },
            bindEmail() {
                Axios.bindEmail({
                    email: this.account,
                    verifcode: this.verifyCode
                }).then((res) => {
                    this.$toast(this.$t('绑定成功'));
                    this.$router.push('/setFond')
                }).catch((error) => {
                    if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                    else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}  
                });
            },
            bindPhone() {
                Axios.bindPhone({
                    phone: this.account,
                    verifcode: this.verifyCode
                }).then((res) => {
                    this.$toast(this.$t('绑定成功'));
                    this.$router.push('/setFond')
                }).catch((error) => {
                    if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                    else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}   
                });
            },
            senCode(){
                if (this.time>0){
                    return false
                }
                API.sendVerifyCode({
                    target: this.account,
                }).then((res) => {
                    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));}    
                });
            }
        },
        beforeDestroy() {
            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));
          }
        });
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>

.verify{
    font-size: 26px;
    padding: 0 32px;
    width: 100%;
    box-sizing: border-box;
.verify {
  font-size: 26px;
  padding: 0 32px;
  width: 100%;
  box-sizing: border-box;
}
.header{
    display: flex;
    justify-content: space-between;
    padding: 0 26px;
    font-size: 28px;
    height: 100px;
    line-height: 100px;
.header {
  display: flex;
  justify-content: space-between;
  padding: 0 26px;
  font-size: 28px;
  height: 100px;
  line-height: 100px;
}
.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 54px;
    margin-bottom: 33px;
  font-weight: 700;
  font-size: 52px;
  margin-top: 54px;
  margin-bottom: 33px;
}
.content{
    p{
        color: #868D9A;
        font-size: 30px;
        margin-bottom: 50px;
.content {
  p {
    color: #868d9a;
    font-size: 30px;
    margin-bottom: 50px;
  }
  .iptbox {
    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;
    }
    .iptbox {
        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;
        }
    span {
      color: #1d91ff;
    }
  }
}
.btn {
    color: #fff;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    margin-top: 40px;
    border-radius: 10px;
  color: #fff;
  height: 88px;
  line-height: 88px;
  text-align: center;
  font-size: 32px;
  margin-top: 40px;
  border-radius: 10px;
}
</style>