ewide/number_zj
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

3.修改:将活动日期分开,

Browse Source 
4.将线路分开,分成3个页面,每个线路一个页面
5.调整报名后查看页面可直接获取报名信息
6.增加手机号码验证页面
7.后台管理页面增加姓名,手机号码,线路,日期 查询检索
This commit is contained in:
范露尧
2023-03-13 09:45:50 +08:00
parent 539a3185b3
commit 2406733fd2
7 changed files with 628 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
20220330_Vote/Ewide.Web.Entry/Views/NingboZhiChun/Index.cshtml
View File

@@ -9,7 +9,7 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<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>
@@ -20,11 +20,7 @@
<div id="app" v-loading="loading">
<h3 style="text-align:center;">共赴宁波之春 参与报名</h3>
<el-card class="box-card">
<p>本地活动共三条线路，分别为:</p>
<p>A.“历史之路 文化之路 创新之路 共富之路”的慈溪南部沿山风情共富线。</p>
<p>B.“应梦明山入城，剡水桃源归野”的奉化明山剡水共富线。</p>
<p>C.“万象山海，逐梦亚运”象山扬帆亚运风情共富线三条体验游览线。</p>
<p>每天三条线齐发（奉，宁，慈）</p>
<p>您当前选择的是：</p><p>{{lineTxt}}</p>
</el-card>
<el-form label-position="left" ref="form" :model="form" :rules="rules" label-width="120px" style="margin-top:15px;">
<el-form-item label="姓名：" prop="name">
@@ -33,7 +29,7 @@
<el-form-item label="手机号码：" prop="phone">
<el-input v-model="form.phone"></el-input>
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-form-item label="验证码" prop="code" v-if="!isshowmyinfo">
<el-input type="text" maxlength="4" placeholder="验证码" v-model="form.code">
<template slot="append">
<el-button :disabled="disabled" @@click="getCode">{{ valiBtn }}</el-button>
@@ -59,31 +55,47 @@
trigger="focus"
:content="datePersonNumber">
<el-radio-group v-model="form.date" @@input="getNumber()" slot="reference" size="small">
<el-radio-button label="3.18/19" border></el-radio-button>
<el-radio-button label="3.25/26" border></el-radio-button>
<el-radio-button label="4.8/9" border></el-radio-button>
<el-radio-button label="4.15/16" border></el-radio-button>
<el-radio-button label="2023-03-18" border></el-radio-button>
<el-radio-button label="2023-03-19" border></el-radio-button>
<el-radio-button label="2023-03-25" border></el-radio-button>
<el-radio-button label="2023-03-26" border></el-radio-button>
<el-radio-button label="2023-04-08" border></el-radio-button>
<el-radio-button label="2023-04-09" border></el-radio-button>
<el-radio-button label="2023-04-15" border></el-radio-button>
<el-radio-button label="2023-04-16" border></el-radio-button>
</el-radio-group>
</el-popover>
</el-form-item>
<el-form-item label="选择线路：" prop="line">
<el-card class="box-card">
<p>A.慈溪南部沿山风情共富线。</p>
<p>B.奉化明山剡水共富线。</p>
<p>C.象山扬帆亚运风情共富线。</p>
</el-card>
<el-radio-group v-model="form.line" size="small">
<el-radio-button label="A" border></el-radio-button>
<el-radio-button label="B" border></el-radio-button>
<el-radio-button label="C" border></el-radio-button>
</el-radio-group>
</el-form-item>
@* <el-form-item label="参加时间：" prop="date">
<el-select v-model="form.date" placeholder="请选择">
<el-option v-for="item in dates"
:key="item.date"
:label="item.date"
:value="item.date">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
</el-option>
</el-select>
</el-form-item>*@
@*<el-form-item label="选择线路：" prop="line">
<el-card class="box-card">
<p>A.慈溪南部沿山风情共富线。</p>
<p>B.奉化明山剡水共富线。</p>
<p>C.象山扬帆亚运风情共富线。</p>
</el-card>
<el-radio-group v-model="form.line" size="small">
<el-radio-button label="A" border></el-radio-button>
<el-radio-button label="B" border></el-radio-button>
<el-radio-button label="C" border></el-radio-button>
</el-radio-group>
</el-form-item>*@
@*<el-form-item label="备注：">
<el-input type="textarea" v-model="form.remark"></el-input>
</el-form-item>*@
<el-form-item>
<el-button type="primary" @@click.prevent="onSubmit('form')">提交</el-button>
<el-form-item v-if="!isshowmyinfo">
<el-button type="primary" @@click.prevent="onSubmit('form')">提交报名</el-button>
<el-button @@click.prevent="showinfo()">我的报名</el-button>
@*<el-button type="primary" @@click.prevent="go('form')" :disabled="go_disabled">我要上车</el-button>*@
</el-form-item>
</el-form>
</div>
@@ -141,15 +153,53 @@
},
valiBtn: '获取验证码',
disabled: false,
datePersonNumber: ''
datePersonNumber: '',
go_disabled: false,
dates: [],
pageline: '',
lineTxt: '',
isshowmyinfo: false
}
},
created: function () {
this.loading = true;
this.loading_false();
this.form.token = localStorage.getItem("_token");
if (this.getQueryString("valid") == "1" || this.form.token)
this.showinfo();
//this.get_go_date();
//this.getdates();
this.get_line();
},
methods: {
getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
},
get_line() {
let _this = this;
var line = this.getQueryString("line") ?? "A"
if (line == "A" || line == "a") {
_this.lineTxt = '慈溪：“历史之路 文化之路 创新之路 共富之路”的慈溪南部沿山风情共富线。';
_this.pageline = _this.form.line = '慈溪';
}
else if (line == "B" || line == "b") {
_this.lineTxt = '奉化：“应梦明山入城，剡水桃源归野”的奉化明山剡水共富线。';
_this.pageline = _this.form.line = '奉化';
}
else if (line == "C" || line == "c") {
_this.lineTxt = '象山：“万象山海，逐梦亚运”象山扬帆亚运风情共富线三条体验游览线。';
_this.pageline = _this.form.line = '象山';
}
},
get_go_date() {
//判断上车日期
let _this = this;
_this.form.token = localStorage.getItem("_token");
},
getCode() {
this.$refs['form'].validateField('phone', (err) => {
if (err) {
@@ -215,7 +265,43 @@
}).then(async response => {
if (response.data?.data?.success == true) {
let token = response.data.data.token;
localStorage.setItem(_this.form.phone + "_token", token)
localStorage.setItem("_token", token)
_this.$alert(`<div>提交成功</div>`, '成功', {
confirmButtonText: '确定', dangerouslyUseHTMLString: true, center: true, closeOnClickModal: true
}).then(a => { }).catch(err => { console.log(err) });
} 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;
})
}
});
},
go(formName) {
console.log('上车!');
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/submit',
data: _this.form,
responseType: "json",
}).then(async response => {
if (response.data?.data?.success == true) {
let token = response.data.data.token;
localStorage.setItem("_token", token)
_this.$alert(`<div>提交成功</div>`, '成功', {
confirmButtonText: '确定', dangerouslyUseHTMLString: true, center: true, closeOnClickModal: true
}).then(a => { }).catch(err => { console.log(err) });
@@ -240,32 +326,52 @@
loading_false() { this.loading = false },
showinfo() {
let _this = this;
_this.form.token = localStorage.getItem(_this.form.phone + "_token");
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) {
_this.form = response.data?.data.entity;
let token = response.data.data.token;
localStorage.setItem(_this.form.phone + "_token", token)
} 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.form.token = localStorage.getItem("_token");
if (!_this.form.token) {
window.location.href = '/gb/yjb/ningbozhichun/myvalid'
} else {
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) {
localStorage.removeItem("_token");
_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);
_this.isshowmyinfo = true;
if (_this.form.line != _this.pageline) {
if (_this.form.line == "慈溪")
window.location = '/gb/yjb/ningbozhichun/index?line=a&valid=1'
else if (_this.form.line == "奉化")
window.location = '/gb/yjb/ningbozhichun/index?line=b&valid=1'
else
window.location = '/gb/yjb/ningbozhichun/index?line=c&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;
})
_this.loading = false;
})
}
},
getNumber() {
let _this = this;
@@ -330,5 +436,9 @@
.el-radio.is-bordered {
margin-bottom: 10px;
}
.el-radio-button--small .el-radio-button__inner {
border-left: 1px solid #DCDFE6;
}
</style>
</html>

233
20220330_Vote/Ewide.Web.Entry/Views/NingboZhiChun/MyValid.cshtml Normal file
View 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>