feat(.): Achieve the sms code send
This commit is contained in:
parent
8a04c4e72e
commit
02d8b6d5a6
115
components/Default/SilderVerify.vue
Normal file
115
components/Default/SilderVerify.vue
Normal 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>
|
||||
@ -1,14 +1,12 @@
|
||||
<template slot-scope><!--主页面-->
|
||||
<template slot-scope>
|
||||
<!--主页面-->
|
||||
<Head>
|
||||
<Title>FreePotato Server</Title>
|
||||
<Meta name="description" content="免费服务器~"/>
|
||||
</Head>
|
||||
<ElRow :gutter="10" align="middle" style="height: 900px;">
|
||||
<ElCol :span="24"><IndexNewsCarouel/></ElCol>
|
||||
<ElCol :span="24"><IndexNewsStatus/></ElCol>
|
||||
<Meta name="description" content="免费服务器~" />
|
||||
</Head>
|
||||
<ElRow :gutter="10" align="middle" style="height: 900px">
|
||||
<ElCol :span="24"><IndexNewsCarouel /></ElCol>
|
||||
<ElCol :span="24"><IndexNewsStatus /></ElCol>
|
||||
</ElRow>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
|
||||
</script>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<template slot-scope>
|
||||
<!--注册页面-->
|
||||
<Head>
|
||||
<Title>注册页面</Title>
|
||||
<Meta name="description" />
|
||||
</Head>
|
||||
<div
|
||||
style="width: 25%; margin: auto"
|
||||
class="formbox"
|
||||
:style="{
|
||||
boxShadow: `var(--el-box-shadow-light)`,
|
||||
}"
|
||||
@ -18,7 +18,7 @@
|
||||
:model-value="form"
|
||||
@update:model-value="form = $event"
|
||||
validate-on="change"
|
||||
style="padding: 30px"
|
||||
style="padding: 5%"
|
||||
>
|
||||
<StaticElement tag="h4" align="center" content="注册" name="static" />
|
||||
<TextElement
|
||||
@ -29,7 +29,7 @@
|
||||
placeholder="昵称"
|
||||
:columns="{ container: 12, label: 3, wrapper: 8 }"
|
||||
rules="required|min:3|max:64"
|
||||
@blur="Check()"
|
||||
@input="Check()"
|
||||
/>
|
||||
<PhoneElement
|
||||
ref="phone$"
|
||||
@ -43,9 +43,19 @@
|
||||
placeholder="+86"
|
||||
:columns="{ container: 12, label: 3, wrapper: 10 }"
|
||||
rules="required|min:14|max:14"
|
||||
@blur="Check()"
|
||||
@input="Check()"
|
||||
:disabled="phoneChecked"
|
||||
/>
|
||||
<StaticElement
|
||||
name="static"
|
||||
:columns="{ container: 12, label: 3, wrapper: 12 }"
|
||||
>
|
||||
<DefaultSilderVerify
|
||||
@success="sliderHandleSuccess"
|
||||
@failed="sliderHandleError"
|
||||
/>
|
||||
</StaticElement>
|
||||
|
||||
<TextElement
|
||||
name="code"
|
||||
label="验证码"
|
||||
@ -58,7 +68,7 @@
|
||||
/>
|
||||
<ButtonElement
|
||||
name="button"
|
||||
:columns="{ container: 4, label: 3, wrapper: 12 }"
|
||||
:columns="{ container: 4, label: 4, wrapper: 12 }"
|
||||
@click="Send()"
|
||||
:button-label="codeBtnRef.text"
|
||||
:disabled="codeBtnRef.disabled || phoneChecked"
|
||||
@ -113,6 +123,14 @@ const username$ = ref(null);
|
||||
const phone$ = ref(null);
|
||||
const code$ = ref(null);
|
||||
const canSubmit = ref(false);
|
||||
let isBot = true;
|
||||
function sliderHandleSuccess() {
|
||||
ElMessage({ message: "人机验证已通过", type: "success" });
|
||||
isBot = false;
|
||||
}
|
||||
function sliderHandleError() {
|
||||
ElMessage({ message: "人机验证未通过", type: "warning" });
|
||||
}
|
||||
function Check() {
|
||||
const query = {
|
||||
username: form.value.username,
|
||||
@ -145,7 +163,12 @@ function Check() {
|
||||
});
|
||||
}
|
||||
function Send() {
|
||||
if (isBot) {
|
||||
ElMessage({ message: "人机验证未通过", type: "warning" });
|
||||
return;
|
||||
}
|
||||
Check();
|
||||
|
||||
if (!canSubmit.value) {
|
||||
$fetch("/api/test/sms", {
|
||||
method: "POST",
|
||||
@ -209,3 +232,14 @@ function CheckCode() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.formbox {
|
||||
width: 25%;
|
||||
margin: auto;
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
.formbox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user