gateList.vue

<template>
	<view class="">
		<headerComp
			:leftImgSrc="leftSrc"
			@leftClick="backClick"
			:title="titleStr"></headerComp>
		<searchBox @handleEvent="searchFun"></searchBox>
		<view class="list">
			<view class="list-item" @tap="itemFun(index)" v-for="(item, index) in cacheList" :key="item.id">
				<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: this.$t('index').storeSelect,
				leftSrc:'../../static/header/backArrow.png',
				isQuerying: false,
				cacheCheckedGateId: [],
				cacheList: []
			}
		},
		onLoad(options) {
			// console.log('multimalllist load options', options)
			this.backUrl = options.backUrl;
			this.analysisLevel = options.analysisLevel;
			let lists = JSON.parse(JSON.stringify(this.gateList));
			if(lists.length) {
				this.cacheList = lists.map(item => {
					// item._selected = item.id = this.checkedMallId['id'];
					return item;
				})	
			}
			this.cacheCheckedGateId = JSON.parse(JSON.stringify(this.checkedGateId));
		},
		computed: {
			...mapState({
				gateList: state => state.malls.gateList,
				checkedGateId: state => state.malls.checkedGateId
			}),
		},
		watch: {
		},
		created() {
		},
		mounted() {
		},
		methods: {
			backClick() {
				uni.navigateBack({
					delta:1
				})
			},
			searchFun(queryStr) {
				let that = this;
				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.multiCheckedMallId.some(checkedItem => {
// 								return item.id === checkedItem.id;
// 							})
							// item._selected = isChecked;
							// return item;
						// })
						// : res;
				})
			},
			query(queryString, cb) {
				queryString = queryString.toLocaleLowerCase();
				let result = queryString
					? this.mallList.length > 0
						? this.mallList.filter(item => {
							if(!!~item['name'].toLocaleLowerCase().indexOf(queryString)) {
								return true;
							}
						})
						: []
					: this.mallList;
				cb(result);
			},
			itemFun(index) {
				this.cacheCheckedGateId = {
					id: this.cacheList[index].id,
					name: this.cacheList[index].name
				}
				this.$store.dispatch('malls/updateCheckedGate', this.cacheCheckedGateId)
				uni.reLaunch({
					url: `${this.backUrl}?type=${this.analysisLevel}`
				})
			},
		}
	}
</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>