xhlred/pages/applyHelp/index.vue

     <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>
		<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>
		<view class="content_box">
			<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:'',//工作单位
			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: {
		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;
	}
}

</style>