qzw_xcx/pages/index/cart.vue

<template>
	<view style="height: 100vh;background-color: #F5F5F5;">
	<!-- 	<view style="height:50upx"></view> -->
	<!-- 	<uniNavBar
		  left-icon="back"  title="购物车"
		  @clickLeft="goback"
		  @clickRight = "deleteShop"	
		 /> -->
		 <view class="titleright">编辑</view>
		 <view class="cart-list">
		  <view style="display: flex;align-items: center;padding: 20upx 36upx;
		   border-bottom: 1px solid #F5F5F5;">
			  <image src="" style="width: 50upx;height: 50upx;"></image>
			  <span style="padding-left: 8upx;">华南酒店</span>
		  </view>
		  
		  <view v-for="(item,index) in list" :key="index" class="shoplist" style="background-color: #fff;">
			  <view style="flex: 1;border-radius: 100%;">
				<van-checkbox-group :value="checkboxList" @change="checkboxChange()">
				    <van-checkbox  checked-color="#D9332E" :name="index"></van-checkbox>
				  </van-checkbox-group> 
				  
				<!-- <checkbox-group style="border-radius: 100%;" @change="checkboxChange(index)">
				  <label class="checklabel">
					  <view class="checkboxteil">
						  <checkbox :checked="item.checked" />
					  </view>
					  
				  </label>
			    </checkbox-group> -->
							  
			  </view>
			  <view style="flex: 15;">
			  <van-card
			    title-class="changewidth"
				price-class ="priceClass"
			    :price="item.price"
			    :desc="item.titleDesc"
			    :title="item.title"
			    thumb="https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg"
			  >
			    <view slot="footer">
				  <uninumberbox :min="1" @change="bindChange"/>
			    </view>
			  </van-card>
			  </view>
		  </view>
		 </view>
		 
		 <view style="position: fixed;bottom: 0;">
		 <van-submit-bar
		   :price="3050"
		   button-text="结算"
		   bind:submit="onClickButton"
		   :tip="true"
		 >
		 <van-checkbox checked-color="#D9332E" :value="isAll" shape="round" @change="onChange">
		  全选
		 </van-checkbox>
		 </van-submit-bar>
		 </view>
		 
	</view>
</template>

<script>
	import uniNavBar from '@/component/uni-nav-bar/uni-nav-bar.vue'
	import uninumberbox  from '@/component/uinNumber.vue'
	export default {
		components: {
			uniNavBar,
			uninumberbox 
		},
		data() {
			return {
				isAll: false,
				checkboxList:[],
				list:[
					{title:'洗澡拖鞋dddd一次性', titleDesc:'一次性亚述拖鞋dddd不ww要错过x2', price:'0.5'},
					{title:'洗澡拖鞋dsssss一次性', titleDesc:'一次性亚述拖dddddd鞋不要33错过x2', price:'0.5'},
					{title:'洗澡拖鞋一dddddd次性', titleDesc:'一次性亚述拖ddddd鞋不要错过wx2', price:'0.5'},
					{title:'洗澡拖鞋一次性', titleDesc:'一次性亚述拖dddddddddddddd鞋不要错过wwx3', price:'0.5'},
					{title:'洗澡拖鞋一次性', titleDesc:'一次性亚述拖ddddd鞋不要错ee过x2', price:'0.5'},
					{title:'洗澡拖鞋一次性', titleDesc:'一次性亚述拖鞋不要错过x2', price:'0.5'},
					{title:'洗澡拖鞋一次性', titleDesc:'一次性亚述拖鞋不要错过x2', price:'0.5'},
					{title:'洗澡拖鞋一次性', titleDesc:'一次性亚述拖鞋不要错过x2', price:'0.5'},
					{title:'洗澡拖鞋一次性', titleDesc:'一次性亚述拖鞋不要错过x2', price:'0.5'},
					{title:'洗澡拖鞋一次性', titleDesc:'一次性亚述拖鞋不要错过x2', price:'0.5'},
					{title:'洗澡拖鞋一次性', titleDesc:'一次性亚述拖鞋不要错过x2', price:'0.5'}
				]
			}
		},
		// 隐藏分享菜单
		onLoad: function () {
		 // uni.hideShareMenu({
		 // 	  success(res) {
		 // 		  console.log(res)
		 		 
		 // 	  },
		 // 	  fail(res){
		 // 		  console.log(res)
		 		  
		 // 	  } 
		 // });
	    },
		methods: {
			// 返回上层
			goback() {
					uni.navigateBack(); 
			},
			// 编辑
			deleteShop() {
				
			},
			// 数量累加
			bindChange(e) {
				console.log(e)
			},
			// 单选
			checkboxChange(e) {
			  this.checkboxList = []
			  console.log(e.detail)
			  e.detail.forEach((item, idx) => {
				  this.$set(this.checkboxList, idx, item)
			  })
			  console.log(this.checkboxList)
			 //    let items = this.list;
			 //    let values = e;
				// for (let i = 0, lenI = items.length; i < lenI; ++i) {
				// 	const item = items[i]
				// 	if(values == item){
				// 		this.$set(item,'checked',true)
				// 	}else{
				// 		this.$set(item,'checked',false)
				// 	}
				// }
			
				
			   },
			// 全选
			onChange() {
				this.isAll = !this.isAll;
				let items = this.list;
				if(this.isAll) {
					items.forEach((item, idx) => {
						this.$set(this.checkboxList, idx, idx.toString())
					})
					
					// for (let i = 0, lenI = items.length; i < lenI; ++i) {
					// 	console.log(i);
					// 	this.$set(this.checkboxList, i, i)
					// 	 // const item = items[i]
					// 	 // this.$set(item,'checked',true)
					// }
				}else {
					for (let i = 0, lenI = items.length; i < lenI; ++i) {
						 this.checkboxList = []
						// this.$set(this.checkboxList, [])
						
						// const item = items[i]
						// this.$set(item,'checked',false)
					}
					
				}
				
			}
		}
	}
</script>

<style>
		
	.uniNavBar {
	  height: 100%;	
	}
	.cart-list {
		background-color: #fff;
		/* padding: 0 36upx; */
	}
	.titleright {
		text-align: right;
		padding: 10upx 30upx;
		background: #fff;
		border-bottom: 1px solid #eee;
		
	}
	.changewidth {
		color: #303133;
		font-size: 32upx;
		font-weight: 100!important;
	}
	.priceClass {
		color:#303133!important;
		font-weight: 100!important;
		font-size: 36upx;
	}
	.van-card {
		background-color: #fff!important;
	}
    .shoplist {
		display: flex;
		padding: 0 35upx;
		justify-content: space-between;
		align-items: center;
	}
		
	.checklabel {
		transform:scale(0.7);
		border-radius: 100%;
	}
	.checkboxteil {
		transform:scale(0.7);
		border-radius: 100%;
	}
</style>