好家伙，
1.总价计算
来了,又先是一波分析:
我们用一个计算属性amt
我们把item中被勾选的项用一个过滤器过滤器来
然后用一个循环相加,把商品的价格乘以商品的数量,
把这个总值返回出去,
然后组件传值,把它渲染出来
App.vue中用于计算总价的计算属性amt:
amt(){
//1.先filter过滤
//2.再reduce累加
return this.list
.filter(item=>item.goods_state)
.reduce((total,item)=> (total+=item.goods_price*item.goods_count),0)
}
在Footer.vue组件中,
<div>
<span>合计：</span>
<span class="total-price">￥{{ amount }}</span>
</div>
props定义:
props:{
isfull:{
type:Boolean,
default:true
},
amount:{
type:Number,
default:0
}
},
App.vue中进行组件调用时,组件调用中通过props传值
<Footer :isfull="fullState"
@full-change="getFullState"
:amount="amt"></Footer>
于是,就行了
(也没有完全行,数值统计没出来,理论上能行,但出了点bug,在修)
Footer.vue的代码如下:
<template>
<div class="footer-container">
<!-- 左侧的全选 -->
<div class="custom-control custom-checkbox">
<!-- 全选框状态与isFull绑定 -->
<input type="checkbox"
class="custom-control-input"
id="cbFull"
:checked="isfull"
@change="fullChange" />
<label class="custom-control-label" for="cbFull">全选</label>
</div> <!-- 中间的合计 -->
<div>
<span>合计：</span>
<span class="total-price">￥{{ amount }}</span>
</div> <!-- 结算按钮 -->
<button type="button" class="btn btn-primary btn-settle">结算（{{ 0 }}）</button>
</div>
</template> <script>
export default {
props:{
isfull:{
type:Boolean,
default:true
},
amount:{
type:Number,
default:0
}
},
methods:{
//监听到全选状态的变化
fullChange(e){
this.$emit('full-change',e.target.checked)
}
}
}
</script> <style lang="less" scoped>
.footer-container {
font-size: 12px;
height: 50px;
width: 100%;
border-top: 1px solid #efefef;
position: fixed;
bottom: 0;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
} .custom-checkbox {
display: flex;
align-items: center;
} #cbFull {
margin-right: 5px;
} .btn-settle {
height: 80%;
min-width: 110px;
border-radius: 25px;
font-size: 12px;
} .total-price {
font-weight: bold;
font-size: 14px;
color: red;
}
</style>
目前这个购物车bug太多了,正在改
