xhlred/pages/applyHelp/second.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="red">信息选择</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="status == 2">
			<view class="" @click="navTo('/pages/applyHelp/index?id='+id+'&status=2')">基本信息</view>
			<view class="red">信息选择</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="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 identity" :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="content_box">
			<view class="list-name">婚姻状况</view>
			<view class="uni-list">
				<radio-group @change="radioChange2">
					<view class="radio-list flex_item">
						<label class="uni-list-cell uni-list-cell-pd flex_item" v-for="(item, index) in marital" :key="item.name">
							<view><radio :disabled="disabled" style="transform:scale(0.7)" color='#FF727E' :value="item.name" :checked="index === current2" /></view>
							<view>{{item.name}}</view>
						</label>
					</view>
				</radio-group>
			</view>
		</view>
		<view class="content_box">
			<view class="list-name">是否医保</view>
			<view class="uni-list">
				<radio-group @change="radioChange3">
					<view class="radio-list flex_item">
						<label class="uni-list-cell uni-list-cell-pd flex_item" v-for="(item, index) in insurance" :key="item.name">
							<view><radio  :disabled="disabled" style="transform:scale(0.7)" color='#FF727E' :value="item.name" :checked="index === current3" /></view>
							<view>{{item.name}}</view>
						</label>
					</view>
				</radio-group>
			</view>
		</view>
		<view class="content_box">
			<view class="list-name">对象特征</view>
			<view class="uni-list">
				<radio-group @change="radioChange4">
					<view class="radio-list flex_item">
						<label class="uni-list-cell uni-list-cell-pd flex_item" v-for="(item, index) in characteristics" :key="item.name">
							<view><radio :disabled="disabled" style="transform:scale(0.7)" color='#FF727E' :value="item.name" :checked="index === current4" /></view>
							<view>{{item.name}}</view>
						</label>
					</view>
				</radio-group>
			</view>
		</view>
		<view class="content_box">
			<view class="list-name">致困原因（最多选三项）</view>
			<view class="uni-list">
				<checkbox-group @change="checkboxChange">
					<view class="radio-list flex_item">
						<label class="uni-list-cell uni-list-cell-pd flex_item" v-for="item in maleLike" :key="item.name">
							<view>
								<checkbox :disabled="disabled" :value="item.name" style="transform:scale(0.7)" color='#FF727E' :checked="item.checked" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</view>
				</checkbox-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 LbPicker from '@/components/lb-picker/index.vue'
