moreMallList.vue

<template>
	<view>
		 <headerComp :leftImgSrc="leftSrc" @leftClick="backClick" :title="titleStr" rightText="完成" @rightClick="confirmFun"></headerComp>
		<searchBox @handleEvent="searchFun"></searchBox>
		 <view class="list">
			 <view class="listItem" @tap="itemFun(item)" v-for="item in list">
				 <image :src="selectSrc" mode="" v-show="item.select"></image>
				 <image :src="unSelectSrc" mode="" v-show="!item.select"></image>
				 <text>{{item.name}}</text>
			 </view>
		 </view>
		<!-- <uni-list>
			<uni-list-item :title="this.$t('index').allStore" @click="selectStore(id)"></uni-list-item>
			<uni-list-item :title="item.name" @click="selectStore(item.id,item.name)" v-for="item in list"></uni-list-item>
		</uni-list> -->
	</view>
</template>

<script>
	import headerComp from '../../components/header'
	import searchBox from '../../components/search'
	
	export default{
		data(){
			return{
				aa:"aa",
				leftSrc:'../../static/header/backArrow.png',
				titleStr:this.$t('index').storeSelect,
				id:'',
				atoken:'',
				list:[],
				allList:[],
				accountName:'',
				url:'',
				selectSrc:'../../static/list/select.png',
				unSelectSrc:'../../static/list/unselect.png',
				selectIdArr:[],
				selectNameArr:[],
				type:''
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
// 			this.atoken=option.atoken;
// 			this.id=option.accountId;
			this.type=option.type;
			this.url=option.url;
			uni.getStorage({
				key:'accountName',
				success:(res)=>{
					this.accountName=res.data;
				}
			})
			uni.getStorage({
				key:'accountId',
				success:(res)=>{
					this.id=res.data;
				}
			})
			uni.getStorage({
				key:'atoken',
				success:(res)=>{
					this.atoken=res.data;
				}
			})
			this.getListData();
		},
		computed: {
			i18n(){
				return this.$t('index')
			}
		},
		components:{
			headerComp,searchBox
		},
		methods: {
			searchFun(val){
				this.list=[];
				this.allList.forEach(item=>{
					if(item.name.indexOf(val)!=-1){
						this.list.push(item)
					}
				})
				if(this.selectNameArr.indexOf('全部')!=-1){
					this.list.forEach(item=>{
						item.select=true;
					})
				}else{
					this.list.forEach(item=>{
						if(this.selectIdArr.indexOf(item.id)!=-1){
							item.select=true;
						}else{
							item.select=false;
						}
					})
				}
			},
			itemFun(item){
				item.select=!item.select;
				if(item.id=='all'){
					console.log(this.list)
					this.selectIdArr=[];
					this.selectNameArr=[]
					if(item.select){
						this.selectNameArr.push('全部')
						this.list.forEach(item=>{
							item.select=true;
							if(item.id!='all'){
								this.selectIdArr.push(item.id)
							}
						})
					}else{
						this.list.forEach(item=>{
							item.select=false;
						})
					}
				}else{
					if(item.select){
						this.selectIdArr.push(item.id);
						this.selectNameArr.push(item.name);
						if(this.selectIdArr.length==this.allList.length-1){
							this.selectIdArr=[];
							this.selectNameArr=[]
							this.selectNameArr.push('全部')
							this.list.forEach(item=>{
								item.select=true;
								if(item.id!='all'){
									this.selectIdArr.push(item.id)
								}
							})
						}
					}else{
						var nIndex=this.selectNameArr.indexOf('全部');
						if(nIndex!=-1){
							this.selectNameArr=[];
							this.list.forEach(item=>{
								if(item.id=='all'){
									item.select=false
								}
							})
							this.list.forEach(item=>{
								if(item.id!='all'){
								this.selectNameArr.push(item.name)
								}
							})
						}
						var index=this.selectIdArr.indexOf(item.id);
						this.selectIdArr.splice(index,1);
						this.selectNameArr.splice(index,1)
						
					}
				}
				this.$forceUpdate();
			},
			search(e, val) {
				console.log(e);
			},
			confirmFun(){
				console.log(this.selectIdArr)
				if(this.selectIdArr.length==0){
					uni.showToast({
						icon:'none',
						title:'请至少选择一项'
					});
					return
				}
				uni.setStorage({
					key:'selectAccountIdArr',
					data:JSON.stringify(this.selectIdArr)
				})
				uni.setStorage({
					key:'selectAccountNameArr',
					data:JSON.stringify(this.selectNameArr)
				})
				uni.reLaunch({
					url:this.url+'?type='+this.type,
				})
			},
			getListData(){
				uni.getStorage({
					key:'accountList',
					success:(res)=>{
						this.allList=JSON.parse(res.data);
						this.allList.unshift({
							name:'全部',
							id:'all'
						})
						this.list=JSON.parse(res.data);
						this.list.unshift({
							name:'全部',
							id:'all'
						})
						uni.getStorage({
							key:"selectAccountIdArr",
							success: (res) => {
								this.selectIdArr=JSON.parse(res.data);
							}
						})
						uni.getStorage({
							key:"selectAccountNameArr",
							success: (res) => {
								this.selectNameArr=JSON.parse(res.data);
							}
						})
						if(this.selectNameArr.length>0){
							//选择过
							if(this.selectNameArr[0]=='全部'){
								this.list.forEach((item,index)=>{
										item.select=true;
								})
							}else{
								this.list.forEach(item=>{
									if(this.selectIdArr.indexOf(item.id)!=-1){
										item.select=true;
									}
								})
							}
						}else{
							//没选择过
							this.list.forEach((item,index)=>{
								if(index==1){
									item.select=true;
									this.selectIdArr.push(item.id)
								}else{
									item.select=false;
								}
							})
						}
					}
				})
			},
			backClick() {
				uni.navigateBack({
					delta:1
				})
			}
		},
	}
</script>

<style>
	.listItem{
		border-bottom: 1px solid #979797;
		height: 72.46upx;
		line-height: 72.46upx;
		font-size: 25.37upx;
		background: #FFFFFF;
		position: relative;
	}
	.listItem>image{
		width: 28.99upx;
		height: 28.99upx;
		position: absolute;
		top:23.55upx;
		left: 25.36upx;
	}
	.listItem text{
		margin-left: 77.89upx;
	}
</style>