购物车：全选、选中、删除

// 弹框是element-ui,可修改成其他
<template>
<div>
	<div class="shop-view">
		<div class="goods" style="justify-content: flex-end;">
			<p :class="type?'p-active':'p'" @click="change">{{type?'管理x':'管理'}}</p>
		</div>
		<div class="goods" v-for="(goods,index) in list">
			<div class="flex" @click='checkedGoodsChange(index)'>
				<p class="cycle"  :class="goods.checked?'bg-blue':''"></p>
				<span class="money">{{'￥'+goods.money}}</span>
				<span class="title">{{goods.title}}</span>
			</div>
			<p class="del" @click='delGoodsItem(index)'>删除</p>
		</div>
		<div class="btn-footer">
			<div class="goods">
				<div class="flex" @click="allCheckedGoodsChange">
					<p class="cycle" :class="allChecked?'bg-blue':''"></p>
					<span>全选</span>
				</div>
				<div class="flex">
					<span class="money" v-show="!type">{{'￥'+totalMoney}}</span>
					<p class="btn" @click='delOrPayBtnClick'>{{type?'删除所选商品':'结算'}}</p>
				</div>
			</div>
			
		</div>
	</div>
  </div>
</template>
<script>
export default {
  data(){
    return{
			type:false,
			allChecked:false,
			checkedNum:0,
			list:[
				{checked:false,title:'2%水杨酸',money:9},
				{checked:false,title:'HBN发光水',money:1},
				{checked:false,title:'NKB小绿瓶精华',money:20},
				{checked:false,title:'特别管用的眼霜',money:30},
				{checked:false,title:'Fe滋润保湿的面膜',money:40},
			]
    }
   },
	 computed:{
		 totalMoney(){
			 let total = 0
			 this.list.forEach(v=>{
				 if(v.checked){
					 total+=v.money
				 }
			 })
			 return total;
		 }
	 },
	
   methods:{
		change(){
			this.type = !this.type
		},
		//选中
		checkedGoodsChange(index){
			this.list[index].checked =!this.list[index].checked;
			this.checkedNum = 0
			this.list.forEach(v=>{
				if(v.checked){
					this.checkedNum++
				}
			})
			if(this.checkedNum == this.list.length){
				this.allChecked = true
			}else{
				this.allChecked = false
			}
		},
		//全选
		allCheckedGoodsChange(){
			this.allChecked = !this.allChecked
			if(this.allChecked){
				this.list.forEach(v=>{
					v.checked = true
				})
				this.checkedNum = this.list.length
			}else{
				this.list.forEach(v=>{
					v.checked = false
				})
				this.checkedNum = 0
			}
			console.log(this.checkedNum)
		},
		//删除单个
		delGoodsItem(index){
			this.$confirm('此操作将删除该商品, 是否继续?',{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.list.splice(index,1)
			});
		},
		//删除选中 || 结算
		delOrPayBtnClick(){
			if(this.checkedNum > 0){
				if(this.type){
					this.$confirm('此操作将删除商品, 是否继续?',{
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.list = this.list.filter((item) => {
									return item.checked == false
							})
							if(this.list.length==0) this.allChecked = false
						});
					}else{
						console.log('---',this.checkedNum)
						console.log('结算')
					}
			}else{
				this.$message.error('请选择商品')
			}
		}
	}
}
</script>
<style scoped>
	p,div,span{margin: 0;padding: 0;}
	.shop-view{
		position: relative;
		width: 300px;
		height: calc(100vh - 80px);
		margin: 20px 20px 0;
		border: 1px solid orangered;
	}
	.title{
		font-size: 14px;
	}
	.p{
		font-size: 12px;
	}
	.p-active{
		color: red;
		font-size: 10px;
		border: 1px solid red;
		padding: 2px 6px;
		border-radius: 2px;
	}
	.goods{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 40px;
		background-color: #fff;
		padding:0 20px;
		border-bottom: 1px solid #DCDFE6;
	}
	/* 兄弟元素：最后一个 */
	.goods:nth-last-of-type(2){
		border-bottom: none;
	}
	.flex{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.cycle{
		width: 14px;
		height: 14px;
		border: 1px solid #1AB8B8;
		border-radius: 50%;
		margin-right: 10px;
	}
	.money{
		font-size: 12px;
		color: red;
		margin-right: 10px;
	}
	.del{
		color: red;
		font-size: 10px;
	}
	.bg-blue{
		background-color: #1AB8B8;
	}
	.btn{
		font-size: 12px;
		padding: 4px 10px;
		border-radius: 4px;
		color: #fff;
		background-color: #1AB8B8;
	}
	.btn-footer{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		border-top: 1px solid #DCDFE6;
	}
</style>