cnq/pages/form/applicationForm.vue

<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>
		<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="xq">
						遗体（角膜）捐献是造福人类的善举，是“人道、博爱、奉献”精神的崇高体现。我自愿身后无偿捐献自己的遗体（角膜），为祖国医学教育、医学科研和医学临床事业做出自己最后的贡献。
						</view>
						<view class="xq">本人已经与执行人（父母、配偶、成年子女或其它监护人）充分沟通，他们全部同意尊重我的意愿，并支持我办理捐献手续。</view>
						<view class="xq">本人填报的信息和承诺，都是我认真思考后本人意志的完整表达，所以信息真实。</view>
				</scroll-view>
				<view class="" style="height: 30rpx;">
					
				</view>
				<view class="ts-btn" @click="agreen()" :style="{'background': isbtm?'#FF4C4C':'#eee','color':isbtm?'#fff':'#999'}">
					我已阅读并同意
				</view>
			</view>
		</uni-popup>
	</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 {
				isRead: false,//是否同意
				isbtm: true,//是否滑动到底部
				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: {
			// 同意提示
			agreen() {
				if(this.isbtm) {
					this.isRead = true
					this.$refs.tishi.close()
				}
			},
			// 获取捐赠对照列表
			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, '获取捐赠对照列表')
					this.$refs.tishi.open()

				});
			},
			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: 2em;
				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;
	}

	.ts-wrap {
		width: 673rpx;
		// height: 800rpx;
		
		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: 400rpx;
			margin: 30rpx 0;
			text-align: justify;
			font-size: 28rpx;
			font-weight: 500;
			color: #666666;
			.xq {
				width: 600rpx;
				margin: auto;
				text-indent:2em;
			}
		}
		.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;
		}
	}
</style>