ltred/pages/form/tovolApplyDemo.vue

<template>
	<view class="content">
		<!-- <view class="top">
			<image src="../../static/img/activity.png" mode=""></image>
		</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" placeholder="请填写你的名字" value="" class="list-input" v-model="name" />
			</view>

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

			<view class="box-1">
				<view class="box-left">
					出生年月
					<text class="imp">*</text>
					：
				</view>
				<picker mode="date" :value="birth" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="box-right">{{ birth }}</view>
				</picker>
			</view>
			<view class="upload-box">
				<view class="upload-left">
					照片
					<text class="imp">*</text>
					：
				</view>
				<view class="upload-right">
					<image :src="cardimg" mode="" class="upload-img" @click.stop="imgsub" v-if="cardimg"></image>
					<image src="../../static/images/upload.png" class="upload-img" mode="" v-if="!cardimg" @click.stop="imgsub"></image>
				</view>
			</view>
			<view class="box-1">
				<view class="box-left">
					移动电话
					<text class="imp">*</text>
					：
				</view>
				<input type="text" placeholder="请填写移动电话" value="" class="list-input" v-model="phone" />
			</view>

			<view class="box-1">
				<view class="box-left">固定电话(选填)：</view>
				<input type="text" placeholder="请填写固定电话" value="" class="list-input" v-model="mobile" />
			</view>
			<!-- 		<view class="box-1">
				<view class="box-left">
					办公电话(选填)：
				</view>
				<input type="text" value="" class="list-input" v-model="phone" />
			</view> -->

			<view class="box-1">
				<view class="box-left">电子邮件(选填)：</view>
				<input type="text" placeholder="请填写电子邮件" value="" class="list-input" v-model="email" />
			</view>
			<!-- <view class="box-1">
				<view class="box-left">
					QQ(选填)：
				</view>
				<input type="text" value="" class="list-input" v-model="phone" />
			</view> -->
			<view class="box-1">
				<view class="box-left">联系地址(选填)：</view>
				<input type="text" value="" placeholder="请填写联系地址" class="list-input" v-model="address" />
			</view>
			<view class="box-1">
				<view class="box-left">邮编(选填)：</view>
				<input type="text" value="" placeholder="请填写邮编" class="list-input" v-model="zip" />
			</view>
			<view class="box-1">
				<view class="box-left">工作单位(选填)：</view>
				<input type="text" value="" placeholder="请填写工作单位" class="list-input" v-model="work" />
			</view>
			<view class="box-1">
				<view class="box-left">职业/职务/专业(选填)：</view>
				<input type="text" placeholder="请填写职业/职务/专业" value="" class="list-input" v-model="specialty" />
			</view>

			<view class="box-1">
				<view class="box-left">教育程度(选填)：</view>
				<picker @change="bindPickerEdu" :value="index" :range="chooseEdu">
					<view class="box-right">{{ education }}</view>
				</picker>
			</view>
			<view class="box-1">
				<view class="box-left">
					是否受过志愿服务
					<text class="imp">*</text>
					：
				</view>
			</view>
			<view class="uni-list">
				<radio-group @change="radioChange">
					<view class="radio-list flex_item">
						<label class="uni-list-cell uni-list-cell-pd flex_item" v-for="(item, index) in is_vol" :key="item.name">
							<view><radio style="transform:scale(0.7)" color="#E71F2C" :value="item.name" :checked="index === current" /></view>
							<view>{{ item.name }}</view>
						</label>
					</view>
				</radio-group>
			</view>
			<view class="box-1">
				<view class="box-left">
					有无服务经验
					<text class="imp">*</text>
					：
				</view>
			</view>
			<view class="uni-list">
				<radio-group @change="radioChange1">
					<view class="radio-list flex_item">
						<label class="uni-list-cell uni-list-cell-pd flex_item" v-for="(item, index) in is_experience" :key="item.name">
							<view><radio style="transform:scale(0.7)" color="#E71F2C" :value="item.name" :checked="index === current" /></view>
							<view>{{ item.name }}</view>
						</label>
					</view>
				</radio-group>
			</view>
			<view class="list-box">
				<view class="list-title">可提供服务的时间</view>
				<view class="tip">请选择适当方格，可选多项</view>
				<view class="content_box">
					<view class="list-name">
						时间段
						<text class="icon">*</text>
					</view>
					<view class="uni-list">
						<checkbox-group @change="checkboxChange">
							<view class="radio-list flex_item">
								<label class="uni-list-cell uni-list-cell-pd flex_item" v-for="item in days" :key="item.name">
									<view><checkbox :value="item.name" style="transform:scale(0.7)" color="#E71F2C" :checked="item.checked" /></view>
									<view>{{ item.name }}</view>
								</label>
							</view>
						</checkbox-group>
					</view>
				</view>
				<view class="content_box">
					<view class="list-name">
						日期
						<text class="icon">*</text>
					</view>
					<view class="uni-list">
						<checkbox-group @change="checkboxChange1">
							<view class="radio-list flex_item">
								<label class="uni-list-cell uni-list-cell-pd flex_item" v-for="item in items" :key="item.name">
									<view><checkbox :value="item.name" style="transform:scale(0.7)" color="#E71F2C" :checked="item.checked" /></view>
									<view>{{ item.name }}</view>
								</label>
							</view>
						</checkbox-group>
					</view>
				</view>
			</view>
			<view class="list-box tpl-box">
				<view class="list-title">有兴趣参与的工作</view>
				<view class="tip">请选择适当方格，可选多项</view>
				<view class="content_box">
					<view class="uni-list">
						<checkbox-group @change="checkboxChange2">
							<view class="radio-list flex_item">
								<label class="uni-list-cell uni-list-cell-pd flex_item" v-for="item in works" :key="item.name">
									<view><checkbox :value="item.name" style="transform:scale(0.7)" color="#E71F2C" :checked="item.checked" /></view>
									<view>{{ item.name }}</view>
								</label>
							</view>
						</checkbox-group>
					</view>
					<input class="worksInput" type="text" v-model="worksText" />
				</view>
			</view>
			<view class="list-box tpl-box">
				<view class="list-title">专长</view>
				<view class="tip">请选择适当方格，可选多项</view>
				<view class="content_box">
					<view class="uni-list">
						<checkbox-group @change="checkboxChange3">
							<view class="radio-list flex_item">
								<label class="uni-list-cell uni-list-cell-pd flex_item" v-for="item in expertise" :key="item.name">
									<view><checkbox :value="item.name" style="transform:scale(0.7)" color="#E71F2C" :checked="item.checked" /></view>
									<view>{{ item.name }}</view>
								</label>
							</view>
						</checkbox-group>
					</view>
					<input class="worksInput" type="text" v-model="expertiseText" />
				</view>
			</view>
			<view class="list-box">
				<view class="list-title">个人声明</view>
				<view class="check_box">
					<view>
						<radio style="transform: scale(0.75)" @click="Getcheckbox" color="#E62129" :checked="Getchecked" />
						本人同意将个人资料送交红十字志愿者工作委员会，申请注册登记，成为光荣的红十字志愿工作者，并乐于接受志愿工作安排，提供服务。
					</view>
				</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_experience: [
				{
					id: 1,
					name: '有'
				},
				{
					id: 2,
					name: '无'
				}
			],
			// is_experience: '',
			chooseExp: ['是', '否'],
			//时间段
			days: [
				{
					value: '1',
					name: '早上'
				},
				{
					value: '2',
					name: '中午'
				},
				{
					value: '3',
					name: '晚上'
				}
			],
			quantum: '',
			//日期
			items: [
				{
					value: '1',
					name: '星期一'
				},
				{
					value: '2',
					name: '星期二'
				},
				{
					value: '3',
					name: '星期三'
				},
				{
					value: '4',
					name: '星期四'
				},
				{
					value: '5',
					name: '星期五'
				},
				{
					value: '6',
					name: '星期六'
				},
				{
					value: '7',
					name: '星期日'
				}
			],
			dates: '',
			//有兴趣参与的工作
			works: [
				{
					value: '1',
					name: '赈灾工作'
				},
				{
					value: '2',
					name: '救护培训'
				},
				{
					value: '3',
					name: '护送服务'
				},
				{
					value: '4',
					name: '编辑及出版'
				},
				{
					value: '5',
					name: '医疗护理服务'
				},
				{
					value: '6',
					name: '探访服务'
				},
				{
					value: '7',
					name: '外语翻译'
				},
				{
					value: '8',
					name: '调查服务'
				},
				{
					value: '9',
					name: '联络服务'
				},
				{
					value: '10',
					name: '宣传及推广'
				},
				{
					value: '11',
					name: '文书档案工作'
				},
				{
					value: '12',
					name: '其它（请注明）'
				}
			],
			taste: '',
			worksText: '', //工作其他
			//专长
			expertise: [
				{
					value: '1',
					name: '医疗护理'
				},
				{
					value: '2',
					name: '紧急救护'
				},
				{
					value: '3',
					name: '出版/美术设计'
				},
				{
					value: '4',
					name: '影音制作'
				},
				{
					value: '5',
					name: '文艺演出'
				},
				{
					value: '6',
					name: '网络软件'
				},
				{
					value: '7',
					name: '摄影摄像'
				},
				{
					value: '8',
					name: '电脑中文打字'
				},
				{
					value: '9',
					name: '汽车驾驶'
				},
				{
					value: '10',
					name: '外语翻译'
				},
				{
					value: '11',
					name: '法律咨询'
				},
				{
					value: '12',
					name: '文案策划'
				},
				{
					value: '13',
					name: '其它（请注明）'
				}
			],
			speciali: '',
			current: '',
			is_vol: [
				{
					id: 1,
					name: '有'
				},
				{
					id: 2,
					name: '无'
				}
			],
			index: 0,
			// mz: '',
			email: '',
			cardimg: '', //证件照
			// card: '',
			// checklist: [],
			zip: '',
			name: '',
			sex: '请选择你的性别',
			birth: '请选择你的生日',
			fillingDate: '',
			phone: '',
			mobile: '', //固定电话
			address: '',
			work: '',
			specialty: '',
			education: '请选择教育程度',
			checked1: '',
			checked: '',
			expertiseText: '', //专长其他
			Getchecked: false //个人声明
		};
	},
	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.sex == '请选择你的性别') {
				obj.$api.msg('请输入您的性别');
				return;
			}
			if (obj.birth == '' || obj.birth == '请选择你的生日') {
				obj.$api.msg('请填写您的生日');
				return;
			}
			const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
			if (obj.phone == '') {
				obj.$api.msg('请填写您的移动电话');
				return;
			}
			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.checked1 == '') {
				obj.$api.msg('请选择有无服务经验');
				return;
			}
			if (obj.checked == '') {
				obj.$api.msg('请选择是否接受过志愿者服务');
				return;
			}
			if (obj.cardimg == '') {
				obj.$api.msg('请上传您的证件');
				return;
			}
			if (!obj.quantum) {
				this.$api.msg('请选择时间段！');
				return;
			}
			if (!obj.dates) {
				this.$api.msg('请选择日期！');
				return;
			}
			if (obj.Getchecked == false) {
				this.$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;
			// }

			obj.loding = true;
			joinSec({
				name: obj.name,
				sex: obj.sex,
				birth: obj.birth,
				picture: obj.cardimg,
				phone: obj.phone,
				mobile: obj.mobile,
				email: obj.email,
				address: obj.address,
				zip: obj.zip, //邮编
				work: obj.work, //工作单位
				specialty: obj.specialty, //职业/职务/专业
				zy:obj.zy,
				education: obj.education, //教育程度
				is_vol: obj.checked,
				is_experience: obj.checked1,
				quantum: obj.quantum,
				date: obj.dates,
				taste: obj.taste,
				make_taste: obj.worksText,
				speciali: obj.speciali,
				make_speciali: obj.expertiseText,
			})
				.then(e => {
					obj.sex = '请选择你的性别';
					obj.education = '请选择你的教育程度';
					obj.birth = '请选择你的生日';
					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;
		},
		// 有无服务经验
		radioChange1(evt) {
			this.checked1 = evt.detail.value;
			console.log(this.checked1, '有无服务经验');
		},
		//是否受过志愿服务
		radioChange(evt) {
			this.checked = evt.detail.value;
			console.log(this.checked, '是否受过志愿服务');
		},
		Getcheckbox() {
			let obj = this;
			obj.Getchecked = !obj.Getchecked;
		},
		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}`;
		},
		//时间段
		checkboxChange: function(e) {
			var items = this.days,
				values = e.detail.value;
			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				const item = items[i];
				if (values.includes(item.value)) {
					this.$set(item, 'checked', true);
				} else {
					this.$set(item, 'checked', false);
				}
			}
			this.quantum = values.join(',');
			console.log(this.quantum, '时间段');
		},
		//日期
		checkboxChange1: function(e) {
			var items = this.items,
				values = e.detail.value;
			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				const item = items[i];
				if (values.includes(item.value)) {
					this.$set(item, 'checked', true);
				} else {
					this.$set(item, 'checked', false);
				}
			}
			this.dates = values.join(',');
			console.log(this.dates, '日期');
		},
		//有兴趣参与的工作
		checkboxChange2: function(e) {
			var items = this.works,
				values = e.detail.value;
			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				const item = items[i];
				if (values.includes(item.value)) {
					this.$set(item, 'checked', true);
				} else {
					this.$set(item, 'checked', false);
				}
			}
			this.taste = values.join(',');
			console.log(this.taste, '有兴趣参与的工作');
		},
		//专长
		checkboxChange3: function(e) {
			var items = this.expertise,
				values = e.detail.value;
			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				const item = items[i];
				if (values.includes(item.value)) {
					this.$set(item, 'checked', true);
				} else {
					this.$set(item, 'checked', false);
				}
			}
			this.speciali = values.join(',');
			console.log(this.speciali, '专长');
		}
	}
};
</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;
		}
	}

	.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;
	}
	.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: 24rpx;
			text-indent: 48rpx;
			color: #666;
			font-weight: 400;
		}
	}

	.buttom {
		width: 100%;
		height: 100rpx;
		background: #df2412;
		margin: 50rpx auto 0;
		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 32rpx 84rpx 32rpx;
		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;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			margin-top: 42rpx;
			// height: 133rpx;

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

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

			.list-input {
				padding-left: 24rpx;
				// margin: 12rpx 0 ;
				font-size: 28rpx;
				// line-height: 66rpx;
				display: flex;
				align-items: center;
				width: 50%;
				flex: 1;
				color: #000000;
				text-align: right;
				padding-right: 24rpx;

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

			.box-right {
				display: flex;
				padding-left: 24rpx;
				height: 66rpx;
				line-height: 66rpx;
				border-radius: 22rpx;
				// margin: 32rpx 36rpx 0 36rpx;
				width: 100%;
				padding-right: 24rpx;
				font-size: 28rpx;
				color: #959595;
				text-align: right !important;
				// 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: 42rpx auto 30rpx;

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

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

				.upload-img {
					width: 150rpx;
					height: 150rpx;
					margin-top: 24rpx;
				}
			}
		}
	}
	.flex_item {
		display: flex;
		align-items: center;
	}
	.radio-list {
		display: flex;
		flex-wrap: wrap;
		font-size: 28rpx;
		padding-top: 30rpx;
		color: #000000;
		.uni-label-pointer {
			padding-right: 25rpx;
			padding-bottom: 30rpx;
		}
	}
	.check_box {
		padding: 25rpx 25rpx;
		font-size: 28rpx;
	}
	.list-box {
		background-color: #ffffff;
		font-size: 28rpx;
		width: 100%;
		height: 100%;
		border-top: 15rpx solid #f2f2f2;
		color: #222222;
		.worksInput {
			margin-bottom: 35rpx;
			border: 2rpx solid #979797;
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0rpx 25rpx;
			border-radius: 15rpx;
		}

		.list-title {
			color: #000000;
			text-align: center;
			padding: 30rpx 0rpx;
			font-size: 34rpx;
			font-weight: 500;
			border-bottom: 2rpx dashed #b5b5b5;
		}
		.tip {
			color: #000000;
			padding-top: 25rpx;
			width: 100%;
			text-align: center;
		}
		.icon {
			color: red;
			margin-left: 5rpx;
		}
	}
}
</style>