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>