hhsred/pages/form/applicationForm.vue

<template>
	<view class="content">
		<view class="red-box">申请登记</view>
		<view class="jg"></view>
		<view class="box">
			
			<view class="box-1">
				<view class="box-left">
					姓名
					<text class="imp"></text>
					：
				</view>
				<input type="text" value="" class="list-input" v-model="name" placeholder="请输入您的姓名" />
			</view>

			<view class="box-1">
				<view class="box-left">性别：</view>
				<picker @change="bindPickerSex" :value="index" :range="array" class="box-right">
					<text :class="{'action': !sex}">{{ 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 :class="{'action': !birthday}">{{ birthday || '请输入您的生日' }}</view>
				</picker>
			</view>
			<view class="box-1">
				<view class="box-left">文化程度：</view>
				<picker @change="bindPickerEdu" :value="index" :range="chooseEdu" class="box-right">
					<text :class="{'action': !education}">{{ education || '请输入您的文化程度' }}</text>
				</picker>
			</view>
			<view class="box-1">
				<view class="box-left">职业：</view>
				<input type="text" value="" class="list-input" v-model="occupation" placeholder="请输入您的职业"/>
			</view>
			<view class="box-1">
				<view class="box-left">身份证号码：</view>
				<input type="text" value="" class="list-input" v-model="card" placeholder="请输入您的身份证号"/>
			</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 :class="{'action': !sex}">{{ add_time || '请输入申请日期'}}</view>
				</picker>
			</view>
			<view class="box-1">
				<view class="box-left">移动电话：</view>
				<input type="text" class="list-input" v-model="phone" placeholder="请输入移动电话"/>
			</view>
			<!-- <view class="box-1">
				<view class="box-left">固定电话：</view>
				<input type="text" class="list-input" v-model="tel" placeholder="请输入固定电话"/>
			</view> -->
			<view class="box-1">
				<view class="box-left">居住地址：</view>
				<input type="text" class="list-input" v-model="address" placeholder="请输入居住地址"/>
			</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="#f3392c" style="transform:scale(0.7)" /></view>
						<view class="check-text">{{ item.value }}</view>
					</label>
				</radio-group>
			</view>

			<view class="box-2">
						我指定：该亲属为我的遗体捐献执行人，全权负责本人的遗体捐赠事宜。
				</view>
			<view class="box-1">
				<view class="box-left">捐献执行人：</view>
				<input type="text" class="list-input" v-model="exexutor" placeholder="请输入捐赠执行人姓名"/>
			</view>
			<view class="box-1">
				<view class="box-left">身份证号码：</view>
				<input type="text" class="list-input" v-model="sfz" placeholder="请输入执行人身份证号码"/>
			</view>
			<view class="box-1">
				<view class="box-left max-line">与捐献志愿者关系：</view>
				<input type="text" class="list-input" v-model="relation" placeholder="请输入与执行人关系"/>
			</view>
			<view class="box-1">
				<view class="box-left max-line">捐献执行人移动电话：</view>
				<input type="text" class="list-input" v-model="n_phone" placeholder="请输入执行人移动电话"/>
			</view>
			<!-- <view class="box-1">
				<view class="box-left max-line">捐献执行人固定电话：</view>
				<input type="text" class="list-input" v-model="n_tel" placeholder="请输入执行人固定电话"/>
			</view> -->

			<view class="box-1" style="border-bottom: none;"><view>我保证填写的以上信息准确真实，如发生变更或个人意愿发生变化时，及时告知登记机构。</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;
			}

			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.tel == ''){
			// 	obj.$api.msg('请填写您的固定电话');
			// 	return;
			// }
			if (obj.occupation == '') {
				obj.$api.msg('请填写您的职业');
				return;
			}
			if (obj.address == '') {
				obj.$api.msg('请填写您的地址');
				return;
			}
			if (obj.education == '') {
				obj.$api.msg('请选择您的文化程度');
				return;
			}
			if (obj.phone == ''){
				obj.$api.msg('请填写您的手机号');
				return;
			}
			if (obj.current !== 0 && obj.current !== 1) {
				obj.$api.msg('请在选项中打√');
				return;
			}


			if (obj.add_time == '') {
				obj.$api.msg('请填写申请日期');
				return;
			}
			if (obj.exexutor == ''){
				obj.$api.msg('请填写执行人的姓名');
				return;
			}
			if (obj.relation == ''){
				obj.$api.msg('请填写执行人与你的关系');
				return;
			}
			if (obj.sfz == ''){
				obj.$api.msg('请填写执行人的身份证');
				return;
			}
			if (obj.n_phone == ''){
				obj.$api.msg('请填写执行人的手机号');
				return;
			}
			// if (obj.n_tel == ''){
			// 	obj.$api.msg('请填写执行人的固定电话');
			// 	return;
			// }
			obj.loding = true;
			joinSecc({
				name: obj.name,
				sex: obj.sex,
				education: obj.education,
				birthday: obj.birthday,
				card: obj.card,
				phone: obj.phone,
				tel: obj.tel,
				occupation: obj.occupation,
				add_time: obj.add_time,
				remark: obj.remark,
				address: obj.address,
				executor: obj.exexutor,
				relation: obj.relation,
				sfz: obj.sfz,
				n_phone:obj.n_phone,
				n_tel:obj.n_tel
			})
				.then(e => {
					console.log(e,'ddddddddddddddddddddddddddd')
					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: #fdcbc2;
	height: 100%;
}

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

	.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;
		margin-top: 50rpx;
		width: 750rpx;
		height: 100rpx;
		background: #fa7e67;
		// position: fixed;
		// bottom: 0;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		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;
		box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
		.red-box {
			width: 405rpx;
			line-height: 66rpx;
			text-align: center;
			background: linear-gradient(0deg, #c90f1b, #f14d33);
			border-radius: 10rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #FA7E67;
			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;
				align-items: center;
				// justify-content: space-between;
				width: 100%;
				.check-text {
					margin-right: 12rpx;
					color: #000;
				}
				.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: #FF4C4C;
			.box-left {
				padding-left: 2rpx;
				// width: 190rpx;
				text-align: left;
				color: #ff4500;
			}
			.line {
				width: 200rpx;
				border-bottom: 1rpx solid #ff9797;
			}
		}

		.box-1 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			border-bottom: solid 1px #f0f0f0;

			.box-left {
				font-size: 28rpx;
				width: 200rpx;
				// display: inline-block;
				padding-left: 2rpx;
				// width: 100%;
				text-align: left;
				color: #000;
				line-height: 1.5;
			}
			.max-line {
				width: 200rpx;
				padding-right: 50rpx;
			}
			input {
				margin-right: 36rpx;
				display: block;
				// width: 460rpx;
				height: 99rpx;
				line-height: 99rpx;
				margin-top: 32rpx;
				// height: 88rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000;
				// line-height: 100px;
			}

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

				// line-height: 66rpx;
				display: flex;
				align-items: center;
				width: 100%;
				font-size: 28rpx;
				flex: 1;
				// color: #FF9797;
				// border: 1rpx solid #f3afad;
				// border-radius: 22rpx;
				text-align: left;
				padding-left: 25rpx;
				height: 99rpx;
				line-height: 99rpx;
				margin-top: 0 !important;
				.input-placeholder {
					height: 99rpx;
					color: #999;
				}
			}

			.box-right {
				width: 460rpx;
				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;
				margin-right: 36rpx;
				margin-left: 32rpx;
				// width: 96%;
				font-size: 28rpx;
				// color: #FF9797;
				text-align: left;
				// line-height: 1;
				.action {
					color: #999;
				}
			}
		}

		.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;
				}
			}
		}
	}
}
.red-box {
	text-align: center;
	font-size: 38rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FA7E67;
	padding-top: 50rpx;
}
.jg {
	width: 215rpx;
	height: 17rpx;
	margin: -15rpx auto 34rpx;
	background: #fff;
	opacity: 0.26;
}
.line-b {
	display: inline-block;
	height: 20rpx;
	border-bottom: 1px solid #e63931;
}
</style>