wlpx/pages/index/index.vue

<template>
	<view class="content">
		<image src="../../static/img/bz-bg.png" mode="widthFix" class="bz-bg"></image>
		<view class="bz-tit flex">
			<view class="hx"></view>
			<view class="">
				报名申请
			</view>
			<view class="hx"></view>
		</view>
		<view class="tab ">
			<view class="bd-wrap flex">
				<view class="bg-name">
					孕妇姓名：
				</view>
				<view class="bg-val">
					<input type="text" value="" placeholder="请输入您的姓名" class="val-ipt" v-model="name"/>
				</view>
			</view>
			<view class="bd-wrap flex">
				<view class="bg-name">
					身份证号：
				</view>
				<view class="bg-val">
					<input type="idcard" value="" placeholder="请输入您的身份证号" class="val-ipt" v-model="cid"/>
				</view>
			</view>
			<view class="bd-wrap flex">
				<view class="bg-name">
					户籍地址：
				</view>
				<view class="bg-val">
					<input type="text" value="" placeholder="请输入户籍地址" class="val-ipt" v-model="reg"/>
				</view>
			</view>
			<view class="bd-wrap flex">
				<view class="bg-name">
					现居住地址：
				</view>
				<view class="bg-val">
					<input type="text" value="" placeholder="请输入现居住地址" class="val-ipt" v-model="address"/>
				</view>
			</view>
			<view class="bd-wrap flex">
				<view class="bg-name">
					联系电话：
				</view>
				<view class="bg-val">
					<input type="text" value="" placeholder="请输入联系电话" class="val-ipt" v-model="phone"/>
				</view>
			</view>
			<view class="bd-wrap flex">
				<view class="bg-name">
					孕妇银行卡号：
				</view>
				<view class="bg-val">
					<input type="text" value="" placeholder="请输入银行卡号" class="val-ipt" v-model="bcd"/>
				</view>
			</view>
			<view class="bd-wrap flex">
				<view class="bg-name">
					配偶姓名：
				</view>
				<view class="bg-val">
					<input type="text" value="" placeholder="请输入您的配偶姓名" class="val-ipt" v-model="sname"/>
				</view>
			</view>
			<view class="bd-wrap flex">
				<view class="bg-name">
					配偶身份证号：
				</view>
				<view class="bg-val">
					<input type="idcard" value="" placeholder="请输入配偶身份证号" class="val-ipt" v-model="scid"/>
				</view>
			</view>
			<view class="bd-wrap flex">
				<view class="bg-name">
					配偶户籍地址：
				</view>
				<view class="bg-val">
					<input type="text" value="" placeholder="请输入配偶户籍地址" class="val-ipt" v-model="preg"/>
				</view>
			</view>
			<view class="bd-wrap flex">
				<view class="bg-name">
					配偶现居住地址：
				</view>
				<view class="bg-val">
					<input type="text" value="" placeholder="请输入配偶现居住地址" class="val-ipt" v-model="paddress"/>
				</view>
			</view>
			<view class="sm-wrap">
				<view class="sm-tit">
					诊断(请勾选):
				</view>
				<view class="flex">
					<view class="radio flex" @click="gfx = !gfx">
						<view class="">
							产前筛查高风险
						</view>
						<radio value="r1" :checked="gfx" color="#ff404c" clase="dd"/>
					</view>
					<view class="radio flex" @click="ycd = !ycd">
						<view class="">
							预产期年龄>35周岁
						</view>
						<radio value="r1" :checked="ycd" color="#ff404c" clase="dd"/>
					</view>
				</view>
			</view>
			<view class="sm-wrap">
				<view class="sm-tit">
					户口本(户主页图片 + 孕妇本人页图片)
				</view>
				<view class="pic-num">
					{{hkb | showNum}}/2
				</view>
				<view class="img-list flex">
					<view class="img-item" v-for="(sfzItem,sfzIndex) in hkb" @click="upImag(sfzIndex,hkb)" >
						<image :src="sfzItem" mode="" class="upimg" v-if="sfzItem"></image>
						<image src="../../static/img/up-img.png" mode="" class="upimg" v-else></image>
						<image src="../../static/icon/delimg.png" mode="" class="delimg" @click.stop="delImg(sfzIndex,hkb)"
							v-if="sfzItem"></image>
					</view>
				</view>
			</view>
			<view class="sm-wrap">
				<view class="sm-tit">
					结婚证
				</view>
				<view class="pic-num">
					{{jhz | showNum}}/1
				</view>
				<view class="img-list flex">
					<view class="img-item" @click="upImag1('jhz')">
						<image :src="jhz" mode="" class="upimg" v-if="jhz"></image>
						<image src="../../static/img/up-img.png" mode="" class="upimg" v-else></image>
						<image src="../../static/icon/delimg.png" mode="" class="delimg" @click.stop="delImg1('jhz')"
							v-if="jhz"></image>
					</view>
				</view>
			</view>
			<view class="sm-wrap">
				<view class="sm-tit">
					孕产妇身份证正反面
				</view>
				<view class="pic-num">
					{{cidimg | showNum}}/2
				</view>
				<view class="img-list flex">
					<view class="img-item" v-for="(sfzItem,sfzIndex) in cidimg" @click="upImag(sfzIndex,cidimg)" >
						<image :src="sfzItem" mode="" class="upimg" v-if="sfzItem"></image>
						<image src="../../static/img/up-img.png" mode="" class="upimg" v-else></image>
						<image src="../../static/icon/delimg.png" mode="" class="delimg" @click.stop="delImg(sfzIndex,cidimg)"
							v-if="sfzItem"></image>
					</view>
				</view>
			</view>
			<view class="sm-wrap">
				<view class="sm-tit" style="padding-right: 100rpx;">
					孕妇本人名下银行卡(带有账户信息面)
				</view>
				<view class="pic-num">
					{{bcdimg | showNum}}/1
				</view>
				<view class="img-list flex">
					<view class="img-item" @click="upImag1('bcdimg')">
						<image :src="bcdimg" mode="" class="upimg" v-if="bcdimg"></image>
						<image src="../../static/img/up-img.png" mode="" class="upimg" v-else></image>
						<image src="../../static/icon/delimg.png" mode="" class="delimg" @click.stop="delImg1('bcdimg')"
							v-if="bcdimg"></image>
					</view>
				</view>
			</view>
			<view class="sm-wrap">
				<view class="sm-tit" style="padding-right: 100rpx;">
					产前筛查高风险报告单
				</view>
				<view class="pic-num">
					{{cqsc | showNum}}/1
				</view>
				<view class="img-list flex">
					<view class="img-item" @click="upImag1('cqsc')">
						<image :src="cqsc" mode="" class="upimg" v-if="cqsc"></image>
						<image src="../../static/img/up-img.png" mode="" class="upimg" v-else></image>
						<image src="../../static/icon/delimg.png" mode="" class="delimg" @click.stop="delImg1('cqsc')"
							v-if="cqsc"></image>
					</view>
				</view>
			</view>
			<!-- 羊水穿刺病历记录单 -->
			<view class="sm-wrap">
				<view class="sm-tit">
					羊水穿刺病历记录单
				</view>
				<view class="pic-num">
					{{yscc | showNum}}/2
				</view>
				<view class="img-list flex">
					<view class="img-item" v-for="(sfzItem,sfzIndex) in yscc" @click="upImag(sfzIndex,yscc)" >
						<image :src="sfzItem" mode="" class="upimg" v-if="sfzItem"></image>
						<image src="../../static/img/up-img.png" mode="" class="upimg" v-else></image>
						<image src="../../static/icon/delimg.png" mode="" class="delimg" @click.stop="delImg(sfzIndex,yscc)"
							v-if="sfzItem"></image>
					</view>
				</view>
			</view>
			<!-- 报销发票(含羊水穿刺收费项目明细) -->
			<view class="sm-wrap">
				<view class="sm-tit">
					报销发票(含羊水穿刺收费项目明细)
				</view>
				<view class="pic-num">
					{{bxfp | showNum}}/2
				</view>
				<view class="img-list flex">
					<view class="img-item" v-for="(sfzItem,sfzIndex) in bxfp" @click="upImag(sfzIndex,bxfp)">
						<image :src="sfzItem" mode="" class="upimg" v-if="sfzItem"></image>
						<image src="../../static/img/up-img.png" mode="" class="upimg" v-else></image>
						<image src="../../static/icon/delimg.png" mode="" class="delimg" @click.stop="delImg(sfzIndex,bxfp)"
							v-if="sfzItem"></image>
					</view>
				</view>
			</view>
			
			<view class="sm-wrap">
				<view class="sm-tit" style="padding-right: 30rpx;">
					其他需补充提交材料
				</view>
				<view class="pic-num">
					{{other | showNum}}/2
				</view>
				<view class="img-list flex">
					<view class="img-item" v-for="(checkItem,checkIndex) in other" @click="upImag(checkIndex,other)">
						<image :src="checkItem" mode="" class="upimg" v-if="checkItem"></image>
						<image src="../../static/img/up-img.png" mode="" class="upimg" v-else></image>
						<image src="../../static/icon/delimg.png" mode="" class="delimg" @click.stop="delImg(checkIndex,other)"
							v-if="checkItem"></image>
					</view>
				</view>
			</view>
			
		</view>
		<view class="sub" @click="sub">
			提交申请
		</view>
	</view>
