重写了登录页，修改了首页飘窗
This commit is contained in:
zhangyong
parent
c1d46bb3ca
commit
3acb556f87
Binary file not shown.
|
Before Width: | Height: | Size: 707 B After Width: | Height: | Size: 266 B |
@ -222,7 +222,7 @@ export default {
|
||||
getData () {
|
||||
axios.get(`https://www.aimzhu.com/operator/app/help-detail/listpagerelease/${this.pageSize}/${this.currentPage}?keywords=${this.searchQuery}`)
|
||||
.then(response => {
|
||||
// console.log(response.data);
|
||||
console.log(response.data);
|
||||
this.xs1 = false
|
||||
this.xs2 = true
|
||||
this.pagedData = response.data.rows
|
||||
|
||||
@ -164,7 +164,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { onMounted, onUnmounted, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';
|
||||
import axios from 'axios'
|
||||
@ -207,17 +206,11 @@ export default {
|
||||
|
||||
imgFloat: '',
|
||||
floatImg: '',
|
||||
|
||||
contentId: '',
|
||||
title: '',
|
||||
|
||||
sportStatus: false,
|
||||
moveX: 0, //X轴方向上移动的距离
|
||||
moveY: 0, //Y轴方向上移动的距离
|
||||
stepX: 2, //图片X轴移动的速度
|
||||
stepY: 2, //图片Y轴移动的速度
|
||||
directionX: 0, //设置图片在X轴方向上的移动方向 0:向右 1:向左
|
||||
directionY: 0, //设置图片在Y轴方向上的移动方向 0:向下 1:向上
|
||||
timer: null,
|
||||
|
||||
floatWindowKey: 0, // 添加一个key来强制重新渲染
|
||||
floatWindow: {
|
||||
left: 0,
|
||||
top: 0,
|
||||
@ -229,29 +222,7 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
// created() {
|
||||
// this.sportStatus = true
|
||||
// // this.timer = setInterval(()=>{
|
||||
// // this.sportTranstion()
|
||||
// // }, 30);
|
||||
|
||||
// this.startFloatWindowTimer()
|
||||
// // this.refreshPage();
|
||||
// },
|
||||
// beforeDestroy() {
|
||||
// this.clearFloatWindowTimer();
|
||||
// console.log(222);
|
||||
// this.sportStatus = false
|
||||
// clearInterval(this.timer)
|
||||
|
||||
// },
|
||||
|
||||
|
||||
methods: {
|
||||
refreshPage() {
|
||||
location. reload(); // 刷新页面
|
||||
},
|
||||
|
||||
selectStep1(index) {
|
||||
this.currentStepIndex1 = index; // 设置当前选中的步骤索引
|
||||
},
|
||||
@ -316,10 +287,14 @@ export default {
|
||||
// 飘窗所需图片内容
|
||||
floatContent() {
|
||||
axios.get('https://www.aimzhu.com/operator/app/content/listByIdentifyingrelease/bayWindow').then(response => {
|
||||
// console.log(response.data);
|
||||
// console.log(response.data)
|
||||
if (response.data.length != 0) {
|
||||
const imgFolat = response.data[0].photo
|
||||
this.floatImg = `https://www.aimzhu.com/operator/route/file/download/true/${imgFolat}`
|
||||
this.contentId = response.data[0].contentId
|
||||
this.title = response.data[0].title
|
||||
this.sportStatus = true
|
||||
this.floatWindowMove();
|
||||
} else {
|
||||
this.sportStatus = false
|
||||
}
|
||||
@ -334,13 +309,13 @@ export default {
|
||||
let winWidth = window.innerWidth;
|
||||
let winHeight = window.innerHeight;
|
||||
this.timer = setInterval(() => {
|
||||
if(self.floatWindow.top + 100 >= winHeight) {
|
||||
if(self.floatWindow.top + 200 >= winHeight) {
|
||||
self.floatWindow.direction.top = -1;
|
||||
} else if(self.floatWindow.top <= 0) {
|
||||
self.floatWindow.direction.top = 1;
|
||||
}
|
||||
|
||||
if(self.floatWindow.left + 100 >= winWidth) {
|
||||
if(self.floatWindow.left + 200 >= winWidth) {
|
||||
self.floatWindow.direction.left = -1;
|
||||
} else if(self.floatWindow.left <= 0) {
|
||||
self.floatWindow.direction.left = 1;
|
||||
@ -364,7 +339,7 @@ export default {
|
||||
},
|
||||
// 飘窗跳转
|
||||
windowSkip() {
|
||||
window.open('https://www.aimzhu.com/floatPage.html');
|
||||
window.open(`https://www.aimzhu.com/operator/route/content/view?contentId=${this.contentId}&title=${this.title}`);
|
||||
},
|
||||
},
|
||||
|
||||
@ -388,9 +363,8 @@ export default {
|
||||
}).catch(error => {
|
||||
console.error('Error fetching data:', error)
|
||||
});
|
||||
this.sportStatus = true
|
||||
// this.startFloatWindowTimer()
|
||||
this.floatWindowMove();
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
@ -518,33 +492,29 @@ export default {
|
||||
}
|
||||
|
||||
/* 飘窗 */
|
||||
.home-page .pcdiv {
|
||||
position: absolute;
|
||||
width: 100vh;
|
||||
height: 100vw;
|
||||
.float-window {
|
||||
position: fixed;
|
||||
/* width: 120px;
|
||||
height: 120px; */
|
||||
width: 171.25px;
|
||||
height: 214.25px;
|
||||
/* background-color: black; */
|
||||
z-index: 99999999;
|
||||
}
|
||||
.home-page #sport_wrap {
|
||||
/* position: absolute;
|
||||
display: block; */
|
||||
/* display: none; */
|
||||
/* z-index: 99999999999;
|
||||
width:150px;
|
||||
height:150px; */
|
||||
/* line-height: 70px; */
|
||||
cursor: pointer;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.home-page #sport_wrap .deleteImg {
|
||||
width: 20px;
|
||||
height:20px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position:absolute;
|
||||
right:-10px;
|
||||
top:-10px;
|
||||
right: 12px;
|
||||
top: 9px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-page #sport_wrap .deleteImg .close {
|
||||
width:20px !important;
|
||||
height: 20px !important;
|
||||
width:16px !important;
|
||||
height: 16px !important;
|
||||
}
|
||||
|
||||
.home-page .box-bottom {
|
||||
@ -603,6 +573,7 @@ export default {
|
||||
}
|
||||
.home-page .box-bottom .icon {
|
||||
/* position: absolute; */
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
bottom: 10px;
|
||||
@ -946,12 +917,4 @@ export default {
|
||||
margin: 10px 10px 10px auto;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
|
||||
.float-window {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
/* background-color: black; */
|
||||
z-index: 99999999;
|
||||
}
|
||||
</style>
|
||||
897
src/components/Register copy.html
Normal file
897
src/components/Register copy.html
Normal file
@ -0,0 +1,897 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/svg+xml" href="./assets/AImzhu.svg">
|
||||
<title>注册界面</title>
|
||||
</head>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<!-- <link rel="stylesheet" href="./layer/layer.css"> -->
|
||||
<link rel="stylesheet" href="./layui/css/layui.css">
|
||||
<link rel="stylesheet" href="./assets/font/iconfont.css">
|
||||
|
||||
<style>
|
||||
.register-page {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: url(../assets/img/login-register-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0, 10px;
|
||||
}
|
||||
|
||||
.sign {
|
||||
display: flex;
|
||||
/* position: absolute; */
|
||||
width: 500px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.sign h2 {
|
||||
width: 180px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
/* padding: auto 20px auto 50px; */
|
||||
font-size: 36px;
|
||||
margin: auto 20px auto 50px;
|
||||
}
|
||||
|
||||
.sign p {
|
||||
width: 180px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
margin: auto 0;
|
||||
/* height: 20px; */
|
||||
padding: 0 25px;
|
||||
border-left: 2px solid rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.sign a {
|
||||
width: 260px;
|
||||
height: 46px;
|
||||
margin-left: 50px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.go-page {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
/* position: absolute; */
|
||||
width: 260px;
|
||||
height: 80px;
|
||||
/* border: 2px solid red; */
|
||||
font-size: 16px;
|
||||
/* right: 0; */
|
||||
}
|
||||
|
||||
.go-page #login {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin: auto 0;
|
||||
margin-right: 20px;
|
||||
padding: 0 20px;
|
||||
border-radius: 20px;
|
||||
/* border: none; */
|
||||
background-color: rgba(255, 255, 255, .4);
|
||||
color: #42210B;
|
||||
}
|
||||
|
||||
.go-page #back-homepage {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin: auto 0;
|
||||
margin-right: 40px;
|
||||
padding: 0 20px;
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
/* background-color: rgba(255, 255, 255, .3); */
|
||||
background-color: #42210B;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
#login:hover {
|
||||
background-color: #42210B;
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#back-homepage:hover {
|
||||
background-color: #332817;
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#zcbd {
|
||||
width: 420px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
ul {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* width: 380px; */
|
||||
/* margin: auto; */
|
||||
padding: 20px 40px;
|
||||
border-radius: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
ul li {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
width: 340px;
|
||||
height: 38px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ul li input,
|
||||
ul li select {
|
||||
width: 340px;
|
||||
height: 36px;
|
||||
padding-left: 20px;
|
||||
border: 1.25px solid #CCCCCC;
|
||||
border-radius: 3px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
input:-webkit-autofill {
|
||||
background: transparent;
|
||||
transition: background-color 50000s ease-in-out 0s;
|
||||
-webkit-text-fill-color: unset;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: #999999
|
||||
}
|
||||
|
||||
ul li input:focus {
|
||||
border: 0.5px solid #fa911e;
|
||||
}
|
||||
|
||||
ul li input:hover {
|
||||
border: 0.25px solid #fa911e;
|
||||
}
|
||||
|
||||
ul li:nth-child(1) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
ul li:nth-child(1) h4 {
|
||||
/* width: 100px; */
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
/* text-align: center; */
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
/* border-bottom: 5px solid #fda633; */
|
||||
margin: auto 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
ul li:nth-child(1) span {
|
||||
height: 5px;
|
||||
width: 50px;
|
||||
margin-left: 35px;
|
||||
background-color: #fda633;
|
||||
}
|
||||
|
||||
/* ul li:nth-child(3) #yzm:hover {
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
font-weight: 550;
|
||||
-webkit-box-shadow: 0 0 10px #fda633;
|
||||
-moz-box-shadow: 0 0 10px #fda633;
|
||||
box-shadow: 0 0 10px #fda633;
|
||||
} */
|
||||
|
||||
ul li:nth-child(3) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul li:nth-child(3) #yzm {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 36px;
|
||||
color: #0095ff;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
ul li:nth-child(3) #yzm:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
ul li:nth-child(4) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul li:nth-child(4) span {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
right: 5px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
|
||||
|
||||
ul li:nth-child(4) span:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
/* ul li:nth-child(5) #userRole {
|
||||
color: #333;
|
||||
} */
|
||||
|
||||
ul li:nth-child(5) {
|
||||
height: 26px;
|
||||
/* line-height: 16px; */
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
ul li:nth-child(5) .row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 340px;
|
||||
}
|
||||
|
||||
ul li:nth-child(5) #chec {
|
||||
/* display: flex; */
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
/* margin-left: 10px; */
|
||||
}
|
||||
|
||||
ul li:nth-child(5) p {
|
||||
/* display: flex; */
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
height: 16px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
ul li:nth-child(5) p a:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
ul li:nth-child(6) button {
|
||||
width: 340px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background-color: #fda633;
|
||||
color: #FFF;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
ul li:nth-child(6) button:hover {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
-webkit-box-shadow: 0 0 10px #fda633;
|
||||
-moz-box-shadow: 0 0 10px #fda633;
|
||||
box-shadow: 0 0 10px #fda633;
|
||||
}
|
||||
|
||||
ul li:nth-child(7) {
|
||||
font-size: 14px;
|
||||
margin-bottom: 0;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
ul li:nth-child(7) a {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
ul li:nth-child(7) a:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.custom-bg-color {
|
||||
background-color: rgba(8, 195, 237, 0.3) !important;
|
||||
}
|
||||
|
||||
.custom-font-size {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
.custom-bold-font {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.custom-color {
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
||||
.custom-border {
|
||||
border: 2px solid red !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="register-page">
|
||||
<div class="nav">
|
||||
<div class="sign">
|
||||
<!-- <h2><a href="http://121.36.71.250:58040/src/components/#/HomePage">腾狮科技</a></h2>
|
||||
<p>AI人工智能软著申请</p> -->
|
||||
<a href="https://www.aimzhu.com">
|
||||
<img src="./assets/img/headicon2.png" alt="logo图标">
|
||||
</a>
|
||||
</div>
|
||||
<div class="go-page">
|
||||
<a id="login" href="https://www.aimzhu.com/operator/">登录</a>
|
||||
<a id="back-homepage" href="https://www.aimzhu.com">返回首页</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 注册框 -->
|
||||
<form action="" id="zcbd" class="register">
|
||||
<ul class="register_box">
|
||||
<!-- 1 标题 -->
|
||||
<li>
|
||||
<h4>平台账号注册</h4>
|
||||
<span></span>
|
||||
</li>
|
||||
<!-- 2 手机号输入框 -->
|
||||
<li>
|
||||
<input id="phone" type="text" placeholder="请输入您的真实手机号" onfocus="getphone()" onblur="losephone()">
|
||||
|
||||
</li>
|
||||
|
||||
<!-- 3 输入短信验证码 -->
|
||||
<li>
|
||||
<input id="inputyzm" type="text" placeholder="请输入短信验证码" onfocus="getinputyzm()" onblur="loseinputyzm()">
|
||||
<button type="button" id="yzm">获取验证码</button>
|
||||
</li>
|
||||
<!-- 4. 设置密码 -->
|
||||
<li>
|
||||
<input id="password" type="password" placeholder="请输入8~16位密码，区分大小写" onfocus="getpassword()"
|
||||
onblur="losepassword()">
|
||||
<span id="passwordeye" class="iconfont icon-xianshiyincang1"></span>
|
||||
</li>
|
||||
<!-- 5. 勾选用户协议 -->
|
||||
<li>
|
||||
<div class="row" id="row123">
|
||||
<input id="chec" type="checkbox">
|
||||
<p>我同意平台
|
||||
<a id="openUserAgreement" class="layer-btn" href="https://www.aimzhu.com/UserAgreement.html"
|
||||
target="_blank">《用户服务协议》</a>和<a href="https://www.aimzhu.com/PrivacyPolicy.html"
|
||||
target="_blank">《隐私条款》</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
<!-- 6. 点击注册 -->
|
||||
<li>
|
||||
<button type="button" id="register" class="stopbtn" onclick="usersubmit()">注册</button>
|
||||
</li>
|
||||
<!-- 7. 已有账号，立即登录 -->
|
||||
<li>
|
||||
<p>已有账号？<a href="https://www.aimzhu.com/operator/">立即登录</a></p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="./jquery.min.js"></script>
|
||||
<script src="./layui/layui.js"></script>
|
||||
<!-- <script src="./layer/layer.js"></script> -->
|
||||
<script src="./Register.js"></script>
|
||||
<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script>
|
||||
|
||||
// 2. 验证手机号
|
||||
function getphone() {
|
||||
layer.tips('请输入您的真实手机号', '#phone', {
|
||||
// id: 'tips1',
|
||||
shadeClose: false,
|
||||
tips: [2, '#30a6f5'],
|
||||
time: 0,
|
||||
area: ['auto', '36px'],
|
||||
show: true
|
||||
})
|
||||
}
|
||||
//手机号失去焦点
|
||||
function losephone() {
|
||||
var phone = document.getElementById('phone');
|
||||
var reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
|
||||
if (phone.value == '') {
|
||||
layer.tips('X 请您填写手机号', '#phone', {
|
||||
// id: 'tips1-1',
|
||||
shadeClose: false,
|
||||
tips: [2, 'red'],
|
||||
time: 0,
|
||||
area: ['auto', '36px'],
|
||||
show: true
|
||||
})
|
||||
return false;
|
||||
} else {
|
||||
if (!reg.test(phone.value)) {
|
||||
layer.tips('X 请输入正确的手机号', '#phone', {
|
||||
// id: 'tips1-2',
|
||||
shadeClose: false,
|
||||
tips: [2, 'red'],
|
||||
time: 0,
|
||||
area: ['auto', '36px'],
|
||||
show: true
|
||||
|
||||
})
|
||||
return false;
|
||||
} else {
|
||||
layer.tips('√', '#phone', {
|
||||
// id: 'tips1-3',
|
||||
shadeClose: false,
|
||||
tips: [2, 'green'],
|
||||
time: 0,
|
||||
area: ['auto', '36px'],
|
||||
show: true
|
||||
})
|
||||
return true;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// 4. 验证输入短信验证码
|
||||
function getinputyzm() {
|
||||
layer.tips('请输入验证码', '#inputyzm', {
|
||||
// id: 'tips2',
|
||||
shadeClose: false,
|
||||
tips: [2, '#30a6f5'],
|
||||
time: 0,
|
||||
area: ['auto', '36px']
|
||||
})
|
||||
}
|
||||
function loseinputyzm() {
|
||||
var inputyzm = document.querySelector('#inputyzm')
|
||||
var yzmcode = /^[0-9]\d{5}$/;
|
||||
if (inputyzm.value == '') {
|
||||
layer.tips('X 请您填写验证码', '#inputyzm', {
|
||||
// id: 'tips2-1',
|
||||
tips: [2, 'red'],
|
||||
time: 0,
|
||||
area: ['auto', '36px'],
|
||||
show: true
|
||||
})
|
||||
return false;
|
||||
} else {
|
||||
if (!yzmcode.test(inputyzm.value)) {
|
||||
//验证不成功
|
||||
layer.tips('X 请您正确填写验证码', '#inputyzm', {
|
||||
// id: 'tips2-2',
|
||||
tips: [2, 'red'],
|
||||
time: 0,
|
||||
area: ['auto', '36px'],
|
||||
show: true
|
||||
})
|
||||
return false;
|
||||
} else {
|
||||
//验证成功
|
||||
layer.tips('√', '#inputyzm', {
|
||||
// id: 'tips2-3',
|
||||
tips: [2, 'green'],
|
||||
time: 0,
|
||||
area: ['auto', '36px'],
|
||||
show: true
|
||||
})
|
||||
return true;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// 5.密码验证
|
||||
function getpassword() {
|
||||
layer.tips('请输入8~16位密码，区分大小写', '#password', {
|
||||
// id: 'tips3',
|
||||
shadeClose: false,
|
||||
tips: [2, '#30a6f5'],
|
||||
time: 0,
|
||||
area: ['auto', '36px']
|
||||
})
|
||||
}
|
||||
function losepassword() {
|
||||
var password = document.querySelector('#password').value
|
||||
var pwdyz = /^[A-Za-z0-9!@#$%^&*()_+{}\[\]:;<>,.?\/~`-]{8,16}$/
|
||||
|
||||
if (password.value = '') {
|
||||
layer.tips('X 请您填写密码(8-16位，区分大小写)', '#password', {
|
||||
// id: 'tips3-1',
|
||||
tips: [2, 'red'],
|
||||
time: 0,
|
||||
area: ['auto', '36px'],
|
||||
show: true
|
||||
})
|
||||
return false;
|
||||
} else {
|
||||
if (!pwdyz.test(password)) {
|
||||
//验证不成功
|
||||
layer.tips('X 请您正确填写密码(8-16位，区分大小写)', '#password', {
|
||||
// id: 'tips3-2',
|
||||
tips: [2, 'red'],
|
||||
time: 0,
|
||||
area: ['auto', '36px'],
|
||||
show: true
|
||||
})
|
||||
return false;
|
||||
} else {
|
||||
//验证成功
|
||||
layer.tips('√', '#password', {
|
||||
// id: 'tips3-3',
|
||||
tips: [2, 'green'],
|
||||
time: 0,
|
||||
area: ['auto', '36px'],
|
||||
show: true
|
||||
})
|
||||
return true;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// 点击注册按钮验证所填内容与是否勾选同意并遵守《用户服务协议》
|
||||
function usersubmit() {
|
||||
var chec = document.querySelector('#chec')
|
||||
// var myselect = document.querySelector('#userRole')
|
||||
// var index = myselect.selectedIndex
|
||||
var userchecked = false;
|
||||
// console.log(myselect.options[index].value);
|
||||
|
||||
var phone = losephone()
|
||||
if (phone === false) {
|
||||
return
|
||||
}
|
||||
var yzm11 = loseinputyzm()
|
||||
if (yzm11 === false) {
|
||||
return
|
||||
}
|
||||
var pwd = losepassword()
|
||||
if (pwd === false) {
|
||||
return
|
||||
}
|
||||
|
||||
// if (myselect.options[index].value === '') {
|
||||
// layer.tips('请选择注册为普通用户或代理商', '#userRole', {
|
||||
// tips: [2, 'red'],
|
||||
// time: 0,
|
||||
// area: ['auto', '36px'],
|
||||
// show: true
|
||||
// })
|
||||
// return
|
||||
// } else {
|
||||
// layer.tips('√', '#userRole', {
|
||||
// tips: [2, 'green'],
|
||||
// time: 0,
|
||||
// area: ['auto', '36px'],
|
||||
// show: true
|
||||
// })
|
||||
// }
|
||||
|
||||
if (chec.checked == true) {
|
||||
userchecked = true
|
||||
layer.tips('√', '#row123', {
|
||||
tips: [2, 'green'],
|
||||
time: 0,
|
||||
area: ['auto', '36px'],
|
||||
show: true
|
||||
})
|
||||
|
||||
} else {
|
||||
layer.tips('请阅读并同意《用户服务协议》和《隐私条款》', '#row123', {
|
||||
tips: [2, 'red'],
|
||||
time: 0,
|
||||
area: ['auto', '36px'],
|
||||
show: true
|
||||
})
|
||||
return
|
||||
// userchecked = false;
|
||||
}
|
||||
DoSomething()
|
||||
|
||||
}
|
||||
// 显示隐藏密码
|
||||
switchPwd()
|
||||
function switchPwd() {
|
||||
var passwordeye = $('#passwordeye')
|
||||
var showPwd = $('#password')
|
||||
passwordeye.off('click').on('click', function () {
|
||||
if (passwordeye.hasClass('icon-xianshiyincang1')) {
|
||||
// 密码可见
|
||||
passwordeye.removeClass('icon-xianshiyincang1').addClass('icon-xianshiyincang')
|
||||
showPwd.prop('type', 'text')
|
||||
} else {
|
||||
passwordeye.removeClass('icon-xianshiyincang').addClass('icon-xianshiyincang1')
|
||||
showPwd.prop('type', 'password')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
$("#yzm").click(function (e) {
|
||||
let phoneVal = $("#phone").val()
|
||||
if (phoneVal === '') {
|
||||
layer.msg('请填写手机号', {
|
||||
icon: 2,
|
||||
time: 2000,
|
||||
offset: '50px',
|
||||
})
|
||||
} else {
|
||||
let phoneResult = "https://www.aimzhu.com/operator/api/systemuser/check-exists/" + phoneVal
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
dataType: 'json',
|
||||
url: "https://www.aimzhu.com/operator/api/systemuser/check-exists/" + phoneVal,
|
||||
success: function (msg) {
|
||||
if (msg) {
|
||||
layer.msg('用户已经存在，请更换手机号', {
|
||||
icon: 2,
|
||||
time: 2000,
|
||||
offset: '50px',
|
||||
})
|
||||
} else {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
dataType: 'json',
|
||||
url: "https://www.aimzhu.com/operator/app/sms/verify-code/" + phoneVal,
|
||||
success: function (msg) {
|
||||
// alert('验证码已发送')
|
||||
layer.msg('注册验证码已经发送到手机上，有效时间2分钟', {
|
||||
icon: 1,
|
||||
time: 6000,
|
||||
offset: '50px',
|
||||
// shade: [0.5, '#000'],
|
||||
// skin: ['custom-bg-color']
|
||||
})
|
||||
|
||||
// 启动倒计时
|
||||
startCountdown()
|
||||
},
|
||||
error: function (data) {
|
||||
console.log(data);
|
||||
document.getElementById('yzm').disabled = false;
|
||||
document.getElementById('yzm').innerText = '获取验证码';
|
||||
layer.msg('获取验证码失败,请不要在验证码有效期内重新获取', {
|
||||
icon: 2,
|
||||
time: 2000,
|
||||
offset: '50px',
|
||||
// skin: ['custom-bg-color']
|
||||
// shade: [0.5, '#000'],
|
||||
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function (data) {
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
// axios.get(phoneResult).then(response => {
|
||||
// console.log(response.data);
|
||||
// let jieguo = response.data
|
||||
// if (jieguo) {
|
||||
// layer.msg('用户已经存在，请更换手机号', {
|
||||
// icon: 2,
|
||||
// time: 2000,
|
||||
// offset: '50px',
|
||||
// })
|
||||
// } else {
|
||||
// $.ajax({
|
||||
// type: "GET",
|
||||
// dataType: 'json',
|
||||
// url: "https://www.aimzhu.com/operator/app/sms/verify-code/" + phoneVal,
|
||||
// success: function (msg) {
|
||||
// // alert('验证码已发送')
|
||||
// layer.msg('注册验证码已经发送到手机上，有效时间2分钟', {
|
||||
// icon: 1,
|
||||
// time: 6000,
|
||||
// offset: '50px',
|
||||
// // shade: [0.5, '#000'],
|
||||
// // skin: ['custom-bg-color']
|
||||
// })
|
||||
|
||||
// // 启动倒计时
|
||||
// startCountdown()
|
||||
// },
|
||||
// error: function (data) {
|
||||
// console.log(data);
|
||||
// document.getElementById('yzm').disabled = false;
|
||||
// document.getElementById('yzm').innerText = '获取验证码';
|
||||
// layer.msg('获取验证码失败,请不要在验证码有效期内重新获取', {
|
||||
// icon: 2,
|
||||
// time: 2000,
|
||||
// offset: '50px',
|
||||
// // skin: ['custom-bg-color']
|
||||
// // shade: [0.5, '#000'],
|
||||
|
||||
// })
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// })
|
||||
|
||||
|
||||
// if (phoneResult.value) {
|
||||
// layer.msg('用户已经存在，请更换手机号', {
|
||||
// icon: 2,
|
||||
// time: 2000,
|
||||
// })
|
||||
// } else {
|
||||
|
||||
// $.ajax({
|
||||
// type: "GET",
|
||||
// dataType: 'json',
|
||||
// url: "http://121.36.71.250:58085/operator/app/sms/verify-code/" + phoneVal,
|
||||
// success: function (msg) {
|
||||
// // alert('验证码已发送')
|
||||
// layer.msg('注册验证码已经发送到手机上，有效时间2分钟', {
|
||||
// icon: 1,
|
||||
// time: 6000,
|
||||
// offset: ['50px', '600px'],
|
||||
// // shade: [0.5, '#000'],
|
||||
// skin: ['custom-bg-color']
|
||||
// })
|
||||
|
||||
// // 启动倒计时
|
||||
// startCountdown()
|
||||
// },
|
||||
// error: function (data) {
|
||||
// console.log(data);
|
||||
// document.getElementById('yzm').disabled = false;
|
||||
// document.getElementById('yzm').innerText = '获取验证码';
|
||||
// layer.msg('获取验证码失败,请不要在验证码有效期内重新获取', {
|
||||
// icon: 2,
|
||||
// time: 2000,
|
||||
// // offset: ['50px', '700px'],
|
||||
// // shade: [0.5, '#000'],
|
||||
|
||||
// })
|
||||
// }
|
||||
// });
|
||||
|
||||
// }
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
function startCountdown() {
|
||||
remainingTime = 120;
|
||||
document.getElementById('yzm').disabled = true;
|
||||
// countdownTimer = setInterval(() => {
|
||||
// remainingTime--;
|
||||
// if (remainingTime <= 0) {
|
||||
// clearInterval(countdownTimer);
|
||||
// document.getElementById('yzm').disabled = false;
|
||||
// document.getElementById('yzm').innerText = '获取验证码';
|
||||
// } else {
|
||||
// document.getElementById('yzm').innerText = `重新获取(${remainingTime}秒)`;
|
||||
// }
|
||||
// }, 1000);
|
||||
|
||||
countdownTimer = setInterval(function () {
|
||||
remainingTime--;
|
||||
if (remainingTime <= 0) {
|
||||
clearInterval(countdownTimer);
|
||||
document.getElementById('yzm').disabled = false;
|
||||
document.getElementById('yzm').innerText = '获取验证码';
|
||||
} else {
|
||||
document.getElementById('yzm').innerText = `重新获取(${remainingTime}秒)`;
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
}
|
||||
|
||||
|
||||
function DoSomething(e) {
|
||||
var phoneVal = $("#phone").val();
|
||||
var inputyzm = $("#inputyzm").val();
|
||||
var password = $("#password").val();
|
||||
var password2 = $("#password").val();
|
||||
var userRole = "606f85bc-63fd-407e-8e2e-6ce48178b70a";
|
||||
|
||||
var data = {
|
||||
password: password,
|
||||
passwordSame: password,
|
||||
phone: phoneVal,
|
||||
verifyCode: inputyzm
|
||||
}
|
||||
console.log('data', data);
|
||||
$('#register').attr('disabled', 'disabled')
|
||||
$('#register').css('cursor', 'no-drop')
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
data: JSON.stringify(data),
|
||||
contentType: "application/json;charset=utf-8",
|
||||
url: "https://www.aimzhu.com/operator/app/register/phone-password?userRole=" + userRole,
|
||||
success: function (data) {
|
||||
// $('#register').attr('disabled', 'disabled')
|
||||
// $('#register').css('cursor', 'no-drop')
|
||||
// alert("注册成功");
|
||||
layer.msg('注册成功', {
|
||||
time: 2000,
|
||||
icon: 6,
|
||||
shadeClose: false,
|
||||
shift: 1,
|
||||
offset: '50px',
|
||||
}, function () {
|
||||
// 当消息关闭后执行的回调函数
|
||||
startCountdown()
|
||||
})
|
||||
|
||||
console.log('success', data);
|
||||
|
||||
function startCountdown() {
|
||||
// 设置倒计时 5s
|
||||
var countdownSeconds = 3
|
||||
// 每秒更新倒计时
|
||||
var countdownInterval = setInterval(function () {
|
||||
countdownSeconds--;
|
||||
// 显示倒计时信息
|
||||
layer.msg(countdownSeconds + '秒后跳转到登录页', {
|
||||
time: 3000,
|
||||
shadeClose: false,
|
||||
icon: 6
|
||||
})
|
||||
if (countdownSeconds <= 0) {
|
||||
clearInterval(countdownInterval)
|
||||
// 跳转到登录页
|
||||
window.location.href = 'https://www.aimzhu.com/operator/'
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
},
|
||||
error: function (data, code) {
|
||||
// alert("注册失败")
|
||||
$('#register').removeAttr('disabled')
|
||||
$('#register').css('cursor', 'pointer')
|
||||
layer.msg(data.responseJSON.msg, {
|
||||
icon: 5,
|
||||
time: 3000,
|
||||
})
|
||||
// const errmsg = data.responseJSON.msg
|
||||
// alert(data.responseJSON.msg)
|
||||
console.log('error', data);
|
||||
console.log('error', code);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -364,10 +364,7 @@
|
||||
<input id="phone" type="text" placeholder="请输入您的真实手机号" onfocus="getphone()" onblur="losephone()">
|
||||
|
||||
</li>
|
||||
<!-- 3 点击获取验证码 -->
|
||||
<!-- <li>
|
||||
<input id="yzm" type="button" value="点击获取验证码">
|
||||
</li> -->
|
||||
|
||||
<!-- 3 输入短信验证码 -->
|
||||
<li>
|
||||
<input id="inputyzm" type="text" placeholder="请输入短信验证码" onfocus="getinputyzm()" onblur="loseinputyzm()">
|
||||
@ -379,25 +376,14 @@
|
||||
onblur="losepassword()">
|
||||
<span id="passwordeye" class="iconfont icon-xianshiyincang1"></span>
|
||||
</li>
|
||||
<!-- 5. 选择用户角色 -->
|
||||
<!-- <li>
|
||||
<select id="userRole" name="userRole">
|
||||
<option selected disabled value="">普通用户/代理商</option>
|
||||
<option value="606f85bc-63fd-407e-8e2e-6ce48178b70a">普通用户</option>
|
||||
<option value="d67bf05f-4d1c-43c1-bd15-41730c1dd117">代理商</option>
|
||||
</select>
|
||||
</li> -->
|
||||
<!-- 5. 勾选用户协议 -->
|
||||
<li>
|
||||
<div class="row" id="row123">
|
||||
<input id="chec" type="checkbox">
|
||||
<p>我同意平台
|
||||
<!-- <a id="openUserAgreement" class="layer-btn"
|
||||
href="J:\project\Ai_Softness\src\components\UserAgreement.html" target="_blank">《用户服务协议》</a> -->
|
||||
<a id="openUserAgreement" class="layer-btn" href="https://www.aimzhu.com/UserAgreement.html"
|
||||
target="_blank">《用户服务协议》</a>和<a href="https://www.aimzhu.com/PrivacyPolicy.html"
|
||||
target="_blank">《隐私条款》</a>
|
||||
<!-- <a id="openUserAgreement" class="layer-btn" onclick="xieyiPage()">《用户服务协议》</a> -->
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -409,7 +395,6 @@
|
||||
</li>
|
||||
<!-- 7. 已有账号，立即登录 -->
|
||||
<li>
|
||||
<!-- <p>已有账号？<a href="http://192.168.0.115:8091/operator/route/systemuser/login">立即登录</a></p> -->
|
||||
<p>已有账号？<a href="https://www.aimzhu.com/operator/">立即登录</a></p>
|
||||
</li>
|
||||
</ul>
|
||||
@ -426,6 +411,7 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script>
|
||||
|
||||
// const phone = document.querySelector('#phone')
|
||||
// 2. 验证手机号
|
||||
function getphone() {
|
||||
layer.tips('请输入您的真实手机号', '#phone', {
|
||||
@ -596,23 +582,6 @@
|
||||
return
|
||||
}
|
||||
|
||||
// if (myselect.options[index].value === '') {
|
||||
// layer.tips('请选择注册为普通用户或代理商', '#userRole', {
|
||||
// tips: [2, 'red'],
|
||||
// time: 0,
|
||||
// area: ['auto', '36px'],
|
||||
// show: true
|
||||
// })
|
||||
// return
|
||||
// } else {
|
||||
// layer.tips('√', '#userRole', {
|
||||
// tips: [2, 'green'],
|
||||
// time: 0,
|
||||
// area: ['auto', '36px'],
|
||||
// show: true
|
||||
// })
|
||||
// }
|
||||
|
||||
if (chec.checked == true) {
|
||||
userchecked = true
|
||||
layer.tips('√', '#row123', {
|
||||
@ -661,107 +630,129 @@
|
||||
offset: '50px',
|
||||
})
|
||||
} else {
|
||||
let phoneResult = `https://www.aimzhu.com/operator/api/systemuser/check-exists/` + phoneVal
|
||||
axios.get(phoneResult).then(response => {
|
||||
console.log(response.data);
|
||||
let jieguo = response.data
|
||||
if (jieguo) {
|
||||
layer.msg('用户已经存在，请更换手机号', {
|
||||
icon: 2,
|
||||
time: 2000,
|
||||
offset: '50px',
|
||||
})
|
||||
} else {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
dataType: 'json',
|
||||
url: "https://www.aimzhu.com/operator/app/sms/verify-code/" + phoneVal,
|
||||
success: function (msg) {
|
||||
// alert('验证码已发送')
|
||||
layer.msg('注册验证码已经发送到手机上，有效时间2分钟', {
|
||||
icon: 1,
|
||||
time: 6000,
|
||||
offset: '50px',
|
||||
// shade: [0.5, '#000'],
|
||||
// skin: ['custom-bg-color']
|
||||
})
|
||||
let phoneResult = "https://www.aimzhu.com/operator/api/systemuser/check-exists/" + phoneVal
|
||||
|
||||
// 启动倒计时
|
||||
startCountdown()
|
||||
},
|
||||
error: function (data) {
|
||||
console.log(data);
|
||||
document.getElementById('yzm').disabled = false;
|
||||
document.getElementById('yzm').innerText = '获取验证码';
|
||||
layer.msg('获取验证码失败,请不要在验证码有效期内重新获取', {
|
||||
icon: 2,
|
||||
time: 2000,
|
||||
offset: '50px',
|
||||
// skin: ['custom-bg-color']
|
||||
// shade: [0.5, '#000'],
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
dataType: 'json',
|
||||
url: "https://www.aimzhu.com/operator/api/systemuser/check-exists/" + phoneVal,
|
||||
success: function (msg) {
|
||||
if (msg) {
|
||||
layer.msg('用户已经存在，请更换手机号', {
|
||||
icon: 2,
|
||||
time: 2000,
|
||||
offset: '50px',
|
||||
})
|
||||
} else {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
dataType: 'json',
|
||||
url: "https://www.aimzhu.com/operator/app/sms/verify-code/" + phoneVal,
|
||||
success: function (msg) {
|
||||
// alert('验证码已发送')
|
||||
layer.msg('注册验证码已经发送到手机上，有效时间2分钟', {
|
||||
icon: 1,
|
||||
time: 6000,
|
||||
offset: '50px',
|
||||
// shade: [0.5, '#000'],
|
||||
// skin: ['custom-bg-color']
|
||||
})
|
||||
|
||||
// 启动倒计时
|
||||
startCountdown()
|
||||
},
|
||||
error: function (data) {
|
||||
console.log(data);
|
||||
document.getElementById('yzm').disabled = false;
|
||||
document.getElementById('yzm').innerText = '获取验证码';
|
||||
layer.msg('获取验证码失败,请不要在验证码有效期内重新获取', {
|
||||
icon: 2,
|
||||
time: 2000,
|
||||
offset: '50px',
|
||||
// skin: ['custom-bg-color']
|
||||
// shade: [0.5, '#000'],
|
||||
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function (data) {
|
||||
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
// if (phoneResult.value) {
|
||||
// layer.msg('用户已经存在，请更换手机号', {
|
||||
// icon: 2,
|
||||
// time: 2000,
|
||||
// })
|
||||
// } else {
|
||||
|
||||
// $.ajax({
|
||||
// type: "GET",
|
||||
// dataType: 'json',
|
||||
// url: "http://121.36.71.250:58085/operator/app/sms/verify-code/" + phoneVal,
|
||||
// success: function (msg) {
|
||||
// // alert('验证码已发送')
|
||||
// layer.msg('注册验证码已经发送到手机上，有效时间2分钟', {
|
||||
// icon: 1,
|
||||
// time: 6000,
|
||||
// offset: ['50px', '600px'],
|
||||
// // shade: [0.5, '#000'],
|
||||
// skin: ['custom-bg-color']
|
||||
// })
|
||||
|
||||
// // 启动倒计时
|
||||
// startCountdown()
|
||||
// },
|
||||
// error: function (data) {
|
||||
// console.log(data);
|
||||
// document.getElementById('yzm').disabled = false;
|
||||
// document.getElementById('yzm').innerText = '获取验证码';
|
||||
// layer.msg('获取验证码失败,请不要在验证码有效期内重新获取', {
|
||||
// icon: 2,
|
||||
// time: 2000,
|
||||
// // offset: ['50px', '700px'],
|
||||
// // shade: [0.5, '#000'],
|
||||
|
||||
// })
|
||||
// }
|
||||
// });
|
||||
|
||||
// }
|
||||
// axios.get(phoneResult).then(response => {
|
||||
// console.log(response.data);
|
||||
// let jieguo = response.data
|
||||
// if (jieguo) {
|
||||
// layer.msg('用户已经存在，请更换手机号', {
|
||||
// icon: 2,
|
||||
// time: 2000,
|
||||
// offset: '50px',
|
||||
// })
|
||||
// } else {
|
||||
// $.ajax({
|
||||
// type: "GET",
|
||||
// dataType: 'json',
|
||||
// url: "https://www.aimzhu.com/operator/app/sms/verify-code/" + phoneVal,
|
||||
// success: function (msg) {
|
||||
// // alert('验证码已发送')
|
||||
// layer.msg('注册验证码已经发送到手机上，有效时间2分钟', {
|
||||
// icon: 1,
|
||||
// time: 6000,
|
||||
// offset: '50px',
|
||||
// // shade: [0.5, '#000'],
|
||||
// // skin: ['custom-bg-color']
|
||||
// })
|
||||
|
||||
// // 启动倒计时
|
||||
// startCountdown()
|
||||
// },
|
||||
// error: function (data) {
|
||||
// console.log(data);
|
||||
// document.getElementById('yzm').disabled = false;
|
||||
// document.getElementById('yzm').innerText = '获取验证码';
|
||||
// layer.msg('获取验证码失败,请不要在验证码有效期内重新获取', {
|
||||
// icon: 2,
|
||||
// time: 2000,
|
||||
// offset: '50px',
|
||||
// // skin: ['custom-bg-color']
|
||||
// // shade: [0.5, '#000'],
|
||||
|
||||
// })
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
});
|
||||
function startCountdown() {
|
||||
remainingTime = 120;
|
||||
document.getElementById('yzm').disabled = true;
|
||||
countdownTimer = setInterval(() => {
|
||||
// countdownTimer = setInterval(() => {
|
||||
// remainingTime--;
|
||||
// if (remainingTime <= 0) {
|
||||
// clearInterval(countdownTimer);
|
||||
// document.getElementById('yzm').disabled = false;
|
||||
// document.getElementById('yzm').innerText = '获取验证码';
|
||||
// } else {
|
||||
// document.getElementById('yzm').innerText = `重新获取(${remainingTime}秒)`;
|
||||
// }
|
||||
// }, 1000);
|
||||
|
||||
countdownTimer = setInterval(function () {
|
||||
remainingTime--;
|
||||
if (remainingTime <= 0) {
|
||||
clearInterval(countdownTimer);
|
||||
document.getElementById('yzm').disabled = false;
|
||||
document.getElementById('yzm').innerText = '获取验证码';
|
||||
} else {
|
||||
document.getElementById('yzm').innerText = `重新获取(${remainingTime}秒)`;
|
||||
document.getElementById('yzm').innerText = '重新获取(' + remainingTime + '秒)';
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -804,7 +795,7 @@
|
||||
console.log('success', data);
|
||||
|
||||
function startCountdown() {
|
||||
// 设置倒计时 5s
|
||||
// 设置倒计时 3s
|
||||
var countdownSeconds = 3
|
||||
// 每秒更新倒计时
|
||||
var countdownInterval = setInterval(function () {
|
||||
|
||||
104
src/components/floatPage copy.html
Normal file
104
src/components/floatPage copy.html
Normal file
@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/svg+xml" href="./assets/AImzhu.svg">
|
||||
<title id="HTMLBT">AI秒著引擎</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
em,
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul,
|
||||
li,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 1000px;
|
||||
margin: 0 auto;
|
||||
/* border: 1px solid #333; */
|
||||
padding-top: 50px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
#title {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
|
||||
#content {
|
||||
line-height: 35px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<h2 id="title"></h2>
|
||||
<!-- <h2 id="title" v-html="title"></h2> -->
|
||||
<div id="content"></div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script>
|
||||
const htmlBT = document.querySelector('#HTMLBT')
|
||||
const content = document.querySelector('#content')
|
||||
const title = document.querySelector('#title')
|
||||
axios.get('https://www.aimzhu.com/operator/app/content/listByIdentifyingrelease/bayWindow').then(response => {
|
||||
const data = response.data;
|
||||
const contentText = response.data[0].content
|
||||
const basUrl = 'https://www.aimzhu.com/operator/'
|
||||
// 函数用于修改富文本中的图片URL
|
||||
function fixImageUrls(contentText, baseUrl) {
|
||||
return contentText.replace(/src="([^"]+)"/g, function (match, p1) {
|
||||
// 如果图片URL不是以 http(s):// 开头，则拼接基地址
|
||||
return 'src="' + (p1.startsWith('http') ? p1 : baseUrl + p1) + '"';
|
||||
});
|
||||
}
|
||||
|
||||
// 函数用于将处理后的富文本内容渲染到网页上
|
||||
function renderRichText(contentText) {
|
||||
// 获取页面中用于显示富文本的元素
|
||||
const contentElement = document.getElementById('content');
|
||||
// 修改图片URL
|
||||
const fixedRichText = fixImageUrls(contentText, baseUrl);
|
||||
// 将处理后的富文本内容设置到元素的 innerHTML 中
|
||||
contentElement.innerHTML = fixedRichText;
|
||||
}
|
||||
|
||||
// this.title = response.data.title;
|
||||
// this.data = response.data.content;
|
||||
htmlBT.innerHTML = response.data[0].title
|
||||
title.innerHTML = response.data[0].title
|
||||
// content.innerHTML = response.data[0].content
|
||||
// console.log(response.data);
|
||||
// console.log(response.data.agreementType);
|
||||
// console.log(response.data.content);
|
||||
|
||||
}).catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
414
src/components/register2 copy.html
Normal file
414
src/components/register2 copy.html
Normal file
@ -0,0 +1,414 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<!-- <link rel="stylesheet" href="../assets/font/iconfont.css">
|
||||
<link rel="stylesheet" href="./layui/css/layui.css"> -->
|
||||
<style>
|
||||
.page {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: url(../assets/img/login-register-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.page .top {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 100vw;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.top .left {
|
||||
width: 260px;
|
||||
height: 50px;
|
||||
margin: 15px 50px;
|
||||
}
|
||||
|
||||
.top .left .logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../assets/img/headicon2.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.top .right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
margin: 20px 30px;
|
||||
}
|
||||
|
||||
.top .right #login {
|
||||
font-size: 16px;
|
||||
padding: 5px 20px;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
color: #42210B;
|
||||
}
|
||||
|
||||
.top .right #login:hover {
|
||||
cursor: pointer;
|
||||
background: #42210B;
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.top .right #goHomePage {
|
||||
font-size: 16px;
|
||||
padding: 5px 20px;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
color: #FFF;
|
||||
background: #42210B;
|
||||
}
|
||||
|
||||
.top .right #goHomePage:hover {
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loginBox {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 500px;
|
||||
height: 550px;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.loginBox .title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loginBox .title h3 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loginBox .title span {
|
||||
display: block;
|
||||
width: 70px;
|
||||
height: 5px;
|
||||
background-color: #fda633;
|
||||
margin-left: 30px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.loginBox .msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
margin-bottom: 20px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
text-indent: 15px;
|
||||
border: none;
|
||||
border: 1.5px solid #CCC;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
input:-webkit-autofill {
|
||||
background: transparent;
|
||||
transition: background-color 50000s ease-in-out 0s;
|
||||
-webkit-text-fill-color: unset;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: #999999
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li input:focus-within {
|
||||
border: 1.25px solid #fa911e;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li input:hover {
|
||||
border: 1.25px solid #fa911e;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(2) button {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
letter-spacing: 2px;
|
||||
margin: 10px 0;
|
||||
cursor: pointer;
|
||||
color: #0095ff;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(2) button:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: start;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement input {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 10px 0;
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement a {
|
||||
color: #0095ff;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement a:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.loginBox .msg #register {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background-color: #fda633;
|
||||
color: #FFF;
|
||||
font-size: 18px;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.loginBox .msg #register:hover {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
-webkit-box-shadow: 0 0 10px #fda633;
|
||||
-moz-box-shadow: 0 0 10px #fda633;
|
||||
box-shadow: 0 0 10px #fda633;
|
||||
}
|
||||
|
||||
.loginBox .goPage {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: end;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-top: 10px;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.loginBox .goPage a {
|
||||
color: #0095ff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="top">
|
||||
<a class="left" href="https://www.aimzhu.com">
|
||||
<div class="logo"></div>
|
||||
</a>
|
||||
<div class="right">
|
||||
<button id="login" class="login">登录</button>
|
||||
<button id="goHomePage" class="goHomePage">返回首页</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="loginBox">
|
||||
<div class="title">
|
||||
<h3>平台账号注册</h3>
|
||||
<span></span>
|
||||
</div>
|
||||
<form action="" class="msg">
|
||||
<ul class="msgBox">
|
||||
<li>
|
||||
<input id="phone" type="text" placeholder="请输入您的手机号">
|
||||
</li>
|
||||
<li>
|
||||
<input id="code" type="text" placeholder="请输入短信验证码">
|
||||
<button id="getCode" type="button">获取验证码</button>
|
||||
</li>
|
||||
<li>
|
||||
<input id="pwd" type="password" placeholder="请输入密码">
|
||||
<i id="showHide"></i>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="agreement">
|
||||
<input type="checkbox">我同意平台
|
||||
<a href="https://www.aimzhu.com/UserAgreement.html" target="_blank">《用户服务协议》</a>
|
||||
和
|
||||
<a href="https://www.aimzhu.com/PrivacyPolicy.html" target="_blank">《隐私条款》</a>
|
||||
</div>
|
||||
<button id="register" class="register" type="button">注册</button>
|
||||
</form>
|
||||
<div class="goPage">
|
||||
<span>已有账号？<a href="https://www.aimzhu.com/operator/">立即登录</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./jquery.min.js"></script>
|
||||
<script src="./layui/layui.js"></script>
|
||||
<script src="./Register.js"></script>
|
||||
<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script>
|
||||
|
||||
const $ = layui.jquery;
|
||||
const layer = layui.layer;
|
||||
|
||||
let isPhoneValid = false;
|
||||
let isCodeSent = false;
|
||||
let countdown = 120;
|
||||
|
||||
// 手机号校验
|
||||
function validatePhone(phone) {
|
||||
const phoneRegex = /^1[3-9]\d{9}$/;
|
||||
return phoneRegex.test(phone);
|
||||
}
|
||||
|
||||
// 密码校验
|
||||
function validatePassword(password) {
|
||||
const passwordRegex = /^[A-Za-z0-9!@#$%^&*()_+{}\[\]:;<>,.?\/~\-]{8,16}$/;
|
||||
return passwordRegex.test(password);
|
||||
}
|
||||
|
||||
// 更新注册按钮状态
|
||||
function updateRegisterButtonStatus() {
|
||||
const phone = $('#phone').val();
|
||||
const code = $('#code').val();
|
||||
const pwd = $('#pwd').val();
|
||||
const agreement = $('.agreement input').prop('checked');
|
||||
const isFormValid = isPhoneValid && code && validatePassword(pwd) && agreement;
|
||||
$('#register').prop('disabled', !isFormValid);
|
||||
}
|
||||
|
||||
// 获取验证码按钮倒计时
|
||||
function startCountdown() {
|
||||
const getCodeButton = $('#getCode');
|
||||
getCodeButton.text('重新获取(' + countdown + 's)后');
|
||||
getCodeButton.prop('disabled', true);
|
||||
countdown--;
|
||||
|
||||
if (countdown >= 0) {
|
||||
setTimeout(startCountdown, 1000);
|
||||
} else {
|
||||
getCodeButton.text('获取验证码');
|
||||
getCodeButton.prop('disabled', false);
|
||||
countdown = 120;
|
||||
}
|
||||
}
|
||||
|
||||
// 事件绑定
|
||||
$(document).ready(function () {
|
||||
$('#phone').on('input', function () {
|
||||
const phone = $(this).val();
|
||||
isPhoneValid = validatePhone(phone);
|
||||
updateRegisterButtonStatus();
|
||||
});
|
||||
|
||||
$('#getCode').on('click', function () {
|
||||
const phone = $('#phone').val();
|
||||
if (!isPhoneValid) {
|
||||
layer.msg('请输入正确的手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
// 发送请求1，校验手机号是否存在
|
||||
axios.get('https://www.aimzhu.com/operator/api/systemuser/check-exists/' + phone)
|
||||
.then(function (response) {
|
||||
if (response.data) {
|
||||
layer.msg('此用户已存在');
|
||||
} else {
|
||||
// 发送请求2，发送验证码
|
||||
axios.get('https://www.aimzhu.com/operator/app/sms/verify-code/' + phone)
|
||||
.then(function (response) {
|
||||
layer.msg('验证码已发送');
|
||||
isCodeSent = true;
|
||||
startCountdown();
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error(error);
|
||||
layer.msg('验证码发送失败');
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error(error);
|
||||
layer.msg('校验手机号失败');
|
||||
});
|
||||
});
|
||||
|
||||
$('#pwd').on('input', updateRegisterButtonStatus);
|
||||
$('.agreement input').on('change', updateRegisterButtonStatus);
|
||||
|
||||
$('#register').on('click', function () {
|
||||
const phone = $('#phone').val();
|
||||
const verifyCode = $('#code').val();
|
||||
const password = $('#pwd').val();
|
||||
const passwordSame = $('#pwd').val();
|
||||
|
||||
$(this).prop('disabled', true);
|
||||
|
||||
// 发送请求到后端
|
||||
axios.post('https://www.aimzhu.com/operator/app/register/phone-password?userRole=606f85bc-63fd-407e-8e2e-6ce48178b70a', { phone, verifyCode, password, passwordSame })
|
||||
.then(function (response) {
|
||||
layer.msg('注册成功，3秒后跳转登录页', { time: 3000 }, function () {
|
||||
window.location.href = 'https://www.aimzhu.com/operator/';
|
||||
});
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error(error);
|
||||
layer.msg('注册失败');
|
||||
$('#register').prop('disabled', false);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
527
src/components/register2.html
Normal file
527
src/components/register2.html
Normal file
@ -0,0 +1,527 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/svg+xml" href="./assets/AImzhu.svg">
|
||||
<title>注册界面</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<link rel="stylesheet" href="./assets/font/iconfont.css">
|
||||
<link rel="stylesheet" href="./layui/css/layui.css">
|
||||
<style>
|
||||
.page {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: url(./assets/img/login-register-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.page .top {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 100vw;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.top .left {
|
||||
width: 260px;
|
||||
height: 50px;
|
||||
margin: 15px 50px;
|
||||
}
|
||||
|
||||
.top .left .logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(./assets/img/headicon2.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.top .right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
margin: 20px 30px;
|
||||
}
|
||||
|
||||
.top .right #login {
|
||||
font-size: 16px;
|
||||
padding: 5px 20px;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
color: #42210B;
|
||||
}
|
||||
|
||||
.top .right #login:hover {
|
||||
cursor: pointer;
|
||||
background: #42210B;
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.top .right #goHomePage {
|
||||
font-size: 16px;
|
||||
padding: 5px 20px;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
color: #FFF;
|
||||
background: #42210B;
|
||||
}
|
||||
|
||||
.top .right #goHomePage:hover {
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loginBox {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 500px;
|
||||
height: 550px;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.loginBox .title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loginBox .title h3 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loginBox .title span {
|
||||
display: block;
|
||||
width: 70px;
|
||||
height: 5px;
|
||||
background-color: #fda633;
|
||||
margin-left: 30px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.loginBox .msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
margin-bottom: 20px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
text-indent: 15px;
|
||||
border: none;
|
||||
border: 1.5px solid #CCC;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
input:-webkit-autofill {
|
||||
background: transparent;
|
||||
transition: background-color 50000s ease-in-out 0s;
|
||||
-webkit-text-fill-color: unset;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: #999999
|
||||
}
|
||||
|
||||
/*去除ie edge的密码框默认出现的小眼睛*/
|
||||
input[type="password"]::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="password"]::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="password"]::-o-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li input:focus-within {
|
||||
border: 1.25px solid #fa911e;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li input:hover {
|
||||
border: 1.25px solid #fa911e;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(2) button {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
letter-spacing: 2px;
|
||||
margin: 10px 0;
|
||||
cursor: pointer;
|
||||
color: #0095ff;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(2) button:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(3) i {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 10px;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(3) i:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: start;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement input {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 10px 0;
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement a {
|
||||
color: #0095ff;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement a:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.loginBox .msg #register {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background-color: #C0C0C0;
|
||||
color: #FFF;
|
||||
font-size: 18px;
|
||||
margin-top: 10px;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loginBox .msg .register-disabled {
|
||||
background-color: #fda633;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loginBox .msg .register:not(.register-disabled):hover {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
-webkit-box-shadow: 0 0 10px #fda633;
|
||||
-moz-box-shadow: 0 0 10px #fda633;
|
||||
box-shadow: 0 0 10px #fda633;
|
||||
/* cursor: pointer; */
|
||||
background-color: #fda633;
|
||||
}
|
||||
|
||||
.loginBox .goPage {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: end;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-top: 10px;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.loginBox .goPage a {
|
||||
color: #0095ff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="top">
|
||||
<a class="left" href="https://www.aimzhu.com">
|
||||
<div class="logo"></div>
|
||||
</a>
|
||||
<div class="right">
|
||||
<a id="login" class="login" href="https://www.aimzhu.com/operator/">登录</a>
|
||||
<a id="goHomePage" class="goHomePage" href="https://www.aimzhu.com">返回首页</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="loginBox">
|
||||
<div class="title">
|
||||
<h3>平台账号注册</h3>
|
||||
<span></span>
|
||||
</div>
|
||||
<form action="" class="msg">
|
||||
<ul class="msgBox">
|
||||
<li>
|
||||
<input id="phone" type="text" placeholder="请输入您的手机号">
|
||||
</li>
|
||||
<li>
|
||||
<input id="code" type="text" placeholder="请输入短信验证码">
|
||||
<button id="getCode" type="button">获取验证码</button>
|
||||
</li>
|
||||
<li>
|
||||
<input id="pwd" type="password" placeholder="请输入密码(8~16位，大小写字母，数字或特殊字符)">
|
||||
<i id="showHide" class="iconfont icon-xianshiyincang1"></i>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="agreement">
|
||||
<input type="checkbox">我同意平台
|
||||
<a href="https://www.aimzhu.com/UserAgreement.html" target="_blank">《用户服务协议》</a>
|
||||
和
|
||||
<a href="https://www.aimzhu.com/PrivacyPolicy.html" target="_blank">《隐私条款》</a>
|
||||
</div>
|
||||
<button id="register" class="register" type="button" disabled>注册</button>
|
||||
</form>
|
||||
<div class="goPage">
|
||||
<span>已有账号？<a href="https://www.aimzhu.com/operator/">立即登录</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./jquery.min.js"></script>
|
||||
<script src="./layui/layui.js"></script>
|
||||
<script src="./Register.js"></script>
|
||||
<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
|
||||
<script>
|
||||
|
||||
const $ = layui.jquery;
|
||||
const layer = layui.layer;
|
||||
|
||||
let isPhoneValid = false;
|
||||
let isCodeSent = false;
|
||||
let countdown = 120;
|
||||
|
||||
// 手机号校验
|
||||
function validatePhone(phone) {
|
||||
const phoneRegex = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
|
||||
return phoneRegex.test(phone);
|
||||
}
|
||||
|
||||
// 验证码校验
|
||||
function validateCode(code) {
|
||||
const codeRegex = /^\d{6}$/;
|
||||
return codeRegex.test(code)
|
||||
}
|
||||
|
||||
// 密码校验
|
||||
function validatePassword(password) {
|
||||
const passwordRegex = /^[A-Za-z0-9!@#$%^&*()_+{}\[\]:;<>,.?\/~\-]{8,16}$/;
|
||||
return passwordRegex.test(password);
|
||||
}
|
||||
|
||||
// 显示隐藏密码
|
||||
switchPwd()
|
||||
function switchPwd() {
|
||||
var pwd = $('#pwd')
|
||||
var showHide = $('#showHide')
|
||||
showHide.off('click').on('click', function () {
|
||||
if (showHide.hasClass('icon-xianshiyincang1')) {
|
||||
pwd.attr('type', 'text') // 密码可见
|
||||
showHide.removeClass('icon-xianshiyincang1').addClass('icon-xianshiyincang')
|
||||
} else {
|
||||
pwd.attr('type', 'password') // 密码隐藏
|
||||
showHide.removeClass('icon-xianshiyincang').addClass('icon-xianshiyincang1')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 更新注册按钮状态
|
||||
function updateRegisterButtonStatus() {
|
||||
const phone = $('#phone').val();
|
||||
const code = $('#code').val();
|
||||
const pwd = $('#pwd').val();
|
||||
const agreement = $('.agreement input').prop('checked');
|
||||
const isFormValid = isPhoneValid && isCodeSent && validateCode(code) && validatePassword(pwd) && agreement;
|
||||
if (isFormValid) {
|
||||
$('#register').removeClass('register-disabled');
|
||||
$('#register').css('cursor', 'pointer'); // 设置鼠标样式为指针
|
||||
$('#register').prop('disabled', false); // 移除disabled属性
|
||||
$('#register').css('background-color', '#fda633'); // 设置按钮背景颜色为橘色
|
||||
} else {
|
||||
$('#register').addClass('register-disabled');
|
||||
$('#register').css('cursor', 'not-allowed'); // 设置鼠标样式为禁止
|
||||
$('#register').prop('disabled', true); // 设置disabled属性
|
||||
$('#register').css('background-color', '#C0C0C0'); // 设置按钮背景颜色为橘色
|
||||
}
|
||||
}
|
||||
|
||||
// 获取验证码按钮倒计时
|
||||
function startCountdown() {
|
||||
const getCodeButton = $('#getCode');
|
||||
// getCodeButton.text('重新获取(' + countdown + 's)后');
|
||||
getCodeButton.text(+ countdown + 's');
|
||||
getCodeButton.prop('disabled', true);
|
||||
countdown--;
|
||||
|
||||
if (countdown >= 0) {
|
||||
setTimeout(startCountdown, 1000);
|
||||
} else {
|
||||
getCodeButton.text('获取验证码');
|
||||
getCodeButton.prop('disabled', false);
|
||||
countdown = 120;
|
||||
}
|
||||
}
|
||||
|
||||
// 事件绑定
|
||||
$(document).ready(function () {
|
||||
|
||||
// 绑定事件以更新注册按钮状态
|
||||
$('#phone').on('input', updateRegisterButtonStatus);
|
||||
$('#code').on('input', updateRegisterButtonStatus);
|
||||
$('#pwd').on('input', updateRegisterButtonStatus);
|
||||
$('.agreement input').on('change', updateRegisterButtonStatus);
|
||||
|
||||
// 页面加载完成后检查本地存储中的验证码状态
|
||||
if (localStorage.getItem('isCodeSent') === 'true') {
|
||||
isCodeSent = true;
|
||||
updateRegisterButtonStatus(); // 更新注册按钮状态
|
||||
}
|
||||
|
||||
// 页面加载完成后调用 switchPwd 函数
|
||||
switchPwd();
|
||||
|
||||
// 初始化注册按钮状态
|
||||
updateRegisterButtonStatus();
|
||||
|
||||
$('#phone').on('input', function () {
|
||||
const phone = $(this).val();
|
||||
isPhoneValid = validatePhone(phone);
|
||||
updateRegisterButtonStatus();
|
||||
});
|
||||
|
||||
$('#getCode').on('click', function () {
|
||||
const phone = $('#phone').val();
|
||||
if (!isPhoneValid) {
|
||||
layer.msg('请输入正确的手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
// 发送请求1，校验手机号是否存在
|
||||
$.ajax({
|
||||
url: 'https://www.aimzhu.com/operator/api/systemuser/check-exists/' + phone,
|
||||
type: 'GET',
|
||||
success: function (response) {
|
||||
if (response) {
|
||||
layer.msg('此用户已存在');
|
||||
} else {
|
||||
// 发送请求2，发送验证码
|
||||
$.ajax({
|
||||
url: 'https://www.aimzhu.com/operator/app/sms/verify-code/' + phone,
|
||||
type: 'GET',
|
||||
success: function (response) {
|
||||
layer.msg('验证码已发送');
|
||||
isCodeSent = true; //验证码已发送标志
|
||||
startCountdown();
|
||||
updateRegisterButtonStatus(); // 更新注册按钮状态
|
||||
// 存储验证码状态到本地存储
|
||||
localStorage.setItem('isCodeSent', true);
|
||||
},
|
||||
error: function (error) {
|
||||
// console.error(error);
|
||||
layer.msg(error.responseJSON.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function (error) {
|
||||
// console.error(error);
|
||||
layer.msg('校验手机号失败');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#pwd').on('input', updateRegisterButtonStatus);
|
||||
$('.agreement input').on('change', updateRegisterButtonStatus);
|
||||
|
||||
$('#register').on('click', function () {
|
||||
const phone = $('#phone').val();
|
||||
const verifyCode = $('#code').val();
|
||||
const password = $('#pwd').val();
|
||||
const passwordSame = $('#pwd').val();
|
||||
|
||||
$(this).prop('disabled', true);
|
||||
// 发送请求到后端
|
||||
$.ajax({
|
||||
url: 'https://www.aimzhu.com/operator/app/register/phone-password?userRole=606f85bc-63fd-407e-8e2e-6ce48178b70a',
|
||||
type: 'POST',
|
||||
data: JSON.stringify({
|
||||
phone: phone,
|
||||
verifyCode: verifyCode,
|
||||
password: password,
|
||||
passwordSame: password
|
||||
}),
|
||||
contentType: "application/json;charset=utf-8",
|
||||
success: function (response) {
|
||||
$('#register').addClass('register-disabled');
|
||||
$('#register').css('cursor', 'not-allowed');
|
||||
$('#register').prop('disabled', true); // 注册成功后，重新设置按钮为不可点击
|
||||
$('#register').css('background-color', '#C0C0C0');
|
||||
layer.msg('注册成功，3秒后跳转登录页', { time: 3000 },
|
||||
function () {
|
||||
window.location.href = 'https://www.aimzhu.com/operator/';
|
||||
});
|
||||
},
|
||||
error: function (error) {
|
||||
// console.error(error);
|
||||
layer.msg('注册失败：' + error.responseJSON.msg);
|
||||
$('#register').prop('disabled', false);
|
||||
}
|
||||
});
|
||||
// 注册成功后，清除本地存储中的验证码状态
|
||||
localStorage.removeItem('isCodeSent');
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user