1. 找字符串里面的最长的单词
思路:将字符串转换成数组,分别比较数组各个元素的长度,将长度最大的元素赋给temp,最终返回temp,则可得到字符串中最长的
<template>
<div class="page">
<Navigation :active=1></Navigation>
<div class="container">
<div class="bg"></div>
<div class="content mx-auto">
<div class="title">{{ $config.APP_NAME }}</div>
<div class="box">
<div class="inbox">
<div class="title">
用户注册
</div>
<div :class="{err:phoneError}" class="input-box first mx-auto">
<input v-model="phone" maxlength="11" placeholder="请输入您的手机号码"/>
</div>
<div class="input-box mx-auto">
<input v-model="verify" :class="{err:verifyError}" maxlength="6" placeholder="请输入您收到的验证码" type="text"/>
<button class="btn" @click="showTencentCaptcha">{{ smsCd ? `剩余 ${smsCd}秒` : '获取验证码' }}</button>
</div>
<div class="input-box mx-auto">
<input v-model="password" :class="{err:passwordError}" maxlength="32" placeholder="请输入您要设置的密码" type="password"/>
</div>
<div class="user-agreement mx-auto">
<input v-model="agreement" type="checkbox"/>
<span>请阅读并同意 <a href="/terms-of-service" target="_blank">《用户服务协议》</a></span>
</div>
<div class="err-text mx mx-auto">
{{ errText }}
</div>
<div class="btn login mx-auto" @click="register">
注册
</div>
<div class="tips mx-auto">
有账号?
<nuxt-link class="link" to="/login">立即登录</nuxt-link>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "login",
layout: "navigation",
head: {
title: '账号注册 - StormProxies'
},
data() {
return {
errText: "",
phoneError: false,
passwordError: false,
phone: "",
password: "",
verifyError: false,
verify: "",
agreement: false,
smsCd: 0,
tyObj: {
show() {
alert("验证码初始化失败");
},
},
cd: null,
};
},
mounted() {
this.tyObj = new TencentCaptcha(this.$config.TENCENT_CAPTCHA_ID.toString(), this.tyCallback, {
type: "popup",
});
},
beforeDestroy() {
clearInterval(this.cd);
},
methods: {
register() {
this.errText = "";
this.phoneError = false;
this.passwordError = false;
if (this.phone.length !== 11) {
this.phoneError = true;
this.errText = "手机号码不正确";
return;
}
if (this.password.length <= 0) {
this.passwordError = true;
this.errText = "密码不正确";
return;
}
if (this.verify.length !== 6) {
this.verifyError = true;
this.errText = "验证码格式错误";
return;
}
if (!this.agreement) {
this.errText = "请阅读并同意协议";
return;
}
const loading = this.$loading({
text: "上载资料中",
});
this.$axios
.post("/web_v1/user/register", {
phone: this.phone,
verify_code: this.verify,
password: this.password,
})
.then((res) => {
if (res.data.code === 200) {
this.$store.commit("AUTHENTICATED");
this.$store.commit("user/SET_USER_INFO", res.data.data);
this.$router.push({
path: '/user',
})
} else {
this.errText = res.data.msg;
}
})
.finally(() => {
loading.hide();
});
},
showTencentCaptcha() {
if (this.smsCd) {
return;
}
this.errText = "";
if (this.phone.length !== 11) {
this.phoneError = true;
this.errText = "手机号码不正确";
return;
}
this.tyObj.show();
},
tyCallback({randstr, ticket}) {
const loading = this.$loading({
text: "正在发送验证码",
});
this.$axios
.post("/web_v1/sms/send-verify", {
ty_rand_str: randstr,
ty_ticket: ticket,
phone: this.phone,
type: 0,
})
.then((res) => {
if (res.data.code === 200) {
this.$message.success('短信验证码发送成功')
this.smsCd = 59;
this.cd = setInterval(() => {
this.smsCd--;
if (this.smsCd <= 0) {
this.smsCd = 0;
clearInterval(this.cd);
}
}, 1000);
} else {
this.$message.error(res.data.msg);
}
})
.finally(() => {
loading.hide();
});
},
},
};
</script>