3.修改:将活动日期分开,
4.将线路分开,分成3个页面,每个线路一个页面 5.调整报名后查看页面可直接获取报名信息 6.增加手机号码验证页面 7.后台管理页面增加姓名,手机号码,线路,日期 查询检索
This commit is contained in:
范露尧
233
20220330_Vote/Ewide.Web.Entry/Views/NingboZhiChun/MyValid.cshtml
Normal file
233
20220330_Vote/Ewide.Web.Entry/Views/NingboZhiChun/MyValid.cshtml
Normal file
@@ -0,0 +1,233 @@
|
||||
@*
|
||||
For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
|
||||
*@
|
||||
@{
|
||||
}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
<script src="http://lib.baomitu.com/qs/6.10.3/qs.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app" v-loading="loading">
|
||||
<h3 style="text-align:center;">共赴宁波之春 验证手机号码</h3>
|
||||
<el-form label-position="left" ref="form" :model="form" :rules="rules" label-width="120px" style="margin-top:15px;">
|
||||
<el-form-item label="手机号码：" prop="phone">
|
||||
<el-input v-model="form.phone"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码" prop="code">
|
||||
<el-input type="text" maxlength="4" placeholder="验证码" v-model="form.code">
|
||||
<template slot="append">
|
||||
<el-button :disabled="disabled" @@click="getCode">{{ valiBtn }}</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @@click.prevent="onSubmit('form')">验证</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: function () {
|
||||
var checkPhone = (rule, value, callback) => {
|
||||
const regMobile = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
|
||||
if (regMobile.test(value)) {
|
||||
callback()
|
||||
}
|
||||
callback(new Error("请输入正确的手机号码"))
|
||||
};
|
||||
var checkCode = (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入验证码"))
|
||||
} else if (!/^[0-9]+$/.test(value) || !/^\d{4}$/.test(value)) {
|
||||
callback(new Error("请输入4位数字的验证码"))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
};
|
||||
var checkCardNo = (rule, value, callback) => {
|
||||
const regMobile = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
|
||||
if (regMobile.test(value)) {
|
||||
callback()
|
||||
}
|
||||
callback(new Error("请输入正确的身份证号码"))
|
||||
};
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
phone: '',
|
||||
weixin_number: '',
|
||||
cardno: '',
|
||||
hangye: '',
|
||||
address: '',
|
||||
date: '',
|
||||
line: '',
|
||||
code: '',
|
||||
token: ''
|
||||
//,remark: ''
|
||||
}, rules: {
|
||||
name: [{ required: true, trigger: 'blur', message: '请输入姓名' }],
|
||||
phone: [{ validator: checkPhone, required: true, trigger: 'blur' }],
|
||||
code: [{ validator: checkCode, required: true, trigger: 'blur' }],
|
||||
weixin_number: [{ required: true, trigger: 'blur', message: '请输入微信号码' }],
|
||||
cardno: [{ validator: checkCardNo, required: true, trigger: 'blur' }],
|
||||
hangye: [{ required: true, trigger: 'blur', message: '请输入行业' }],
|
||||
address: [{ required: true, trigger: 'blur', message: '请输入所在地' }],
|
||||
date: [{ required: true, trigger: 'blur', message: '请选择参加时间' }],
|
||||
line: [{ required: true, trigger: 'blur', message: '请选择线路' }],
|
||||
},
|
||||
valiBtn: '获取验证码',
|
||||
disabled: false,
|
||||
datePersonNumber: ''
|
||||
}
|
||||
},
|
||||
created: function () {
|
||||
this.loading = true;
|
||||
this.loading_false();
|
||||
|
||||
},
|
||||
methods: {
|
||||
getCode() {
|
||||
this.$refs['form'].validateField('phone', (err) => {
|
||||
if (err) {
|
||||
console.log('未通过')
|
||||
return;
|
||||
} else {
|
||||
console.log('已通过')
|
||||
console.log(this.form.phone)
|
||||
let _this = this;
|
||||
//this.$alert("成功", "提示")
|
||||
axios({
|
||||
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
||||
method: 'post',
|
||||
url: '/gb/yjb/api/ningbozhichun/sendcode',
|
||||
data: _this.form,
|
||||
responseType: "json",
|
||||
}).then(async response => {
|
||||
if (response.data.data != true) {
|
||||
_this.$alert(`<div>` + response.data.message + `</div>`, '错误', {
|
||||
confirmButtonText: '确定', dangerouslyUseHTMLString: true, center: true, closeOnClickModal: true
|
||||
}).then(a => { }).catch(err => { console.log(err) });
|
||||
} else {
|
||||
_this.tackBtn(); //验证码倒数60秒
|
||||
}
|
||||
_this.loading = false;
|
||||
}).catch(async error => {
|
||||
console.log(error)
|
||||
_this.$message({
|
||||
type: 'error',
|
||||
message: error.message
|
||||
})
|
||||
_this.loading = false;
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
tackBtn() { //验证码倒数60秒
|
||||
let time = 60;
|
||||
let timer = setInterval(() => {
|
||||
if (time == 0) {
|
||||
clearInterval(timer);
|
||||
this.valiBtn = '获取验证码';
|
||||
this.disabled = false;
|
||||
} else {
|
||||
this.disabled = true;
|
||||
this.valiBtn = time + '秒后重试';
|
||||
time--;
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
onSubmit(formName) {
|
||||
console.log('submit!');
|
||||
let _this = this;
|
||||
this.$refs[formName].validate((valid) => { // 为表单绑定验证功能
|
||||
if (valid) {
|
||||
axios({
|
||||
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
||||
method: 'post',
|
||||
url: '/gb/yjb/api/ningbozhichun/getmyinfo',
|
||||
data: _this.form,
|
||||
responseType: "json",
|
||||
}).then(async response => {
|
||||
if (response.data?.data?.success == true) {
|
||||
if (!response.data?.data.entity) {
|
||||
_this.$alert(`<div>您还没有报名呢</div>`, '错误', {
|
||||
confirmButtonText: '确定', dangerouslyUseHTMLString: true, center: true, closeOnClickModal: true
|
||||
}).then(a => { }).catch(err => { console.log(err) });
|
||||
} else {
|
||||
_this.form = response.data?.data.entity;
|
||||
let token = response.data.data.token;
|
||||
localStorage.setItem("_token", token);
|
||||
window.location = '/gb/yjb/ningbozhichun/index?valid=1'
|
||||
}
|
||||
} else {
|
||||
_this.$alert(`<div>` + response.data.message + `，请再次验证手机号码后继续</div>`, '错误', {
|
||||
confirmButtonText: '确定', dangerouslyUseHTMLString: true, center: true, closeOnClickModal: true
|
||||
}).then(a => { }).catch(err => { console.log(err) });
|
||||
}
|
||||
_this.loading = false;
|
||||
}).catch(async error => {
|
||||
console.log(error)
|
||||
_this.$message({
|
||||
type: 'error',
|
||||
message: error.message
|
||||
})
|
||||
_this.loading = false;
|
||||
})
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
loading_false() { this.loading = false },
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.buhuanhang {
|
||||
white-space: nowrap;
|
||||
width: 21%;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 98%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.el-card__body p {
|
||||
margin: 0px;
|
||||
margin-bottom: 5px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.el-radio.is-bordered {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
Reference in New Issue
Block a user