xhlred/pages/applyHelp/third.vue

     <template>
	<view class="content">
		<!-- <view class="tip">孝心缝帮扶：仅限服装行业从业者申请哦~</view> -->
		<view class="flex til-list" v-if="status == ''">
			<view class="" @click="navTo('/pages/applyHelp/index?id='+id)">基本信息</view>
			<view class="" @click="navTo('/pages/applyHelp/second?id='+id)">信息选择</view>
			<view class="red">家庭成员情况</view>
			<view class="" @click="navTo('/pages/applyHelp/fourth?id='+id)">详细情况</view>
		</view>
		<view class="flex til-list" v-if="status == 2">
			<view class="" @click="navTo('/pages/applyHelp/index?id='+id+'&status=2')">基本信息</view>
			<view class="" @click="navTo('/pages/applyHelp/second?id='+id+'&status=2')">信息选择</view>
			<view class="red">家庭成员情况</view>
			<view class="" @click="navTo('/pages/applyHelp/fourth?id='+id+'&status=2')">详细情况</view>
		</view>
		<view v-for="(ls,index) in datalist" :key="">
			<view class="flex item-list">
				<view class="list-name">家庭成员({{index+1}})</view>
				<view class="add-tip" @click="addlist(index)" v-if="ls.id == current && status == ''">新增</view>
			</view>
			<view class="content_box">
				<view class="row b-b">
					<text class="tit">姓名</text>
					<input class="input" type="text" v-model="ls.name" :disabled="disabled" placeholder="请填写您的姓名" placeholder-class="placeholder" />
				</view>
				<view class="row b-b">
					<text class="tit">与本人关系</text>
					<input class="input" type="text" v-model="ls.relationship" :disabled="disabled"  placeholder="请填写与本人关系" placeholder-class="placeholder" />
				</view>
				<view class="row b-b">
					<text class="tit">身份证号</text>
					<input class="input" type="text" v-model="ls.card" :disabled="disabled"  placeholder="请填写身份证号" placeholder-class="placeholder" />
				</view>
				<view class="row b-b">
					<text class="tit">工作单位或就读学校</text>
					<input class="input" type="text" v-model="ls.school" :disabled="disabled"  placeholder="请填写工作单位或就读学校" placeholder-class="placeholder" />
				</view>
				<view class="row b-b">
					<text class="tit">健康状况</text>
					<input class="input" type="text" v-model="ls.health" :disabled="disabled"  placeholder="请填写健康状况" placeholder-class="placeholder" />
				</view>
				<view class="row b-b">
					<text class="tit">月收入（元）</text>
					<input class="input" type="number"  v-model="ls.money" :disabled="disabled" placeholder="请填写月收入（元）" placeholder-class="placeholder" />
				</view>
			</view>
		</view>
		<view class="add-btn" v-if="status == ''" @click="confirm">下一步</view>
		<view class="add-btn"  v-if="status == 2" @click="Tosecond">下一步</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 LbPicker from '@/components/lb-picker/index.vue'
