hhred/pages/cart/cart.vue

<template>
	<view class="content">
		<view class="top">
			<image src="../../static/img/activity.png" class="topimg" 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.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 quantum = ''
					let arr = obj.dates.split(',')
					let arr1 = obj.quantum.split(',')
					for(let i = 0; i < arr.length ; i++) {
						
						for(let j = 0; j < arr1.length ; j++) {
							quantum += arr[i] + arr1[j] + ','
						}
					}
					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 == '请选择教育程度' ? '' : obj.education , //教育程度
						is_vol: obj.checked,
						is_experience: obj.checked1,
						quantum: quantum.slice(0,quantum.length-1),
						// 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>