12-17-1

pages/applyHelp/index.vue

@@ -1,581 +1,899 @@
-     <template>
-	<view class="cantent">
-		<!-- <view class="tip">孝心缝帮扶：仅限服装行业从业者申请哦~</view> -->
-		<!-- <view class="flex til-list" v-if="!id">
-			<view class="red">基本信息</view>
-			<view class="">信息选择</view>
-			<view class="">家庭成员情况</view>
-			<view class="">详细情况</view>
-		</view> -->
+<template>
+	<view class="cantent">
 		<view class="tit-tip">
 			基本信息
-		</view>
-		<view class="flex til-list" v-if="id && status == ''">
-			<view class="red">基本信息</view>
-			<view class="" @click="navTo('/pages/applyHelp/second?id='+id)">信息选择</view>
-			<view class="" @click="navTo('/pages/applyHelp/third?id='+id)">家庭成员情况</view>
-			<view class="" @click="navTo('/pages/applyHelp/fourth?id='+id)">详细情况</view>
-		</view>
-		<view class="flex til-list" v-if="id && status == 2">
-			<view class="red">基本信息</view>
-			<view class="" @click="navTo('/pages/applyHelp/second?id='+id +'&status=2')">信息选择</view>
-			<view class="" @click="navTo('/pages/applyHelp/third?id='+id+'&status=2')">家庭成员情况</view>
-			<view class="" @click="navTo('/pages/applyHelp/fourth?id='+id+'&status=2')">详细情况</view>
-		</view>
-		<view class="content_box">
-			<view class="row b-b">
-				<text class="tit">姓名</text>
-				<input class="input" type="text" :disabled="disabled" v-model="name" placeholder="请填写您的姓名" placeholder-class="placeholder" />
-			</view>
-			<view class="row b-b">
-				<text class="tit">年龄</text>
-				<input class="input" type="text" :disabled="disabled" v-model="age"  placeholder="请填写您的年龄" placeholder-class="placeholder" />
-			</view>
-			<view class="row b-b">
-				<text class="tit">性别</text>
-				<input class="input" type="text" :disabled="disabled" v-model="sex"  placeholder="请填写您的性别" placeholder-class="placeholder" />
-			</view>
-		</view>
-		<!-- <view class="content_box">
-			<view class="list-name">政治面貌</view>
-			<view class="uni-list">
-				<radio-group @change="radioChange">
-					<view class="radio-list flex_item">
-						<label class="uni-list-cell uni-list-cell-pd flex_item" v-for="(item, index) in outlook" :key="item.name">
-							<view><radio :disabled="disabled" style="transform:scale(0.7)" color='#FF727E' :value="item.name" :checked="index === current" /></view>
-							<view>{{item.name}}</view>
-						</label>
-					</view>
-				</radio-group>
+		</view>
+		<view class="content_box">
+			<view class="row b-b">
+				<text class="tit">姓名</text>
+				<input class="input" type="text" :disabled="disabled" v-model="name" placeholder="请填写您的姓名"
+					placeholder-class="placeholder" />
+			</view>
+			<view class="row b-b">
+				<text class="tit">年龄</text>
+				<input class="input" type="text" :disabled="disabled" v-model="age" placeholder="请填写您的年龄"
+					placeholder-class="placeholder" />
+			</view>
+			<view class="row b-b">
+				<text class="tit">性别</text>
+				<input class="input" type="text" :disabled="disabled" v-model="sex" placeholder="请填写您的性别"
+					placeholder-class="placeholder" />
 			</view>
-		</view> -->
-		
+		</view>
 		<view class="content_box">
 			<view class="row b-b" v-if="status =='' ">
 				<text class="tit">政治面貌</text>
-				<picker mode="" :range="checkedList" @change="changeChecked">
-					<input class="input" disabled v-model="checked" placeholder="请选择政治面貌" placeholder-class="placeholder" />
+				<picker mode="selector" :range="checkedList" @change="changeChecked" style="flex-grow: 1;">
+					<input class="input" disabled v-model="checked" placeholder="请选择政治面貌"
+						placeholder-class="placeholder" />
 				</picker>
-				<!-- <pickerAddress class="input"  @change="onCityClick">{{checked||'请选择省市区'}}</pickerAddress> -->
 			</view>
 			<view class="row b-b" v-if="status ==2 ">
 				<text class="tit">政治面貌</text>
