Web_TracerMethodology/pages/situationDetail/components/bottom-popup.vue

<template>
	<view class="popup-page" v-show="showModalStatus">
		<view class="popup-box" v-show="showModalStatus">
			<view class="item-box" v-for="(item,index) in planList">
				<view class="radio-item" @click="toggleSelect(item,index)">
					<image class="icon" :src="`/static/${item.isChecked ? 'check-radio' : 'check-no'}.png`"></image>
				</view>
				<text :class="item.nameClass">{{item.name}}（{{item.startDate}} ~ {{item.endDate}}）</text>
				<view class="compeleted-box" v-if="item.isCompeleted">
					<text class="compeleted-text" >已完成</text>
				</view>
				<view class="continued-box" v-if="item.isContinued">
					<text class="continued-text" >进行中</text>
				</view>
				<image class="checked-pic" v-if="item.isContinued" src="../../../static/checkStatus.png"></image>
			</view>
		</view>
		<view class="btn-confirm" @click="saveChange">
			<text class="btn-text">确定</text>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			situationID:String,
		},
		data() {
			return {
				currentType:this.type,//当前类型
				selectedPlanID:'',//选择的计划id
				showModalStatus:false,//查核计划选择弹框
				flag:0,//是否为进行中计划，判断下一个未开始的查核计划
				// isCompeleted:false,//计划进行状态，是否已完成，状态的显示
				// isContinued:true,//是否进行中
				planList:[
					{
						id:'1',
						name:'第1次查核',
						startDate:'2021-02-05',
						endDate:'2021-02-10',
						status:3,
				  },
					{
						id:'2',
						name:'第2次查核',
						startDate:'2021-02-05',
						endDate:'2021-02-10',
						status:2
					},
					{
						id:'3',
						name:'第3次查核',
						startDate:'2021-02-05',
						endDate:'2021-02-10',
						status:1
					},
					{
						id:'4',
						name:'第4次查核',
						startDate:'2021-02-05',
						endDate:'2021-02-10',
						status:1
					},
				],//查核计划列表
			}
		},
		created: function() {
			// this.$store.dispatch({
			// 	type: 'situationDetail/commActions',
			// 	payload: {
			// 		key: 'planlList',
			// 		data:{
			// 			situationId:this.situationID
			// 		}
			// 	}
			// }).then((data) => {
			// 	console.log(data);
			// 	if (data) {
			// 		this.planList=data.map((item,index)=>{
			// 			if(item.status==2){
			// 				this.flag=index;
			// 			}
			// 			return {
			// 				id:item.id,
			// 				name:item.name,
			// 				startDate:item.startDate,
			// 				endDate:item.endDate,
			// 				status:item.status,
			// 				isCompeleted:item.status==3?true:false,
			// 				isContinued:item.status==2?true:false,
			// 				isChecked:false,
			// 				nameClass:index==this.flag+1?'item-text':'disable-text',
			// 			}
			// 		});
			// 	}
			// });
			this.planList=this.planList.map((item,index)=>{
				if(item.status==2){
					this.flag=index;
				}
				return {
					id:item.id,
					name:item.name,
					startDate:item.startDate,
					endDate:item.endDate,
					status:item.status,
					isCompeleted:item.status==3?true:false,
					isContinued:item.status==2?true:false,
					isChecked:false,
					nameClass:index==this.flag+1?'item-text':'disable-text',
				}
			});
		},
		methods: {
			show(){
				this.showModalStatus=true;
			},	
			hide(){
				this.showModalStatus=false;
			},
			hidePopupBox(){
				this.hide();
			},
			toggleSelect(item,index) {
				this.planList.map((item,index)=>{
					item.isChecked=false;
				});
				if(index==this.flag+1){
					this.planList[index].isChecked=true;
					this.selectedPlanID=item.id;
				}
				else{
					return;
				}
				
			},
			saveChange(){
				this.$store.dispatch({
					type: 'situationDetail/commActions',
					payload: {
						key: 'planlAdvance',
						data:{
							checkId:this.selectedPlanID
						}
					}
				}).then((data)=>{
					console.log(data);
					this.hide();
				});
			},
		},
	}
</script>

<style lang="less">
	.popup-page{
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		// background: rgba(0,0,0,0.5);
		background-color: #FFFFFF;
		.popup-box{
			width: 100%;
			position: fixed;
			top: 0rpx;
			left: 0rpx;
			z-index: 2000;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			.item-box{
				width: 100%;
				height: 87.5rpx;
				border: 0.62rpx solid #DADEE6;
				.radio-item {
					float: left;
					margin-left: 25rpx;
					margin-top: 30rpx;
				
					.icon {
						width: 25rpx;
						height: 25rpx;
					}
				}
				.item-text{
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #292C33;
					line-height: 87.5rpx;
					margin-left: 25rpx;
					float: left;
				}
				.disable-text{
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #666E80;
					line-height: 87.5rpx;
					margin-left: 25rpx;
					float: left;
				}
				.compeleted-box{
					width: 75rpx;
					height: 31.25rpx;
					border-radius: 8px;
					background: rgba(41, 204, 150, 0.1);
					text-align: center;
					float: left;
					margin-top: 28.12rpx;
					.compeleted-text{
						font-size: 17.5rpx;
						font-family: SourceHanSansCN-Medium, SourceHanSansCN;
						font-weight: 500;
						color: #29CC96;
						line-height: 31.25rpx;
					}
				}
				.continued-box{
					width: 75rpx;
					height: 31.25rpx;
					border-radius: 8px;
					background: rgba(255, 204, 102, 0.1);
					text-align: center;
					float: left;
					margin-top: 28.12rpx;
					.continued-text{
						width: 75rpx;
						height: 31.25rpx;
						font-size: 17.5rpx;
						font-family: SourceHanSansCN-Medium, SourceHanSansCN;
						font-weight: 500;
						color: #FFAA00;
						line-height: 31.25rpx;
					}
				}
				.checked-pic{
					width: 19.37rpx;
					height: 14.37rpx;
					float: right;
					margin-top: 36.87rpx;
					margin-right: 25rpx;
				}
			}
		}
		.btn-confirm {
			width: 750rpx;
			height: 75rpx;
			background: #3377FF;
			position: fixed;
			bottom: 0rpx;

			.btn-text {
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 75rpx;
				margin-left: 352.5rpx;
			}
		}
	}
</style>