</template>

<script>
	import {
		upload,
		sub_list
	} from '@/api/ask.js';
	export default {
		data() {
			return {
				name: '', //姓名
				cid: '', //身份证号
				sname: '', //配偶姓名
				scid: '', //配偶身份证号
				bcd: '', //银行卡号
				phone: '', //联系电话
				address: '', //地址
				paddress: '', //配偶地址
				reg: '', //户籍
				preg: '',//配偶户籍
				gfx: false,//产前高风险
				ycd: false,//预产期年龄>35周岁
				hkb:['',''],//户口本
				jhz: '',//结婚证
				cidimg: ['',''], //身份证正反面
				bcdimg: '', //银行卡图片
				cqsc: '',//产前筛查高风险报告单
				yscc:['',''],//羊水穿刺病历记录单
				bxfp:['',''],//报销发票(含羊水穿刺收费项目明细)
				other: ['',''],//其他需补充提交材料
				loadingType: 'more',
			}
		},
		filters: {
			showNum(val) {
				let i = 0
				if(Array.isArray(val)) {
					if(val) {
						val.forEach(e => {
							if(e) {
								i++
							}
						})
					}
				}else {
					if(val != '') {
						i++
					}
				}
				
				return i
			}
		},
		onShow() {
			
		},
		methods: {
			jy(arr,length) {
				let i = 0
				arr.forEach(item => {
					if(item != '') {
						i++
					}
				})
				return i == length
			},
			upImag(index,list) {
				console.log('上传')
				let obj = this
				upload({
					filename: ''
				}).then(res => {
					// console.log(res[0].url)
					// obj.sfzShow = false
					// list[index] = res[0].url
					// obj.sfzShow = true
					list.splice(index, 1, res[0].fullurl)
				});
			},
			upImag1(item) {
				console.log('上传')
				let obj = this
				upload({
					filename: ''
				}).then(res => {
					// console.log(res[0].url)
					// obj.bcdimg = res[0].url
					obj.$set(obj,item,res[0].fullurl)
				});
			},
			delImg(index,list) {
				console.log('删除')
				// this.sfzShow = false
				// list[index] = ''
				// this.sfzShow = true
				list.splice(index, 1, '')
			},
			delImg1(name) {
				this.$set(this,name,'')
			},
			sub() {
				let obj = this
				if(obj.loadingType == 'loading') {
					return
				}
				// 校验
				if (obj.name == '') {
					return obj.$api.msg('请输入您的姓名')
				}
				if (obj.cid == '') {
					return obj.$api.msg('请输入您的身份证号')
				}
				if (obj.sname == '') {
					return obj.$api.msg('请输入您的配偶姓名')
				}
				if (obj.scid == '') {
					return obj.$api.msg('请输入您的配偶身份证号')
				}
				if (obj.bcd == '') {
					return obj.$api.msg('请输入您的银行卡号')
				}
				if (obj.phone == '') {
					return obj.$api.msg('请输入您的联系电话')
				}
				if (obj.address == '') {
					return obj.$api.msg('请输入现居住地址')
				}
				if (obj.reg == '') {
					return obj.$api.msg('请输入户籍地址')
				}
				if (obj.paddress == '') {
					return obj.$api.msg('请输入配偶现居住地址')
				}
				if (obj.preg == '') {
					return obj.$api.msg('请输入配偶户籍地址')
				}
				//户口本
				if(!obj.jy(obj.hkb,2)) {
					return obj.$api.msg('请上传户口本信息')
				}
				// 结婚证
				if(obj.jhz == '') {
					return obj.$api.msg('请上传结婚证')
				}
				//身份证正反面
				if(!obj.jy(obj.cidimg,2)) {
					return obj.$api.msg('请上传身份证正反面')
				}
				//银行卡图片
				if (obj.bcdimg == '') {
					return obj.$api.msg('请上传银行卡照片')
				}
				//产前筛查高风险报告单
				if (obj.cqsc == '') {
					return obj.$api.msg('请上传产前筛查高风险报告单')
				}
				//羊水穿刺病历记录单
				if(!obj.jy(obj.yscc,2)) {
					return obj.$api.msg('请上传羊水穿刺病历记录单')
				}
				//报销发票
				if(!obj.jy(obj.bxfp,2)) {
					return obj.$api.msg('请上传报销发票')
				}
				//其他需补充提交材料0
				obj.loadingType = 'loading'
				let sett = ''
				if(obj.gfx && obj.ycd) {
					// sett = ['产前筛查高风险','预产期年龄>35周岁']
					sett ="产前筛查高风险,预产期年龄≥35周岁"
					// sett = '产前筛查高风险,预产期年龄≥35周岁'
				}else if(obj.gfx){
					sett = '产前筛查高风险'
				}else if(obj.ycd) {
					sett = '预产期年龄≥35周岁'
				}else {
					
				}
				sub_list({
					user_name: obj.name, //姓名
					idcard: obj.cid, //身份证号
					address: obj.reg, //地址
					current_address: obj.address,
					phone: obj.phone,//
					card: obj.bcd,
					mate: obj.sname, //配偶姓名
					mate_idcard: obj.scid,//配偶身份证号
					mate_address: obj.paddress,
					mate_current_address: obj.preg,
					diagnosis: sett,
					residence_bookleimage: obj.hkb[0],
					gravida_inhabitantimage: obj.hkb[1],
					marriage_certificateimage: obj.jhz,
					front_idcardimage: obj.cidimg[0],
					opposite_idcardimage: obj.cidimg[1],
					cardimage: obj.bcdimg,
					high_riskimages: obj.cqsc,
					Recordimages: obj.yscc.join(','),
					invoiceimages: obj.bxfp.join(','),
					materialimages: obj.other.join(',')
				}).then(res => {
					obj.loadingType = 'more'
					uni.showToast({
						title: '提交成功',
						duration: 2000
					});
				}).catch(err => {
					obj.loadingType = 'more'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bz-bg {
		width: 750rpx;
	}

	.bz-tit {
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #f3392c;

		.hx {
			width: 70rpx;
			height: 2rpx;
			background-color: #f99a93;
			margin: 0 25rpx;
		}
	}

	.tab {
		width: 690rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin: 36rpx auto 0;
		box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.2);
	}

	.bd-wrap {
		width: 690rpx;
		height: 100rpx;
		background-color: #fff;
		border-bottom: 1px solid #f2f2f2;
		line-height: 100rpx;
		font-size: 32rpx;
		position: relative;
		.code {
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			right: 10rpx;
			color: #f64342;
			font-size: 23rpx;
		}
		.bg-name {
			width: 260rpx;
			height: 100%;
			padding-left: 20rpx;
		}

		.bg-val {
			width: 430rpx;
			height: 100%;

			.val-ipt {
				display: inline-block;
				width: 100%;
				height: 100%;
				// background-color: #009100;
				padding-left: 10rpx;

			}
		}
	}

	.sub {
		margin-top: 100rpx;
		text-align: center;
		font-size: 40rpx;
		color: #fff;
		font-weight: bold;
		line-height: 100rpx;
		width: 750rpx;
		background-color: #f3392c;
	}

	.sm-wrap {
		background-color: #fff;
		padding-bottom: 28rpx;
		border-bottom: 1px solid #f2f2f2;
		position: relative;

		.sm-tit {
			// line-height: 87rpx;
			padding: 20rpx;
			font-size: 32rpx;
			line-height: 1.5;
			// padding-left: 20rpx;
		}

		.text-area {
			height: 156rpx;
			width: 634rpx;
			border-radius: 20rpx;
			border: 1px solid #e8e8e8;
			margin: auto;
			padding: 10rpx;
		}

		.pic-num {
			position: absolute;
			width: 75rpx;
			line-height: 34rpx;
			border-radius: 17rpx;
			background-color: #f3392c;
			color: #fff;
			font-size: 28rpx;
			text-align: center;
			right: 10rpx;
			top: 22rpx;
		}

		.img-list {
			padding-left: 28rpx;

			.img-item {
				width: 160rpx;
				height: 160rpx;
				position: relative;
				margin-right: 20rpx;

				.upimg {
					width: 160rpx;
					height: 160rpx;
				}

				.delimg {
					width: 39rpx;
					height: 38rpx;
					position: absolute;
					top: 0;
					right: 0;
				}

			}

		}
	}
	.radio {
		padding: 10rpx;
		background-color: #f3f3f3;
		margin-left: 20rpx;
		font-size: 26rpx;
		align-items: center;
		view {
			flex-shrink: 0;
			padding-right: 10rpx;
		}
		.dd {
			width: 35rpx !important;
			height: 35rpx !important;
		}
	}
</style>