xnred/pages/applic/perSign.vue

<template>
	<view class="content">
		<view class="top">
			<image src="../../static/index/geren.jpg" mode=""></image>
		</view>
		<view class="freeSign">
			免费报名
		</view>
		<view class="signInfo">
			完成信息填写,即可参加红十字会救护员培训
		</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" placeholder="请填写姓名" />
			</view>
			<view class="box-1">
				<view class="box-left">
					联系方式<text class="imp">*</text>：
				</view>
				<input type="text" value="" class="list-input" v-model="phone" placeholder="请输入联系方式" />
			</view>

			<view class="box-1">
				<view class="box-left">
					工作单位（或地址）<text class="imp">*</text>：
				</view>
				<input type="text" value="" class="list-input" v-model="address" placeholder="请输入工作单位(或地址)" />
			</view>

		</view>
		<view class="statement">
			<view class="title">
				免费报名
			</view>
			<view class="main">
				<view>
					请参训学员在培训当天携带身份证复印件1张,一寸证件照2张。
				</view>
				<view style="margin-top: 16rpx;">
					报名电话: 0716-2202950
				</view>
			</view>
		</view>

		<view class="buttom" :class="{ action: loding }" @click="!loding?join():''">
			立即报名
		</view>
	</view>
</template>

<script>
	import {
		joinSec
	} from '@/api/index.js';
	import {
		upload
	} from '@/api/ask.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				otherjob: '',
				otherspe: '',
				loding: false, //是否提交中
				array: ['男', '女'],
				chooseEdu: ['博士后', '博士', '硕士', '本科', '专科', '其他'],
				chooseVol: ['有', '无'],
				is_vol: '',
				is_experience: '',
				chooseExp: ['是', '否'],
				items: [{
					value: '我自愿捐献全部遗体(含器官组织)'
				}, {
					value: '或只捐献眼角膜'
				}],
				timeList: [{
						id: 0,
						num: "周一",
						list: {
							morning: '周一上午',
							after: '周一下午',
							night: '周一晚上'
						}
					},
					{
						id: 1,
						num: "周二",
						list: {
							morning: '周二上午',
							after: '周二下午',
							night: '周二晚上'
						}
					},
					{
						id: 2,
						num: "周三",
						list: {
							morning: '周三上午',
							after: '周三下午',
							night: '周三晚上'
						}
					},
					{
						id: 3,
						num: "周四",
						list: {
							morning: '周四上午',
							after: '周四下午',
							night: '周四晚上'
						}
					},
					{
						id: 4,
						num: "周五",
						list: {
							morning: '周五上午',
							after: '周五下午',
							night: '周五晚上'
						}
					},
					{
						id: 5,
						num: "周六",
						list: {
							morning: '周六上午',
							after: '周六下午',
							night: '周六晚上'
						}
					},
					{
						id: 6,
						num: "周日",
						list: {
							morning: '周日上午',
							after: '周日下午',
							night: '周日晚上'
						}
					},
				],
				jobList: [{
						id: 0,
						class_name: "赈灾工作"
					},
					{
						id: 1,
						class_name: "救护培训"
					},
					{
						id: 2,
						class_name: "活动策划"
					},
					{
						id: 3,
						class_name: "护送服务"
					},
					{
						id: 4,
						class_name: "医疗护理服务"
					},
					{
						id: 5,
						class_name: "探访服务"
					},
					{
						id: 6,
						class_name: "外语翻译"
					},
					{
						id: 7,
						class_name: "调查服务"
					},
					{
						id: 8,
						class_name: "宣传推广"
					},
					{
						id: 9,
						class_name: "文书档案工作"
					},
					{
						id: 10,
						class_name: "其他（请注明）"
					},
				],
				specialityList: [{
						id: 0,
						class_name: "医疗护理"
					},
					{
						id: 1,
						class_name: "紧急救护"
					},
					{
						id: 2,
						class_name: "家电维修"
					},
					{
						id: 3,
						class_name: "影音制作"
					},
					{
						id: 4,
						class_name: "文艺演出"
					},
					{
						id: 5,
						class_name: "理发"
					},
					{
						id: 6,
						class_name: "摄影摄像"
					},
					{
						id: 7,
						class_name: "电脑中文打字"
					},
					{
						id: 8,
						class_name: "汽车驾驶"
					},
					{
						id: 9,
						class_name: "外语翻译"
					},
					{
						id: 10,
						class_name: "法律咨询"
					},
					{
						id: 11,
						class_name: "文案策划"
					},
					{
						id: 12,
						class_name: "其他（请注明）"
					},
				],
				current: "",
				index: 0,
				mz: '',
				cardimg: '', //证件照
				card: '',
				checklist: [],
				name: '',
				sex: '',
				birth: '',
				fillingDate: '',
				phone: '',
				address: '',
				work: '',
				specialty: '',
				education: '',
			}
		},
		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.birth == '') {
				// 	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;
				// }
				// if (obj.cardimg == '') {
				// 	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.mz == '') {
				// 	obj.$api.msg('请填写您所属的名族');
				// 	return;
				// }
				// if (obj.specialty == '') {
				// 	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;
				joinSec({
					name: obj.name,
					sex: obj.sex,
					education: obj.education,
					birth: obj.birth,
					mz: obj.mz,
					phone: obj.phone,
					address: obj.address,
					work: obj.work,
					specialty: obj.specialty,
					img: obj.cardimg,
					card: obj.card,

				}).then(e => {
					obj.name = '';
					obj.sex = '';
					obj.education = '';
					obj.birth = '';
					obj.mz = '',
						obj.phone = '';
					obj.address = '';
					obj.work = '';
					obj.specialty = '';
					obj.cardimg = '',
						obj.card = ''
					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];
				this.index = e.target.value + 1;
			},
			// 选择日期
			bindDateChange: function(e) {
				this.birth = e.target.value
			},
			//选择填写日期
			fillingDateChange: function(e) {
				this.fillingDate = e.target.value
			},
			// 是否参加志愿活动
			bindPickerVol: function(e) {
				this.is_vol = this.chooseVol[e.target.value];
				this.index = e.target.value + 1;
			},
			// 有无服务经验
			bindPickerExp: function(e) {
				this.is_experience = this.chooseExp[e.target.value];
				this.index = e.target.value + 1;
			},
			// 选择捐献
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						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);
			},
			// 选择可提供时间
			timeOnChange: function(item1) {
				this.quantum = item1.detail.value.join(',');
				console.log('可选择时间', this.quantum)
			},
			//选择有兴趣参与的工作
			checkjob(item) {
				this.taste = item.detail.value.join(',');
				console.log('选择工作：', this.taste)
				this.otherjob = item.detail.value
			},
			// 选择专长checkspeciality
			checkspeciality(item) {
				this.speciali = item.detail.value.join(',');
				console.log('选择专长', this.speciali)
				this.otherspe = item.detail.value
			},
		}
	}
