ltred/pages/cart/cart.vue

<template>
	<view class="content">
		<view class="box">
			<!-- <view class="red-box">
				报名参与
			</view> -->
			<view class="box-1">
				<view class="box-left">姓名</view>
				<input type="text" placeholder="请填写你的名字" placeholder-class="placeholder" value="" class="list-input" v-model="name" />
			</view>
			<view class="box-1">
				<view class="box-left">出生年月</view>
				<picker mode="date" :value="birth" fields="month" :start="startDate" :end="endDate" @change="bindDateChange" class="box-right">
					<view>{{ birth }}</view>
				</picker>
			</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 @change="bindPickerEdu" :value="index" :range="chooseEdu" class="box-right">
					<text>{{ education }}</text>
				</picker>
			</view>
			<view class="box-1">
				<view class="box-left">民族</view>
				<input type="text" placeholder="请填写你的民族" placeholder-class="placeholder" value="" class="list-input" v-model="mz" />
			</view>
			<view class="box-1">
				<view class="box-left">邮箱</view>
				<input type="text" placeholder="请填写你的邮箱" placeholder-class="placeholder" value="" class="list-input" v-model="mail" />
			</view>
			<view class="box-1">
				<view class="box-left">地址</view>
				<input type="text" placeholder="请填写你的地址" placeholder-class="placeholder" value="" class="list-input" v-model="address" />
			</view>
			<view class="box-1">
				<view class="box-left">身份证号</view>
				<input type="text" placeholder="请填写你的身份证号" placeholder-class="placeholder" value="" class="list-input" v-model="card" />
			</view>
			<view class="box-1">
				<view class="box-left">联系电话</view>
				<input type="text" placeholder="请填写你的联系电话" placeholder-class="placeholder" value="" class="list-input" v-model="phone" />
			</view>
			<view class="box-1">
				<view class="box-left">微信号</view>
				<input type="text" placeholder="请填写你的微信号" placeholder-class="placeholder" value="" class="list-input" v-model="weixin" />
			</view>
			<view class="box-1">
				<view class="box-left">工作单位</view>
				<input type="text" placeholder="请填写你的工作单位" placeholder-class="placeholder" value="" class="list-input" v-model="work" />
			</view>
			<view class="box-1">
				<view class="box-left">职业/职务</view>
				<input type="text" value="" placeholder="请填写你的职业/职务" placeholder-class="placeholder" class="list-input" v-model="specialty" />
			</view>
			<view class="box-1">
				<view class="box-left">专业/专长</view>
				<input type="text" placeholder="请填写你的专业/专长" placeholder-class="placeholder" value="" class="list-input" v-model="major" />
			</view>
			<view class="upload-box">
				<view class="upload-left">照片</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>
		<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 class="btn-box">
			<view class="buttom" :class="{ action: loding }" @click="!loding ? join() : ''">提交申请</view>
		</view>
	</view>
</template>

<script>
import { add_volunteers } 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: ['是', '否'],
			index: 0,
			mz: '',
			cardimg: '', //证件照
			card: '',
			checklist: [],
			name: '',
			sex: '请选择你的性别',
			birth: '请选择你的出生年月',
			phone: '',
			address: '',
			work: '',
			specialty: '',
			education: '请选择你的文化程度',
			mail: '',
			weixin: '',
			major: '',
			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.birth == '请选择你的出生年月') {
				obj.$api.msg('请选择出生年月');
				return;
			}
			if (obj.sex == '请选择你的性别') {
				obj.$api.msg('请输入您的性别');
				return;
			}
			if (obj.education == '请选择你的文化程度') {
				obj.$api.msg('请选择您的文化程度');
				return;
			}
			if (obj.mz == '') {
				obj.$api.msg('请填写您所属的民族');
				return;
			}
			if (obj.mail == '') {
				obj.$api.msg('请填写您的邮箱');
				return;
			}
			if (obj.address == '') {
				obj.$api.msg('请填写您的地址');
				return;
			}
			if (obj.card == '') {
				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.phone == '') {
				obj.$api.msg('请填写您的联系电话');
				return;
			}
			const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
			if (!reg.test(obj.phone)) {
				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.微信 == '') {
				obj.$api.msg('请填写您的微信号');
				return;
			}
			if (obj.work == '') {
				obj.$api.msg('请填写您的工作单位');
				return;
			}
			if (obj.specialty == '') {
				obj.$api.msg('请填写您的职业/职务');
				return;
			}
			if (obj.major == '') {
				obj.$api.msg('请填写您的专业/专长');
				return;
			}
			if (obj.cardimg == '') {
				obj.$api.msg('请上传您的证件');
				return;
			}
			if (obj.Getchecked == false) {
				this.$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;
			add_volunteers({
				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,
				mail: obj.mail,//邮箱
				weixin: obj.weixin,//微信号
				major: obj.major//专业或专长
			})
				.then(e => {
					obj.name = '';
					obj.sex = '请选择你的性别';
					obj.education = '请选择你的文化程度';
					obj.birth = '请选择你的出生年月';
					(obj.mz = ''), (obj.phone = '');
					obj.address = '';
					obj.work = '';
					obj.specialty = '';
					(obj.cardimg = ''), (obj.card = '');
					obj.mail = '';
					(obj.weixin = ''), (obj.major = '');
					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) {
			console.log(this.array[e.target.value]);
			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;
		},
		// 是否参加志愿活动
		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;
		},
		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}`;
		},
		// 选择可提供时间

		// 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: #ffffff;
}

.content {
	padding-bottom: 100rpx;
	.buttom {
		width: 100%;
		height: 100rpx;
		background: #f3392c;
		font-size: 36rpx;
		font-weight: 400;
		color: #ffffff;
		line-height: 100rpx;
		text-align: center;

		&.action {
			background: #999999;
		}
	}

	.box {
		// margin-top: 44rpx;
		width: 100%;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 28rpx 20rpx 32rpx 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;
		}

		.box-1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			margin-top: 42rpx;
			// height: 133rpx;

			.box-left {
				padding-left: 2rpx;
				width: 184rpx;
				text-align: left;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #191919;
			}

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

			.list-input {
				padding-left: 22rpx;
				// margin: 12rpx 0 ;
				font-size: 28rpx;
				display: flex;
				justify-content: center;
				// line-height: 66rpx;
				display: flex;
				align-items: center;
				flex: 1;
				color: #000000;
				width: 500rpx;
				border: 1px solid #d2d2d2;
				text-align: left;

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

			.box-right {
				display: flex;
				padding-left: 22rpx;
				height: 66rpx;
				line-height: 66rpx;
				border: 1px solid #d2d2d2;
				// margin: 32rpx 36rpx 0 36rpx;
				width: 500rpx;
				font-size: 28rpx;
				color: #959595;
				text-align: left !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;
				}
			}
		}
	}
	
	.list-box {
		background-color: #ffffff;
		font-size: 28rpx;
		width: 100%;
		height: 350rpx;
		border-top: 15rpx solid #f2f2f2;
		border-bottom: 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;
		}
		.check_box {
			margin-top: 30rpx;
			padding: 0 20rpx;
		}
		.tip {
			color: #000000;
			padding-top: 25rpx;
			width: 100%;
			text-align: center;
		}
		.icon {
			color: red;
			margin-left: 5rpx;
		}
	}
}
.placeholder {
		line-height: 66rpx;
	}
</style>