list 列表单（多）选（uni-app）

<template>
	<view>
		<view class="list-checked mb4" v-for="(item , index) in list" :key="index.value">
			<view class="list x-bc" @tap="checkboxChange(index)" style="border: 0px;">
				<view class="title">[{{ item.ghsdm }}]&ensp;{{ item.ghsmc }}</view>
				<view class="checked" :class="[ item.checked ? 'input-checked' : '']"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapActions } from 'vuex'
	
	export default {
		data() {
			return {
				list: [],
				multiple:false, //是否开启多选
			};
		},
		onLoad: function (option) {
			let ghsIds = option.id ? option.id.split(",") : "";
			this.multiple = option.multiple ? true : false;
			this.getList(ghsIds);
		},
		// 顶部确定按钮
		onNavigationBarButtonTap: function(obj){
			let arr = this.list.filter((item,index) => item.checked == true);
			let ghsIds = "", ghsNames = "";
			arr.forEach((item, index) => {
				ghsIds += ","+item.ghsId;
				ghsNames += ","+item.ghsmc;
			})
			let pages = getCurrentPages(); 
			let prevPage = pages[pages.length - 2]; //上一个页面 			
			var object={
				id: ghsIds.substring(1),
				name: ghsNames.substring(1),
				pid: 'ghsList'
			}
			prevPage.$vm.otherFun(object);//重点$vm
			uni.navigateBack();
		},
		methods:{
			...mapActions([
			  'majax',
			  'goout'
			]),
			getList:function(ghsIds){
				this.isLoading = true;
				this.majax({url:url,
				params:{}, method:'GET'}).then(res => {
					this.isLoading = false;
					if(!res.code){	
						let list = res.records;
						this.totalPage = res.pages;
						list.forEach(item => {
							this.list.push(item)
						})
						if(ghsIds){
							this.$nextTick(() => {
								this.updateChecked(ghsIds)
							})
						}
					}else{
					  this.goout(res);
					}
				});
			},
            //设置选中状态
			updateChecked: function(ghsIds) {
			  for (let i = 0; i < this.list.length; i++) {
				this.$set(this.list[i],'checked',false);
				for (let j = 0; j < ghsIds.length; j++) {
				  if (ghsIds[j] == this.list[i].ghsId) {
					 this.$set(this.list[i],'checked',true);
				  }
				}
			  }
			},
			checkboxChange:function(index){
				if(this.multiple){
					if(this.list[index].checked){
						this.$set(this.list[index],'checked',false);
					}else{
						this.$set(this.list[index],'checked',true);
					}
				}else{
					this.list = this.list.map((col, index) => {
						this.$set(col,'checked',false);
						return col
					})
					this.$set(this.list[index],'checked',true);
				}
			}
		}
	}
</script>

<style lang="scss">
.list-checked{
	background: #FFFFFF;
	padding: 0upx 32upx;
	.list{
		line-height: 80upx;
		.title{
			font-weight: bold;
		}
		.checked{
			height: 44upx;
			width: 44upx;
			// border: 1upx solid #d1d1d1;
			border: 0;
			outline: 0;
			border-radius: 100%;
			margin-right: 15upx;
		}
		.input-checked{
			position: relative;
			color: #f0c786;
		}
		.input-checked::before{
			font: normal normal normal 14px/1 uni;
			content: "\EA08";
			font-size: 22px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-48%) scale(.73);
			-webkit-transform: translate(-50%,-48%) scale(.73);
		}
	}
}
</style>