brianling/FreePS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(.): Achieve the sms code send

Browse Source
This commit is contained in:
漩葵 2024-06-16 15:19:42 +08:00
parent 8a04c4e72e
commit 02d8b6d5a6
3 changed files with 166 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
components/Default/SilderVerify.vue Normal file
View File

@ -0,0 +1,115 @@
<template>
<div class="silder-range" :class="rangeStatus ? 'success' : ''">
<i
@mousedown="rangeMove"
:class="rangeStatus ? successIcon : startIcon"
></i>
{{ rangeStatus ? successText : startText }}
</div>
</template>
<script>
export default {
props: {
//成功图标
successIcon: {
type: String,
default: "el-icon-success",
},
//成功文字
successText: {
type: String,
default: "验证成功",
},
//开始的图标
startIcon: {
type: String,
default: "el-icon-d-arrow-right",
},
//开始的文字
startText: {
type: String,
default: "拖动滑块到最右侧",
},
},
name: "SilderVerify",
data() {
return {
rangeStatus: "",
};
},
methods: {
rangeMove(e) {
let ele = e.target;
let startX = e.clientX;
let eleWidth = ele.offsetWidth;
let parentWidth = ele.parentElement.offsetWidth;
let MaxX = parentWidth - eleWidth;
if (this.rangeStatus) {
//不运行
return false;
}
document.onmousemove = (e) => {
let endX = e.clientX;
this.disX = endX - startX;
if (this.disX <= 0) {
this.disX = 0;
}
if (this.disX >= MaxX - eleWidth) {
//减去滑块的宽度,体验效果更好
this.disX = MaxX;
}
ele.style.transition = ".1s all";
ele.style.transform = "translateX(" + this.disX + "px)";
e.preventDefault();
};
document.onmouseup = () => {
if (this.disX !== MaxX) {
ele.style.transition = ".5s all";
ele.style.transform = "translateX(0)";
this.$emit("failed", this.rangeStatus);
} else {
this.rangeStatus = true;
this.$emit("success", this.rangeStatus);
}
document.onmousemove = null;
document.onmouseup = null;
};
},
},
};
</script>
<style scoped>
.silder-range {
background-color: #e3e4e6;
position: relative;
transition: 1s all;
user-select: none;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 45px; /*no*/
}
.silder-range i {
position: absolute;
left: 0;
width: 60px; /*no*/
height: 100%;
color: #919191;
background-color: #fff;
border: 1px solid #bbb;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.silder-range.success {
background-color: #7ac23c;
color: #fff;
}
.silder-range.success i {
color: #7ac23c;
}
</style>

24
pages/index.vue
View File

@ -1,14 +1,12 @@
<template slot-scope><!--主页面--> <template slot-scope>
<Head> <!--主页面-->
<Title>FreePotato Server</Title> <Head>
<Meta name="description" content="免费服务器~"/> <Title>FreePotato Server</Title>
</Head> <Meta name="description" content="免费服务器~" />
<ElRow :gutter="10" align="middle" style="height: 900px;"> </Head>
<ElCol :span="24"><IndexNewsCarouel/></ElCol> <ElRow :gutter="10" align="middle" style="height: 900px">
<ElCol :span="24"><IndexNewsStatus/></ElCol> <ElCol :span="24"><IndexNewsCarouel /></ElCol>
</ElRow> <ElCol :span="24"><IndexNewsStatus /></ElCol>
</ElRow>
</template> </template>
<script setup lang="ts"> <script setup lang="ts"></script>
</script>

46
pages/register/index.vue
View File

@ -1,11 +1,11 @@
<template> <template slot-scope>
<!--注册页面--> <!--注册页面-->
<Head> <Head>
<Title>注册页面</Title> <Title>注册页面</Title>
<Meta name="description" /> <Meta name="description" />
</Head> </Head>
<div <div
style="width: 25%; margin: auto" class="formbox"
:style="{ :style="{
boxShadow: `var(--el-box-shadow-light)`, boxShadow: `var(--el-box-shadow-light)`,
}" }"
@ -18,7 +18,7 @@
:model-value="form" :model-value="form"
@update:model-value="form = $event" @update:model-value="form = $event"
validate-on="change" validate-on="change"
style="padding: 30px" style="padding: 5%"
> >
<StaticElement tag="h4" align="center" content="注册" name="static" /> <StaticElement tag="h4" align="center" content="注册" name="static" />
<TextElement <TextElement
@ -29,7 +29,7 @@
placeholder="昵称" placeholder="昵称"
:columns="{ container: 12, label: 3, wrapper: 8 }" :columns="{ container: 12, label: 3, wrapper: 8 }"
rules="required|min:3|max:64" rules="required|min:3|max:64"
@blur="Check()" @input="Check()"
/> />
<PhoneElement <PhoneElement
ref="phone$" ref="phone$"
@ -43,9 +43,19 @@
placeholder="+86" placeholder="+86"
:columns="{ container: 12, label: 3, wrapper: 10 }" :columns="{ container: 12, label: 3, wrapper: 10 }"
rules="required|min:14|max:14" rules="required|min:14|max:14"
@blur="Check()" @input="Check()"
:disabled="phoneChecked" :disabled="phoneChecked"
/> />
<StaticElement
name="static"
:columns="{ container: 12, label: 3, wrapper: 12 }"
>
<DefaultSilderVerify
@success="sliderHandleSuccess"
@failed="sliderHandleError"
/>
</StaticElement>
<TextElement <TextElement
name="code" name="code"
label="验证码" label="验证码"
@ -58,7 +68,7 @@
/> />
<ButtonElement <ButtonElement
name="button" name="button"
:columns="{ container: 4, label: 3, wrapper: 12 }" :columns="{ container: 4, label: 4, wrapper: 12 }"
@click="Send()" @click="Send()"
:button-label="codeBtnRef.text" :button-label="codeBtnRef.text"
:disabled="codeBtnRef.disabled || phoneChecked" :disabled="codeBtnRef.disabled || phoneChecked"
@ -113,6 +123,14 @@ const username$ = ref(null);
const phone$ = ref(null); const phone$ = ref(null);
const code$ = ref(null); const code$ = ref(null);
const canSubmit = ref(false); const canSubmit = ref(false);
let isBot = true;
function sliderHandleSuccess() {
ElMessage({ message: "人机验证已通过", type: "success" });
isBot = false;
}
function sliderHandleError() {
ElMessage({ message: "人机验证未通过", type: "warning" });
}
function Check() { function Check() {
const query = { const query = {
username: form.value.username, username: form.value.username,
@ -145,7 +163,12 @@ function Check() {
}); });
} }
function Send() { function Send() {
if (isBot) {
ElMessage({ message: "人机验证未通过", type: "warning" });
return;
}
Check(); Check();
if (!canSubmit.value) { if (!canSubmit.value) {
$fetch("/api/test/sms", { $fetch("/api/test/sms", {
method: "POST", method: "POST",
@ -209,3 +232,14 @@ function CheckCode() {
} }
} }
</script> </script>
<style>
.formbox {
width: 25%;
margin: auto;
}
@media screen and (max-width: 1200px) {
.formbox {
width: 100%;
}
}
</style>