shcnred/pages/form/tovolApply.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 == '0'? '男' : sex == '1'? '女' : sex }}</view>
				</picker>
			</view>

			<view class="box-1">
				<view class="box-left">
					出生年月
					<text class="imp">*</text>

				</view>
				<picker mode="date" :value="birth" :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>
		<view class="" class="tcc" :style="{'height':height}">
			<view class="buttom" :class="{ action: loding }" @click="!loding ? join() : ''">下一步</view>
		</view>

		<uni-popup ref="tishi" type="center" :maskClick="false">
			<view class="ts-wrap">
				<view class="ts-tit">
					志愿者条例
				</view>
				<scroll-view scroll-y="true" class="ts-content" @scrolltolower="isbtm = true">
					<view class="tit">第一章 总 则</view>
					<view class="xq">
						　第一条　为了保障志愿者、志愿服务组织、志愿服务对象的合法权益，鼓励和规范志愿服务，发展志愿服务事业，培育和践行社会主义核心价值观，促进社会文明进步，制定本条例。
					</view>
					<view class="xq">
						　第二条　本条例适用于在中华人民共和国境内开展的志愿服务以及与志愿服务有关的活动。
					</view>
					<view class="xq">
						　本条例所称志愿服务，是指志愿者、志愿服务组织和其他组织自愿、无偿向社会或者他人提供的公益服务。
					</view>
					<view class="xq">
						　第三条　开展志愿服务，应当遵循自愿、无偿、平等、诚信、合法的原则，不得违背社会公德、损害社会公共利益和他人合法权益，不得危害国家安全。
					</view>
					<view class="xq">
						第四条　县级以上人民政府应当将志愿服务事业纳入国民经济和社会发展规划，合理安排志愿服务所需资金，促进广覆盖、多层次、宽领域开展志愿服务。
					</view>
					<view class="xq">
						第五条　国家和地方精神文明建设指导机构建立志愿服务工作协调机制，加强对志愿服务工作的统筹规划、协调指导、督促检查和经验推广。
					</view>
					<view class="xq">
						国务院民政部门负责全国志愿服务行政管理工作;县级以上地方人民政府民政部门负责本行政区域内志愿服务行政管理工作。
					</view>
					<view class="xq">
						县级以上人民政府有关部门按照各自职责，负责与志愿服务有关的工作。
					</view>
					<view class="xq">
						工会、共产主义青年团、妇女联合会等有关人民团体和群众团体应当在各自的工作范围内做好相应的志愿服务工作。
					</view>
					<view class="tit">
						第二章　志愿者和志愿服务组织
					</view>
					<view class="xq">
						第六条　本条例所称志愿者，是指以自己的时间、知识、技能、体力等从事志愿服务的自然人。
					</view>
					<view class="xq">
						本条例所称志愿服务组织，是指依法成立，以开展志愿服务为宗旨的非营利性组织。
					</view>
					<view class="xq">
						第七条　志愿者可以将其身份信息、服务技能、服务时间、联系方式等个人基本信息，通过国务院民政部门指定的志愿服务信息系统自行注册，也可以通过志愿服务组织进行注册。
					</view>
					<view class="xq">
						志愿者提供的个人基本信息应当真实、准确、完整。
					</view>
					<view class="xq">
						第八条　志愿服务组织可以采取社会团体、社会服务机构、基金会等组织形式。志愿服务组织的登记管理按照有关法律、行政法规的规定执行。
					</view>
					<view class="xq">
						第九条　志愿服务组织可以依法成立行业组织，反映行业诉求，推动行业交流，促进志愿服务事业发展。
					</view>
					<view class="xq">
						第十条　在志愿服务组织中，根据中国共产党章程的规定，设立中国共产党的组织，开展党的活动。志愿服务组织应当为党组织的活动提供必要条件。
					</view>
					<view class="tit">
						第三章　志愿服务活动
					</view>
					<view class="">
						第十一条　志愿者可以参与志愿服务组织开展的志愿服务活动，也可以自行依法开展志愿服务活动。
					</view>
					<view class="">
						第十二条　志愿服务组织可以招募志愿者开展志愿服务活动;招募时，应当说明与志愿服务有关的真实、准确、完整的信息以及在志愿服务过程中可能发生的风险。
					</view>
					<view class="">
						第十三条　需要志愿服务的组织或者个人可以向志愿服务组织提出申请，并提供与志愿服务有关的真实、准确、完整的信息，说明在志愿服务过程中可能发生的风险。志愿服务组织应当对有关信息进行核实，并及时予以答复。
					</view>
					<view class="">
						第十四条　志愿者、志愿服务组织、志愿服务对象可以根据需要签订协议，明确当事人的权利和义务，约定志愿服务的内容、方式、时间、地点、工作条件和安全保障措施等。
					</view>
					<view class="">
						第十五条　志愿服务组织安排志愿者参与志愿服务活动，应当与志愿者的年龄、知识、技能和身体状况相适应，不得要求志愿者提供超出其能力的志愿服务。
					</view>
					<view class="">
						第十六条　志愿服务组织安排志愿者参与的志愿服务活动需要专门知识、技能的，应当对志愿者开展相关培训。
					</view>
					<view class="">
						开展专业志愿服务活动，应当执行国家或者行业组织制定的标准和规程。法律、行政法规对开展志愿服务活动有职业资格要求的，志愿者应当依法取得相应的资格。
					</view>
					<view class="">
						第十七条　志愿服务组织应当为志愿者参与志愿服务活动提供必要条件，解决志愿者在志愿服务过程中遇到的困难，维护志愿者的合法权益。
					</view>
					<view class="">
						志愿服务组织安排志愿者参与可能发生人身危险的志愿服务活动前，应当为志愿者购买相应的人身意外伤害保险。
					</view>
					<view class="">
						第十八条　志愿服务组织开展志愿服务活动，可以使用志愿服务标志。
					</view>
					<view class="">
						第十九条　志愿服务组织安排志愿者参与志愿服务活动，应当如实记录志愿者个人基本信息、志愿服务情况、培训情况、表彰奖励情况、评价情况等信息，按照统一的信息数据标准录入国务院民政部门指定的志愿服务信息系统，实现数据互联互通。
					</view>
					<view class="">
						志愿者需要志愿服务记录证明的，志愿服务组织应当依据志愿服务记录无偿、如实出具。
					</view>
					<view class="">
						记录志愿服务信息和出具志愿服务记录证明的办法，由国务院民政部门会同有关单位制定。
					</view>
					<view class="">
						第二十条　志愿服务组织、志愿服务对象应当尊重志愿者的人格尊严;未经志愿者本人同意，不得公开或者泄露其有关信息。
					</view>
					<view class="">
						第二十一条　志愿服务组织、志愿者应当尊重志愿服务对象人格尊严，不得侵害志愿服务对象个人隐私，不得向志愿服务对象收取或者变相收取报酬。
					</view>
					<view class="">
						第二十二条　志愿者接受志愿服务组织安排参与志愿服务活动的，应当服从管理，接受必要的培训。
					</view>
					<view class="">
						志愿者应当按照约定提供志愿服务。志愿者因故不能按照约定提供志愿服务的，应当及时告知志愿服务组织或者志愿服务对象。
					</view>
					<view class="">
						第二十三条　国家鼓励和支持国家机关、企业事业单位、人民团体、社会组织等成立志愿服务队伍开展专业志愿服务活动，鼓励和支持具备专业知识、技能的志愿者提供专业志愿服务。
					</view>
					<view class="">
						国家鼓励和支持公共服务机构招募志愿者提供志愿服务。
					</view>
					<view class="">
						第二十四条　发生重大自然灾害、事故灾难和公共卫生事件等突发事件，需要迅速开展救助的，有关人民政府应当建立协调机制，提供需求信息，引导志愿服务组织和志愿者及时有序开展志愿服务活动。
					</view>
					<view class="">
						志愿服务组织、志愿者开展应对突发事件的志愿服务活动，应当接受有关人民政府设立的应急指挥机构的统一指挥、协调。
					</view>
					<view class="">
						第二十五条　任何组织和个人不得强行指派志愿者、志愿服务组织提供服务，不得以志愿服务名义进行营利性活动。
					</view>
					<view class="">
						第二十六条　任何组织和个人发现志愿服务组织有违法行为，可以向民政部门、其他有关部门或者志愿服务行业组织投诉、举报。民政部门、其他有关部门或者志愿服务行业组织接到投诉、举报，应当及时调查处理;对无权处理的，应当告知投诉人、举报人向有权处理的部门或者行业组织投诉、举报。
					</view>
					<view class="tit">
						第四章　促进措施
					</view>
					<view class="">
						第二十七条　县级以上人民政府应当根据经济社会发展情况，制定促进志愿服务事业发展的政策和措施。
					</view>
					<view class="">
						县级以上人民政府及其有关部门应当在各自职责范围内，为志愿服务提供指导和帮助。
					</view>
					<view class="">
						第二十八条　国家鼓励企业事业单位、基层群众性自治组织和其他组织为开展志愿服务提供场所和其他便利条件。
					</view>
					<view class="">
						第二十九条　学校、家庭和社会应当培养青少年的志愿服务意识和能力。
					</view>
					<view class="">
						高等学校、中等职业学校可以将学生参与志愿服务活动纳入实践学分管理。
					</view>
					<view class="">
						第三十条　各级人民政府及其有关部门可以依法通过购买服务等方式，支持志愿服务运营管理，并依照国家有关规定向社会公开购买服务的项目目录、服务标准、资金预算等相关情况。
					</view>
					<view class="">
						第三十一条　自然人、法人和其他组织捐赠财产用于志愿服务的，依法享受税收优惠。
					</view>
					<view class="">
						第三十二条　对在志愿服务事业发展中做出突出贡献的志愿者、志愿服务组织，由县级以上人民政府或者有关部门按照法律、法规和国家有关规定予以表彰、奖励。
					</view>
					<view class="">
						国家鼓励企业和其他组织在同等条件下优先招用有良好志愿服务记录的志愿者。公务员考录、事业单位招聘可以将志愿服务情况纳入考察内容。
					</view>
					<view class="">
						第三十三条　县级以上地方人民政府可以根据实际情况采取措施，鼓励公共服务机构等对有良好志愿服务记录的志愿者给予优待。
					</view>
					<view class="">
						第三十四条　县级以上人民政府应当建立健全志愿服务统计和发布制度。
					</view>
					<view class="">
						第三十五条　广播、电视、报刊、网络等媒体应当积极开展志愿服务宣传活动，传播志愿服务文化，弘扬志愿服务精神。
					</view>
					<view class="tit">
						第五章　法律责任
					</view>
					<view class="">
						第三十六条　志愿服务组织泄露志愿者有关信息、侵害志愿服务对象个人隐私的，由民政部门予以警告，责令限期改正;逾期不改正的，责令限期停止活动并进行整改;情节严重的，吊销登记证书并予以公告。
					</view>
					<view class="">
						第三十七条　志愿服务组织、志愿者向志愿服务对象收取或者变相收取报酬的，由民政部门予以警告，责令退还收取的报酬;情节严重的，对有关组织或者个人并处所收取报酬一倍以上五倍以下的罚款。
					</view>
					<view class="">
						第三十八条　志愿服务组织不依法记录志愿服务信息或者出具志愿服务记录证明的，由民政部门予以警告，责令限期改正;逾期不改正的，责令限期停止活动，并可以向社会和有关单位通报。
					</view>
					<view class="">
						第三十九条　对以志愿服务名义进行营利性活动的组织和个人，由民政、工商等部门依法查处。
					</view>
					<view class="">
						第四十条　县级以上人民政府民政部门和其他有关部门及其工作人员有下列情形之一的，由上级机关或者监察机关责令改正;依法应当给予处分的，由任免机关或者监察机关对直接负责的主管人员和其他直接责任人员给予处分：
					</view>
					<view class="">
						(一)强行指派志愿者、志愿服务组织提供服务;
					</view>
					<view class="">
						(二)未依法履行监督管理职责;
					</view>
					<view class="">
						(三)其他滥用职权、玩忽职守、徇私舞弊的行为。
					</view>
					<view class="tit">
						第六章　附　　则
					</view>
					<view class="">
						　第四十一条　基层群众性自治组织、公益活动举办单位和公共服务机构开展公益活动，需要志愿者提供志愿服务的，可以与志愿服务组织合作，由志愿服务组织招募志愿者，也可以自行招募志愿者。自行招募志愿者提供志愿服务的，参照本条例关于志愿服务组织开展志愿服务活动的规定执行。
					</view>
					<view class="">
						第四十二条　志愿服务组织以外的其他组织可以开展力所能及的志愿服务活动。
					</view>
					<view class="">
						城乡社区、单位内部经基层群众性自治组织或者本单位同意成立的团体，可以在本社区、本单位内部开展志愿服务活动。
					</view>
					<view class="">
						第四十三条　境外志愿服务组织和志愿者在境内开展志愿服务，应当遵守本条例和中华人民共和国有关法律、行政法规以及国家有关规定。
					</view>
					<view class="">
						　组织境内志愿者到境外开展志愿服务，在境内的有关事宜，适用本条例和中华人民共和国有关法律、行政法规以及国家有关规定;在境外开展志愿服务，应当遵守所在国家或者地区的法律。
					</view>
					<view class="">
						第四十四条　本条例自2017年12月1日起施行。
					</view>
				</scroll-view>
				<view class="ts-btn" @click="agreen()"
					:style="{'background': isbtm?'#FF4C4C':'#eee','color':isbtm?'#fff':'#999'}">
					我已阅读并同意
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="tcqr" type="center">
			<view class="tc-wrap">
				<image src="../../static/img/zyztc.png" mode="widthFix" class="tc-img"></image>
				<view class="qr-wrap">
					<image src="../../static/img/cnzyewm.png" mode=""></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		add_volunteers
	} from '@/api/index.js';
	import {
		upload
	} from '@/api/ask.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				height: '',
				isRead: false, //是否同意
				isbtm: false, //是否滑动到底部
				otherjob: '',
				otherspe: '',
				loding: false, //是否提交中
				array: ['男', '女'],
				chooseEdu: ['小学以下', '小学', '初中', '高中/中专', '大专/高职', '本科', '研究生', '硕士', '博士', '博士后'],
				chooseVol: ['有', '无'],
				is_experience: [{
						id: '1',
						name: '有'
					},
					{
						id: '2',
						name: '无'
					}
				],
				// is_experience: '',
				chooseExp: ['是', '否'],
				start_hour: '选择开始时间', //开始时间
				end_hour: '选择结束时间', //
				quantum: '',
				//日期
				items: [{
						value: '2',
						name: '星期一'
					},
					{
						value: '3',
						name: '星期二'
					},
					{
						value: '4',
						name: '星期三'
					},
					{
						value: '5',
						name: '星期四'
					},
					{
						value: '6',
						name: '星期五'
					},
					{
						value: '7',
						name: '星期六'
					},
					{
						value: '1',
						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: '0',
						name: '无'
					}
				],
				index: 0,
				// mz: '',
				email: '',
				cardimg: '', //证件照
				// card: '',
				// checklist: [],
				name: '',
				sex: '请选择你的性别',
				birth: '请选择你的生日',
				fillingDate: '',
				phone: '',
				address: '',
				work: '',
				specialty: '',
				education: '请选择教育程度',
				educationid: '',
				checked1: '',
				checked: '',
				expertiseText: '', //专长其他
				Getchecked: false //个人声明
			};
		},
		onShow() {
			if (this.hasLogin) {
				// this.loadBaseData();
				// this.$refs.tishi.open()
			} else {
				saveUrl();
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
			}
		},
		onReady() {
			if (this.hasLogin) {
				this.$refs.tishi.open()
			} else {
				// this.$refs.tishi.open()
			}
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.tcc').boundingClientRect();
					query.exec(function(res) {
						obj.height = resu.windowHeight - res[0].top + 'px';
					});
				},
				fail: res => {}
			});
			
		},
		computed: {
			...mapState('user', ['userInfo', 'baseURL', 'hasLogin']),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// 同意提示
			agreen() {
				if (this.isbtm) {
					this.isRead = true
					this.$refs.tishi.close()
				}
			},
			async join() {
				let obj = this;
				if (obj.name == '') {
					obj.$api.msg('请输入您的姓名');
					return;
				}
				if (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;
				}
				add_volunteers({
						name: obj.name, //姓名
						phone: obj.phone, //手机号
						sex: obj.sex, //性别
						birth: obj.birth, //生日
						image: obj.cardimg, //照片
						email: obj.email, //邮件
						address: obj.address, //地址
						work: obj.work, //工作单位
						specialty: obj.specialty, //职业/职务/专业
						education: obj.educationid, //教育程度
						is_vol: obj.checked, //是否受过志愿者服务
						is_experience: obj.checked1 == 1 ? 0 : 1, //有无工作经验
						start_hour: obj.start_hour,
						end_hour: obj.end_hour,
						work_week: obj.dates, //星期几
						taste: obj.taste, //有兴趣参与的工作
						taste_title: obj.worksText, //工作其他
						speciali: obj.speciali, //专长
						speciali_title: obj.expertiseText, //其他专长
					})
					.then(e => {
						obj.loding = false;
						// obj.sex = '请选择你的性别';
						// obj.education = '请选择教育程度';
						// obj.birth = '请选择你的生日';
						this.$refs.tcqr.open()
						// uni.navigateTo({
						// 	url: '../joinSuc/joinNow'
						// });
					})
					.catch(function(e) {
						console.log('出错了');
						console.log(e);
						obj.loding = false;
					});
			},
			imgsub() {
				console.log('imgsub');
				upload({
					filename: ''
				}).then(data => {
					console.log(data, '2222')
					this.cardimg = data[0].fullurl;
				});
			},
			// 选择性别
			bindPickerSex: function(e) {
				this.sex = e.target.value
				this.index = e.target.value + 1;
			},
			// 选择教育程度
			bindPickerEdu: function(e) {
				this.education = this.chooseEdu[e.target.value];
				this.educationid = e.target.value;
				console.log(this.educationid)
			},
			// 选择日期
			bindDateChange: function(e) {
				this.birth = e.target.value;
			},
			// 选择开始时间
			startTimeChange: function(e) {
				console.log(e, '开始时间')
				this.start_hour = e.target.value;
			},
			// 选择结束时间
			endTimeChange: function(e) {
				this.end_hour = 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;
			}
			position: absolute;
			bottom: 0pt;
		}

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

	.ts-wrap {
		width: 673rpx;
		height: 1134rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: relative;

		.ts-tit {
			height: 103rpx;
			padding-top: 40rpx;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			color: #000000;
			width: 588rpx;
			margin: auto;
			border-bottom: 1px solid #a1a1a1;
		}

		.ts-content {
			height: 882rpx;
			margin: 30rpx 0;
			text-align: justify;
			font-size: 28rpx;
			font-weight: 500;
			color: #666666;

			.xq {
				width: 600rpx;
				margin: auto;
				text-indent:2em;
			}
			view {
				width: 600rpx;
				margin: auto;
				text-indent:2em;
			}
			.tit {
				font-weight: bold;
				text-align: center;
				text-indent:0em;
				// color: ;
			}
		}

		.ts-btn {
			width: 673rpx;
			line-height: 90rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			background: #FF4C4C;
			border-radius: 0px 0px 20rpx 20rpx;
			position: absolute;
			bottom: 0;
		}
	}
	.tcc {
		position: relative;
		background-color: #f8f8f8;
	}
	.tc-wrap {
		width: 500rpx;
		position: relative;
		.tc-img {
			width: 500rpx;
		}
		.qr-wrap {
			width: 254rpx;
			height: 254rpx;
			padding: 2rpx;
			position: absolute;
			top: 152rpx;
			// left: 132rpx;
			left: 0;
			right: 0;
			margin: auto;
			background: #fff;
			border: 1rpx solid #000;
			border-radius: 10rpx;
			image {
				width: 254rpx;
				height: 254rpx;
			}
		}
	}
</style>