588 lines
14 KiB
Vue
588 lines
14 KiB
Vue
<template>
|
|
<view class="page">
|
|
<view class="content">
|
|
<scroll-view scroll-y="true" style="height: 95%;padding-bottom: 150rpx;margin-bottom: 150rpx;">
|
|
<view class="base-person">
|
|
<view class="thick-divider"></view>
|
|
<view class="item-box">
|
|
<view class="item-title">报名类型</view>
|
|
<radio-group @change="typeChange($event)" class="item-content">
|
|
<radio value="1" style="transform: scale(0.7);font-size: 32rpx;" :checked="personType==1"
|
|
color="green">
|
|
个人</radio>
|
|
<radio value="2" style="transform: scale(0.7);margin-left: 20rpx;font-size: 32rpx;"
|
|
:checked="personType==2" color="green">单位</radio>
|
|
</radio-group>
|
|
</view>
|
|
<view class="thick-divider"></view>
|
|
<block v-if="personType==1">
|
|
<view class="item-box">
|
|
<view class="item-title">您的姓名</view>
|
|
<input @input="inputBaseName" :value="name" placeholder="请输入您的姓名" class="item-content"
|
|
placeholder-class="item-input" style="text-align: right;" />
|
|
</view>
|
|
<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
|
|
<view class="item-box" style="margin-top: 0px;">
|
|
<view class="item-title">身份证号码</view>
|
|
<input placeholder-class="item-input" @input="inputBaseIdCard" :value="idcard"
|
|
placeholder="请输入身份证号码" class="item-content" style="text-align: right;" />
|
|
</view>
|
|
<view class="thick-divider"></view>
|
|
<view class="item-box">
|
|
<view class="item-title" style="flex: 1;">是否为适龄公民</view>
|
|
<radio-group @change="baseChange" class="item-content" style="flex:1.9;">
|
|
<radio value="适龄公民" style="transform: scale(0.7);font-size: 32rpx;" color="green"
|
|
checked="true">是</radio>
|
|
<radio value="非适龄公民" style="transform: scale(0.7);margin-left: 10rpx;font-size: 32rpx;"
|
|
color="green">否</radio>
|
|
</radio-group>
|
|
</view>
|
|
<view v-if="1==personType" class="hint-txt">提示:依据<国务院关于开展全民义务植树运动的实施办法>
|
|
适龄公民指男11岁至60岁,女11岁至55岁的中华人民共和国公民。</view>
|
|
<view class="item-box">
|
|
<view class="item-title">联系电话</view>
|
|
<input placeholder-class="item-input" @input="inputBasePhone" :value="phone"
|
|
placeholder="请输入常用手机号码" class="item-content" style="text-align: right;" />
|
|
</view>
|
|
<view class="thick-divider"></view>
|
|
<view class="item-box-v">
|
|
<view class="item-title">备注留言</view>
|
|
<view class="item-content-bg">
|
|
<textarea maxlength="50" @input="inputBaseRemark" :value="remark"
|
|
placeholder="有什么想说的话可以在这里留言">
|
|
</textarea>
|
|
<text class="hint-num">{{remark.length}}/50</text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!-- 单位报名信息 -->
|
|
<block v-else>
|
|
<view class="item-box">
|
|
<view class="item-title">单位名称</view>
|
|
<input @input="inputOrgName" :value="orgName" placeholder="请输入单位名称" class="item-content"
|
|
placeholder-class="item-input" style="text-align: right;" />
|
|
</view>
|
|
<view class="thick-divider"></view>
|
|
<view class="item-box">
|
|
<view class="item-title">您的姓名</view>
|
|
<input @input="inputBaseName" :value="name" placeholder="请输入您的姓名" class="item-content"
|
|
placeholder-class="item-input" style="text-align: right;" />
|
|
</view>
|
|
<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
|
|
<view class="item-box" style="margin-top: 0rpx;">
|
|
<view class="item-title">联系电话</view>
|
|
<input placeholder-class="item-input" @input="inputBasePhone" :value="phone"
|
|
placeholder="请输入常用手机号码" class="item-content" style="text-align: right;" />
|
|
</view>
|
|
<view class="thick-divider"></view>
|
|
<view class="item-box-v">
|
|
<view class="item-title">备注留言</view>
|
|
<view class="item-content-bg">
|
|
<textarea maxlength="50" @input="inputBaseRemark" :value="remark"
|
|
placeholder="有什么想说的话可以在这里留言">
|
|
</textarea>
|
|
<text class="hint-num">{{remark.length}}/50</text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="btn-box">
|
|
<view class="save-btn" @click="doSave">确认提交</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
activityId: "",
|
|
name: "",
|
|
idcard: "",
|
|
phone: "",
|
|
remark: "",
|
|
type: "适龄公民",
|
|
personType: '1',
|
|
personList: [],
|
|
token: "",
|
|
orgName: ''
|
|
}
|
|
},
|
|
onLoad(res) {
|
|
this.activityId = res.id;
|
|
this.token = getApp().globalData.token;
|
|
},
|
|
methods: {
|
|
baseChange(event) {
|
|
this.type = event.detail.value
|
|
},
|
|
typeChange(event) {
|
|
this.personType = event.detail.value;
|
|
},
|
|
inputOrgName(event) {
|
|
this.orgName = event.detail.value
|
|
},
|
|
inputBaseName(event) {
|
|
this.name = event.target.value
|
|
console.log(this.name)
|
|
},
|
|
inputBaseIdCard(event) {
|
|
this.idcard = event.target.value
|
|
},
|
|
inputBasePhone(event) {
|
|
this.phone = event.target.value
|
|
},
|
|
inputBaseRemark(event) {
|
|
this.remark = event.target.value
|
|
},
|
|
addPerson() {
|
|
var item = {
|
|
name: "",
|
|
idcard: "",
|
|
phone: "",
|
|
remark: "",
|
|
type: "适龄公民",
|
|
remark: ""
|
|
}
|
|
this.personList.push(item)
|
|
},
|
|
delPerson(index) {
|
|
this.personList.splice(index, 1)
|
|
this.$forceUpdate()
|
|
},
|
|
addPersonInputPhone(event, index) {
|
|
this.personList[index].phone = event.target.value
|
|
},
|
|
addPersonInputIdCard(event, index) {
|
|
this.personList[index].idcard = event.target.value
|
|
},
|
|
addPersonInputName(event, index) {
|
|
this.personList[index].name = event.target.value
|
|
},
|
|
addChange(event, index) {
|
|
this.personList[index].type = event.target.value
|
|
},
|
|
doSave() {
|
|
if (2 == this.personType) {
|
|
if (this.orgName == "") {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: '请输入单位名称'
|
|
})
|
|
return;
|
|
}
|
|
}
|
|
if (this.name == "") {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: "请输入姓名"
|
|
})
|
|
return;
|
|
}
|
|
if (1 == this.personType) {
|
|
if (this.idcard == "") {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: "请输入身份证号"
|
|
})
|
|
return;
|
|
}
|
|
}
|
|
if (this.phone == "") {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: "请输入电话"
|
|
})
|
|
return;
|
|
}
|
|
var itemPerson = []
|
|
if (this.personList.length > 0) {
|
|
for (var i = 0; i < this.personList.length; i++) {
|
|
if (this.personList[i].name == "") {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: "请输入姓名"
|
|
})
|
|
return;
|
|
}
|
|
if (this.personList[i].idcard == "") {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: "请输入身份证号"
|
|
})
|
|
return;
|
|
}
|
|
if (this.personList[i].phone == "") {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: "请输入电话"
|
|
})
|
|
return;
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < this.personList.length; i++) {
|
|
var basePerson = {
|
|
name: this.personList[i].name,
|
|
phone: this.personList[i].phone,
|
|
userType: this.personList[i].type,
|
|
cardNum: this.personList[i].idcard,
|
|
orderNum: i,
|
|
}
|
|
itemPerson.push(basePerson);
|
|
}
|
|
}
|
|
|
|
|
|
uni.showLoading({
|
|
title: "提交中..."
|
|
})
|
|
if ('1' == this.personType) {
|
|
var person = {
|
|
name: this.name,
|
|
phone: this.phone,
|
|
remake: this.remark,
|
|
userType: this.type,
|
|
type: this.personType,
|
|
activityId: this.activityId,
|
|
cardNum: this.idcard,
|
|
activityJoinVOList: itemPerson
|
|
}
|
|
this.$app.request({
|
|
url: this.$api.duty.doSignActivity,
|
|
method: 'POST',
|
|
dataType: 'json',
|
|
header: {
|
|
token: this.token
|
|
},
|
|
data: person,
|
|
success: res => {
|
|
console.log(res)
|
|
if (res.status) {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: "系统错误"
|
|
})
|
|
} else {
|
|
if (res.msg) {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: res.msg
|
|
})
|
|
} else {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
icon: 'success',
|
|
title: "报名成功",
|
|
success() {
|
|
setTimeout(function() {
|
|
let pages = getCurrentPages(); // 当前页面
|
|
let beforePage = pages[pages.length - 2]; // 前一个页面
|
|
beforePage.$vm.isRefresh = true;
|
|
uni.navigateBack()
|
|
}, 1000)
|
|
}
|
|
})
|
|
|
|
}
|
|
}
|
|
},
|
|
fail: res => {
|
|
console.log(res)
|
|
if (res.data) {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: res.data.msg
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: '网络错误'
|
|
})
|
|
}
|
|
},
|
|
complete: res => {
|
|
uni.hideLoading()
|
|
}
|
|
});
|
|
} else {
|
|
|
|
var person = {
|
|
companyName: this.orgName,
|
|
userName: this.name,
|
|
phone: this.phone,
|
|
remake: this.remark,
|
|
userType: this.type,
|
|
type: this.personType,
|
|
activityId: this.activityId
|
|
}
|
|
this.$app.request({
|
|
url: this.$api.duty.doSignOrgActivity,
|
|
method: 'POST',
|
|
dataType: 'json',
|
|
header: {
|
|
token: this.token
|
|
},
|
|
data: person,
|
|
success: res => {
|
|
console.log(res)
|
|
if (res.status) {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: "系统错误"
|
|
})
|
|
} else {
|
|
if (res.msg) {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: res.msg
|
|
})
|
|
} else {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
icon: 'success',
|
|
title: "报名成功",
|
|
success() {
|
|
setTimeout(function() {
|
|
uni.navigateBack()
|
|
}, 1000)
|
|
}
|
|
})
|
|
|
|
}
|
|
}
|
|
},
|
|
fail: res => {
|
|
|
|
},
|
|
complete: res => {
|
|
uni.hideLoading()
|
|
}
|
|
});
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.page {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
background: white;
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.base-person {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
font-size: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
width: 100%;
|
|
|
|
.thick-divider {
|
|
height: 15rpx;
|
|
background: #f2f2f2;
|
|
width: 100%;
|
|
}
|
|
|
|
.hint-txt {
|
|
padding: 10rpx 40rpx;
|
|
color: darkred;
|
|
font-size: 20rpx;
|
|
background: #f2f2f2;
|
|
}
|
|
|
|
.item-box-v {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-top: 10rpx;
|
|
background: white;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
padding-bottom: 50rpx;
|
|
|
|
.item-title {
|
|
font-size: 28rpx;
|
|
padding: 10rpx 30rpx;
|
|
}
|
|
|
|
.item-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 10rpx 30rpx;
|
|
font-size: 28rpx;
|
|
|
|
input {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.item-content-bg {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
width: 85%;
|
|
background: #f3f3f3;
|
|
border-radius: 10rpx;
|
|
align-self: center;
|
|
height: 220rpx;
|
|
|
|
textarea {
|
|
font-size: 28rpx;
|
|
text-align: left;
|
|
width: 100%;
|
|
}
|
|
|
|
.hint-num {
|
|
align-self: flex-end;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.item-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-top: 10rpx;
|
|
background: white;
|
|
align-items: center;
|
|
width: 100%;
|
|
|
|
.item-input {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.item-title {
|
|
font-size: 28rpx;
|
|
flex: 0.5;
|
|
padding: 15rpx 30rpx;
|
|
}
|
|
|
|
.item-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
flex: 1.5;
|
|
padding: 15rpx 30rpx;
|
|
}
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 20rpx;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
width: 95%;
|
|
|
|
.item-title {
|
|
font-size: 25rpx;
|
|
width: 100%;
|
|
background: #e4f3f2;
|
|
padding: 10rpx;
|
|
}
|
|
|
|
.item-title-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #f2f2f2;
|
|
padding: 10rpx;
|
|
width: 100%;
|
|
|
|
.item-title-name {
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.item-title-del {
|
|
color: darkgreen;
|
|
}
|
|
|
|
}
|
|
|
|
input {
|
|
margin-top: 20rpx;
|
|
padding: 10rpx;
|
|
width: 95%;
|
|
font-size: 25rpx;
|
|
border: 1rpx #d3d3d3 solid;
|
|
}
|
|
}
|
|
}
|
|
|
|
.add-person {
|
|
color: green;
|
|
border: 1rpx #c28127 solid;
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
align-self: flex-start;
|
|
margin-top: 10rpx;
|
|
border-radius: 10rpx;
|
|
width: 25%;
|
|
padding: 10rpx;
|
|
}
|
|
|
|
.btn-box {
|
|
width: 100%;
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
background: white;
|
|
bottom: 0;
|
|
position: fixed;
|
|
|
|
.save-btn {
|
|
color: white;
|
|
background-color: green;
|
|
width: 95%;
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
align-self: center;
|
|
margin-top: 5rpx;
|
|
border-radius: 10rpx;
|
|
padding: 10rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.type-change-box {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
}
|
|
</style>
|