From 3ed2cb78a690b64c3b2646d35e1500081186dfa3 Mon Sep 17 00:00:00 2001
From: huzheng12 <52150713+huzheng12@users.noreply.github.com>
Date: Mon, 06 May 2024 00:21:32 +0800
Subject: [PATCH] first commit
---
src/page/register/verify.vue | 330 +++++++++++++++++++++++++++++-------------------------
1 files changed, 175 insertions(+), 155 deletions(-)
diff --git a/src/page/register/verify.vue b/src/page/register/verify.vue
index bcc4d1a..46dbfbc 100644
--- a/src/page/register/verify.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3