cbred/pages/category/category1.vue

<template>
	<view class="cantent">
		<view class="top">
			<image src="../../static/img/activity.png" mode=""></image>
		</view>
		<view class="content_box">
			<view class="row ">
				<text class="tit">姓名<text class="icon">*</text></text>
				<input class="input" type="text" v-model="name" placeholder-class="placeholder" />
			</view>
			<view class="row">
				<text class="tit">性别<text class="icon">*</text></text>
				<picker @change="bindPickerSex" :value="index" :range="array" class='picker-box'>
					<text>{{ sex || '' }}</text>
				</picker>
				<!-- <input class="input" type="text"  v-model="sex"  placeholder="请填写您的性别" placeholder-class="placeholder" /> -->
			</view>
			<view class="row ">
				<text class="tit">出生年月<text class="icon">*</text></text>
				<picker class='picker-box' mode="date" :value="birthday" @change="bindTimeChange">
					<view class="uni-input">{{birthday}}</view>
				</picker>
			</view>
			<!-- <view class="row" @click="selectDatePicker(type)">
				<text class="tit">出生日期<text class="icon">*</text></text>
				<input class="input" type="text"  v-model="birthday"  placeholder-class="placeholder" />
				 <datetime ref='date-time' :type='type' :datestring='dateString' @change='dateTimeChange'></datetime>
			</view> -->
		</view>
		<view class="content_box">
			<view class="examine_name">照片<text class="icon">*</text></view>
			<view class="examine_img">
				<image class="image" :src="picture" @click="scImg()" mode="widthFix"></image>
			</view>
		</view>
		<view class="content_box">
			<view class="row">
				<text class="tit">移动电话<text class="icon">*</text></text>
				<input class="input" type="number" v-model="phone"  placeholder-class="placeholder" />
			</view>
			<view class="row">
				<text class="tit">固定电话<text class="tip-info">（选填）</text></text>
				<input class="input" type="number" v-model="mobile"  placeholder-class="placeholder" />
			</view>
			<view class="row">
				<text class="tit">电子邮件<text class="tip-info">（选填）</text></text>
				<input class="input" type="text" v-model="email"  placeholder-class="placeholder" />
			</view>
			<view class="row">
				<text class="tit">联系地址<text class="tip-info">（选填）</text></text>
				<input class="input" type="text" v-model="address"  placeholder-class="placeholder" />
			</view>
			<view class="row">
				<text class="tit">邮编<text class="tip-info">（选填）</text></text>
				<input class="input" type="number" v-model="zip"  placeholder-class="placeholder" />
			</view>
			<view class="row">
				<text class="tit">工作单位<text class="tip-info">（选填）</text></text>
				<input class="input" type="text" v-model="work"  placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">职业/职务/专业<text class="tip-info">（选填）</text></text>
				<input class="input" type="text" v-model="specialty"  placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">教育程度<text class="tip-info">（选填）</text></text>
				<input class="input" type="text" v-model="education"  placeholder-class="placeholder" />
			</view>
		</view>
		<view class="content_box">
			<view class="list-name">是否受过志愿服务<text class="icon">*</text></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>
		<view class="content_box">
			<view class="list-name">有无服务经验<text class="icon">*</text></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>
		<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 class="add-btn" @click="confirm">立即提交</view>
	</view>