-				<input class="input"  :disabled="disabled" v-model="address" placeholder="省市区" placeholder-class="placeholder" />
-			</view>
-			<view class="row" v-if="status == ''" @click="selectDatePicker(type)">
-				<text class="tit">出生日期：</text>
-				<input class="input" type="text"  v-model="birthday" disabled="true"  placeholder-class="placeholder" />
-				 <datetime ref='date-time' :type='type' :datestring='dateString' @change='dateTimeChange'></datetime>
-			</view>
-			<view class="row" v-if="status == 2">
-				<text class="tit">出生日期：</text>
-				<input class="input" type="text"  v-model="birthday" disabled="true"  placeholder-class="placeholder" />
-				 <datetime ref='date-time' :type='type' :datestring='dateString' @change='dateTimeChange'></datetime>
-			</view>
-			<view class="row b-b">
-				<text class="tit">身份证号</text>
-				<input class="input" type="number" :disabled="disabled"  v-model="card" placeholder="请填写身份证号" placeholder-class="placeholder" />
-			</view>
-			<view class="row b-b" v-if="status =='' ">
-				<text class="tit">省市区</text>
-				<pickerAddress class="input"  @change="onCityClick">{{address||'请选择省市区'}}</pickerAddress>
-			</view>
-			<view class="row b-b" v-if="status ==2 ">
-				<text class="tit">省市区</text>
-				<input class="input"  :disabled="disabled" v-model="address" placeholder="省市区" placeholder-class="placeholder" />
-			</view>
-			<view class="row b-b">
-				<text class="tit">详细地址</text>
-				<input class="input" v-model="addr" :disabled="disabled" placeholder="请填写详细地址" placeholder-class="placeholder" />
-			</view>
-			<view class="row b-b">
-				<text class="tit">联系电话</text>
-				<input class="input" type="text" :disabled="disabled" v-model="phone"  placeholder="请填写联系电话" placeholder-class="placeholder" />
-			</view>
-			<view class="row b-b">
-				<text class="tit">工作单位</text>
-				<input class="input" type="text"  :disabled="disabled" v-model="work"  placeholder="请填写工作单位" placeholder-class="placeholder" />
-			</view>
-		</view>
-		<view class="content_box" v-if="status == ''">
-			<view class="list-name">单位性质</view>
-			<view class="uni-list">
-				<radio-group @change="radioChange1">
-					<view class="radio-list flex_item">
-						<label class="uni-list-cell uni-list-cell-pd flex_item" v-for="(item, index) in nature" :key="item.name">
-							<view><radio :disabled="disabled" style="transform:scale(0.7)" color='#FF727E' :value="item.name" :checked="index === current1" /></view>
-							<view>{{item.name}}</view>
-						</label>
-					</view>
-				</radio-group>
-			</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 { upload,add_help } from '@/api/index.js';
-import { getList,helpdetail } from '@/api/applyHelp.js';
-import datetime from '@/components/DateTimePicker/DateTimePicker.vue'
-import  pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
-export default {
-	components: {
-		uniList,
-		uniListItem,
-		pickerAddress,
-		datetime
-	},
-	data() {
-		return {
-			id:'',
-			name:'',//姓名
-			age:'',//年龄
-			sex:'',//性别
-			card:'',//身份证号
-			phone:'',//电话
-			address:'',//
-			addr:'',
-			work:'',//工作单位
-			checkedList: ['团员','预备党员','党员','群众'],//政治面貌
-			outlook:[{
-				id:1,
-				name:'团员'
-			},{
-				id:2,
-				name:'预备党员'
-			},{
-				id:3,
-				name:'党员'
-			},{
-				id:4,
-				name:'群众'
-			}],//政治面貌
-			current:'',
-			checked:'',
-			
-			nature:[{
-				id:1,
-				name:'国有企业'
-			},{
-				id:2,
-				name:'私营企业'
-			},{
-				id:3,
-				name:'外资企业'
-			},{
-				id:4,
-				name:'事业单位'
-			},{
-				id:5,
-				name:'个位经营'
-			},{
-				id:6,
-				name:'无'
-			}],//单位性质
-			current1:'',
-			checked1:'',
-			
-			dateString: '',
-			birthday:'请选择出生日期',//出生日期
-			type: 'date',
-			
-			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: {
-		// 选择政治面貌
-		changeChecked(e) {
-			console.log(e)
-		},
-		radioChange(evt){
-			this.checked = evt.detail.value;
-		},
-		radioChange1(evt){
-			this.checked1 = evt.detail.value;
-		},
-		// 显示日期选择器
-		selectDatePicker(type, index) {
-			this.type = type;
-			this.index = index;
-			this.$refs['date-time'].show();
-		},
-		dateTimeChange(value) {
-			this.birthday = value;
-			console.log(value)
-		},
-		// 选中城市切换
-		onCityClick(res) {
-			let obj = this;
-			let province = res.data[0];
-			let city = res.data[1];
-			let district = res.data[2];
-			obj.address = province + city+ district;
-			console.log(obj.address, '城市');
-		},
-		//申请详情
-		helpDetail(){
-			let obj = this;
-			helpdetail({
-				id:obj.id
-			}).then(({ data }) => {
-				obj.name = data.name;
-				obj.sex = data.sex;
-				obj.card = data.card;
-				obj.phone = data.phone;
-				obj.work = data.work;
-				obj.birthday = data.birthday;
-				obj.age =  data.age;
-				console.log(data.address)
-				let addressDateil = data.address.split(',');
-				console.log(addressDateil)
-				obj.address = addressDateil[0];
-				obj.addr = addressDateil[1];
-				obj.checked = data.politic;
-				if(obj.checked == '团员'){
-					obj.current = 0;
-				}
-				if(obj.checked == '预备党员'){
-					obj.current = 1;
-				}
-				if(obj.checked == '党员'){
-					obj.current = 2;
-				}
-				if(obj.checked == '群众'){
-					obj.current = 3;
-				}
-				obj.checked1 = data.properties;
-				if(obj.checked1 == '国有企业'){
-					obj.current1 = 0;
-				}
-				if(obj.checked1 == '私营企业'){
-					obj.current1 = 1;
-				}
-				if(obj.checked1 == '外资企业'){
-					obj.current1 = 2;
-				}
-				if(obj.checked1 == '事业单位'){
-					obj.current1 = 3;
-				}
-				if(obj.checked1 == '个位经营'){
-					obj.current1 = 4;
-				}
-				if(obj.checked1 == '无'){
-					obj.current1 = 5;
-				}
-			})
-				.catch(err => {
-				console.log(err);
-			});
-		},
-		Tosecond(){
-			uni.navigateTo({
-				url:'/pages/applyHelp/second?id='+this.id+'&status=2'
-			})
-		},
-		//提交
-		confirm() {
-			let obj = this;
-			if(obj.name == ''){
-				this.$api.msg('请填写您的姓名！');
-				return;
-			}
-			if(obj.age == ''){
-				this.$api.msg('请填写您的年龄！');
-				return;
-			}
-			if(obj.sex == ''){
-				this.$api.msg('请填写您的性别！');
-				return;
-			}
-			if(obj.checked == ''){
-				this.$api.msg('请填写您的政治面貌！');
-				return;
-			}
-			if(obj.birthday == '' || obj.birthday == '请选择出生日期'){
-				this.$api.msg('请选择出生日期！');
-				return;
-			}
-			if(obj.card == ''){
-				this.$api.msg('请填写您的身份证号！');
-				return;
-			}
-			if(obj.address == ''){
-				this.$api.msg('请选择省市区！');
-				return;
-			}
-			if(obj.addr == ''){
-				this.$api.msg('请填写您的详细地址！');
-				return;
-			}
-			if(obj.phone == ''){
-				this.$api.msg('请填写您的联系电话！');
-				return;
-			}
-			if(obj.work == ''){
-				this.$api.msg('请填写您的工作单位！');
-				return;
-			}
-			if(obj.checked1 == ''){
-				this.$api.msg('请填写您的单位性质！');
-				return;
-			}
-			let data = {};
-			if(obj.id){
-				data = {
-					id:obj.id,
-					name:obj.name,
-					age:obj.age,
-					sex:obj.sex,
-					card:obj.card,
-					phone:obj.phone,
-					address:obj.address +','+ obj.addr,
-					work:obj.work,
-					politic:obj.checked,//政治面貌
-					birthday:obj.birthday,
-					properties:obj.checked1//单位性质
-				}
-			}else{
-				data = {
-					name:obj.name,
-					age:obj.age,
-					sex:obj.sex,
-					card:obj.card,
-					phone:obj.phone,
-					address:obj.address +','+ obj.addr,
-					work:obj.work,
-					politic:obj.checked,//政治面貌
-					birthday:obj.birthday,
-					properties:obj.checked1//单位性质
-				}
-			}
-			add_help(data).then(function(e) {
-				obj.$api.msg(e.msg);
-				let id = e.data.id;
-				console.log(id)
-				setTimeout(function(){
-					uni.navigateTo({
-						url:'/pages/applyHelp/second?id='+id
-					})
-				}, 1000);
-			})
-			.catch(e => {
-				obj.$api.msg(e.message);
-			});
-		},
-		navTo(url) {
-			uni.navigateTo({
-				url
-			});
-		}
-	}
-};
-</script>
-
-<style lang="scss">
-page {
-	background: $page-color-base;
-	min-height: 100%;
-}
-.cantent{
-	padding-bottom: 110rpx;
-}
-.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;
-	.list-name{
-		padding-top: 25rpx;
-		font-size: 35rpx;
-		padding-left: 15rpx;
-		padding-bottom: 10rpx;
-	}
-	.examine_list{
-		width: 100%;
-		.textarea-box{
-			width: 100%;
-			padding-bottom: 25rpx;
-			padding-left: 25rpx;
-			.textarea{
-				width: 100%;
-				font-size: 28rpx;
-				min-height: 150rpx;
-			}
-			input{
-				font-size: 28rpx;
-			}
-		}
-	}
-}
-.radio-list{
-	display: flex;
-	flex-wrap: wrap;
-	font-size: 28rpx;
-	padding-top: 30rpx;
-	.uni-label-pointer{
-		padding-right: 25rpx;
-		padding-bottom: 30rpx;
-	}
-}
-.mar-b{
-	margin-bottom: 120rpx;
-}
-.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: 180rpx;
-		font-size: 30rpx;
-		color: $font-color-dark;
-	}
-	.value{
-		width: 100%;
-		text-align: right;
-	}
-	.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;
-	}
-}
-.tit-tip {
-	color: #ff727e;
-	font-size: 36rpx;
-	padding: 10rpx 0 10rpx 20rpx;
-}
+				<input class="input" :disabled="disabled" v-model="address" placeholder="省市区"
+					placeholder-class="placeholder" />
+			</view>
+			<view class="row" v-if="status == ''" @click="selectDatePicker(type)">
+				<text class="tit">出生日期：</text>
+				<input class="input" type="text" v-model="birthday" disabled="true" placeholder-class="placeholder" />
+				<datetime ref='date-time' :type='type' :datestring='dateString' @change='dateTimeChange'>
+				</datetime>
+			</view>
+			<view class="row" v-if="status == 2">
+				<text class="tit">出生日期：</text>
+				<input class="input" type="text" v-model="birthday" disabled="true" placeholder-class="placeholder" />
+				<datetime ref='date-time' :type='type' :datestring='dateString' @change='dateTimeChange'>
+				</datetime>
+			</view>
+			<view class="row b-b">
+				<text class="tit">身份证号</text>
+				<input class="input" type="number" :disabled="disabled" v-model="card" placeholder="请填写身份证号"
+					placeholder-class="placeholder" />
+			</view>
+			<view class="row b-b" v-if="status =='' ">
+				<text class="tit">省市区</text>
+				<pickerAddress class="input" @change="onCityClick">{{address||'请选择省市区'}}</pickerAddress>
+			</view>
+			<view class="row b-b" v-if="status ==2 ">
+				<text class="tit">省市区</text>
+				<input class="input" :disabled="disabled" v-model="address" placeholder="省市区"
+					placeholder-class="placeholder" />
+			</view>
+			<view class="row b-b">
+				<text class="tit">详细地址</text>
+				<input class="input" v-model="addr" :disabled="disabled" placeholder="请填写详细地址"
+					placeholder-class="placeholder" />
+			</view>
+			<view class="row b-b">
+				<text class="tit">联系电话</text>
+				<input class="input" type="text" :disabled="disabled" v-model="phone" placeholder="请填写联系电话"
+					placeholder-class="placeholder" />
+			</view>
+			<view class="row b-b">
+				<text class="tit">工作单位</text>
+				<input class="input" type="text" :disabled="disabled" v-model="work" placeholder="请填写工作单位"
+					placeholder-class="placeholder" />
+			</view>
+			<view class="row b-b" v-if="status =='' ">
+				<text class="tit">单位性质</text>
+				<picker mode="selector" :range="checkedtList" @change="changeCheckedt" style="flex-grow: 1;">
+					<input class="input" disabled v-model="checked1" placeholder="请选择单位性质"
+						placeholder-class="placeholder" />
+				</picker>
+			</view>
+			<view class="row b-b" v-if="status ==2 ">
+				<text class="tit">单位性质</text>
+				<input class="input" :disabled="disabled" v-model="checked1" placeholder="请选择单位性质"
+					placeholder-class="placeholder" />
+			</view>
+		</view>
+		<view class="tit-tip">
+			信息选择
+		</view>
+		<view class="content_box">
+			<view class="row b-b" v-if="status =='' ">
+				<text class="tit">身份</text>
+				<picker mode="selector" :range="identityList" @change="changeidentity" style="flex-grow: 1;">
+					<input class="input" disabled v-model="identity" placeholder="请选择身份"
+						placeholder-class="placeholder" />
+				</picker>
+			</view>
+			<view class="row b-b" v-if="status =='' ">
+				<text class="tit">婚姻状态</text>
+				<picker mode="selector" :range="maritalList" @change="changeMarital" style="flex-grow: 1;">
+					<input class="input" disabled v-model="marital" placeholder="请选择婚姻状态"
+						placeholder-class="placeholder" />
+				</picker>
+			</view>
+			<view class="row b-b" v-if="status =='' ">
+				<text class="tit">是否医保</text>
+				<picker mode="selector" :range="insuranceList" @change="changeInsurance" style="flex-grow: 1;">
+					<input class="input" disabled v-model="insurance" placeholder="请选择是否医保"
+						placeholder-class="placeholder" />
+				</picker>
+			</view>
+			<view class="row b-b" v-if="status =='' ">
+				<text class="tit">对象特征</text>
+				<picker mode="selector" :range="characteristicsList" @change="changeCharacteristics"
+					style="flex-grow: 1;">
+					<input class="input" disabled v-model="characteristics" placeholder="请选择是否医保"
+						placeholder-class="placeholder" />
+				</picker>
+			</view>
+			<view class="row b-b" v-if="status =='' " style="border-bottom: none;">
+				<text class="tit" style="width: 400rpx;">制困原因（最多选三项）</text>
+			</view>
+			<view class="" style="padding-left: 50rpx;border-bottom: 1rpx solid #f8f6f6;" v-if="ready">
+				<checkbox-group style="display: inline-block;" @change="checkMaleLikes">
+					<label class="checkbox" v-for="item in maleLikeList" :key="item.name">
+						<checkbox :checked="item.cheched" color="#E62129"
+							style="transform:scale(0.6);margin: 0;padding: 0;" :value="item.name" />{{ item.name }}
+					</label>
+				</checkbox-group>
+			</view>
+
+		</view>
+		<!-- 基本信息家庭成员情况 -->
+		<view class="tit-tip">
+			基本信息家庭成员情况
+		</view>
+		<view v-for="(ls,findex) in datalist" :key="">
+			<view class="flex item-list">
+				<view class="list-name">家庭成员({{findex+1}})</view>
+				<view class="flex">
+					<view class="add-tip" @click="addlist(findex)" v-if="findex == (datalist.length -1)">新增</view>
+					<view class="add-tip" @click="dellist(findex)" style="margin-left: 20rpx;" v-if="findex != 0">删除
+					</view>
+				</view>
+
+			</view>
+			<view class="content_box" style="padding-left: 40rpx;margin-bottom: 10rpx;">
+				<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="tit-tip">
+			详细情况
+		</view>
+		<view class="item-list">
+			<view class="list-name">经济状况</view>
+		</view>
+		<view class="content_box">
+			<view class="row b-b">
+				<text class="tit">本人月收入（元）</text>
+				<input class="input" type="number" v-model="yue" :disabled="disabled" placeholder="请填写本人月收入（元）"
+					placeholder-class="placeholder" />
+			</view>
+			<view class="row b-b">
+				<text class="tit">家庭年度总收入（元）</text>
+				<input class="input" type="number" v-model="nian" :disabled="disabled" placeholder="请填写家庭年度总收入（元）"
+					placeholder-class="placeholder" />
+			</view>
+			<view class="row b-b">
+				<text class="tit">家庭年人均收入（元）</text>
+				<input class="input" type="number" v-model="all" :disabled="disabled" placeholder="请填写家庭年人均收入（元）"
+					placeholder-class="placeholder" />
+			</view>
+		</view>
+		<view class="content_box">
+			<view class="examine_list">
+				<view class="examine_name">申请帮扶类型</view>
+				<view class="textarea-box" @tap="handleTap('picker')" v-if="status == ''">
+					<input class="input" @focus='outFocus' v-model="hpleType" type="text" placeholder="请选择您的申请帮扶类型"
+						placeholder-class="placeholder" />
+				</view>
+				<view class="textarea-box" v-if="status == 2">
+					<input class="input" @focus='outFocus' v-model="hpleType" type="text" placeholder="请选择您的申请帮扶类型"
+						placeholder-class="placeholder" />
+				</view>
+			</view>
+		</view>
+		<lb-picker ref="picker" mode="selector" :list="list" @change="handleChange" @touchmove.prevent
+			@confirm="handleConfirm" @cancel="handleCancel">
+		</lb-picker>
+		<view class="content_box">
+			<view class="examine_list">
+				<view class="examine_name">帮扶说明</view>
+				<view class="textarea-box">
+					<textarea class="textarea" :disabled="disabled" v-model="explain" maxlength="-1"
+						placeholder-style="color:#999999" placeholder="如：关爱父母敬老爱幼等" @blur="bindTextAreaBlur"
+						auto-height />
+				</view>
+			</view>
+		</view>
+		<view class="content_box">
+			<view class="examine_list">
+				<view class="examine_name">帮扶情况描述</view>
+				<view class="textarea-box">
+					<textarea class="textarea" :disabled="disabled" v-model="content" maxlength="-1"
+						placeholder-style="color:#999999" placeholder="注：1.为了更加详细了解您的困难情况，请您陈述材料完整详细不少于500字。2.请您附上相关证明材料，如医疗材料：入院病案首页、出入院记录、检查报告、医疗票据选取三种以上，其他证明材料。" @blur="bindTextAreaBlur1" auto-height />
+				</view>
+			</view>
+		</view>
+		<view class="content_box mar-b">
+			<view class="examine_list">
+				<view class="examine_name">上传凭证<text>(请您上传相关证明材料)</text></view>
+				<view class="examine_img">
+					<!-- <img-upload :imgArr="imgList" imgCount="6" ref="imgUpload"></img-upload> -->
+					<view class="add-img-box flex_item" v-if="status == ''">
+						<view class="add-img-item" v-for="(item, index) in imgList" :key="index">
+							<image class="add-img" @click.stop="imgInfo(index)" :src="item.url" mode="aspectFill">
+							</image>
+							<image class="add-img-del" @click.stop="delImg(index)" src="/static/img/delete.png"></image>
+						</view>
+						<view v-if='imgCount > 0' class="add-img-item" @click.stop="scImg()">
+							<image class="add-img" src="/static/img/add.png"></image>
+						</view>
+					</view>
+					<view class="add-img-box flex_item" v-if="status == 2">
+						<view class="add-img-item" v-for="(item, index) in imgList" :key="index">
+							<image class="add-img" @click.stop="imgInfo(index)" :src="item.url" mode="aspectFill">
+							</image>
+						</view>
+					</view>
+				</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 {
+		upload,
+		add_help
+	} from '@/api/index.js';
+	import {
+		getList,
+		helpdetail
+	} from '@/api/applyHelp.js';
+	import datetime from '@/components/DateTimePicker/DateTimePicker.vue'
+	import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
+	import LbPicker from '@/components/lb-picker/index.vue';
+	export default {
+		components: {
+			uniList,
+			uniListItem,
+			pickerAddress,
+			datetime,
+			LbPicker
+		},
+		data() {
+			return {
+				ready: true,
+				id: '',
+				name: '', //姓名
+				age: '', //年龄
+				sex: '', //性别
+				card: '', //身份证号
+				phone: '', //电话
+				address: '', //
+				addr: '',
+				work: '', //工作单位
+				checkedList: ['团员', '预备党员', '党员', '群众'], //政治面貌列表
+				checkedtList: ['国有企业', '私营企业', '外资企业', '事业单位', '个位经营', '无'], //单位性质列表
+				identityList: ['居民', '村民', '农民工', '在岗', '下岗', '离退休', '病退病休'], //身份列表
+				maritalList: ['已婚', '未婚', '离异', '丧偶'], //婚姻状况列表
+				insuranceList: ['是', '否'], //是否医保列表
+				characteristicsList: ['低保对象', '重度残疾', '低保边缘对象', '孤儿、孤寡老人', '因灾、因病致穷家庭', '其它'], //对象特征列表
+				maleLikeList: [{ //致困原因（最多选三项）
+					cheched: false,
+					name: '意外灾害',
+				}, {
+					vcheched: false,
+					name: '本人大病',
+				}, {
+					cheched: false,
+					name: '子女上学',
+				}, {
+					cheched: false,
+					name: '收入低无法维持基本生活',
+				}, {
+					cheched: false,
+					name: '残疾',
+				}, {
+					cheched: false,
+					name: '供养直系亲属大病',
+				}, {
+					cheched: false,
+					name: '下岗失业',
+				}, {
+					cheched: false,
+					name: '其它',
+				}],
+				datalist: [{
+					// id:1,
+					name: "",
+					relationship: '',
+					card: '',
+					school: '',
+					health: '',
+					money: "",
+				}], //家庭成员情况列表
+				maleLike: '', // 制困原因
+				characteristics: '', //对象特征
+				insurance: '', //是否医保
+				marital: '', //婚姻状况
+				identity: '', //身份
+				current: '',
+				checked: '',
+				current1: '',
+				checked1: '',
+				dateString: '',
+				birthday: '请选择出生日期', //出生日期
+				type: 'date',
+				status: '', //审核通过
+				disabled: false,
+				yue:'',
+				nian:'',
+				all:'',
+				cid:'',
+				hpleType:'',
+				explain:'',
+				content:'',//孝善情况
+				imgList: [],
+				cloudimgList: [],
+				imgCount:9,//最多支持6张上传，可以修改
+				id:'',
+				list:[],//筹款类型
+			};
+		},
+		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: {
+			// 选择政治面貌
+			changeChecked(e) {
+				console.log(e)
+				this.checked = this.checkedList[e.detail.value]
+			},
+			// 选择单位性质
+			changeCheckedt(e) {
+				console.log(e)
+				this.checked1 = this.checkedtList[e.detail.value]
+			},
+			// 选择身份
+			changeidentity(e) {
+				console.log(e)
+				this.identity = this.identityList[e.detail.value]
+			},
+			// 选择婚姻状态
+			changeMarital(e) {
+				this.marital = this.maritalList[e.detail.value]
+			},
+			// 选择是否医保
+			changeInsurance(e) {
+				this.insurance = this.insuranceList[e.detail.value]
+			},
+			// 选择对象特征
+			changeCharacteristics(e) {
+				this.characteristics = this.characteristicsList[e.detail.value]
+			},
+			// 制困原因选择限制
+			checkMaleLikes(e) {
+				let arr = e.detail.value
+				let len = arr.length
+				let obj = this
+				console.log(e)
+				if (len <= 3) {
+					obj.maleLike = e.detail.value.join(',');
+				} else {
+					obj.$api.msg('最多选择三个')
+					let arr2 = e.detail.value.slice(0, 3)
+					console.log(arr2, 'arr2')
+					obj.maleLike = arr2.join(',');
+				}
+				for (let i = 0; i < obj.maleLikeList.length; i++) {
+					if (obj.maleLike.indexOf(obj.maleLikeList[i].name) != -1) {
+						obj.maleLikeList[i].cheched = true;
+					} else {
+						obj.maleLikeList[i].cheched = false;
+					}
+				}
+				obj.reload()
+			},
+			// 表单刷新
+			reload() {
+				this.ready = false
+				this.$nextTick(function() {
+					this.ready = true
+				})
+			},
+			//增加家庭成员
+			addlist(index) {
+				let obj = this
+				let addobj = {
+					name: "",
+					relationship: '',
+					card: '',
+					school: '',
+					health: '',
+					money: "",
+				}
+				obj.datalist.push(addobj)
+			},
+			dellist(index) {
+				this.datalist.splice(index, 1)
+			},
+			radioChange(evt) {
+				this.checked = evt.detail.value;
+			},
+			radioChange1(evt) {
+				this.checked1 = evt.detail.value;
+			},
+			// 显示日期选择器
+			selectDatePicker(type, index) {
+				this.type = type;
+				this.index = index;
+				this.$refs['date-time'].show();
+			},
+			dateTimeChange(value) {
+				this.birthday = value;
+				console.log(value)
+			},
+			// 选中城市切换
+			onCityClick(res) {
+				let obj = this;
+				let province = res.data[0];
+				let city = res.data[1];
+				let district = res.data[2];
+				obj.address = province + city + district;
+				console.log(obj.address, '城市');
+			},
+			//申请详情
+			helpDetail() {
+				let obj = this;
+				helpdetail({
+						id: obj.id
+					}).then(({
+						data
+					}) => {
+						obj.name = data.name;
+						obj.sex = data.sex;
+						obj.card = data.card;
+						obj.phone = data.phone;
+						obj.work = data.work;
+						obj.birthday = data.birthday;
+						obj.age = data.age;
+						console.log(data.address)
+						let addressDateil = data.address.split(',');
+						console.log(addressDateil)
+						obj.address = addressDateil[0];
+						obj.addr = addressDateil[1];
+						obj.checked = data.politic;
+						if (obj.checked == '团员') {
+							obj.current = 0;
+						}
+						if (obj.checked == '预备党员') {
+							obj.current = 1;
+						}
+						if (obj.checked == '党员') {
+							obj.current = 2;
+						}
+						if (obj.checked == '群众') {
+							obj.current = 3;
+						}
+						obj.checked1 = data.properties;
+						if (obj.checked1 == '国有企业') {
+							obj.current1 = 0;
+						}
+						if (obj.checked1 == '私营企业') {
+							obj.current1 = 1;
+						}
+						if (obj.checked1 == '外资企业') {
+							obj.current1 = 2;
+						}
+						if (obj.checked1 == '事业单位') {
+							obj.current1 = 3;
+						}
+						if (obj.checked1 == '个位经营') {
+							obj.current1 = 4;
+						}
+						if (obj.checked1 == '无') {
+							obj.current1 = 5;
+						}
+					})
+					.catch(err => {
+						console.log(err);
+					});
+			},
+			Tosecond() {
+				uni.navigateTo({
+					url: '/pages/applyHelp/second?id=' + this.id + '&status=2'
+				})
+			},
+			//提交
+			confirm() {
+
+				let obj = this;
+				if (obj.name == '') {
+					this.$api.msg('请填写您的姓名！');
+					return;
+				}
+				if (obj.age == '') {
+					this.$api.msg('请填写您的年龄！');
+					return;
+				}
+				if (obj.sex == '') {
+					this.$api.msg('请填写您的性别！');
+					return;
+				}
+				if (obj.checked == '') {
+					this.$api.msg('请填写您的政治面貌！');
+					return;
+				}
+				if (obj.birthday == '' || obj.birthday == '请选择出生日期') {
+					this.$api.msg('请选择出生日期！');
+					return;
+				}
+				if (obj.card == '') {
+					this.$api.msg('请填写您的身份证号！');
+					return;
+				}
+				if (obj.address == '') {
+					this.$api.msg('请选择省市区！');
+					return;
+				}
+				if (obj.addr == '') {
+					this.$api.msg('请填写您的详细地址！');
+					return;
+				}
+				if (obj.phone == '') {
+					this.$api.msg('请填写您的联系电话！');
+					return;
+				}
+				if (obj.work == '') {
+					this.$api.msg('请填写您的工作单位！');
+					return;
+				}
+				if (obj.checked1 == '') {
+					this.$api.msg('请填写您的单位性质！');
+					return;
+				}
+				let data = {};
+				if (obj.id) {
+					data = {
+						id: obj.id,
+						name: obj.name,
+						age: obj.age,
+						sex: obj.sex,
+						card: obj.card,
+						phone: obj.phone,
+						address: obj.address + ',' + obj.addr,
+						work: obj.work,
+						politic: obj.checked, //政治面貌
+						birthday: obj.birthday,
+						properties: obj.checked1 //单位性质
+					}
+				} else {
+					data = {
+						name: obj.name,
+						age: obj.age,
+						sex: obj.sex,
+						card: obj.card,
+						phone: obj.phone,
+						address: obj.address + ',' + obj.addr,
+						work: obj.work,
+						politic: obj.checked, //政治面貌
+						birthday: obj.birthday,
+						properties: obj.checked1 //单位性质
+					}
+				}
+				add_help(data).then(function(e) {
+						obj.$api.msg(e.msg);
+						let id = e.data.id;
+						console.log(id)
+						setTimeout(function() {
+							uni.navigateTo({
+								url: '/pages/applyHelp/second?id=' + id
+							})
+						}, 1000);
+					})
+					.catch(e => {
+						obj.$api.msg(e.message);
+					});
+			},
+			navTo(url) {
+				uni.navigateTo({
+					url
+				});
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	page {
+		background: $page-color-base;
+		min-height: 100%;
+	}
+
+	.cantent {
+		padding-bottom: 110rpx;
+	}
+
+	.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;
+
+		.list-name {
+			padding-top: 25rpx;
+			font-size: 35rpx;
+			padding-left: 15rpx;
+			padding-bottom: 10rpx;
+		}
+
+		.examine_list {
+			width: 100%;
+
+			.textarea-box {
+				width: 100%;
+				padding-bottom: 25rpx;
+				padding-left: 25rpx;
+
+				.textarea {
+					width: 100%;
+					font-size: 28rpx;
+					min-height: 150rpx;
+				}
+
+				input {
+					font-size: 28rpx;
+				}
+			}
+		}
+	}
+
+	.radio-list {
+		display: flex;
+		flex-wrap: wrap;
+		font-size: 28rpx;
+		padding-top: 30rpx;
+
+		.uni-label-pointer {
+			padding-right: 25rpx;
+			padding-bottom: 30rpx;
+		}
+	}
+
+	.mar-b {
+		margin-bottom: 120rpx;
+	}
+
+	.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: 180rpx;
+			font-size: 30rpx;
+			color: $font-color-dark;
+		}
+
+		.value {
+			width: 100%;
+			text-align: right;
+		}
+
+		.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;
+		}
+	}
+
+	.tit-tip {
+		color: #ff727e;
+		font-size: 36rpx;
+		padding: 10rpx 0 10rpx 20rpx;
+	}
+
+	.checkbox {
+		display: inline-block;
+		font-size: 24rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #191919;
+		padding-right: 30rpx;
+		padding-bottom: 10rpx;
+	}
+
+	.item-list {
+		padding: 25rpx 45rpx;
+		color: rgba(34, 34, 34, 1);
+		font-weight: 400;
+		font-size: 35rpx;
+		display: flex;
+		justify-content: space-between;
+		background-color: #fff;
+
+		.list-name {}
+
+		.add-tip {
+			color: #E62129 !important;
+		}
+	}
 </style>

pages/applyHelp/second.vue

@@ -1,6 +1,5 @@
      <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="red">信息选择</view>