Skip to content

C
campSite
Commit 02a336a0 authored by 杨梦雪's avatar 杨梦雪
Browse files
Options

多形式活动-邀请码

parent b8a7d420
Hide whitespace changes
Inline Side-by-side
Showing with 296 additions and 212 deletions
src/components/index/SignUp/invitation.vue
View file @ 02a336a0
......@@ -62,226 +62,245 @@
<div class="btn">
<el-button @click="next()">提交/跳过</el-button>
</div>
<!-- 多形式报名邀请码报错弹框 -->
<cueDialog :dialogVisible="dialogVisible" :msg="msg"></cueDialog>
</div>
</template>
<script>
/* eslint-disable */
import { setInviteCode } from "r/index/signUp";
export default {
name: "Invitation",
props: { invitation_code: String },
data() {
return {
invatation1: "",
invatation2: "",
invatation3: "",
invatation4: "",
inputFlag: true,
};
},
created() {
if (this.invitation_code) {
let a = this.invitation_code.split("-");
this.invatation1 = a[0];
this.invatation2 = a[1];
this.invatation3 = a[2];
this.invatation4 = a[3];
this.inputFlag = false;
// console.log(a[0])
}
},
watch: {
invatation1: function () {
// /\n/g(删除制表符 /t的正则)
this.invatation1 = this.invatation1
.replace(/[\W]/g, "")
// .replace(/\n/g,"")
// .replace("/\n/g",'')
.toUpperCase()
.substring(0, 4);
},
invatation2: function () {
this.invatation2 = this.invatation2
.replace(/[\W]/g, "")
.toUpperCase()
.substring(0, 4);
},
invatation3: function () {
this.invatation3 = this.invatation3
.replace(/[\W]/g, "")
.toUpperCase()
.substring(0, 4);
},
invatation4: function () {
this.invatation4 = this.invatation4
.replace(/[\W]/g, "")
.toUpperCase()
.substring(0, 4);
/* eslint-disable */
import {setInviteCode} from "r/index/signUp";
import cueDialog from "c/index/cueDialog";
export default {
name: "Invitation",
props: {invitation_code: String},
components:{cueDialog},
data() {
return {
invatation1: "",
invatation2: "",
invatation3: "",
invatation4: "",
inputFlag: true,
dialogVisible: false,
msg: null,
};
},
},
methods: {
// next() {
// this.$router.push("/signUp/referInfo");
// },
//第一个输入框
changeValue1(e) {
const code = e.trim();
console.log(code, "输入111");
if (code.indexOf("-") !== -1) {
//如果是复制过来的带'-'邀请码
let copyCode = code.split("-");
// console.log(copyCode, "输入222");
this.invatation1 = copyCode[0];
this.invatation2 = copyCode[1];
this.invatation3 = copyCode[2];
this.invatation4 = copyCode[3];
this.$refs.input3.focus();
} else if (code.length > 4) {
this.changeValue(code.substring(0, 4));
} else {
this.changeValue(code);
created() {
if (this.invitation_code) {
let a = this.invitation_code.split("-");
this.invatation1 = a[0];
this.invatation2 = a[1];
this.invatation3 = a[2];
this.invatation4 = a[3];
this.inputFlag = false;
// console.log(a[0])
}
},
// 输入框
changeValue(e) {
if (e.length >= 4) {
// console.log(e, "length");
// console.log(this.currentIndex, "this.currentIndex");
switch (this.currentIndex) {
case 0:
// console.log(this.text0.length);
if (this.invatation1.length >= 4) {
// this.$nextTick(() => {
watch: {
invatation1: function () {
// /\n/g(删除制表符 /t的正则)
this.invatation1 = this.invatation1
.replace(/[\W]/g, "")
// .replace(/\n/g,"")
// .replace("/\n/g",'')
.toUpperCase()
.substring(0, 4);
},
invatation2: function () {
this.invatation2 = this.invatation2
.replace(/[\W]/g, "")
.toUpperCase()
.substring(0, 4);
},
invatation3: function () {
this.invatation3 = this.invatation3
.replace(/[\W]/g, "")
.toUpperCase()
.substring(0, 4);
},
invatation4: function () {
this.invatation4 = this.invatation4
.replace(/[\W]/g, "")
.toUpperCase()
.substring(0, 4);
},
},
methods: {
//第一个输入框
changeValue1(e) {
const code = e.trim();
// console.log(code, "输入111");
if (code.indexOf("-") !== -1) {
//如果是复制过来的带'-'邀请码
let copyCode = code.split("-");
// console.log(copyCode, "输入222");
this.invatation1 = copyCode[0];
this.invatation2 = copyCode[1];
this.invatation3 = copyCode[2];
this.invatation4 = copyCode[3];
this.$refs.input3.focus();
} else if (code.length > 4) {
this.changeValue(code.substring(0, 4));
} else {
this.changeValue(code);
}
},
// 输入框
changeValue(e) {
if (e.length >= 4) {
// console.log(e, "length");
// console.log(this.currentIndex, "this.currentIndex");
switch (this.currentIndex) {
case 0:
// console.log(this.text0.length);
if (this.invatation1.length >= 4) {
// this.$nextTick(() => {
this.$refs.input1.focus();
// })
}
break;
case 1:
if (this.invatation2.length >= 4) {
this.$refs.input2.focus();
}
break;
case 2:
if (this.invatation3.length >= 4) {
this.$refs.input3.focus();
}
break;
case 3:
if (this.invatation4.length >= 4) {
this.$refs.input3.focus();
}
break;
default:
break;
}
} else if (e.length === 0) {
switch (this.currentIndex) {
case 0:
this.$refs.input0.focus();
break;
case 1:
this.$refs.input0.focus();
break;
case 2:
this.$refs.input1.focus();
// })
}
break;
case 1:
if (this.invatation2.length >= 4) {
break;
case 3:
this.$refs.input2.focus();
}
break;
case 2:
if (this.invatation3.length >= 4) {
this.$refs.input3.focus();
}
break;
case 3:
if (this.invatation4.length >= 4) {
this.$refs.input3.focus();
}
break;
default:
break;
break;
default:
break;
}
} else {
}
} else if (e.length === 0) {
switch (this.currentIndex) {
case 0:
this.$refs.input0.focus();
break;
case 1:
this.$refs.input0.focus();
break;
case 2:
this.$refs.input1.focus();
break;
case 3:
this.$refs.input2.focus();
break;
default:
break;
}
} else {
}
},
getFocus(index, e) {
this.currentIndex = index;
},
// 下一步
async next() {
// console.log(111);
let code;
if (
this.invatation1 == "" &&
this.invatation2 == "" &&
this.invatation3 == "" &&
this.invatation4 == ""
) {
code =
this.invatation1 +
this.invatation2 +
this.invatation3 +
this.invatation4;
} else {
code =
this.invatation1 +
"-" +
this.invatation2 +
"-" +
this.invatation3 +
"-" +
this.invatation4;
}
},
getFocus(index, e) {
this.currentIndex = index;
},
setInviteCode({ code: code }).then((res) => {
// console.log(res, "code");
if (res.data.code !== 200) {
return this.$message.error(res.data.message);
// 下一步
async next() {
// console.log(111);
let code;
if (
this.invatation1 == "" &&
this.invatation2 == "" &&
this.invatation3 == "" &&
this.invatation4 == ""
) {
code =
this.invatation1 +
this.invatation2 +
this.invatation3 +
this.invatation4;
} else {
code =
this.invatation1 +
"-" +
this.invatation2 +
"-" +
this.invatation3 +
"-" +
this.invatation4;
}
this.$emit("getstatus", res.data.status);
});
setInviteCode({code: code}).then((res) => {
// console.log(res, "code");
if (res.data.code !== 200) {
return this.$message.error(res.data.message);
}
if (res.data.code == 4000346 || res.data.code == 4000347) {
this.dialogVisible = true;
this.msg = res.data.message
return;
}
this.$emit("getstatus", res.data.status);
});
},
},
},
};
};
</script>
<style lang="scss" scoped>
@import "a/scss/btn";
.flex {
display: flex;
}
.invitation {
.iv_content {
justify-content: center;
height: 44px;
::v-deep .el-input__inner {
width: 110px;
height: 38px;
border-radius: 4px;
border: 2px solid var(--color);
margin-right: 15px;
<style lang="scss" scoped>
@import "a/scss/btn";
.flex {
display: flex;
}
.invitation {
.iv_content {
justify-content: center;
height: 44px;
::v-deep .el-input__inner {
width: 110px;
height: 38px;
border-radius: 4px;
border: 2px solid var(--color);
margin-right: 15px;
}
.code_titile {
height: 16px;
font-size: 16px;
font-weight: 600;
color: #1b1419;
line-height: 48px;
margin-right: 10px;
}
.errorCode {
margin-top: 10px;
}
}
.code_titile {
height: 16px;
font-size: 16px;
font-weight: 600;
color: #1b1419;
line-height: 48px;
margin-right: 10px;
.tips {
font-size: 14px;
font-weight: 500;
// color: #a7a2a6;
color: var(--color);
line-height: 23px;
margin: 30px 0;
// text-align: center;
flex-direction: column;
align-items: center; /*垂直居中*/
width: 100%;
height: 100%;
}
.errorCode {
margin-top: 10px;
font-size: 12px;
font-weight: 400;
color: #d7373f;
line-height: 12px;
}
}
.tips {
font-size: 14px;
font-weight: 500;
// color: #a7a2a6;
color: var(--color);
line-height: 23px;
margin: 30px 0;
// text-align: center;
flex-direction: column;
align-items: center; /*垂直居中*/
width: 100%;
height: 100%;
}
.errorCode {
font-size: 12px;
font-weight: 400;
color: #d7373f;
line-height: 12px;
}
}
</style>
src/components/index/SignUp/referInfo.vue
View file @ 02a336a0
......@@ -929,6 +929,8 @@
<el-button @click="confirm">提交资料</el-button>
</div>
</el-form>
<!-- 多形式报名邀请码报错弹框 -->
<cueDialog :dialogVisible="cueDialogVisible" :msg="msg"></cueDialog>
</div>
</template>
......@@ -946,10 +948,12 @@
import {upload} from "r/index/network";
import validator from "common/validator";
import area from "config/area";
import cueDialog from "c/index/cueDialog";
export default {
name: "referInfo",
props: {invitation_code: String},
components:{cueDialog},
data() {
const validateContent = (rule, value, callback) => {
if (!this.referForm.birthday) {
......@@ -973,6 +977,8 @@
}
};
return {
cueDialogVisible:false,
msg:null,
configJson: {},
isUploading: false, // 图片上传蒙层
isCode: false, // 邀请码是否禁用
......@@ -2005,7 +2011,6 @@
obj.code = _this.referForm.code;
}
setAccount(obj).then((res) => {
// console.log(res, "setAccount");
if (res.data.code != 200) {
if (res.data.code == 400068) {
this.$parent.statuss();
......@@ -2013,11 +2018,13 @@
}
return this.$message.error(res.data.message);
}
// console.log(3333);
if (res.data.code == 4000346 || res.data.code == 4000347) {
this.dialogVisible = true;
this.msg = res.data.message
return;
}
this.$emit("getstatus", res.data.status);
this.$message.success(res.data.message);
// let code = this.$store.state.indexIdentity;
// this.$router.push("/signUp/check?code=" + code);
this.referForm = res.data.data;
});
......
src/components/index/cueDialog.vue 0 → 100644
View file @ 02a336a0
<template>
<el-dialog
:visible.sync="dialogVisibleFU"
width="30%"
:before-close="handleClose">
<div class="multiform">
<img src="../../assets/img/cue.png"/>
<span>{{msgFU}}</span>
</div>
</el-dialog>
</template>
<script>
export default {
name: "cueDialog",
props: {dialogVisible: Boolean , msg: String,},
data() {
return {
dialogVisibleFU: this.dialogVisible,
msgFU: this.msg,
};
},
methods: {
handleClose(done) {
done();
},
},
watch: {
dialogVisible() {
this.dialogVisibleFU = this.dialogVisible;
},
signTitle() {
this.msgFU = this.msg;
},
}
}
</script>
<style lang="scss" scoped>
.multiform {
display: flex;
flex-direction: column;
align-items: center;
img {
width: 35px;
height: 35px;
margin-bottom: 16px;
}
}
::v-deep .el-dialog__body {
padding: 10px 30px 35px 30px;
}
</style>
src/views/index/recruit/Index.vue
View file @ 02a336a0
......@@ -2,12 +2,12 @@
<div class="recruit">
<el-header height="104px">
<Header></Header>
<div class="notify flex">
<div class="flex">
<img class="notify_img" src="../../../assets/img/notify.png" alt="" />
</div>
<div>注意：本次活动报名有人数限制，当前共有{{ info.order_num }}人申请，剩余名额为{{info.student_num}}人</div>
</div>
<!-- <div class="notify flex">-->
<!-- <div class="flex">-->
<!-- <img class="notify_img" src="../../../assets/img/notify.png" alt="" />-->
<!-- </div>-->
<!-- <div>注意：本次活动报名有人数限制，当前共有{{ info.order_num }}人申请，剩余名额为{{info.student_num}}人</div>-->
<!-- </div>-->
<div class="bg-top"></div>
</el-header>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment