mallList.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,
				cacheCheckedMallId: [],
				cacheList: []
			}
		},
		onLoad(options) {
			// console.log('multimalllist load options', options)
			this.backUrl = options.backUrl;
			this.analysisLevel = options.analysisLevel;
			this.changeScope();
		},
		computed: {
			...mapState({
				mallList: state => state.malls.list,
				checkedMallId: state => state.malls.checkedMallId
			}),
		},
		watch: {
			checkedMallId(val) {
				this.changeScope();
			}
		},
		created() {
			if(!this.checkedMallId) {	// 处理刷新获取参数失败
				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() {	// 不能直接修改 vuex 的 state
				let lists = JSON.parse(JSON.stringify(this.mallList));
				if(lists.length) {
					this.cacheList = lists.map(item => {
						// item._selected = item.id = this.checkedMallId['id'];
						return item;
					})	
				}
				this.cacheCheckedMallId = JSON.parse(JSON.stringify(this.checkedMallId));
			},
			backClick() {
				uni.navigateBack({
					delta:1
				})
			},
			searchFun(queryStr) {
				let that = this;
				this.isQuerying = queryStr.length > 0 ? true : false;
				this.query(queryStr, function(res) {
					that.cacheList = 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.cacheCheckedMallId = {
					id: this.cacheList[index].id,
					name: this.cacheList[index].name
				}
				console.log(this.cacheCheckedMallId)
				this.$store.dispatch('malls/updateCheckedMall', this.cacheCheckedMallId)
				this.$store.dispatch('malls/getGateList', {
					data: {
						mallId: this.cacheCheckedMallId.id,
						status: 1,
						isHasFace: 1,
						_t:Date.parse(new Date()) / 1000
					},
					header: {
						'app-code':'mobile',
						'Authorization': this.getStorage('atoken') //自定义请求头信息
					},
					isMultiple: true
				})
				uni.reLaunch({
					url: `${this.backUrl}?type=${this.analysisLevel}`
				})
			},
			getStorage(key) {
				let storageVal = '';
				uni.getStorage({
					key: key,
					success: (res) => {
						storageVal = res.data;
					}
				})
				return storageVal
			},
		}
	}
</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>