</script>

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


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

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

			image {
				width: 100%;
				height: 368rpx;
			}
		}

		.freeSign {
			padding: 24rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #F2F2F2;
		}

		.signInfo {
			padding: 24rpx 0;
			display: flex;
			font-size: 28rpx;
			align-items: center;
			justify-content: center;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #F2F2F2;
		}

		.statement {
			// margin: 32rpx;
			background-color: #FFFFFF;
			// padding: 32rpx 23rpx;
			border-radius: 12rpx;

			.title {
				height: 84rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				border-bottom: 2rpx dotted #f3f3f3;
			}

			.main {
				padding: 32rpx;
				text-indent: 48rpx;
				color: #666;
				font-weight: 400;
			}
		}

		.buttom {
			width: 500rpx;
			height: 100rpx;
			background: linear-gradient(0deg, #C90F1B, #F14D33);
			border-radius: 20rpx;
			margin: 20rpx 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: 32rpx 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);
			// 	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: #E63931;

				.info {
					margin-bottom: 32rpx;
					text-align: center;
				}

				.chooseTim {
					text-align: center;
					font-size: 42rpx;
				}

				.choose-job {
					color: #666666;

					// height: 45rpx; 爱心捐赠
					.goods_check {
						display: flex;
						flex-direction: column;

						.uni-label-pointer {
							// width: 50%;
							// display: flex;
						}
					}

					.other {
						width: 100%;
						border-bottom: 2rpx solid #f3f3f3;
					}
				}

				.box-cent {
					font-size: 28rpx;
					font-weight: 500;
					color: #666666;
					display: flex;

					.cent-left {
						margin-right: 28rpx;

						.left-txt {
							line-height: 100rpx;
						}
					}

					.cent-right {
						flex: 1;
						display: flex;
						justify-content: space-around;

						.right-check {
							line-height: 100rpx;
						}
					}
				}

			}

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

				.box-left {
					padding-left: 2rpx;
					width: 100%;
					text-align: left;
					color: black;
					font-size: 30rpx;
					font-weight: 500;
				}

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

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

					line-height: 80rpx;
					display: flex;
					align-items: center;
					width: 100%;
					font-size: 28rpx;

					flex: 1;
					color: #BEBEBE;
					border: 4rpx solid #DCDFE6;
					border-radius: 12rpx;
					text-align: left;
					padding-right: 24rpx;

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

				.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>