代码如下
<!-- 引入极验验证码 放在pblic 官网下载的包,放在本地更稳定-->
<script src="/geetest/gt.js"></script>
// template 因为是登录直接使用axios 和jquery
import $ from "jquery"
<a-form-item field="" hide-asterisk>
<div class="secondBy">
<div id="captcha">
<div id="text">
行为验证™ 安全组件加载中
</div>
<div id="wait" class="show">
<div class="loading">
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
</div>
</div>
</div>
</div>
</a-form-item>
<a-form-item field="phone" hide-asterisk :rules="[
{ required: true, message: '请输入手机号' },
{
required: true,
match: /^1[3456789]\d{9}$/,
message: '手机号格式不正确',
},
]">
<a-input size="large" :max-length="11" style="
background-color: #fff;
border: 0 0 1px 0 solid #ccc;
height: 40px;
" placeholder="请输入手机号" v-model="postData.phone" />
</a-form-item>
// 请求
$.ajax({
url: `http://${import.meta.env.VITE_APP_IP}:9601/system/captcha/index?t=` + (new Date()).getTime(), // 加随机数防止缓存
type: "get",
dataType: "json",
success: function (data) {
$('#text').hide();
$('#wait').show();
// 调用 initGeetest 进行初始化
// 参数1:配置参数
// 参数2:回调,回调的第一个参数验证码对象,之后可以使用它调用相应的接口
initGeetest({
// 以下 4 个配置参数为必须,不能缺少
gt: data.data.gt,
challenge: data.data.challenge,
offline: !data.data.success, // 表示用户后台检测极验服务器是否宕机
new_captcha: data.data.newCaptcha, // 用于宕机时表示是新验证码的宕机
product: "float", // 产品形式,包括:float,popup
width: "348px",
https: true,
api_server: "apiv6.geetest.com"
// 更多前端配置参数说明请参见:http://docs.geetest.com/install/client/web-front/
}, handler);
}
});
var handler = function (captchaObj) {
captchaObj.appendTo('#captcha');
captchaObj.onReady(function () {
$("#wait").hide();
});
// captchaObj.destroy();
var result = captchaObj.getValidate();
$('#btn').click(function () {
var result = captchaObj.getValidate();
if (!result) {
Message.error({
content: "请完成验证",
});
}
getCode(result)
})
// captchaObj.destroy();
// 更多前端接口说明请参见:http://docs.geetest.com/install/client/web-front/
};
// 获取验证码
const getCode = (result) => {
// console.log(result,'jyCheck.value');
if (!/^1[3456789]\d{9}$/.test(postData.phone)) {
postData.phone = "";
Message.error("请输入正确手机号");
return;
}
jyCheck.value.geetest_challenge = result.geetest_challenge,
jyCheck.value.geetest_validate = result.geetest_validate,
jyCheck.value.geetest_seccode = result.geetest_seccode
smsSend({ phone: postData.phone, ...jyCheck.value }).then((res) => {
console.log(res);
if (res.code == 200) {
Message.success({
content: "验证码获取成功",
});
setTime.value = false;
code.value = res.data.myCode;
time.value = 60;
}
});
};
// 确定新增 再注册的时候重新加载组件避免下次加载失败,求大佬更好的方法
const handleSubmitAdd = ({ values, errors }) => {
if (!errors) {
// console.log("注册数据", postData);
if (postData.phone_code !== code.value) {
postData.phone_code = "";
Message.error("验证码不正确");
return;
}
if (postData.password !== postData.password_confirmation) {
postData.password_confirmation = "";
Message.error("请确认密码");
return;
}
register(postData).then((res) => {
// console.log(res);
if (res.code === 200) {
// $('#wait').hide();
// $('#text').show();
loginStu.value = true;
rgs.value = false;
$("#captcha").remove()
$("#wait").remove()
var txt1= ` <div id="captcha"> <div id="text">
行为验证™ 安全组件加载中
</div>
<div id="wait" class="show">
<div class="loading">
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
</div>
</div> </div>`
$(".secondBy").append(txt1)
Message.success({
content: "注册成功",
});
// 再次调用极验验证
$.ajax({
url: `http://${import.meta.env.VITE_APP_IP}:9601/system/captcha/index?t=` + (new Date()).getTime(), // 加随机数防止缓存
type: "get",
dataType: "json",
success: function (data) {
$('#text').hide();
$('#wait').show();
// 调用 initGeetest 进行初始化
// 参数1:配置参数
// 参数2:回调,回调的第一个参数验证码对象,之后可以使用它调用相应的接口
initGeetest({
// 以下 4 个配置参数为必须,不能缺少
gt: data.data.gt,
challenge: data.data.challenge,
offline: !data.data.success, // 表示用户后台检测极验服务器是否宕机
new_captcha: data.data.newCaptcha, // 用于宕机时表示是新验证码的宕机
product: "float", // 产品形式,包括:float,popup
width: "348px",
https: true,
api_server: "apiv6.geetest.com"
// 更多前端配置参数说明请参见:http://docs.geetest.com/install/client/web-front/
}, handler);
}
});
}
});
}
};
// css太多了 没有删
<style scoped lang="less">
.bah {
width: 100%;
height: 30px;
position: absolute;
bottom: 50px;
left: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
}
.aHref {
color: #000
}
.normalR {}
.normalL {
width: 100%;
}
.rgsClass {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -2;
}
.loginClass {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -2;
}
.icon {
display: flex;
align-items: center;
width: 1200px;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.left1 {
width: 307px;
height: 213px;
background: linear-gradient(0deg, #00FFF0 0%, #0BB391 100%);
background-image: url(../assets/newLogin/图层5.png);
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.63;
position: absolute;
top: 49px;
left: 299px;
}
.left2 {
width: 284px;
height:313px;
background-image: url(../assets/newLogin/图层7.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 87px;
left: 580px;
}
.left2t{
width: 82px;
height: 63px;
font-size: 22px;
font-weight: 500;
color: #FFFFFF;
position: absolute;
left: 98px;
top: 167px;
text-align: center;
}
.left3 {
width: 282px;
height:282px;
background-image: url(../assets/newLogin/环境监测.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 359px;
left: 193px;
}
.left3t{
width: 79px;
height: 19px;
font-size: 18px;
font-weight: 500;
color: #FFFFFF;
position: absolute;
left: 101px;
top: 153px;
text-align: center;
}
.left4 {
width: 335px;
height:335px;
background-image: url(../assets/newLogin/圆.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 368px;
left: 491px;
}
.left4t{
width:140px;
height: 90px;
position: absolute;
left: 98px;
top: 120px;
background-image: url(../assets/newLogin/5G.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.left5 {
width: 241px;
height:241px;
background-image: url(../assets/newLogin/设备状态.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 260px;
left: 865px;
}
.left5t{
width: 56px;
height: 14px;
font-size: 14px;
font-weight: 500;
color: #FFFFFF;
position: absolute;
left: 93px;
top: 127px;
text-align: center;
}
.left6 {
width: 392px;
height:258px;
background-image: url(../assets/newLogin/图层4.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 573px;
left: 44px;
}
.left7 {
width: 264px;
height:263px;
background-image: url(../assets/newLogin/光.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 441px;
left: 296px;
}
.left8 {
width: 307px;
height:306px;
background-image: url(../assets/newLogin/气象监测.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 680px;
left: 520px;
}
.left8t{
width: 95px;
height: 23px;
font-size: 20px;
font-weight: 500;
color: #FFFFFF;
position: absolute;
left: 105px;
top: 166px;
text-align: center;
}
.left9 {
width:286px;
height:199px;
background-image: url(../assets/newLogin/图层6.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 800px;
left: 775px;
}
.left10 {
width:293px;
height:279px;
background-image: url(../assets/newLogin/图层8.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 475px;
left: 878px;
}
.left10t{
width: 98px;
height: 24px;
font-size: 20px;
font-weight: 500;
color: #FFFFFF;
position: absolute;
left: 97px;
top: 144px;
text-align: center;
}
.rightK {
width: 800px;
height: 100%;
}
:deep .arco-tabs-tab-title {
font-size: 22px;
}
:deep .arco-tabs-tab-active {
color: #4cd392;
}
:deep .arco-tabs-nav-ink {
z-index: 20;
}
.from {
width: 100%;
padding: 10px 10px 10px 0;
position: relative;
}
.itemFrom {
width: 400px;
position: absolute;
top:200px;
right: 200px;
min-height: 350px;
background-color: #fff;
border-radius: 5px;
border: 1px solid #fff;
/* box-shadow:inset 1px 1px 0 0 ,1px 3px 5px 1px #fff; */
}
.bg {
background-image: url(../assets/newLogin/背景.png);
background-size: 100% 100%;
background-repeat: no-repeat;
overflow: hidden;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
:deep.arco-input-wrapper.arco-input-focus {
border-bottom: 1px solid #4cd392;
border-top: none;
border-left: none;
border-right: none;
box-shadow: 0;
}
:deep .arco-input-wrapper {
border-top: none;
border-left: none;
border-right: none;
}
.inp {
border: 1px solid #cccccc;
border-radius: 2px;
padding: 0 10px;
width: 278px;
height: 40px;
font-size: 18px;
}
.btn {
display: inline-block;
box-sizing: border-box;
border: 1px solid #cccccc;
border-radius: 2px;
width: 100px;
height: 40px;
line-height: 40px;
font-size: 16px;
color: #666;
cursor: pointer;
background: white linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
}
.btn:hover {
background: white linear-gradient(0deg, #ffffff 0%, #f3f3f3 100%)
}
#captcha {
width: 348px;
display: inline-block;
}
label {
vertical-align: top;
display: inline-block;
width: 80px;
text-align: right;
}
.geetest_success_animate {
width: 348px !important;
}
.geetest_ghost_success {
width: 348px !important;
}
#text {
height: 42px;
width: 346px;
text-align: center;
border-radius: 2px;
background-color: #F3F3F3;
color: #BBBBBB;
font-size: 14px;
letter-spacing: 0.1px;
line-height: 42px;
}
#wait {
display: none;
height: 42px;
width: 346px;
text-align: center;
border-radius: 2px;
background-color: #F3F3F3;
}
.loading {
margin: auto;
width: 70px;
height: 20px;
}
.loading-dot {
float: left;
width: 8px;
height: 8px;
margin: 18px 4px;
background: #ccc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
opacity: 0;
-webkit-box-shadow: 0 0 2px black;
-moz-box-shadow: 0 0 2px black;
-ms-box-shadow: 0 0 2px black;
-o-box-shadow: 0 0 2px black;
box-shadow: 0 0 2px black;
-webkit-animation: loadingFade 1s infinite;
-moz-animation: loadingFade 1s infinite;
animation: loadingFade 1s infinite;
}
.loading-dot:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s;
}
.loading-dot:nth-child(2) {
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.loading-dot:nth-child(3) {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading-dot:nth-child(4) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
}
@-webkit-keyframes loadingFade {
0% {
opacity: 0;
}
50% {
opacity: 0.8;
}
100% {
opacity: 0;
}
}
@-moz-keyframes loadingFade {
0% {
opacity: 0;
}
50% {
opacity: 0.8;
}
100% {
opacity: 0;
}
}
@keyframes loadingFade {
0% {
opacity: 0;
}
50% {
opacity: 0.8;
}
100% {
opacity: 0;
}
}
#full-screen-box {
height: 1080px !important;
width: 1920px !important;
position: relative;
/* overflow: hidden; */
}
</style>