|
|
@@ -36,6 +36,10 @@
|
|
|
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>
|
|
|
</div>
|
|
|
|
|
|
<wButton
|
|
|
@@ -74,9 +78,14 @@ export default {
|
|
|
msg: "", // 消息
|
|
|
code: "", // 验证码
|
|
|
showAgree: true, // 协议是否选择
|
|
|
- isRotate: false // 是否加载旋转
|
|
|
+ isRotate: false, // 是否加载旋转
|
|
|
+ captcha: '', // 当前验证码内容
|
|
|
+ captchaInput: '' // 用户输入的验证码
|
|
|
};
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.generateCaptcha();
|
|
|
+ },
|
|
|
methods: {
|
|
|
goBack() {
|
|
|
this.$router.go(-1);
|
|
|
@@ -96,6 +105,48 @@ export default {
|
|
|
this.$refs.runCode.$emit("runCode", 0); //假装模拟下需要 终止倒计时
|
|
|
}, 60000);
|
|
|
},
|
|
|
+ generateCaptcha() {
|
|
|
+ const chars = 'ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
|
|
|
+ let code = '';
|
|
|
+ for (let i = 0; i < 4; i++) {
|
|
|
+ code += chars.charAt(Math.floor(Math.random() * chars.length));
|
|
|
+ }
|
|
|
+ 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})`;
|
|
|
+ },
|
|
|
+ checkCaptcha() {
|
|
|
+ return this.captchaInput.trim().toLowerCase() === this.captcha.toLowerCase();
|
|
|
+ },
|
|
|
async startReg() {
|
|
|
if (this.isRotate) {
|
|
|
return false;
|
|
|
@@ -120,6 +171,12 @@ export default {
|
|
|
Toast("邀请码不能为空");
|
|
|
return false;
|
|
|
}
|
|
|
+ if (!this.checkCaptcha()) {
|
|
|
+ Toast("验证码错误");
|
|
|
+ this.generateCaptcha();
|
|
|
+ this.captchaInput = '';
|
|
|
+ return false;
|
|
|
+ }
|
|
|
this.isRotate = true;
|
|
|
try {
|
|
|
const data = {
|
|
|
@@ -234,6 +291,36 @@ export default {
|
|
|
opacity: 0.9;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
</style>
|
|
|
|
|
|
<style>
|
fly