jxred/pages/form/applicationForm.vue

<template>
	<view class="content">
		<view class="top">
			<image src="../../static/img/application.png" mode=""></image>
		</view>
		<view class="info-box">
			遗体捐献是服务医疗事业，造福人类的高尚行为，是"人道、博爱、奉献"精神的崇高体现。
			我已了解遗体捐献的基本常识和有关政策法规。我自愿登记成为武汉遗体捐献志愿者，身故后请执行人和所有亲属尊重我的决定。
		</view>
		<view class="box">
			<view class="red-box">
				申请登记表
			</view>
			<view class="box-1">
				<view class="box-left">
					姓名<text class="imp"></text>：
				</view>
				<input type="text" value="" class="list-input" v-model="name" />
			</view>

			<view class="box-1">
				<view class="box-left">
					性别：
				</view>
				<picker @change="bindPickerSex" :value="index" :range="array" class="box-right">
					<text>{{ sex }}</text>
				</picker>
			</view>

			<view class="box-1">
				<view class="box-left">
					出生年月：
				</view>
				<picker mode="date" :value="birthday" fields="month" :start="startDate" :end="endDate" @change="bindDateChange" class="box-right">
					<view>{{ birthday }}</view>
				</picker>
			</view>
			
			

			<view class="box-1">
				<view class="box-left">
					身份证号码：
				</view>
				<input type="text" value="" class="list-input" v-model="card" />
			</view>

			<view class="box-1">
				<view class="box-left">
					职业：
				</view>
				<input type="text" value="" class="list-input" v-model="occupation" />
			</view>

			<view class="box-1">
				<view class="box-left">
					学历：
				</view>
				<picker @change="bindPickerEdu" :value="index" :range="chooseEdu" class="box-right">
					<text>{{ education  }}</text>
				</picker>
			</view>
			
				<view class="check-box">
					<view class="info">
						（ 请在选项□内打√ )
					</view>
					<radio-group @change="radioChange">
						<label class="check-main" v-for="(item, index) in items" :key="item.value">
							<view >
								<radio :value="item.value" :checked="index === current" color="#FF727E" style="transform:scale(0.7)"/>
							</view>
							<view class="check-text">{{item.value}}</view>
							
						</label>
					</radio-group>
				</view>
			
				
			
				
				<!-- <view class="box-2">
						我指定11：
					<view class="line">
						<input type="text"  class="list-input" v-model="zd_name" />
					</view>
						为我的遗体捐献执行人全权负责本人的遗体捐赠事宜：
				</view> -->
				<view class="box-1">
					<view class="box-left">
						移动电话：
					</view>
					<input type="text"  class="list-input" v-model="phone" />
				</view>
				<view class="box-1">
					<view class="box-left">
						固定电话：
					</view>
					<input type="text"  class="list-input" v-model="tel" />
				</view>
				
				<view class="check-box" style="padding-left: 44rpx;">
					<view class="info-1">
						<view class="info-2">
							我指定
						</view>
						<input type="text"  class="list-input" v-model="zd_name" />
						<view class="info-2">
							为我的遗体
						</view>
					</view>
					<view class="info-3">
						捐献执行人全权负责本人的遗体捐献事宜。
					</view>
				</view>
				
			
				<view class="box-1">
					<view class="box-left">
						捐献执行人：
					</view>
					<input type="text"  class="list-input" v-model="exexutor" />
				</view>
				<view class="box-1">
					<view class="box-left">
						居住地址：
					</view>
					<input type="text"  class="list-input" v-model="address" />
				</view>
				<view class="box-1">
					<view class="box-left">
						身份证号码：
					</view>
					<input type="text"  class="list-input" v-model="sfz" />
				</view>
				<view class="box-1">
					<view class="box-left">
						与捐献志愿者关系：
					</view>
					<input type="text"  class="list-input" v-model="relation" />
				</view>
				<view class="box-1">
					<view class="box-left">
						捐献执行人移动电话：
					</view>
					<input type="text"  class="list-input" v-model="n_phone" />
				</view>
				<view class="box-1">
					<view class="box-left">
						捐献执行人固定电话：
					</view>
					<input type="text"  class="list-input" v-model="n_tel" />
				</view>
				
				<view class="box-1">
					<view class="box-left">
						申请日期：
					</view>
					<picker mode="date" :value="add_time" fields="day" :start="startDate" :end="endDate" @change="fillingDateChange" class="box-right">
						<view>{{ add_time }}</view>
					</picker>
				</view>
				
				<view class="box-1">
					<view class="box-left">
						我保证填写的以上信息准确真实，如发生变更或个人意愿发生变化时，及时告知登记机构。
					</view>
				</view>
				
		</view> 

		<view class="buttom" :class="{ action: loding }" @click="!loding?join():''">
			提交申请
		</view>
	</view>