</template>
<script>
	import uniList from '@/components/uni-list/uni-list.vue';
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
	import {
		upload
	} from '@/api/index.js';
	import {
		add_volunteers
	} from '@/api/train.js';
	export default {
		components: {
			uniList,
			uniListItem,
		},
		data() {
			return {
				name: '', //姓名
				sex: '', //性别
				birthday: '', //出生日期
				image: '/static/img/add.png', //一寸免冠照片//照片
				picture: '/static/img/add.png',
				phone: '', //移动电话
				mobile: '', //固定电话
				email: '', //电子邮件
				address: '', //请联系地址
				zip: '', //邮编
				work: '', //工作单位
				specialty: '', //职业/职务/专业
				education: '', //教育程度
				array: ['男', '女'],
				//是否受过志愿服务
				is_vol: [{
					id: 1,
					name: '有'
				}, {
					id: 2,
					name: '无'
				}],
				current: '',
				checked: '',
				//有无服务经验
				is_experience: [{
					id: 1,
					name: '有'
				}, {
					id: 2,
					name: '无'
				}],
				current1: '',
				checked1: '',

				//时间段
				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: '',
				expertiseText: '', //专长其他
				Getchecked: false, //个人声明
				type: 'data', //时间类型
				dateString: '',
			};
		},
		onLoad() {},
		methods: {
			//单张上传图片
			scImg() {

				console.log('imgsub')
				upload({
					file: ''
				}).then(data => {
					console.log(data[0].url)
					this.picture = data[0].url;
				})

				// 	console.log(111)
				// 	let obj = this;
				// 	upload({
				// 		file: ''
				// 	}).then(e => {
				// 		obj.image = e[0].url;
				// 		console.log(obj.image)
				// 	}).catch((e) => {

				// 	});
			},
			//是否受过志愿服务
			radioChange(evt) {
				this.checked = evt.detail.value;
				console.log(this.checked, '是否受过志愿服务')
			},
			//有无服务经验
			radioChange1(evt) {
				this.checked1 = evt.detail.value;
				console.log(this.checked1, '有无服务经验')
			},
			bindTimeChange: function(e) {
				this.birthday = e.target.value
			},
			//时间段
			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, '时间段')
			},
			//日期
			// 选择性别
			bindPickerSex: function(e) {
				this.sex = this.array[e.target.value];
				this.index = e.target.value + 1;
			},
			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, '专长')
			},
			//提交
			confirm() {
				let obj = this;
				if (!obj.name) {
					this.$api.msg('请填写您的姓名！');
					return;
				}
				if (!obj.sex) {
					this.$api.msg('请填写您的性别！');
					return;
				}
				if (obj.birthday == '' || obj.birthday == '请选择出生日期') {
					this.$api.msg('请选择出生日期！');
					return;
				}
				if (obj.picture == '/static/img/add.png') {
					this.$api.msg('请上传您的照片！');
					return;
				}
				if (obj.phone == '') {
					this.$api.msg('请输入您的移动电话！');
					return;
				}
				if (obj.checked == '') {
					this.$api.msg('请选择是否受过志愿服务！');
					return;
				}
				if (!obj.checked1) {
					this.$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 data = {
					name: obj.name,
					sex: obj.sex,
					birth: obj.birthday,
					picture: obj.picture,
					phone: obj.phone,
					mobile: obj.mobile,
					email: obj.email,
					address: obj.address,
					zip: obj.zip, //邮编
					work: obj.work, //工作单位
					specialty: obj.specialty, //职业/职务/专业
					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,
				};
				add_volunteers(data).then(function(e) {
						obj.$api.msg(e.msg);
						// setTimeout(function(){
						// uni.navigateTo({
						// 	url:'/pages/index/index'
						// })
						uni.navigateTo({
							url: '../joinSuc/joinNow'
						});
						// }
					})
					.catch(e => {
						obj.$api.msg(e.message);
						// setTimeout(function(){
						// 	uni.navigateTo({
						// 		url:'/pages/index/index'
						// 	})
						// }, 1000);
					});
			},
			//个人声明
			Getcheckbox() {
				let obj = this;
				obj.Getchecked = !obj.Getchecked;
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		min-height: 100%;
		color: #222222;
	}

	.cantent {
		// padding-bottom: 120rpx;
		color: #222222;
	}

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

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

	.list-box {
		background-color: #ffffff;
		font-size: 28rpx;
		width: 100%;
		height: 100%;
		border-top: 15rpx solid #F2F2F2;
		color: #222222;

		.list-title {
			color: #E63931;
			text-align: center;
			padding: 30rpx 0rpx;
			font-size: 34rpx;
			font-weight: 500;
			border-bottom: 2rpx dashed #B5B5B5;
		}

		.tip {
			color: #E63931;
			padding-top: 25rpx;
			width: 100%;
			text-align: center;
		}
	}

	.check_box {
		padding: 25rpx 25rpx;
		font-size: 28rpx;
	}

	.uni-radio-input {
		border-color: #FFFFFF !important;
	}

	.tpl-box {
		padding-bottom: 25rpx;
	}

	.content_box {
		color: #222222;
		background-color: #ffffff;
		padding: 0rpx 25rpx;

		.worksInput {
			margin-bottom: 35rpx;
			border: 2rpx solid #979797;
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0rpx 25rpx;
			border-radius: 15rpx;
		}

		.list-name {
			padding-top: 25rpx;
			font-size: 28rpx;
			padding-left: 15rpx;
			padding-bottom: 10rpx;
			color: #666;
		}

		.examine_list {
			width: 100%;

			.textarea-box {
				width: 100%;
				padding-bottom: 25rpx;
				padding-left: 25rpx;

				.textarea {
					width: 100%;
					font-size: 28rpx;
					min-height: 150rpx;
				}

				input {
					font-size: 28rpx;
				}
			}
		}
	}

	.checkbox {
		padding: 25rpx 0rpx;
	}

	.checklist {
		flex-wrap: wrap;
	}

	.list-item {
		width: 150rpx;
		text-align: center;

		.tip {
			width: 150rpx;
			font-size: 26rpx;
			padding-bottom: 15rpx;
		}

		.top-bottom {
			padding-bottom: 35rpx;
		}
	}

	.radio-list {
		display: flex;
		flex-wrap: wrap;
		font-size: 28rpx;
		padding-top: 30rpx;
		color: #666;
		.uni-label-pointer {
			padding-right: 25rpx;
			padding-bottom: 30rpx;
		}
	}

	.mar-b {
		margin-bottom: 120rpx;
	}

	.row {
		display: flex;
		flex-direction: column;
		// align-items: center;
		padding: 12rpx 24rpx;
		// height: 110rpx;
		background: #fff;
		// border-bottom: 1rpx solid #f8f6f6;
		font-size: 28rpx;

		.tit {
			color: #E63931;
			flex-shrink: 0;
			font-size: 32rpx;
			margin-bottom: 12rpx;
			// color: $font-color-dark;
		}

		// .picker-box {
		// 	width: 100%;
		// 	text-align: right;
		// }

		.value {
			width: 100%;
			text-align: right;
		}
		.picker-box{
			height: 70rpx;
			width: 100%;
			box-sizing: border-box;
			// background-color: pink;
			border: 1rpx solid #f3afad;
			border-radius: 22rpx;
			text-align: left;
			font-size: 36rpx;
			color: #FF9797;
			line-height: 70rpx;
			padding-left: 24rpx;
		}
		.input {
			height: 70rpx;
					padding-left: 24rpx;
					// margin: 12rpx 0 ;

					// line-height: 66rpx;
					display: flex;
					align-items: center;
					width: 100%;
					font-size: 36rpx;
					flex: 1;
					color: #FF9797;
					border: 1rpx solid #f3afad;
					border-radius: 22rpx;
					text-align: left;
					// padding-right: 24rpx;

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

		.iconlocation {
			font-size: 36rpx;
			color: $font-color-light;
		}
	}

	.icon {
		font-size: 28rpx;
		color: #E72224;
	}

	.tip-info {
		color: #9B9B9B;
		font-size: 26rpx;
	}

	.examine_name {
		color: #E63931;
		font-size: 32rpx;
		padding: 25rpx 25rpx;
	}

	.examine_img {
		width: 100%;
		padding-bottom: 25rpx;
		padding-left: 25rpx;

		.image {
			width: 180rpx;
			height: 180rpx;
		}
	}

	.add-img-box {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 50rpx;
	}

	.add-img-item {
		margin-bottom: 25rpx;
		width: 100%;

		.add-img {
			min-width: 150rpx;
			max-width: 100%;
			height: 400rpx;
		}
	}

	.add-img-del {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		right: 60rpx;
		// bottom: 155rpx;
		//background-color: rgba(238, 0, 0, 1);
		border-radius: 20rpx;
	}

	.default-row {
		margin-top: 16rpx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16rpx) scale(0.9);
		}
	}

	.add-btn {
		margin-top: 84rpx;
		// position: fixed;
		// bottom: 88rpx;
		// left: 0rpx;
		width: 100%;
		height: 100rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		background-color: #DF2412;
		line-height: 100rpx;
		text-align: center;
	}

	.img_box {
		padding: 35rpx 35rpx;
		width: 250rpx;
		height: 250rpx;
	}

	.flex_item {
		display: flex;
		align-items: center;
	}

	.img_box image {
		width: 100%;
		height: 100%;
	}

	.alert-box {
		background-color: #ffffff;
	}

	.b-b:after {
		position: relative !important;
	}
</style>