cbred/pages/applyHelp/fourth.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="" @click="navTo('/pages/applyHelp/third?id='+id)">家庭成员情况</view>
			<view class="red">详细情况</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="" @click="navTo('/pages/applyHelp/third?id='+id+'&status=2')">家庭成员情况</view>
			<view class="red">详细情况</view>
		</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 LbPicker from '@/components/lb-picker/index.vue';
import { upload,add_four_help } from '@/api/index.js';
import { getList,helpdetail } from '@/api/applyHelp.js';
export default {
	components: {
		uniList,
		uniListItem,
		LbPicker,
	},
	data() {
		return {
			yue:'',
			nian:'',
			all:'',
			cid:'',
			hpleType:'',
			explain:'',
			content:'',//孝善情况
			imgList: [],
			cloudimgList: [],
			imgCount:9,//最多支持6张上传，可以修改
			id:'',
			list:[],//筹款类型
			
			status:'',//审核通过
			disabled:false,
			
		};
	},
	onUnload() {
		uni.navigateTo({
			url: '/pages/applyHelp/cation'
		});
	},
	onLoad(option) {
		if(option.id){
			this.id = option.id;
			this.helpDetail();
		}
		if(option.status){
			this.status = option.status;
			this.disabled = true;
		}
		this.loadData();//筹款类型
	},
	methods: {
		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);
			});
		},
		//申请详情
		helpDetail(){
			let obj = this;
			helpdetail({
				id:obj.id
			}).then(({ data }) => {
				let imgArr = data.img_list;
				obj.imgList = imgArr.map(item => ({
				        url:item
				}));
				console.log(obj.imgList,'imgList')
				obj.yue = data.mincome;
				obj.nian = data.yincome;
				obj.all = data.jincome;
				obj.cid = data.cid;
				obj.explain = data.explain;
				obj.content = data.content;
				obj.hpleType = data.cname;
			})
				.catch(err => {
				console.log(err);
			});
		},
		Tosecond(){
			uni.navigateTo({
				url:'/pages/applyHelp/cation'
			})
		},
		//提交
		confirm() {
			let obj = this;
			if(obj.yue == '' && obj.yue < 0){
				this.$api.msg('请填写本人月收入（元）！');
				return;
			}
			if(obj.nian == '' && obj.nian < 0){
				this.$api.msg('请填写家庭年度总收入（元）！');
				return;
			}
			if(obj.all == '' && obj.all < 0){
				this.$api.msg('请填写家庭年人均收入（元）！');
				return;
			}
			if(obj.cid == ''){
				this.$api.msg('请选择筹款类型！');
				return;
			}
			if(obj.explain == ''){
				this.$api.msg('请填写求助说明！');
				return;
			}
			if(obj.content == ''){
				this.$api.msg('请填写孝善情况！');
				return;
			}
			if (obj.imgList.length < 1) {
				uni.showToast({
					title: '上传凭证',
					icon: 'none'
				});
				return;
			}
			for (let i = 0; i < obj.imgList.length; i++) {
				obj.cloudimgList.push(obj.imgList[i].url);
			}
			let arr = obj.cloudimgList.join(';');
			console.log(arr,'arr')
			add_four_help({
				id:obj.id,
				mincome:obj.yue,
				yincome:obj.nian,
				jincome:obj.all,
				cid:obj.cid,
				explain:obj.explain,
				content:obj.content,
				img_list:arr,
			}).then(function(e) {
				obj.$api.msg(e.msg);
				setTimeout(function(){
					uni.navigateTo({
						url:'/pages/applyHelp/cation'
					})
				}, 2000);
			})
			.catch(e => {
				obj.$api.msg(e.message);
			});
		},
		handleTap(name) {
			this.$refs[name].show()
		},
		handleCancel(item) {
		},
		handleChange(item) {
		},
		handleConfirm(item) {
			let obj = this;
			obj.hpleType = item.item.cate_name;
			obj.cid = item.item.id;
		},
		//多张上传图片
		scImg() {
			let obj = this;
			upload({
				file: ''
			})
				.then(e => {
					obj.imgList = [...obj.imgList, ...e];
					console.log(obj.imgList,'imgList')
					obj.imgCount = 6 - obj.imgList.length;
				})
				.catch(e => {});
		},
		//点击图片显示大图
		imgInfo(i) {
			let tempList = [];
			this.imgList.forEach(e => {
				tempList.push(e.url);
			});
			//显示图片
			uni.previewImage({
				current: i,
				loop: false,
				urls: tempList,
				indicator: 'default'
			});
		},
		//删除图片
		delImg(i) {
			uni.showModal({
				content: '确定删除这张吗',
				success: res => {
					if (res.confirm) {
						this.imgList.splice(i, 1);
						this.imgCount++;
					} else if (res.cancel) {
					}
				}
			});
		},
		//文本输入框
		 bindTextAreaBlur: function (e) {
			 this.explain = e.detail.value
		},
		bindTextAreaBlur1: function (e) {
			 this.content = e.detail.value
		},
		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;
	}
}
.item-list{
	padding: 25rpx 45rpx;
	color:rgba(34,34,34,1);
	font-weight:400;
	font-size: 35rpx;
	.list-name{
		}
	
}
.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;
	.examine_list{
		width: 100%;
		.textarea-box{
			width: 100%;
			padding-bottom: 35rpx;
			padding-left: 25rpx;
			.textarea{
				width: 100%;
				font-size: 28rpx;
				min-height: 150rpx;
			}
			input{
				font-size: 28rpx;
			}
		}
	}
}
.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: 300rpx;
		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: 33.33%;
	position: relative;
	.add-img {
		padding: 0rpx 10rpx;
		width: 100%;
		height: 214rpx;
	}
}
.add-img-del {
	position: absolute;
	width: 40rpx;
	height: 40rpx;
	right: 10rpx;
	top: 0;
	// 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>