import { upload,add_two_help } from '@/api/index.js';
import { getList,helpdetail } from '@/api/applyHelp.js';
export default {
	components: {
		uniList,
		uniListItem,
		LbPicker
	},
	data() {
		return {
			identity:[{//身份
				value: '1',
				name: '居民'
			},{
				value: '2',
				name: '村民'
			},{
				value: '3',
				name: '农民工'
			},{
				value: '4',
				name: '在岗'
			},{
				value: '5',
				name: '下岗'
			},{
				value: '6',
				name: '离退休'
			},{
				value: '7',
				name: '病退病休'
			}],
			current1: '',
			checked:'',
			
			marital:[{//婚姻状况
				value: '1',
				name: '已婚'
			},{
				value: '2',
				name: '未婚'
			},{
				value: '3',
				name: '离异'
			},{
				value: '4',
				name: '丧偶'
			}],
			current2: '',
			checked2:'',
			
			insurance:[{//医保
				value: '1',
				name: '是'
			},{
				value: '2',
				name: '否'
			}],
			current3: '',
			checked3:'',
			
			characteristics:[{//对象特征
				value: '1',
				name: '低保对象'
			},{
				value: '2',
				name: '重度残疾'
			},{
				value: '3',
				name: '低保边缘对象'
			},{
				value: '4',
				name: '孤儿、孤寡老人'
			},{
				value: '5',
				name: '因灾、因病致穷家庭'
			},{
				value: '6',
				name: '其它'
			}],
			current4:'',
			checked4:'',
			
			maleLike:[{//致困原因（最多选三项）
				value: '1',
				name: '意外灾害'
			},{
				value: '2',
				name: '本人大病'
			},{
				value: '3',
				name: '子女上学'
			},{
				value: '4',
				name: '收入低无法维持基本生活'
			},{
				value: '5',
				name: '残疾'
			},{
				value: '6',
				name: '供养直系亲属大病'
			},{
				value: '7',
				name: '下岗失业',
			},{
				value: '8',
				name: '其它'
			}],
			currentArr: [], // 当前用户想要的选项，最大为5
			hasPass: false, // 用户之前是否选择过，是为true
			oldArr: [], // 上一次的返回值
			
			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: {
		//申请详情
		helpDetail(){
			let obj = this;
			helpdetail({
				id:obj.id
			}).then(({ data }) => {
				obj.id = data.id;
				console.log(data)
				if(data.capacity){
					obj.checked = data.capacity;
					obj.type = 2;
					if(obj.checked == '居民'){
						obj.current1 = 0;
					}
					if(obj.checked == '村民'){
						obj.current1 = 1;
					}
					if(obj.checked == '农民工'){
						obj.current1 = 2;
					}
					if(obj.checked == '在岗'){
						obj.current1 = 3;
					}
					if(obj.checked == '下岗'){
						obj.current1 = 4;
					}
					if(obj.checked == '离退休'){
						obj.current1 = 5;
					}
					if(obj.checked == '病退病休'){
						obj.current1 = 6;
					}
				}
				if(data.matrimonial){
					obj.checked2 = data.matrimonial;
					if(obj.checked2 == '已婚'){
						obj.current2 = 0;
					}
					if(obj.checked2 == '未婚'){
						obj.current2 = 1;
					}
					if(obj.checked2 == '离异'){
						obj.current2 = 2;
					}
					if(obj.checked2 == '丧偶'){
						obj.current2 = 3;
					}
				}
				if(data.medical){
					obj.checked3 = data.medical;
					if(obj.checked3 == '是'){
						obj.current3 = 0;
					}
					if(obj.checked3 == '否'){
						obj.current3 = 1;
					}
				}
				if(data.aspect){
					obj.checked4 = data.aspect;
					if(obj.checked4 == '低保对象'){
						obj.current4 = 0;
					}
					if(obj.checked4 == '重度残疾'){
						obj.current4 = 1;
					}
					if(obj.checked4 == '低保边缘对象'){
						obj.current4 = 2;
					}
					if(obj.checked4 == '孤儿、孤寡老人'){
						obj.current4 = 3;
					}
					if(obj.checked4 == '因灾、因病致穷家庭'){
						obj.current4 = 4;
					}
					if(obj.checked4 == '其它'){
						obj.current4 = 5;
					}
					if(obj.checked4 == '病退病休'){
						obj.current4 = 6;
					}
				}
				if(data.poverty){
					let poverty = data.poverty.split(",");
					let values = poverty;
					let items = obj.maleLike;
					for (let i = 0, lenI = items.length; i < lenI; ++i) {
						let item = items[i]
						if(values.includes(item.name)){
							obj.$set(item,'checked',true)
						}else{
							obj.$set(item,'checked',false)
						}
					}
					obj.oldArr = values;
				}
			}).catch(err => {
				console.log(err);
			});
		},
		//提交
		confirm() {
			let obj = this;
			if(obj.oldArr == ''){
				this.$api.msg('请选择致困原因！');
				return;
			}
			if(obj.oldArr.length > 3){
				this.$api.msg('致困原因最多选三项！');
				return;
			}
			add_two_help({
				id:obj.id,
				capacity:obj.checked,
				matrimonial:obj.checked2,
				medical:obj.checked3,
				aspect:obj.checked4,
				poverty:obj.oldArr.toString(),
			}).then(function(e) {
				obj.$api.msg(e.msg);
				setTimeout(function(){
					uni.navigateTo({
						url:'/pages/applyHelp/third?id='+obj.id
					})
				}, 2000);
			})
			.catch(e => {
				obj.$api.msg(e.message);
			});
		},
		Tosecond(){
			uni.navigateTo({
				url:'/pages/applyHelp/third?id='+this.id+'&status=2'
			})
		},
		radioChange1(evt){
			this.checked = evt.detail.value;
			console.log(this.checked)
		},
		radioChange2(evt){
			this.checked2 = evt.detail.value;
			console.log(this.checked2)
		},
		radioChange3(evt){
			this.checked3 = evt.detail.value;
			console.log(this.checked3)
		},
		radioChange4(evt){
			this.checked4 = evt.detail.value;
			console.log(this.checked4)
		},
		 checkboxChange: function (e) { 
			if (e.detail.value.length > 3) { // 如果选择的个数超过3个
			  if (!this.hasPass) { // 当用户选择数量是第一次超过3
				this.hasPass = true
				if (e.detail.value.length > this.oldArr.length) { // 如果当前选择总数大于上一次选择总数（用户没有取消过选择）
				  this.currentArr = e.detail.value.slice(0, 3)
				  uni.showToast({
					title: '最多3个',
					icon: 'none'
				  })
				} else { // 如果当前选择总数小于上一次选择总数（用户取消部分选择）
				  let arr = []
				  for (var i = 0; i < this.currentArr.length; i++) {
					for (var j = 0; j < 3; j++) {
					  if (this.currentArr[i] === e.detail.value[j]) {
						arr.push(this.currentArr[i])
					  } else {
						continue
					  }
					}
				  }
				  this.currentArr = arr
				}
			  } else { // 当用户选择数量不是第一次超过3（这时候change事件的返回值里有不一定是用户想要的值，所以需要做判断）
				if (e.detail.value.length > this.oldArr.length) { // 用户又增加了选项
				  let n = e.detail.value.length
				  if (this.currentArr.length < 3) {
					this.currentArr.push(e.detail.value[n - 1])
				  } else {
					uni.showToast({
					  title: '最多3个',
					  icon: 'none'
					})
				  }
				} else { // 用户取消了部分选项
				  let arr = []
				  for (var i = 0; i < this.currentArr.length; i++) {
					let n = e.detail.value.indexOf(this.currentArr[i])
					if (n !== -1) {
					  arr.push(this.currentArr[i])
					} else {
					  continue
					}
				  }
				  this.currentArr = arr
				}
			  }
			} else { // 如果选择的个数小于等于3
			  if (this.hasPass) { // 不是第一次小于3，即之前多选过，后来又取消选择
				if (e.detail.value.length < this.oldArr.length) { // 用户取消了部分选择
				  let arr = []
				  for (var i = 0; i < this.currentArr.length; i++) {
					let n = e.detail.value.indexOf(this.currentArr[i])
					if (n !== -1) {
					  arr.push(this.currentArr[i])
					} else {
					  continue
					}
				  }
				  this.currentArr = arr
				} else { // 用户增加选择，增加的新选项在数组最后
				  let n = e.detail.value.length
				  this.currentArr.push(e.detail.value[n - 1])
				}
			  } else { // 是第一次小于3，这个最简单了，直接选了什么就给什么
				this.currentArr = e.detail.value
			  }
			  
			  if (e.detail.value.length === 0) { // 如果用户取消了全部选择，让hasPass为false，即下一次再选时就会判断为第一次选择
				this.hasPass = false
			  }
			}
			for (var i = 0, lenI = this.maleLike.length; i < lenI; ++i) { // 给用户的选项添加样式
			  this.maleLike[i].isChecked = false;
			  for (var j = 0, lenJ = this.currentArr.length; j < lenJ; ++j) {
				if (String(this.maleLike[i].value) === String(this.currentArr[j])) {
				  this.maleLike[i].isChecked = true
				  break
				}
			  }
			}
			this.oldArr = e.detail.value // 把当前返回值赋值给上一次的返回值
			console.log(this.oldArr,88)
		},
		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;
	}
}
.content_box {
	background-color: #ffffff;
	padding: 0rpx 25rpx;
	margin: 25rpx auto;
	.list-name{
		padding-top: 25rpx;
		font-size: 35rpx;
		padding-left: 15rpx;
		padding-bottom: 10rpx;
	}
}
.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;
	}
}
.radio-list{
	display: flex;
	flex-wrap: wrap;
	font-size: 28rpx;
	padding-top: 30rpx;
	.uni-label-pointer{
		padding-right: 25rpx;
		padding-bottom: 30rpx;
	}
}
.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;
}		
</style>