<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>