<template>
<div class="mui-content">
<div class="mui-card" v-for="item in list" :key="item.id">
<div class="mui-card-content">
<form action="">
<input type="checkbox" class="fuxuan" checked="checked" name="check">
<div>
<img :src="item.url">
<p class="name">{{item.name|f1}}</p>
<div class="shuliang">
<p class="price">¥{{item.price}}</p>
<div style="display: inline;float: right;">
<input type="button" class="jian " value="-" :class="{hide:item.isHide}" @click="(item.num<2 ? item.num=0 : item.num--)">
<input contenteditable='true' :value="item.num" :class="{yuan:item.isYuan}" class="num" @click="item.isHide=!item.isHide,item.isYuan=!item.isYuan">
<input type="button" class="jia " :class="{hide:item.isHide}" value="+" @click="item.num++">
</div>
</div>
</div>
</form>
</div>
</div>
<div class="jie">
<p class="zongjia">
<span>合计 :</span>
<span style="color: red" v-text="sum"> </span>
</p>
<button class="jiesuan">结算</button>
</div>
</div>
</template>
<script>
import Vue from "vue";
Vue.filter('f1', function (value) {
if (value.length > 8) {
value = value.substring(0, 8) + '...';
}
return value;
})
export default {
name: "CarAll",
data() {
return {
list: [
{
'id': 1,
'price': 130,
'name': '新西兰宠物零食真致鲜牛乳幼犬营养狗狗猫咪喝的发育牛奶6瓶',
'url': '//g-search1.alicdn.com/img/bao/uploaded/i4/i2/2200724926519/O1CN01dHp1UZ1y1kbMynCsw_!!0-item_pic.jpg_250x250.jpg_.webp',
'num': 1,
'isHide': true,
'isYuan': true,
},
{
'id': 2,
'price': 36,
'name': '猫咪沐浴露猫沐浴露猫咪专用猫洗澡专用香波',
'url': '//g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i1/53863367/O1CN01OZijm11ak8Bk7cUWU_!!0-saturn_solar.jpg_180x180.jpg_.webp',
'num': 3,
'isHide': true,
'isYuan': true,
},
],
}
},
computed: {
sum: {
get:function(){
let sum=0;
for(let i = 0;i<this.list.length;i++) {
sum+= this.list[i].price*this.list[i].num;
}
return sum;
}
}
}
}
</script>
<style scoped>
img {
width: 100px;
height: 100px;
float: left;
border-radius: 10px;
margin-left: 30px;
}
.mui-card {
border-radius: 10px;
padding: 5%;
}
.hide{
display: none;
}
.name {
display: inline-block;
font-size: large;
margin-left: 3%;
margin-top: 8px;
}
.shuliang {
margin-left: 3%;
margin-top: 32px;
border-right: none;
border-left: none;
}
.fuxuan{
float: left;
margin-top: 37px;
border: 1px solid black;
border-radius: 10px;
background: #FACC31 !important;
height: 1px;
width: 1px;
}
.price {
color: red;
font-size: larger;
display: inline;
margin-left: 5%;
}
.yuan{
border-radius: 5px;
}
.num {
width: 25px;
margin-left: -5%;
}
.jian {
width: 20px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.jia {
margin-left: -5%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
width: 20px;
}
input{
text-align: center;
margin: 0;
padding: 0;
border: 1px solid #aaaaaa;
font-size: 16px;
line-height: 17px;
border-radius: 0;
width: 26px;
height: 23px;
}
input[type=checkbox]{
cursor: pointer;
position: relative;
}
input[type=checkbox]::after{
position: absolute;
top: -2px;
left: -2px;
background: white;
width: 20px;
height: 20px;
display: inline-block;
border: 1px solid #bbbbbb;
visibility: visible;
text-align: center;
content: ' ';
border-radius: 100%
}
input[type=checkbox]:checked::after{
background:#F8D674;
content: "✓";
color: white;
text-align: center;
font-size: 16px;
font-weight: bolder;
line-height: 19px;
}
.jie{
position: fixed;
bottom: 52px;
width: 100%;
background: white;
z-index: 10;
}
.zongjia{
display: inline-block;
font-size:15px;
margin-left: 200px;
margin-top: 14px;
}
.jiesuan{
float: right;
background: #F8D674;
margin: 5px;
border-radius: 10px;
font-size: 18px;
width: 70px;
color: white;
}
</style>
问题:如何实现选中商品的复选框后才计算支付金额到总和中?
困难:现在是无论是否勾选复选框,商品金额都会被计算。
尝试:想在sum函数中加一条if语句判断复选框是否被选中,但由于计算金额和数量利用的是list循环,不知道如何选中某商品对应的复选框进行判断