// 弹框是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>
购物车:全选、选中、删除
最新推荐文章于 2023-09-19 11:45:59 发布