jikeH5/pages/addjk/ckshop.vue

<template>
	<view class="content">
	 <view class="content2">
		 <view class="shopBox">
			<view class="shopLine" v-for="(item,index) in list" @click="ckshop(item)">
				<img src="../../static/img/ckn.png" alt="" class="ckImg" v-if="!item.ck">
				<img src="../../static/img/cky.png" alt="" class="ckImg" v-if="item.ck">
				<view class="shopName">{{item.shopName}}</view>
			</view>
		 </view>
		 
	 </view>
	 <view class="bottom">
		 <view class="bottomLeft" @click="all">
			 <img src="../../static/img/ckn.png" alt="" class="ckImg" v-if="!allck">
			 <img src="../../static/img/cky.png" alt="" class="ckImg" v-if="allck">
			 <view class="allTxt">全选</view>
		 </view>
		 <view class="determine" @click="determine">确定添加</view>
	 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:'',
				allck:false,
				shopckList:'',
			}
		},
		onLoad() {
          this.getShopList()
		},
		methods: {
		   determine(){
			   var shopckList=[]
			   this.list.forEach(item=>{
			      if(item.ck){
					  shopckList.push(item)
				  }
			   })
			   uni.setStorage({
			   		key: 'shopckList',
			   		data: shopckList,
			   		 success: function () {	
						 uni.navigateBack(-1)
			   		 }
			   });
		   },
		   ckshop(item){
			   item.ck=!item.ck
		   },
		   all(){
			   this.allck=!this.allck;
			   if(this.allck){
				   this.list.forEach(item=>{
				   	item.ck=true;
				   })
			   }else{
				   this.list.forEach(item=>{
				   	item.ck=false;
				   })
			   }
		   },
           getShopList(){
			   uni.showLoading({
			   	title: '加载中'
			   })
			   this.$http('openH5SetTheGuest/getShopList', {
			     
			    },'GET').then(res => {
			   		uni.hideLoading();
					const shopckList = uni.getStorageSync("shopckList");
					// shopckList.forEach(item=>{
					// 	delete item.ck
					// })
					res.data.forEach(item=>{
						item.ck=false;
					})
					console.log(shopckList)
					if(shopckList){
						res.data.forEach(item=>{
							 shopckList.forEach(item2=>{
							 	if(item2.id==item.id){
									item.ck=true;
								}else{
									//item.ck=false;
								}
							})
							// if(shopckList.includes(item)){
							// 	item.ck=true;
							// }else{
							// 	item.ck=false;
							// }
						})
					}else{
						
					}
					
			   		this.list=res.data;
					
					console.log(this.list)
			    })
		   }
		}
	}
</script>

<style scoped>
	.content{
		min-height: 100vh;
		background:#F4F5F7;
	}
	.shopBox{
		background: #ffffff;
		border-radius: 10rpx;
	}
	.content2{
		padding: 20rpx 24rpx;
		padding-bottom: 140rpx;
	}
	.shopLine{
		display: flex;
		padding: 30rpx 20rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.ckImg{
		width: 44rpx;
		height: 44rpx;
	}
	.shopName{
		color: #3C3C3C;
		line-height: 44rpx;
		font-size: 28rpx;
		padding-left: 26rpx;
	}
	.bottom{
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-between;
	}
	.bottomLeft{
		display: flex;
		padding-top: 38rpx;
		padding-left: 24rpx;
	}
	.allTxt{
		line-height: 44rpx;padding-left: 12rpx;color: #3C3C3C;
	}
	.determine{
		width: 310rpx;
		height: 98rpx;
		background: #3F90F7;
		border-radius: 10rpx;
		font-weight: 500;
		color: #FFFFFF;
		font-size: 31rpx;
		line-height: 98rpx;
		text-align: center;
		margin-top: 11rpx;
		margin-right: 24rpx;
	}
</style>