wlred/pages/share/subsidy.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="text" value="" placeholder="请输入您的年龄" class="val-ipt" v-model="age"/>
				</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="sname"/>
				</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="sage"/>
				</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="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="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="bank"/>
				</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="check"/>
				</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="income"/>
				</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="person"/>
				</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="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="code"/>
				</view>
				<view class="code" @click="verification">{{ countDown == 0 ? '获取验证码' : countDown }}</view>
			</view>
			<view class="sm-wrap">
				<view class="sm-tit">
					有无其他妊娠合并疾病，如有，请说明：
				</view>
				<textarea value="" placeholder="" class="text-area" v-model="explain"/>
			</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)" v-show="sfzShow">
						<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: 30rpx;">
					孕期检查信息(母子健康中心小程序上将带有孕妇姓名的检查页进行截屏上传)
				</view>
				<view class="img-list flex">
					<view class="img-item" v-for="(checkItem,checkIndex) in checkimg" @click="upImag(checkIndex,checkimg)">
						<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,checkimg)"
							v-if="checkItem"></image>
					</view>
				</view>
			</view>
			<view class="sm-wrap">
				<view class="sm-tit" style="padding-right: 100rpx;">
					银行卡带有账号信息面（须为孕产妇本人名下）
				</view>
				<view class="img-list flex">
					<view class="img-item" @click="upImag1()">
						<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()"
							v-if="bcdimg"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="sub" @click="sub">
			提交申请
		</view>
	</view>
</template>

<script>
	//孕期检查信息(母子健康中心小程序上将带有孕妇姓名 的检查页进行截屏上传)
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import {
		upload,
		addrescuer,
		verify,
		sub_list
	} from '@/api/ask.js';
	export default {
		data() {
			return {
				name: '', //姓名
				age: '', //年龄
				cid: '', //身份证号
				sname: '', //配偶姓名
				sage: '', //配偶年龄
				scid: '', //配偶身份证号
				bcd: '', //银行卡号
				bank: '', //开户行
				phone: '', //联系电话
				check: '', //产检次数
				income: '', //收入
				person: '', //人口
				address: '', //地址
				explain: '', //说明
				cidimg: ['',''], //身份证正反面
				checkimg: ['','',''], //检查图片截图
				bcdimg: '', //银行卡图片
				code: '', //验证码
				reg: '', //户籍
				sfzShow: true,
				checkShow: true,
				sfzNum: 0,
				countDown: 0,
				loadingType: 'more'
			}
		},
		filters: {
			showNum(val) {
				let i = 0
				if(val) {
					val.forEach(e => {
						if(e) {
							i++
						}
					})
				}
				return i
			}
		},
		watch:{
			countDown(i) {
				if (i == 0) {
					clearInterval(this.time);
				}
			}
		},
		computed: {
			...mapState('user', ['hasLogin', 'userInfo']),
		},
		onShow() {
			console.log(this);
			//	判断是否已经登录
			if (this.hasLogin) {
				
			} else {
				saveUrl();
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
			}
		},
		methods: {
			//发送验证码
			verification() {
				let obj = this;
				if (this.phone == '') {
					this.$api.msg('请输入电话号码');
					return;
				}
				if (this.phone.length < 11) {
					this.$api.msg('请输入正确的手机号');
					return;
				}
				// 判断是否在倒计时
				if (obj.countDown > 0) {
					return false;
				} else {
					obj.countDown = 60;
					obj.time = setInterval(() => {
						obj.countDown--;
					}, 1000);
					//调用验证码接口
					verify({
						phone: obj.phone,
						type: 'VERIFICATION_CODE'
					})
						.then(({ data }) => {})
						.catch(err => {
							console.log(err);
						});
				}
			},
			// 
			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
				});
			},
			upImag1() {
				console.log('上传')
				let obj = this
				upload({
					filename: ''
				}).then(res => {
					console.log(res[0].url)
					obj.bcdimg = res[0].url
				});
			},
			delImg(index,list) {
				console.log('删除')
				this.sfzShow = false
				list[index] = ''
				this.sfzShow = true
				
			},
			delImg1() {
				this.bcdimg = ''
			},
			sub() {
				let obj = this
				if(obj.loadingType == 'loading') {
					return
				}
				// 校验
				if (obj.name == '') {
					return obj.$api.msg('请输入您的姓名')
				}
				if (obj.age == '') {
					return obj.$api.msg('请输入您的年龄')
				}
				if (obj.cid == '') {
					return obj.$api.msg('请输入您的身份证号')
				}
				if (obj.sname == '') {
					return obj.$api.msg('请输入您的配偶姓名')
				}
				if (obj.sage == '') {
					return obj.$api.msg('请输入您的配偶年龄')
				}
				if (obj.scid == '') {
					return obj.$api.msg('请输入您的配偶身份证号')
				}
				if (obj.bcd == '') {
					return obj.$api.msg('请输入您的银行卡号')
				}
				if (obj.bank == '') {
					return obj.$api.msg('请输入开户行')
				}
				if (obj.phone == '') {
					return obj.$api.msg('请输入您的联系电话')
				}
				if (obj.check == '') {
					return obj.$api.msg('请输入您的产检次数')
				}
				if (obj.income == '') {
					return obj.$api.msg('请输入家庭年总收入')
				}
				if (obj.address == '') {
					return obj.$api.msg('请输入现居住地址')
				}
				if (obj.reg == '') {
					return obj.$api.msg('请输入户籍地址')
				}
				if(obj.code == '') {
					return obj.$api.msg('请输入验证码')
				}
				// 身份证正反面拼接 
				let cidimg = obj.cidimg[0] + ',' + obj.cidimg[1]
 				if(obj.cidimg[0] == '' || obj.cidimg[1] == '') {
					return obj.$api.msg('请上传身份证正反面')
				}
				// 孕期检查信息拼接
				let checkimg = ''
				obj.checkimg.forEach(e => {
					if(e) {
						checkimg = e + ',' + checkimg 
					}
				})
				
				if(checkimg.length == 0) {
					return obj.$api.msg('请上传孕期检查信息')
				}else {
					checkimg = checkimg.substr(0, checkimg.length - 1)
				}
				if (obj.bcdimg == '') {
					return obj.$api.msg('请上传银行卡照片')
				}
				obj.loadingType = 'loading'
				sub_list({
					name: obj.name, //姓名
					age: obj.age, //年龄
					cid: obj.cid, //身份证号
					sname: obj.sname, //配偶姓名
					sage: obj.sage, //配偶年龄
					scid: obj.scid, //配偶身份证号
					bcd: obj.bcd, //银行卡号
					bank: obj.bank,//开户行
					phone: obj.phone, //联系电话
					check: obj.check, //产检次数
					income: obj.income, //收入
					person: obj.person, //人口
					address: obj.address, //地址
					explain: obj.explain, //说明
					cidimg: cidimg, //身份证正反面
					checkimg: checkimg, //检查图片截图
					bcdimg: obj.bcdimg, //银行卡图片
					code: obj.code, //验证码
					reg: obj.reg, //户籍
				}).then(res => {
					obj.loadingType = 'more'
					uni.showToast({
						title: '提交成功',
						duration: 2000
					});
				})
			}
		}
	}
</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;
				}

			}

		}
	}
</style>