</template>

<script>
	import {
		joinSecc
	} from '@/api/index.js';
	import {
		upload
	} from '@/api/ask.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				loding: false, //是否提交中
				array: ['男', '女'],
				chooseEdu: ['博士后', '博士', '硕士', '本科', '专科', '其他'],
				chooseVol: ['是', '否'],
				chooseExp: ['是', '否'],
				items: [{
					value: '我自愿捐献全部遗体(含器官组织)'
				}, {
					value: '或只捐献眼角膜'
				}],
				current:'',
				index: 0,
				mz: '',
				cardimg: '', //证件照
				checklist: [],
				name: '',
				sex: '',
				birthday: '',
				card: '',
				occupation:'',
				education: '',
				add_time:'',
				remark:'',
				phone:'', 
				tel:'',  
				zd_name:'', 
				address:'', 
				exexutor:'',   
				sfz:'', 
				relation:'',   
				n_phone:'',  
				n_tel:'', 
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			async join() {
				let obj = this;
				if (obj.name == '') {
					obj.$api.msg('请输入您的姓名');
					return;
				}
				if (obj.sex == '') {
					obj.$api.msg('请输入您的性别');
					return;
				}
				if (obj.birthday == '') {
					obj.$api.msg('请填写您的生日');
					return;
				}
				// const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
				// if (!reg.test(obj.phone)) {
				// 	obj.$api.msg('请填写正确的手机号码');
				// 	return;
				// }
				// if (obj.address == '') {
				// 	obj.$api.msg('请填写您的地址');
				// 	return;
				// }
				// /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/

				// if (obj.work == '') {
				// 	obj.$api.msg('请填写您的工作单位');
				// 	return;
				// }
			
				let reg1 =
					/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
				if (!reg1.test(obj.card)) {
					obj.$api.msg('请填写正确的身份证信息');
					return;
				}
				if (obj.occupation == '') {
					obj.$api.msg('请填写您的职业');
					return;
				}
				if (obj.education == '') {
					obj.$api.msg('请选择您的学历');
					return;
				}
				if( obj.current !== 0 && obj.current !== 1 ) {
					obj.$api.msg('请在选项中打√');
					return;
				}
				
				
				
				const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
				if (!reg.test(obj.phone)) {
					obj.$api.msg('请填写正确的手机号码');
					return;
				}
				
				if (obj.zd_name == '') {
					obj.$api.msg('请在空格内填写遗体捐献执行人姓名');
					return;
				}
				
				
				if (obj.exexutor == '') {
					obj.$api.msg('请填写捐献执行人姓名');
					return;
				}
				if (obj.address== '') {
					obj.$api.msg('请填写居住地址');
					return;
				}
				let reg2 =
					/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
				if (!reg2.test(obj.sfz)) {
					obj.$api.msg('请填写执行人正确身份证信息');
					return;
				}
				
				if (obj.relation== '') {
					obj.$api.msg('请填写与捐献志愿者关系');
					return;
				}
				
				const reg7 = /^(\+?0?86-?)?1[\d]\d{9}$/;
				if (!reg7.test(obj.n_phone)) {
					obj.$api.msg('请填写执行人正确的手机号码');
					return;
				}
				
				if( obj.add_time == '') {
					obj.$api.msg('请填写申请日期');
					return;
				}
			
			
				// if (obj.cardimg == '') {
				// 	obj.$api.msg('请上传您的证件');
				// 	return
				// }
				// if (obj.education == '') {
				// 	obj.$api.msg('请填写您的教育程度');
				// 	return;
				// }
				// if (obj.is_vol == '') {
				// 	obj.$api.msg('请填写您的是否受过志愿服务');
				// 	return;
				// }
				// if (obj.is_experience == '') {
				// 	obj.$api.msg('请填写您的有无服务经验');
				// 	return;
				// }
				obj.loding = true;
				joinSecc({
					name: obj.name,
					sex: obj.sex,
					education: obj.education,
					birthday: obj.birthday,
					card: obj.card,
					occupation: obj.occupation,
					add_time:obj.add_time,
					remark: obj.remark,
					phone:obj.phone,
					tel:obj.tel,
					zd_name:obj.zd_name, 
					address:obj.address, 
					exexutor:obj.exexutor,   
					sfz:obj.sfz, 
					relation:obj.relation,   
					n_phone:obj.n_phone,  
					n_tel:obj.n_tel
				}).then(e => {
					obj.name = '';
					obj.sex = '';
					obj.education = '';
					obj.birthday = '';
					obj.card = '';
					obj.occupation = '';
					obj.add_time = '';
					obj.phone = '';
					obj.tel = '';
					obj.zd_name = ''; 
					obj.address = ''; 
					obj.exexutor = '';   
					obj.sfz = ''; 
					obj.relation = '';   
					obj.n_phone = '';  
					obj.n_tel = '';
					uni.navigateTo({
						url: '../joinSuc/joinNow'
					});
				}).catch(function(e) {
					console.log('出错了')
					console.log(e);
				});

			},
			imgsub() {
				console.log('imgsub')
				upload({
					filename: ''
				}).then(data => {
					this.cardimg = data[0].url;
				})
			},
			// 选择性别
			bindPickerSex: function(e) {
				this.sex = this.array[e.target.value];
				this.index = e.target.value + 1;
			},
			// 选择教育程度
			bindPickerEdu: function(e) {
				this.education = this.chooseEdu[e.target.value];
				// console.log('选择选择教育程度',this.education)
				this.index = e.target.value + 1;
			},
			// 选择日期
			bindDateChange: function(e) {
				this.birthday = e.target.value
			},
			//选择填写日期
			fillingDateChange: function(e){
				this.add_time = e.target.value
			},
			// 是否参加志愿活动
			bindPickerVol: function(e) {
				this.is_vol = this.chooseVol[e.target.value];
				this.index = e.target.value + 1;
			},
			// 有无服务经验
			bindPickerExp: function(e) {
				console.log('有无服务经验',e.target.value)
				this.is_experience = this.chooseExp[e.target.value];
				this.index = e.target.value + 1;
			},
			// 选择捐献
			radioChange: function(evt) {
				// console.log('选择捐献',evt)
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.remark = evt.target.value
						console.log('this.remark',this.remark )
						this.current = i;
						console.log('this.current',this.current )
						break;
					}
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 选择可提供时间

			// this.quantum = item.detail.value.join(',');

			checktime1(e) {
				// var items = this.timeList,
				// let quantum = [];
				this.quantum = e.detail.value.join(',');
				console.log(this.quantum);
			},
			checktime2(e) {
				// var items = this.timeList,
				let values = e.detail.value;
				// let quantum = [];
				console.log(values);
			},
			checktime3(e) {
				// var items = this.timeList,
				let values = e.detail.value;
				// let quantum = [];
				console.log(values);
			},
			//选择有兴趣参与的工作
			checkjob(item) {
				this.taste = item.detail.value.join(',');
			},
			// 选择专长checkspeciality
			checkspeciality(item) {
				this.speciali = item.detail.value.join(',');
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3afad;
	}
	

	.content {
		padding-top: 16rpx;
		background-color: #f3afad;

		.top {
			width: 100%;
			height: 188rpx;

			image {
				width: 100%;
				height: 188rpx;
			}
		}
		
		.info-box{
			text-indent: 64rpx;
			margin:12rpx 0 54rpx;
			padding: 0 32rpx 20rpx;
			// border: 3rpx solid #009100;
			width: 100%;
			display: flex;
			flex-direction: column;
			border-radius: 25rpx;
			color: #E63931;
		}

		.buttom {
			width: 660rpx;
			height: 100rpx;
			background: linear-gradient(0deg, #C90F1B, #F14D33);
			// background: $motif-color;
			border-radius: 50rpx;
			margin: 50rpx auto;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;

			&.action {
				background: #999999;
			}
		}

		.box {
			// margin-top: 44rpx;
			width: 690rpx;
			margin: 20rpx auto 0;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 28rpx 20rpx 84rpx 20rpx;
			position: relative;

			.red-box {
				width: 405rpx;
				line-height: 66rpx;
				text-align: center;
				background: linear-gradient(0deg, #C90F1B, #F14D33);
				// background: $motif-color;
				border-radius: 10rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #FFFFFF;
				// position: relative;
				position: absolute;
				top: -36rpx;
				left: 50%;
				transform: translateX(-50%);
				z-index: 1;
			}

			.box-check {
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
				line-height: 100rpx;
			}


			.imp {
				color: red;
				margin-left: 5rpx;
			}
			
			.check-box{
				margin: 44rpx 0rpx;
				padding: 25rpx 25rpx;
				border: 3rpx solid #e9b2af;
				width: 100%;
				display: flex;
				flex-direction: column;
				border-radius: 25rpx;
				color: #ff4500;
				.info{
					margin-bottom:32rpx ;
				}
				.info-3{
					margin-top: 12rpx;
					line-height: 46rpx;
				}
				.info-1{
					display: flex;
					align-items: center; 
					input {
						height: 56rpx;
						width: 400rpx;
						line-height: 56rpx;
						// margin-top: 32rpx;
						width: 300rpx;
						// height: 88rpx;
					}
					.list-input {
						padding-left: 24rpx;
						display: flex;
						align-items: center;
						width: 280rpx;
						font-size: 36rpx;
						// flex: 1;
						color: #FF9797;
						border-bottom: 1rpx solid #f3afad;
						text-align: center;
						padding-right: 24rpx;
					
						.input-placeholder {
							width: 400rpx;
							height: 70rpx;
							color: #FF9797;
						}
					}
				}
				
				
				
				.check-main{
					display: flex;
					// justify-content: space-between;
					width: 100%;
					.check-text{
						margin-right: 12rpx;
					}
					.checkbox, 
					.uni-checkbox-input, 
					.uni-checkbox-input-checked { 
						border: 1px solid #ff4500;
						background: #ff4500;
						color: #fff !important;
					}
				}
			}
			.box-2{
				display: flex;
				// flex-direction: column;
				align-items: center;
				width: 100%;
				margin-top: 32rpx;
				color: #FF9797;
				.box-left {
					padding-left: 2rpx;
					// width: 190rpx;
					text-align: left;
					color: #ff4500;
				}
				.line{
					width: 200rpx;
					border-bottom: 1rpx solid  #FF9797;
				}
			}

			.box-1 {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 100%;
				margin-top: 32rpx;
				// height: 133rpx;

				.box-left {
					padding-left: 2rpx;
					width: 100%;
					text-align: left;
					color: #ff4500;
				}

				input {
					height: 66rpx;
					line-height: 66rpx;
					margin-top: 32rpx;
					// height: 88rpx;
				}

				.list-input {
					padding-left: 24rpx;
					// margin: 12rpx 0 ;

					// line-height: 66rpx;
					display: flex;
					align-items: center;
					width: 100%;
					font-size: 36rpx;
					flex: 1;
					color: #FF9797;
					border: 1rpx solid #f3afad;
					border-radius: 22rpx;
					text-align: left;
					padding-right: 24rpx;

					.input-placeholder {
						height: 70rpx;
						color: #FF9797;
					}
				}

				.box-right {
					display: flex;
					align-items: center;
					padding-left: 24rpx;
					height: 66rpx;
					line-height: 66rpx;
					border: 1rpx solid #f3afad;
					border-radius: 22rpx;
					margin: 32rpx 36rpx 0 36rpx;
					width: 96%;
					font-size: 36rpx;
					color: #FF9797;
					text-align: left;
					// line-height: 1;
				}
			}

			.upload-box {
				width: 100%;
				height: 247rpx;
				background: #FFFFFF;
				// border: 1px solid #E63931;
				border-radius: 27rpx;
				display: flex;
				flex-direction: column;
				padding: 30rpx 40rpx 30rpx 0;
				margin: 0 auto 30rpx;

				.upload-left {
					font-weight: 400;
					color: #E63931;
				}

				.upload-right {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;

					.upload-img {
						width: 103rpx;
						height: 103rpx;
						margin-top: 24rpx;
					}
				}
			}
		}
	}
</style>