<template> <view class="content"> <view class="top"> <view class="title">登记选择</view> <view class="info-box">我自愿登记成为遗体器官捐献志愿者,自愿无偿捐献:</view> <view class="uni-list"> <radio-group class="radio-box" @change="radioChange"> <label v-for="(item, index) in items" :key="item.name"> <label class="radio"> {{ item.name }} <radio :checked="index === current" color="#E62129" style="transform:scale(0.5)" :value="item.name" /> <text></text> </label> </label> </radio-group> </view> </view> <view class="box"> <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="birthday" :start="startDate" :end="endDate" @change="bindDateChange" class="box-right"> <view>{{ birthday }}</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="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" value="" placeholder="请填写你的职业/职务" placeholder-class="placeholder" class="list-input" v-model="occupation" /> </view> </view> <view class="top"> <view class="title">个人声明</view> <view class="info-box"> 遗体器官捐献是服务医疗事业,造福人类的高尚行为,是“人道、博爱、奉献”精神的崇高体现,我已了解遗体器官捐献的基本常识和有关政策法规。<text style="font-size: 24rpx;font-family: PingFang SC;font-weight: 500;color: #666666;" v-if="type != '人体器官'">我自愿登记成为遗体器官捐献志愿者,自愿无偿捐献,请执行人和所有亲属尊重我的决定。</text></view> <view class="info-box" style="padding-top: 0;" v-if="type == '人体器官' && ready">我自愿登记成为遗体器官捐献志愿者,自愿无偿捐献:</view> <view class="uni-list" style="display: block;"> <checkbox-group v-if="type == '人体器官' && ready" @change="checkAllClick" style="padding-left: 50rpx;"> <label class="checkbox"> <checkbox :checked="checkAll.type" color="#E62129" style="transform:scale(0.6);margin: 0;padding: 0;" :value="checkAll.name" /> {{checkAll.name}} </label> </checkbox-group> <view style="display: flex;"> <view class="" v-if="type == '人体器官'" style="width: 50rpx;"> 或: </view> <checkbox-group v-if="type == '人体器官'" style="display: inline-block;width: 600rpx;" @change="checkboxChange"> <label class="checkbox" v-for="item in apparatus" :key="item.name"> <checkbox :checked="item.type" color="#E62129" style="transform:scale(0.6);margin: 0;padding: 0;" :value="item.name" />{{ item.name }} </label> </checkbox-group> </view> <view class="font" v-if="type == '人体器官'">请执行人和所有亲属尊重我的决定。</view> </view> </view> <view class="top"> <view class="title">人体器官捐献执行人信息</view> <view class="info-box">我指定该亲属为我的器官捐献执行人,全权负责本人的器官捐献事宜,我保证填写的内容信息真实,如发生变更及时告知登记机构。</view> <view class="uni-list" style="display: block;"> <view class="box-1" style="margin-top: 0rpx;"> <view class="box-left">捐献执行人</view> <input type="text" value="" placeholder-class="placeholder" placeholder="请填写执行人姓名" class="list-input" v-model="executor" /> </view> <view class="box-1" style="margin-top: 20rpx;"> <view class="box-left">亲属关系</view> <input type="text" value="" placeholder-class="placeholder" placeholder="请填写与本人的关系" class="list-input" v-model="relation" /> </view> <view class="box-1" style="margin-top: 20rpx;"> <view class="box-left">身份证号</view> <input type="text" value="" placeholder-class="placeholder" placeholder="请填写亲属身份证号" class="list-input" v-model="sfz" /> </view> <view class="box-1" style="margin-top: 20rpx;"> <view class="box-left">联系电话</view> <input type="text" value="" placeholder-class="placeholder" placeholder="请填写亲属联系电话" class="list-input" v-model="n_phone" /> </view> </view> </view> <view class="buttomBox"> <view class="buttom" :class="{ action: loding }" @click="!loding ? join() : ''">提交申请</view> </view> </view> </template> <script> import { joinSecc, getList, donate_ify } from '@/api/index.js'; // import { // getList // } from '@/api/index.js'; import { upload } from '@/api/ask.js'; export default { data() { const currentDate = this.getDate({ format: true }); return { ready: true, all: false, isall: false, type: '', loding: false, //是否提交中 array: ['男', '女'], chooseEdu: ['小学以下', '小学', '初中', '高中/中专', '大专/高职','本科','研究生', '硕士', '博士', '博士后'], chooseVol: ['是', '否'], chooseExp: ['是', '否'], realyItems: [], //捐赠对照表 items: [{ name: '人体器官' }, { name: '眼角膜' }, { name: '遗体捐献' } ], checkAll: { name: '全部器官', type: false }, apparatus: [{ name: '肾脏', type: false }, { name: '肝脏', type: false }, { name: '心脏', type: false }, { name: '肺脏', type: false }, { name: '胰腺', type: false }, { name: '小肠', type: false }, { name: '其他', type: false } ], remark: '', current: '', index: 0, mz: '', cardimg: '', //证件照 checklist: [], name: '', sex: '请选择你的性别', birthday: '请选择你的出生年月', card: '', occupation: '', education: '请选择你的文化程度', phone: '', executor: '', //执行人名字 relation: '', //执行人关系 n_phone: '', //执行人电话 sfz: '', //执行人身份证号 Getchecked: false, Getcheckeds: false, address: '', mail: '', weixin: '', major: '', work: '', other: '', friendOnename: '', friendOnerelation: '', friendOnephone: '', friendOneaddress: '', friendOneweixin: '', friendTwoname: '', friendTworelation: '', friendTwophone: '', friendTwoaddress: '', friendTwoweixin: '', educationid: '', //学历id }; }, computed: { startDate() { return this.getDate('start'); }, endDate() { return this.getDate('end'); } }, onLoad() { this.getDonateList() }, methods: { // 获取捐赠对照列表 getDonateList() { donate_ify().then(e => { this.realyItems = e.data; let arr = e.data.filter(item => { item.type = false return (item.name != '人体器官') && (item.name != '眼角膜') && (item.name != '遗体') && ( item.name != '全部器官') }) this.apparatus = arr.reverse(); console.log(this.realyItems, '获取捐赠对照列表') }); }, async join() { let obj = this; let arr = [] console.log(obj.remark) if (obj.type == '') { obj.$api.msg('请选择你要捐献的器官'); return; } 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.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; } if (obj.specialty == '') { obj.$api.msg('请填写您的职业/职务'); return; } console.log(obj.remark, '1111'); if (obj.type == '眼角膜') { obj.remark = '眼角膜' } if (obj.remark == '') { obj.$api.msg('请选择要捐献的器官'); return; } if (obj.executor == '') { obj.$api.msg('请填写执行人姓名'); return; } if (obj.relation == '') { obj.$api.msg('请填写亲属身份'); return; } if (obj.sfz == '') { obj.$api.msg('请填写亲属身份证号'); return; } if (obj.n_phone == '') { obj.$api.msg('请填写亲属联系电话'); return; } obj.loding = true; obj.realyItems.forEach(item => { console.log(item.name,obj.remark) if(obj.remark.indexOf(item.name) != -1) { arr.push(item.id + '') } }) console.log(arr.join(','),'ddddddddddd') joinSecc({ full_name: obj.name, //姓名 sex: obj.sex == '男'? 0: 1, //性别0男1女 birthday: obj.birthday, //生日 id_card: obj.card, //身份证号 vocation: obj.occupation, //职业 education: obj.educationid, //学历 category_ids: arr.join(','), //捐献类型 mobile: obj.phone, //移动电话 executor: obj.executor, //捐献执行人 executor_id_card: obj.sfz, //执行人身份证号 executor_mobile: obj.n_phone, //执行人移动电话 executor_relation: obj.relation //执行人关系 }) .then(e => { console.log(e, '2322222222222222222222222222222222222222'); obj.name = ''; obj.sex = '请选择你的性别'; obj.education = '请选择你的文化程度'; obj.birth = '请选择你的出生年月'; obj.executor = ''; obj.sfz = ''; obj.n_phone = ''; obj.relation = ''; uni.navigateTo({ url: '../joinSuc/joinNow' }); }) .catch(function(e) { console.log('出错了'); console.log(e); obj.loding = false; }); // obj.body(1) }, //器官捐献 body(item) { const obj = this; joinSecc({ name: obj.name, sex: obj.sex, education: obj.education, birthday: obj.birthday, card: obj.card, occupation: obj.occupation, remark: obj.remark, phone: obj.phone, executor: obj.executor, relation: obj.relation, sfz: obj.sfz, n_phone: obj.n_phone, // other: obj.other //其他器官 }) .then(e => { console.log(e, "2322222222222222222222222222222222222222") if (e.status == 400) { console.log(e.msg); this.$api.msg("你已报名成功,不可重复报名") } else { // 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 = ''); let date = new Date() let year = date.getFullYear() let month = date.getMonth() >= 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1) let day = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate() if (item == 1) { uni.navigateTo({ url: '../joinSuc/certificate?name' + obj.name + '&time=' + year + '年' + month + '月' + day + '日' }); } } }) .catch(function(e) { console.log('出错了'); console.log(e); }); }, //造血干细胞捐献 bloud() { const obj = this; getList({ name: obj.name, sex: obj.sex, education: obj.education, //文化程度 birthday: obj.birthday, card: obj.card, //身份证号 cardimg: obj.cardimg, //照片 occupation: obj.occupation, //职业或职务 phone: obj.phone, address: obj.address, //地址 mail: obj.mail, // 邮箱 weixin: obj.weixin, //微信 major: obj.major, //专业或专长 work: obj.work, // 工作单位 friendOnename: obj.friendOnename, //亲友一的姓名 friendOnerelation: obj.friendOnerelation, //亲友一与全赠者的关系 friendOnephone: obj.friendOnephone, //亲友一的手机号 friendOneweixin: obj.friendOneweixin, //亲友一的微信号 friendOneaddress: obj.friendOneaddress, //亲友一的地址 friendTwoname: obj.friendTwoname, //亲友二的姓名 friendTworelation: obj.friendTworelation, //亲友二与全赠者的关系 friendTwophone: obj.friendTwophone, //亲友二的手机号 friendTwoweixin: obj.friendTwoweixin, //亲友二的微信号 friendTwoaddress: obj.friendTwoaddress //亲友二的地址 }) .then(e => { console.log(e, "22222222222222222222222") if (e.status == 400) { console.log(e.msg); this.$api.msg("你已报名成功,不可重复报名") } else { // 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 = ''); let date = new Date() let year = date.getFullYear() let month = date.getMonth() >= 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1) let day = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate() uni.navigateTo({ url: '../joinSuc/certificate?name' + obj.name + '&time=' + year + '年' + month + '月' + day + '日' }); } }) .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.educationid = e.target.value; console.log(this.educationid); }, // 选择日期 bindDateChange: function(e) { console.log(e); this.birthday = e.target.value; console.log(this.birthday); }, //选择填写日期 fillingDateChange: function(e) { this.add_time = e.target.value; }, // 是否参加志愿活动 bindPickerVol: function(e) { this.is_vol = this.chooseVol[e.target.value]; this.index = e.target.value + 1; }, // 有无服务经验 bindPickerExp: function(e) { console.log('有无服务经验', e.target.value); this.is_experience = this.chooseExp[e.target.value]; this.index = e.target.value + 1; }, // 选择捐献 radioChange: function(evt) { console.log('选择捐献', evt); for (let i = 0; i < this.items.length; i++) { if (this.items[i].name === evt.detail.value) { this.type = evt.detail.value; console.log('this.type', this.type); this.current = i; console.log('this.current', this.current); break; } } if (this.type == '遗体捐献') { this.remark = '遗体捐献'; this.all = true; } }, checkboxChangeAll(e) { const obj = this; for (let i = 0; i < obj.apparatus.length; i++) { obj.apparatus[i].type = false; } if (obj.remark != ' ') { obj.remark = ''; } console.log(e, "`11111") obj.remark = e.detail.value.join(','); console.log(obj.remark); obj.all = true; }, //器官捐献时选择要捐献的器官 checkboxChange(e) { const obj = this; obj.all = false; this.checkAll.type = false this.reload() if (obj.remark != '') { if (obj.remark.indexOf('all') != -1) { obj.remark = ''; } } obj.remark = e.detail.value.join(','); for (let i = 0; i < obj.apparatus.length; i++) { if (obj.remark.indexOf(obj.apparatus[i].name) != -1) { obj.apparatus[i].type = true; } } console.log(obj.remark); }, Getcheckbox() { let obj = this; obj.Getchecked = !obj.Getchecked; }, Getcheckboxs() { let obj = this; obj.Getcheckeds = !obj.Getcheckeds; }, 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(','); }, reload() { this.ready = false this.$nextTick(function() { this.ready = true }) }, checkAllClick(e) { let obj = this console.log(e.detail.value[0]) if (e.detail.value[0]) { this.remark = e.detail.value[0] for (let i = 0; i < obj.apparatus.length; i++) { obj.apparatus[i].type = false; } } else { this.remark = '' } console.log(this.remark) } } }; </script> <style lang="scss"> page { background: #f2f2f2; } .content { background: #f2f2f2; .top { margin-top: 16rpx; background: #ffffff; position: relative; .title { height: 106rpx; text-align: center; line-height: 106rpx; border-bottom: 2rpx #acacac dashed; font-size: 34rpx; font-family: PingFang SC; font-weight: 500; color: #101010; } .info-box { font-size: 24rpx; font-family: PingFang SC; font-weight: 500; color: #666666; text-indent: 1em; padding: 37rpx 60rpx 0rpx 36rpx; text { color: #101010; font-family: PingFang-SC-Medium; font-weight: bold; } // border: 3rpx solid #009100; } .uni-list { padding: 26rpx 34rpx 20rpx 35rpx; // .radio:first-child { // margin: -6rpx; // } .radio { margin-left: 50rpx; flex: 1; align-items: center; font-size: 24rpx; font-family: PingFang SC; font-weight: 500; color: #191919; } .checkbox { display: inline-block; font-size: 24rpx; font-family: PingFang SC; font-weight: 500; color: #191919; } .box-2 { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 8rpx; // height: 133rpx; .box-left { padding-left: 2rpx; text-align: left; width: 62rpx; font-size: 24rpx; 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; 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; } } .font { margin-top: 22rpx; font-size: 24rpx; font-family: PingFang SC; font-weight: 500; color: #666666; } } .agree { display: flex; align-items: center; padding: 37rpx 60rpx 40rpx 36rpx; font-size: 24rpx; font-family: PingFang SC; font-weight: 500; color: #191919; } } .buttomBox { height: 100rpx; // padding-bottom: 40rpx; } .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: 16rpx; 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; } .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; } } } } .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; // 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; } } } .placeholder { line-height: 66rpx; } </style>