import { upload,add_three_help } from '@/api/index.js';
import { getList,helpdetail } from '@/api/applyHelp.js';
export default {
	components: {
		uniList,
		uniListItem,
		LbPicker
	},
	data() {
		return {
			datalist:[{
				id:1,
				name:"",
				relationship:'',
				card:'',
				school:'',
				health:'',
				money:"",
				}],
			current:1,
			submit:0,
			type:1,//1代表申请表，2代表申请详情
			
			status:'',//审核通过
			disabled:false,
		};
	},
	onLoad(option) {
		if(option.id){
			this.id = option.id;
			this.helpDetail();
		}
		if(option.status){
			this.status = option.status;
			this.disabled = true;
		}
	},
	onUnload() {
		uni.navigateTo({
			url: '/pages/applyHelp/cation'
		});
	},
	methods: {
		addlist(){
			if(this.current > 6){
				this.$api.msg('家庭只能添加7位！');
				return;
			}
			let v = Object();
			this.current++;
			v['id'] = this.current;
			v['name'] = '';
			v['relationship'] = '';
			v['card'] = '';
			v['school'] = '';
			v['health'] = '';
			v['money'] = '';
			this.datalist.push(v);
			console.log(this.current)
			console.log(this.datalist)
		},
		// outFocus(e){
		// 	console.log(event.target)
		// 	event.target.blur()
		// },
		// //筹款类型
		// async loadData() {
		// 	let obj = this;
		// 	getList({})
		// 		.then(({ data }) => {
		// 			obj.list =  data;
		// 		})
		// 	.catch(err => {
		// 		console.log(err);
		// 	});
		// },
		Tosecond(){
			uni.navigateTo({
				url:'/pages/applyHelp/fourth?id='+this.id+'&status=2'
			})
		},
		//申请详情
		helpDetail(){
			let obj = this;
			helpdetail({
				id:obj.id
			}).then(({ data }) => {
				console.log(data.member_list)
				if(data.member_list == null){
					obj.type =1;
				}else{
					obj.type =2;
					obj.datalist = data.member_list
				}
				console.log(obj.type )
				})
				.catch(err => {
				console.log(err);
			});
		},
		//提交
		confirm() {
			let obj = this; 
			let data = [];
			for(let i in obj.datalist ){
			   if(obj.datalist[i].name !='' && obj.datalist[i].relationship !='' && obj.datalist[i].card !='' && obj.datalist[i].school!='' && obj.datalist[i].health !='' && obj.datalist[i].money!=''){
			   	obj.submit =1;
				console.log(obj.datalist[i])
				data.push(obj.datalist[i]);
			   }
			}
			if(obj.submit==0)
			{
				obj.$api.msg('请填写至少一位完整的家庭成员信息！');
				return;
			}
			
			add_three_help({
				id:obj.id,
				data:data
			}).then(function(e) {
				obj.$api.msg(e.msg);
				setTimeout(function(){
					uni.navigateTo({
						url:'/pages/applyHelp/fourth?id='+obj.id
					})
				}, 2000);
			})
			.catch(e => {
				obj.$api.msg(e.message);
			});
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	min-height: 100%;
}
.content{
	padding-bottom: 100rpx;
}
.tip{
	color: #DE2412;
	background-color: #FEE2E3;
	font-size: 24rpx;
	padding: 25rpx 35rpx;
}
.til-list{
	padding: 35rpx 50rpx;
	font-size: 28rpx;
	color: #666666;
	.red{
		color: #E62129 !important;
	}
}
.name{
	padding: 0rpx 35rpx;
	padding-bottom: 15rpx !important;
	font-size: 36rpx;
	font-weight:500;
}
.content_box {
	background-color: #ffffff;
	padding: 0rpx 25rpx;
	margin: 25rpx auto;
}
.item-list{
	padding: 25rpx 45rpx;
	color:rgba(34,34,34,1);
	font-weight:400;
	font-size: 35rpx;
	.list-name{
			
		}
	.add-tip{
		color: #E62129 !important;
	}
}
.row {
	display: flex;
	align-items: center;
	// position: relative;
	padding: 0 30rpx;
	height: 110rpx;
	background: #fff;
	border-bottom: 1rpx solid #f8f6f6;

	.tit {
		flex-shrink: 0;
		width: 280rpx;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30rpx;
		color: $font-color-dark;
		text-align: right;
	}
	.iconlocation {
		font-size: 36rpx;
		color: $font-color-light;
	}
}
.examine_name {
	color: #171717;
	font-size: 28rpx;
	padding: 25rpx 25rpx;
}
.examine_img {
	width: 100%;
	text-align: center;
	.image{
		width: 150rpx;
		height: 150rpx;
	}
	.image1{
		min-width: 150rpx;
		max-width: 100%;
		min-height: 150rpx;
	}
}
.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{
	position: fixed;
	bottom: 0rpx;
	left: 0rpx;
	width: 100%;
	height: 100rpx;
	font-size: 28rpx;
	color: #FFFFFF;
	background-color: #FF727E;
	line-height: 100rpx;
	text-align: center;
}
.img_box {
	padding: 35rpx 35rpx;
	width: 250rpx;
	height: 250rpx;
}
.img_box image {
	width: 100%;
	height: 100%;
}
.alert-box {
	background-color: #ffffff;
}
.b-b:after {
	position: relative !important;
}
.check_box {
	padding: 25rpx 25rpx;
	font-size: 20rpx;
	padding-bottom: 150rpx;
	text{
		color: #6786FB;
	}
}

</style>