339 lines
8.6 KiB
Vue
339 lines
8.6 KiB
Vue
<template>
|
|
<view class="page">
|
|
<view class="content">
|
|
<view class="base-person">
|
|
<view class="item">
|
|
<view class="item-title">您的姓名</view>
|
|
<input @input="inputBaseName" :value="name" placeholder="请输入您的姓名" />
|
|
</view>
|
|
<view class="item">
|
|
<view class="item-title">身份证号码</view>
|
|
<input @input="inputBaseIdCard" :value="idcard" placeholder="请输入身份证号码" />
|
|
</view>
|
|
<view class="item">
|
|
<view class="item-title">人员类型</view>
|
|
<radio-group @change="baseChange"
|
|
style="margin-top: 20rpx;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;">
|
|
<radio value="适龄公民" style="transform: scale(0.8);" checked="true">适龄公民</radio>
|
|
<radio value="非适龄公民" style="transform: scale(0.8);margin-top: 10rpx;">非适龄公民</radio>
|
|
</radio-group>
|
|
<view>提示:依据<国务院关于开展全民义务植树运动的实施办法>适龄公民指男11岁至60岁,女11岁至55岁的中华人民共和国公民。</view>
|
|
<view v-if="personList.length==0" class="add-person" @click="addPerson">添加人员</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="item-title">联系电话</view>
|
|
<input @input="inputBasePhone" :value="phone" placeholder="请输入常用手机号码" />
|
|
</view>
|
|
<view class="item">
|
|
<view class="item-title">备注留言</view>
|
|
<input @input="inputBaseRemark" :value="remark" placeholder="有什么想说的话可以在这里留言" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 动态添加人员 -->
|
|
<view class="base-person" v-for="(item,index) in personList" :key="index">
|
|
<view class="item">
|
|
<view class="item-title-box">
|
|
<view class="item-title-name">您的姓名</view>
|
|
<view class="item-title-del" @click="delPerson(index)">删除该人员</view>
|
|
</view>
|
|
<input @input="addPersonInputName($event,index)" :value="item.name" placeholder="请输入您的姓名" />
|
|
</view>
|
|
<view class="item">
|
|
<view class="item-title">身份证号码</view>
|
|
<input @input="addPersonInputIdCard($event,index)" :value="item.idcard" placeholder="请输入身份证号码" />
|
|
</view>
|
|
<view class="item">
|
|
<view class="item-title">人员类型</view>
|
|
<radio-group @change="addChange($event,index)"
|
|
style="margin-top: 20rpx;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;">
|
|
<radio value="适龄公民" style="transform: scale(0.8);" checked="true">适龄公民</radio>
|
|
<radio value="非适龄公民" style="transform: scale(0.8);margin-top: 10rpx;">非适龄公民</radio>
|
|
</radio-group>
|
|
<view>提示:依据<国务院关于开展全民义务植树运动的实施办法>适龄公民指男11岁至60岁,女11岁至55岁的中华人民共和国公民。</view>
|
|
<view v-if="index == personList.length-1" class="add-person" @click="addPerson">添加人员</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="item-title">联系电话</view>
|
|
<input @input="addPersonInputPhone($event,index)" :value="item.phone" placeholder="请输入常用手机号码" />
|
|
</view>
|
|
|
|
</view>
|
|
<view class="save-btn" @click="doSave">确认提交</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
activityId: "",
|
|
name: "",
|
|
idcard: "",
|
|
phone: "",
|
|
remark: "",
|
|
type: "适龄公民",
|
|
personList: [],
|
|
token: ""
|
|
}
|
|
},
|
|
onLoad(res) {
|
|
this.activityId = res.id;
|
|
this.token = getApp().globalData.token;
|
|
},
|
|
methods: {
|
|
baseChange(event) {
|
|
this.type = event.detail.value
|
|
},
|
|
inputBaseName(event) {
|
|
this.name = event.target.value
|
|
},
|
|
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 (this.name == "") {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: "请输入姓名"
|
|
})
|
|
return;
|
|
}
|
|
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);
|
|
}
|
|
}
|
|
|
|
var person = {
|
|
name: this.name,
|
|
phone: this.phone,
|
|
remake: this.remark,
|
|
userType: this.type,
|
|
activityId: this.activityId,
|
|
cardNum: this.idcard,
|
|
activityJoinVOList: itemPerson
|
|
}
|
|
console.log(person)
|
|
uni.showLoading({
|
|
title: "提交中..."
|
|
})
|
|
this.$app.request({
|
|
url: this.$api.duty.doSignActivity,
|
|
method: 'POST',
|
|
dataType: 'json',
|
|
header: {
|
|
token: this.token
|
|
},
|
|
data: person,
|
|
success: res => {
|
|
if (res.status) {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: "系统错误"
|
|
})
|
|
} else {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
icon: 'success',
|
|
title: "报名成功"
|
|
})
|
|
uni.navigateBack()
|
|
}
|
|
},
|
|
fail: res => {
|
|
|
|
},
|
|
complete: res => {
|
|
uni.hideLoading()
|
|
}
|
|
});
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.page {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
height: 100%;
|
|
background: #f2f2f2;
|
|
}
|
|
|
|
.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;
|
|
background: white;
|
|
margin-bottom: 20rpx;
|
|
width: 100%;
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style>
|