Web_TracerMethodology/components/index-list/index-list.vue

<template>
	<view class="container">
		<scroll-view   scroll-y="true" class="scroll-Y" 
		>
			<view class="box" v-for="item in options">
				  <view class="letter">{{item.letter}}</view>
				  <view class="listWrap">
				  	   <view class="list" v-for="val in item.data" @click="listClickHandle(val)">
						     <view class="iconWrap">
						     	  <image v-if="isSelectAll||checkedListIds.includes(val.id)" class="checkedIcon" src="../../static/check-checkbox.png" mode=""></image>
						     </view>
				  	   	     <text class="mainText">{{val.main}}</text>
							 <text class="subText">{{val.sub}}</text>
				  	   </view>
				  </view>
			</view>
		</scroll-view> 
	</view>
</template>

<script>
	export default {
		name:"index-list",
		props:{
			checkedResponsibleList:Array,
			options:Array,
		},
		data() {
			return {
				checkedList:[],
				checkedListIds:[],
				isSelectAll:false
			};
		},
		computed:{
             
		},
		watch:{
	         checkedResponsibleList:function(newVal,oldVal){
				  // console.log({newVal,oldVal});
				  if(newVal.length != oldVal.length){
					  this.checkedListIds = JSON.parse(JSON.stringify(newVal)).map(item=>item.id);
					  this.checkedList = JSON.parse(JSON.stringify(newVal));
					  this.$emit("listClick",this.checkedList);
				  }
				  
			 }
		},
		mounted() {
			this.checkedListIds = JSON.parse(JSON.stringify(this.checkedResponsibleList)).map(item=>item.id);
			this.checkedList = JSON.parse(JSON.stringify(this.checkedResponsibleList));
			// console.log(this.checkedListIds);
		},
		methods:{
			listClickHandle(val){
				const tempIdsArr = JSON.parse(JSON.stringify(this.checkedListIds));
				const tempArr = JSON.parse(JSON.stringify(this.checkedList));
				const data = JSON.parse(JSON.stringify(val));
				// console.log({tempIdsArr,tempArr});
				// console.log(tempIdsArr.includes(data.id));
				
				if(tempIdsArr.includes(data.id)){
					  this.isSelectAll = false;
					  tempIdsArr.splice(tempIdsArr.indexOf(data.id),1);
					  this.checkedList = tempArr.filter(item=>item.id != data.id);
					  this.checkedListIds = tempIdsArr;
				}else {
					  this.checkedList.push(data);
					  this.checkedListIds.push(data.id);
					  // console.log(this.checkedListIds);
					  
				}
				this.$emit("listClick",this.checkedList);
			}
		}
	}
</script>

<style lang="less">
    .container {
		height: 100%;
		overflow: scroll;
		.scroll-Y {
			// height: 100%;
			 .box {
			 	.letter {
			 		height: 62.5rpx;
			 		line-height: 62.5rpx;
			 		font-size: 22.5rpx;
			 		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			 		font-weight: 400;
			 		color: #666F80;
			 		padding: 0 25rpx;
			 	}
			 	.listWrap {
			 		background-color: #FFFFFF;
			 		.list {
			 			position: relative;
			 			display: flex;
			 			flex-direction: row;
			 			justify-content: flex-start;
			 			align-items: center;
			 			height:87.5rpx;
			 			padding: 0 25rpx;
			 			.iconWrap {
			 				width: 25rpx;
			 				height: 25rpx;
			 				margin-right: 25rpx;
			 				.checkedIcon {
			 					width: 25rpx;
			 					height: 25rpx;
			 					
			 				}
			 			}
			 			.mainText {
			 				display: inline-block;
			 				font-size: 22.5rpx;
			 				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			 				font-weight: 400;
			 				color: #292C33;
			                 margin-right: 50rpx;
			 			}
			 			.subText {
			 				font-size: 22.5rpx;
			 				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			 				font-weight: 400;
			 				color: #7A8499;
			 			}
			 			
			 			&::after {
			 				position: absolute;
			 				right: 0;
			 				bottom: 0;
			 				display: block;
			 				content: '';
			 				width: 90%;
			 				border-bottom: 1px solid #DADEE6;
			 			}
			 			
			 			&:last-child {
			 				&::after {
			 					display: none;
			 				}
			 			}
			 		}
			 	}
			 }
		}
	}
</style>