<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" 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" class="box-right"> <text>{{ sex }}</text> </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" class="box-right"> <view>{{ birth }}</view> </picker> </view> <view class="box-1"> <view class="box-left"> 联系电话<text class="imp">*</text>: </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="" 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" 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="" class="list-input" v-model="address" /> </view> <view class="box-1"> <view class="box-left"> 邮编(选填): </view> <input type="text" value="" class="list-input" v-model="zip" /> </view> <view class="box-1"> <view class="box-left"> 工作单位(选填): </view> <input type="text" value="" class="list-input" v-model="work" /> </view> <view class="box-1"> <view class="box-left"> 职业/职务/专业(选填): </view> <input type="text" value="" class="list-input" v-model="specialty" /> </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"> 是否受过志愿服务<text class="imp">*</text>: </view> <picker @change="bindPickerExp" :value="index" :range="chooseExp" class="box-right"> <text>{{ is_experience }}</text> </picker> </view> <view class="box-1"> <view class="box-left"> 有无服务经验<text class="imp">*</text>: </view> <picker @change="bindPickerVol" :value="index" :range="chooseVol" class="box-right"> <text>{{ is_vol }}</text> </picker> </view> <view class="check-box"> <view class="chooseTim"> 可提供服务时间 </view> <view class="info"> ( 请在适合的□内打√,可多选) </view> <view class="box-cent"> <view class="cent-left"> <view class="left-top">时间</view> <view class="left-txt">早上</view> <view class="left-txt">下午</view> <view class="left-txt">晚上</view> </view> <checkbox-group @change="timeOnChange" class="cent-right"> <view class="cent-item" v-for="item1 in timeList" :key="item1.id"> <view class="right-top"> {{ item1.num }} </view> <view class="right-check"> <checkbox :value="item1.list.morning" color="#C90F1B" style="transform:scale(0.7)" /> </view> <view class="right-check"> <checkbox :value="item1.list.after" color="#C90F1B" style="transform:scale(0.7)" /> </view> <view class="right-check"> <checkbox :value="item1.list.night" color="#C90F1B" style="transform:scale(0.7)" /> </view> </view> </checkbox-group> </view> </view> <view class="check-box"> <view class="chooseTim"> 有兴趣参与的工作 </view> <view class="info"> ( 请在适合的□内打√,可多选) </view> <view class="choose-job"> <checkbox-group class="goods_check" @change='checkjob'> <label v-for="(item, index) in jobList" :key="index"> <checkbox :value="item.class_name" style="transform:scale(0.7)" color="#C90F1B"/> {{item.class_name}} </label> </checkbox-group> <view class="other" v-if="otherjob == '其他(请注明)'"> <input type="text" value="" /> </view> </view> </view> <view class="check-box"> <view class="chooseTim"> 专长 </view> <view class="info"> ( 请在适合的□内打√,可多选) </view> <view class="choose-job"> <checkbox-group class="goods_check" @change='checkspeciality'> <label v-for="(item, index) in specialityList" :key="index"> <checkbox :value="item.class_name" color="#C90F1B" style="transform:scale(0.7)" /> {{item.class_name}} </label> </checkbox-group> <view class="other" v-if="otherspe == '其他(请注明)'"> <input type="text" value="" /> </view> </view> </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 class="box-1"> <view class="box-left"> 申请日期: </view> <picker mode="date" :value="fillingDate" fields="day" :start="startDate" :end="endDate" @change="fillingDateChange" class="box-right"> <view>{{ fillingDate }}</view> </picker> </view> </view> <view class="statement"> <view class="title"> 个人申明 </view> <view class="main"> 本人同意将个人资料送交红十字志愿者工作委员会,申请注册登记,成为光荣的红十字志愿工作者,并乐于接受志愿工作安排,提供服务。 </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_vol: '', is_experience: '', chooseExp: ['是', '否'], items: [{ value: '我自愿捐献全部遗体(含器官组织)' }, { value: '或只捐献眼角膜' }], timeList: [{ id: 0, num: "周一", list: { morning: '周一上午', after: '周一下午', night: '周一晚上' } }, { id: 1, num: "周二", list: { morning: '周二上午', after: '周二下午', night: '周二晚上' } }, { id: 2, num: "周三", list: { morning: '周三上午', after: '周三下午', night: '周三晚上' } }, { id: 3, num: "周四", list: { morning: '周四上午', after: '周四下午', night: '周四晚上' } }, { id: 4, num: "周五", list: { morning: '周五上午', after: '周五下午', night: '周五晚上' } }, { id: 5, num: "周六", list: { morning: '周六上午', after: '周六下午', night: '周六晚上' } }, { id: 6, num: "周日", list: { morning: '周日上午', after: '周日下午', night: '周日晚上' } }, ], jobList: [ { id: 0, class_name: "赈灾工作" }, { id: 1, class_name: "救护培训" }, { id: 2, class_name: "活动策划" }, { id: 3, class_name: "护送服务" }, { id: 4, class_name: "医疗护理服务" }, { id: 5, class_name: "探访服务" }, { id: 6, class_name: "外语翻译" }, { id: 7, class_name: "调查服务" }, { id: 8, class_name: "宣传推广" }, { id: 9, class_name: "文书档案工作" }, { id: 10, class_name: "其他(请注明)" }, ], specialityList: [ { id: 0, class_name: "医疗护理" }, { id: 1, class_name: "紧急救护" }, { id: 2, class_name: "家电维修" }, { id: 3, class_name: "影音制作" }, { id: 4, class_name: "文艺演出" }, { id: 5, class_name: "理发" }, { id: 6, class_name: "摄影摄像"}, { id: 7, class_name: "电脑中文打字" }, { id: 8, class_name: "汽车驾驶" }, { id: 9, class_name: "外语翻译" }, { id: 10, class_name: "法律咨询" }, { id: 11, class_name: "文案策划"}, { id: 12, class_name: "其他(请注明)" }, ], current: "", index: 0, mz: '', cardimg: '', //证件照 card: '', checklist: [], name: '', sex: '', birth: '', fillingDate: '', phone: '', address: '', work: '', specialty: '', education: '', } }, 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.$api.msg('请输入您的性别'); return; } // if (obj.birth == '') { // obj.$api.msg('请填写您的生日'); // return; // } const reg = /^(\+?0?86-?)?1[\d]\d{9}$/; 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.work == '') { obj.$api.msg('请填写您的工作单位'); return; } if (obj.cardimg == '') { 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.mz == '') { obj.$api.msg('请填写您所属的名族'); return; } if (obj.specialty == '') { obj.$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; joinSec({ 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, }).then(e => { obj.name = ''; obj.sex = ''; obj.education = ''; obj.birth = ''; obj.mz = '', obj.phone = ''; obj.address = ''; obj.work = ''; obj.specialty = ''; obj.cardimg = '', obj.card = '' 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; }, // 有无服务经验 bindPickerExp: function(e) { this.is_experience = this.chooseExp[e.target.value]; this.index = e.target.value + 1; }, // 选择捐献 radioChange: function(evt) { for (let i = 0; i < this.items.length; i++) { if (this.items[i].value === evt.target.value) { this.current = i; break; } } }, 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); }, // 选择可提供时间 timeOnChange: function(item1) { this.quantum = item1.detail.value.join(','); console.log('可选择时间',this.quantum) }, //选择有兴趣参与的工作 checkjob(item) { this.taste = item.detail.value.join(','); console.log('选择工作:',this.taste) this.otherjob = item.detail.value }, // 选择专长checkspeciality checkspeciality(item) { this.speciali = item.detail.value.join(','); console.log('选择专长',this.speciali) this.otherspe = item.detail.value }, } } </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: 660rpx; height: 100rpx; background: linear-gradient(0deg, #C90F1B, #F14D33); border-radius: 50rpx; margin: 50rpx auto; 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; flex-direction: column; align-items: center; width: 100%; margin-top: 32rpx; // height: 133rpx; .box-left { padding-left: 2rpx; width: 100%; text-align: left; color: #E63931; } input { height: 66rpx; line-height: 66rpx; margin-top: 32rpx; // height: 88rpx; } .list-input { 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; } } .box-right { display: flex; align-items: center; padding-left: 24rpx; height: 66rpx; line-height: 66rpx; border: 1rpx solid #f3afad; border-radius: 22rpx; margin: 32rpx 36rpx 0 36rpx; width: 96%; font-size: 36rpx; color: #FF9797; text-align: left; // 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: 0 auto 30rpx; .upload-left { font-weight: 400; color: #E63931; } .upload-right { flex: 1; display: flex; align-items: center; justify-content: center; .upload-img { width: 103rpx; height: 103rpx; margin-top: 24rpx; } } } } } </style>