multiGateList.vue

<template>
	<view class="">
		<headerComp
			:leftImgSrc="leftSrc"
			@leftClick="backClick"
			:title="titleStr"
			rightText="完成"
			@rightClick="confirmFun"></headerComp>
		<searchBox @handleEvent="searchFun"></searchBox>
		<view class="list">
			<view :class="{ 'list-item': !isQuerying, 'hide-item': isQuerying }" @tap="allClickHandle" v-if="cacheList.length">
				<image :src="selectSrc" mode="" v-show="isAll"></image>
				<image :src="unSelectSrc" mode="" v-show="!isAll"></image>
				<text>全部</text>
			</view>
			<view class="list-item" @tap="itemFun(index)" v-for="(item, index) in cacheList" :key="item.id">
				<image :src="selectSrc" mode="" v-show="item._selected"></image>
				<image :src="unSelectSrc" mode="" v-show="!item._selected"></image>
				<text>{{ item.name }}</text>
			</view>
			<view class="empty-list-item" v-if="!cacheList.length">
				<text>暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapActions } from 'vuex'
	import headerComp from '../../components/header'
	import searchBox from '../../components/search'
	
	export default {
		components: {
			headerComp, searchBox
		},
		data() {
			return {
				backUrl: '',
				analysisLevel: '',
				titleStr: '出入口选择',
				leftSrc:'../../static/header/backArrow.png',
				selectSrc:'../../static/list/select.png',
				unSelectSrc:'../../static/list/unselect.png',
				isAll: false,
				isQuerying: false,
				checkedCount: 0,
				checkedGateIds: [],
				cacheList: []
			}
		},
		onLoad(options) {
			this.backUrl = options.backUrl;
			this.analysisLevel = options.analysisLevel;
			this.changeScope()
		},
		computed: {
			...mapState({
				checkedMallId: state => state.malls.checkedMallId,
				gateList: state => state.malls.gateList,
				multiCheckedGateId: state => state.malls.multiCheckedGateId
			}),
		},
		watch: {
			checkedMallId(val) {
				this.$store.dispatch('malls/getGateList', {
					data: {
						mallId: val.id,
						status: 1,
						isHasFace: 1,
						_t:Date.parse(new Date()) / 1000
					},
					header: {
						'app-code':'mobile',
						'Authorization': this.getStorage('atoken') //自定义请求头信息
					},
					isMultiple: true
				})
			},
			multiCheckedGateId: {
				handler: function(val) {
					this.changeScope()
				},
				immediate: true,
				deep: true
			}
		},
		created() {
			console.log('created', this.multiCheckedGateId)
			if(!this.multiCheckedGateId.length) {
				this.$store.dispatch('malls/getMallList', {
					data: {
						accountId: this.getStorage('accountId'),
						_t:Date.parse(new Date()) / 1000
					},
					header: {
						'app-code':'mobile',
						'Authorization': this.getStorage('atoken') //自定义请求头信息
					},
					isMultiple: true
				})
			}
		},
		mounted() {
		},
		methods: {
			changeScope() {
				let lists = JSON.parse(JSON.stringify(this.gateList));
				if(lists.length) {
					let count = 0;
					this.cacheList = lists.map(item => {
						let isChecked = this.multiCheckedGateId.some(checkedItem => {
							return item.id === checkedItem.id;
						})
						if(isChecked) count++;
						item._selected = isChecked;
						this.isAll = count == lists.length;
						return item;
					})	
				}
				this.checkedGateIds = JSON.parse(JSON.stringify(this.multiCheckedGateId));
			},
			backClick() {
				uni.navigateBack({
					delta:1
				})
// 				uni.navigateTo({
// 					url: '../passenger/groupTimeReport/groupTime'
// 				})
			},
			confirmFun() {
				if(this.checkedGateIds.length == 0){
					uni.showToast({
						icon:'none',
						title:'请至少选择一项'
					});
					return;
				}
				this.$store.dispatch('malls/updateMultiCheckedGate', this.checkedGateIds)
				uni.reLaunch({
					url: `${this.backUrl}?type=${this.analysisLevel}`
				})
			},
			searchFun(queryStr) {
				let that = this;
				if(queryStr === '全部') return;
				this.isQuerying = queryStr.length > 0 ? true : false;
				this.query(queryStr, function(res) {
					console.log('query res', res)
					that.cacheList = res.length
						? res.map(item => {
							let isChecked = that.multiCheckedGateId.some(checkedItem => {
								return item.id === checkedItem.id;
							})
							item._selected = isChecked;
							return item;
						})
						: res;
				})
			},
			query(queryString, cb) {
				queryString = queryString.toLocaleLowerCase();
				let result = queryString
					? this.GateList.length > 0
						? this.GateList.filter(item => {
							if(!!~item['name'].toLocaleLowerCase().indexOf(queryString)) {
								return true;
							}
						})
						: []
					: this.GateList;
				cb(result);
			},
			allClickHandle() {
				this.isAll = !this.isAll;
				this.cacheList.forEach(item => item._selected = this.isAll)
			},
			itemFun(index) {
				this.cacheList[index]._selected = !this.cacheList[index]._selected;
				let hasUnselected = this.cacheList.some(item => !item._selected);
				this.isAll = !hasUnselected;
				let idx = null;
				this.checkedGateIds.forEach((item, checkedIdx) => {
					if(item.id == this.cacheList[index].id) {
						idx = checkedIdx
					}
				});
				if(this.cacheList[index]._selected) {
					if(typeof idx !== 'number') {
						this.checkedGateIds.push({
							id: this.cacheList[index].id,
							name: this.cacheList[index].name
						})
					}
				} else {
					if(typeof idx === 'number' && idx >= 0) {
						this.checkedGateIds.splice(idx, 1);
					}
				}
				this.$forceUpdate();
			},
		}
	}
</script>

<style>
	.hide-item {
		display: none;
	}
	.list-item {
		border-bottom: 1px solid #979797;
		height: 72.46upx;
		line-height: 72.46upx;
		font-size: 25.37upx;
		background: #FFFFFF;
		position: relative;
	}
	.list-item > image{
		width: 28.99upx;
		height: 28.99upx;
		position: absolute;
		top:23.55upx;
		left: 25.36upx;
	}
	.list-item text{
		margin-left: 77.89upx;
	}
	
	.empty-list-item {
		font-size: 25.37upx;
		text-align: center;
		padding-top: 54.34upx;
	}
	
	.empty-list-item text {
		margin-left: 0;
		color: #c9c9c9;
	}
</style>