|
|
@@ -1,63 +1,76 @@
|
|
|
<template>
|
|
|
<div class="register">
|
|
|
- <div class="content">
|
|
|
- <div class="back" @click="goBack">
|
|
|
- X
|
|
|
- </div>
|
|
|
+ <div class="contents">
|
|
|
<!-- 头部logo -->
|
|
|
<div class="header">
|
|
|
<img src="@/assets/hongqi.png" alt="logo" />
|
|
|
- <div class="title">让理想飞扬</div>
|
|
|
</div>
|
|
|
- <!-- 主体 -->
|
|
|
- <div class="main">
|
|
|
- <wInput
|
|
|
- type="text"
|
|
|
- maxlength="11"
|
|
|
- placeholder="请输入手机号"
|
|
|
- v-model="phoneData"
|
|
|
- ></wInput>
|
|
|
- <wInput
|
|
|
- type="text"
|
|
|
- maxlength="4"
|
|
|
- placeholder="姓名"
|
|
|
- v-model="name"
|
|
|
- ></wInput>
|
|
|
- <wInput
|
|
|
- type="password"
|
|
|
- maxlength="11"
|
|
|
- placeholder="请输入密码"
|
|
|
- v-model="passData"
|
|
|
- :isShowPass="true"
|
|
|
- ></wInput>
|
|
|
- <wInput
|
|
|
- type="number"
|
|
|
- maxlength="6"
|
|
|
- placeholder="邀请码"
|
|
|
- ref="codeRef"
|
|
|
- v-model="inviteCode"
|
|
|
- ></wInput>
|
|
|
- <div class="captcha-box">
|
|
|
- <input v-model="captchaInput" maxlength="4" placeholder="验证码" style="width:216px;margin-right:8px;" />
|
|
|
- <canvas ref="captchaCanvas" width="80" height="32" @click="generateCaptcha" style="cursor:pointer;vertical-align:middle;"></canvas>
|
|
|
+
|
|
|
+ <!-- 欢迎注册标题 -->
|
|
|
+ <div class="welcome-title">欢迎注册</div>
|
|
|
+
|
|
|
+ <!-- 主体表单 -->
|
|
|
+ <div class="form-container">
|
|
|
+ <div class="main">
|
|
|
+ <wInput
|
|
|
+ type="text"
|
|
|
+ maxlength="11"
|
|
|
+ placeholder="请输入您的手机号码"
|
|
|
+ v-model="phoneData"
|
|
|
+ ></wInput>
|
|
|
+ <wInput
|
|
|
+ type="text"
|
|
|
+ maxlength="20"
|
|
|
+ placeholder="请输入您的姓名"
|
|
|
+ v-model="name"
|
|
|
+ ></wInput>
|
|
|
+ <wInput
|
|
|
+ type="password"
|
|
|
+ maxlength="20"
|
|
|
+ placeholder="请输入您的密码"
|
|
|
+ v-model="passData"
|
|
|
+ :isShowPass="true"
|
|
|
+ ></wInput>
|
|
|
+ <wInput
|
|
|
+ type="text"
|
|
|
+ maxlength="20"
|
|
|
+ placeholder="请输入邀请码"
|
|
|
+ v-model="inviteCode"
|
|
|
+ ></wInput>
|
|
|
+ <div class="verify-code-container">
|
|
|
+ <wInput
|
|
|
+ type="text"
|
|
|
+ maxlength="4"
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ v-model="captchaInput"
|
|
|
+ class="verify-input"
|
|
|
+ ></wInput>
|
|
|
+ <button class="verify-btn" @click="generateCaptcha">{{ captcha }}</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <wButton
|
|
|
+ text="立即注册"
|
|
|
+ :rotate="isRotate"
|
|
|
+ @click.native="startReg()"
|
|
|
+ class="wbutton"
|
|
|
+ ></wButton>
|
|
|
</div>
|
|
|
|
|
|
- <wButton
|
|
|
- text="注 册"
|
|
|
- :rotate="isRotate"
|
|
|
- @click.native="startReg()"
|
|
|
- class="wbutton"
|
|
|
- ></wButton>
|
|
|
-
|
|
|
- <!-- 底部信息 -->
|
|
|
+ <!-- 底部链接 -->
|
|
|
<div class="footer">
|
|
|
- <span
|
|
|
- @tap="isShowAgree"
|
|
|
- class="cuIcon"
|
|
|
- :class="showAgree ? 'cuIcon-radiobox' : 'cuIcon-round'"
|
|
|
- >同意</span>
|
|
|
- <span>《协议》</span>
|
|
|
+ <div style="color: #fff;font-size: 14px;cursor:pointer;" @click="goBack">找回密码</div>
|
|
|
+ <span>|</span>
|
|
|
+ <div style="color: #fff;font-size: 14px;cursor:pointer;" @click="goToLogin">登录账号</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 网站底部信息 -->
|
|
|
+ <div class="site-footer">
|
|
|
+ <div class="copyright">版权所有：中国建设科技集团股份有限公司</div>
|
|
|
+ <div class="address">地址：北京市西城区德胜门外大街36号A座</div>
|
|
|
+ <div class="beian">
|
|
|
+ 京ICP备 2022001408号-6号 京公网安备 11010202010460号
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -91,73 +104,30 @@ export default {
|
|
|
goBack() {
|
|
|
this.$router.go(-1);
|
|
|
},
|
|
|
- isShowAgree() {
|
|
|
- //是否选择协议
|
|
|
- this.showAgree = !this.showAgree;
|
|
|
- },
|
|
|
- getVerCode() {
|
|
|
- //获取验证码
|
|
|
- if (this.phoneData.length != 11) {
|
|
|
- Toast("手机号不正确");
|
|
|
- return false;
|
|
|
- }
|
|
|
- this.$refs.runCode.$emit("runCode"); //触发倒计时（一般用于请求成功验证码后调用）
|
|
|
- setTimeout(() => {
|
|
|
- this.$refs.runCode.$emit("runCode", 0); //假装模拟下需要 终止倒计时
|
|
|
- }, 60000);
|
|
|
+ goToLogin() {
|
|
|
+ this.$router.push('/');
|
|
|
},
|
|
|
generateCaptcha() {
|
|
|
- const chars = 'ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
|
|
|
+ // 生成4个随机数字
|
|
|
let code = '';
|
|
|
for (let i = 0; i < 4; i++) {
|
|
|
- code += chars.charAt(Math.floor(Math.random() * chars.length));
|
|
|
+ code += Math.floor(Math.random() * 10);
|
|
|
}
|
|
|
this.captcha = code;
|
|
|
- this.$nextTick(() => {
|
|
|
- this.drawCaptcha();
|
|
|
- });
|
|
|
- },
|
|
|
- drawCaptcha() {
|
|
|
- const canvas = this.$refs.captchaCanvas;
|
|
|
- if (!canvas) return;
|
|
|
- const ctx = canvas.getContext('2d');
|
|
|
- ctx.clearRect(0, 0, 80, 32);
|
|
|
- ctx.font = '24px Arial';
|
|
|
- ctx.fillStyle = '#333';
|
|
|
- ctx.fillText(this.captcha, 10, 26);
|
|
|
- // 添加雪花点干扰
|
|
|
- for (let i = 0; i < 20; i++) {
|
|
|
- ctx.beginPath();
|
|
|
- ctx.arc(
|
|
|
- Math.random() * 80,
|
|
|
- Math.random() * 32,
|
|
|
- Math.random() * 2 + 1,
|
|
|
- 0,
|
|
|
- 2 * Math.PI
|
|
|
- );
|
|
|
- ctx.fillStyle = this.randomColor();
|
|
|
- ctx.fill();
|
|
|
- }
|
|
|
- },
|
|
|
- randomColor() {
|
|
|
- const r = Math.floor(Math.random() * 256);
|
|
|
- const g = Math.floor(Math.random() * 256);
|
|
|
- const b = Math.floor(Math.random() * 256);
|
|
|
- return `rgb(${r},${g},${b})`;
|
|
|
+ // 清空用户输入
|
|
|
+ this.captchaInput = '';
|
|
|
+ Toast('验证码已刷新');
|
|
|
},
|
|
|
checkCaptcha() {
|
|
|
- return this.captchaInput.trim().toLowerCase() === this.captcha.toLowerCase();
|
|
|
+ // 直接比较输入的数字和显示的验证码
|
|
|
+ return this.captchaInput.trim() === this.captcha;
|
|
|
},
|
|
|
async startReg() {
|
|
|
if (this.isRotate) {
|
|
|
return false;
|
|
|
}
|
|
|
- if (!this.showAgree) {
|
|
|
- Toast("请先同意《协议》");
|
|
|
- return false;
|
|
|
- }
|
|
|
if (!this.phoneData) {
|
|
|
- Toast("账号不能为空");
|
|
|
+ Toast("手机号码不能为空");
|
|
|
return false;
|
|
|
}
|
|
|
if (!this.name) {
|
|
|
@@ -165,7 +135,7 @@ export default {
|
|
|
return false;
|
|
|
}
|
|
|
if (this.passData.length < 6) {
|
|
|
- Toast("密码长度最少六位");
|
|
|
+ Toast("密码不少于6位");
|
|
|
return false;
|
|
|
}
|
|
|
if (!this.inviteCode) {
|
|
|
@@ -175,7 +145,6 @@ export default {
|
|
|
if (!this.checkCaptcha()) {
|
|
|
Toast("验证码错误");
|
|
|
this.generateCaptcha();
|
|
|
- this.captchaInput = '';
|
|
|
return false;
|
|
|
}
|
|
|
this.isRotate = true;
|
|
|
@@ -192,10 +161,10 @@ export default {
|
|
|
if(res.code == 1){
|
|
|
Toast("注册成功");
|
|
|
this.isRotate = false;
|
|
|
- this.goBack();
|
|
|
+ this.$router.push('/');
|
|
|
}else{
|
|
|
Toast(res.msg);
|
|
|
- this.isRotate = false;
|
|
|
+ this.isRotate = false;
|
|
|
}
|
|
|
} catch (error) {
|
|
|
this.isRotate = false;
|
|
|
@@ -213,114 +182,128 @@ export default {
|
|
|
.register {
|
|
|
height: 100vh;
|
|
|
width: 100%;
|
|
|
- background: url('~@/assets/dabag.png') no-repeat center center;
|
|
|
+ background: #b43a39;
|
|
|
background-size: cover;
|
|
|
background-position: center;
|
|
|
- position: relative;
|
|
|
+ overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
-.content {
|
|
|
+.contents {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-.back {
|
|
|
- position: absolute;
|
|
|
- top: 20px;
|
|
|
- left: 20px;
|
|
|
- color: #fff;
|
|
|
- font-size: 20px;
|
|
|
- cursor: pointer;
|
|
|
- z-index: 1;
|
|
|
+ min-height: 100vh;
|
|
|
+ padding-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
- width: 144px;
|
|
|
- height: 104px;
|
|
|
- margin-top: 100px;
|
|
|
+ width: 165px;
|
|
|
+ height: 73px;
|
|
|
+ margin-top: 40px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
background-color: #fff;
|
|
|
padding: 20px;
|
|
|
- border-radius: 50px 50px 50px 50px;
|
|
|
+ border-radius: 50%;
|
|
|
img {
|
|
|
- width: 80px;
|
|
|
- width: 80px;
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
object-fit: cover;
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-.title {
|
|
|
- font-size: 10px;
|
|
|
- color: #000;
|
|
|
- margin-top: 16px;
|
|
|
+.welcome-title {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 18px;
|
|
|
font-weight: 500;
|
|
|
- letter-spacing: 4px;
|
|
|
+ margin: 15px 0;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.form-container {
|
|
|
+ width: 76%;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 30px 25px;
|
|
|
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.main {
|
|
|
width: 100%;
|
|
|
- max-width: 320px;
|
|
|
- margin: 60px 0 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+.verify-code-container {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 15px;
|
|
|
+
|
|
|
+ .verify-input {
|
|
|
+ flex: none;
|
|
|
+ width: 60%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .verify-btn {
|
|
|
+ background: #b43a39;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ padding: 12px 20px;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ min-width: 80px;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #a03237;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.wbutton {
|
|
|
+ margin-top: 30px;
|
|
|
width: 100%;
|
|
|
- max-width: 320px;
|
|
|
}
|
|
|
|
|
|
.footer {
|
|
|
- margin-top: 32px;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- gap: 8px;
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
+ gap: 40px;
|
|
|
|
|
|
- .cuIcon {
|
|
|
- margin-right: 4px;
|
|
|
- font-size: 16px;
|
|
|
+ div {
|
|
|
+ opacity: 0.9;
|
|
|
+ transition: opacity 0.3s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
- opacity: 0.9;
|
|
|
+ color: #fff;
|
|
|
+ opacity: 0.5;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.captcha-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-top: 10px;
|
|
|
- margin-bottom: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.captcha-box input {
|
|
|
- height: 44px;
|
|
|
- border-radius: 22px;
|
|
|
- border: none;
|
|
|
- background: #fff;
|
|
|
- padding-left: 16px;
|
|
|
- font-size: 16px;
|
|
|
- outline: none;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-right: 8px;
|
|
|
- width: 180px;
|
|
|
- box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
|
-}
|
|
|
-
|
|
|
-.captcha-box canvas {
|
|
|
- height: 44px;
|
|
|
- width: 90px;
|
|
|
- // border-radius: 22px;
|
|
|
- background: #fff;
|
|
|
- box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
|
- display: inline-block;
|
|
|
+.site-footer {
|
|
|
+ width: 100%;
|
|
|
+ padding: 15px 0;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ .copyright, .address, .beian {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ opacity: 0.8;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ line-height: 1.2;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
|
