<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- 引入 Vue 和 Vant 的 JS、CSS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #eee;
}
#all{
overflow: hidden;
margin-bottom: 60px;
}
.list{
width: 100%;
height: auto;
}
.list-info{
width: 100%;
height: 166px;
background-color: #fff;
margin-top: 10px;
}
.list-info-top{
width: 100%;
height: 40px;
border-bottom: 1px solid #f2f2f2;
text-indent: 1em;
line-height: 40px;
font-size: 16px;
}
.list-info-top::before{
content:"";
background-image:url(fh-logo.png);
width: 30px;
display:inline-block;
background-size: 100%;
height: 30px;
background-repeat: no-repeat;
vertical-align: -16px;
margin-right: 6px;
}
.list-info-goods{
width: 100%;
height: 100px;
font-size: 16px;
color: #666;
padding: 0 15px;
margin-top: 10px;
}
.list-info-goods-left{
width: 24%;
height: 100px;
float: left;
margin-right: 10px;
border: 1px solid #eee;
}
.list-info-goods-left img{
width: 100%;
height: 100%;
}
.list-info-goods-center{
width: 50%;
height: 100px;
font-size: 16px;
float: left;
}
.list-info-goods-right{
font-size: 16px;
color:#f40;
width: 10%;
margin-top: 5px;
}
.list-info-goods-center-bom{
margin-top: 10px;
}
.del,.add{
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #eee;
line-height: 20px;
text-align: center;
font-size: 14px;
color: #000;
background-color: #eee;
}
.input-text{
width: 30px;
height: 18px;
text-align: center;
line-height: 18px;
}
.list-info-bom{
border-top: 1px solid #eee;
height: 30px;
text-align: right;
color: #999;
line-height: 36px;
margin-top: 10px;
margin-left: 15px;
margin-right: 15px;
}
.footer{
position: fixed;
bottom: 0;
width: 100%;
background-color: #fff;
border-top: 1px solid #eee;
height: 50px;
}
.footer-right{
position: absolute;
right: 0;
width: 30%;
background-color: #f40;
color: #fff;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 14px;
}
.footer-left{
width: 70%;
height: 50px;
line-height: 50px;
font-size: 14px;
text-indent: 1em;
text-align: left;
}
.noData{
text-align: center;
color: #999;
margin-top: 30px;
}
/* 侧滑删除样式调整 */
.van-swipe-cell{
height: 166px;
}
.delete-button {
height: 100%;
}
.van-swipe-cell__right{
height: 166px;
}
</style>
<body>
<div id="all">
<div class="list">
<div class="list-info" v-for="(item,index) in goodsArr" :key="index">
<van-swipe-cell>
<div class="list-info-top">君乐宝旗舰店</div>
<div class="list-info-goods">
<div class="list-info-goods-left">
<img :src="item.goodsImg">
</div>
<div class="list-info-goods-center" >
<span>{{item.goodsName}}</span>
<div class="list-info-goods-center-bom">
<span>数量：</span>
<span class="del" @click="clickBtn(false,index)">-</span>
<input type="text" :value="item.num" disabled="disabled" id="numText" class="input-text">
<span class="add" @click="clickBtn(true,index)">+</span>
</div>
<div class="list-info-goods-right">￥{{item.price}}</div>
</div>
</div>
<van-button slot="right" @click="isDel(index)" square text="删除" type="danger" class="delete-button"/>
</van-swipe-cell>
</div>
</div>
<div v-if="goodsArr.length == 0" class="noData">没有数据了</div>
<div class="footer" v-if="goodsArr.length != 0" >
<div class="footer-right">去支付</div>
<div class="footer-left" >合计:{{totalPrice}}</div>
</div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#all',
data: {
goodsArr:[
{"goodsName":"君乐宝至尊奶粉1","id":1,"num":1,"goodsImg":"fh-logo.png","price":40},
{"goodsName":"君乐宝至尊奶粉2","id":2,"num":1,"goodsImg":"fh-logo.png","price":50},
{"goodsName":"君乐宝至尊奶粉3","id":3,"num":1,"goodsImg":"fh-logo.png","price":60}
],
totalPrice:0
},
mounted(){
this.getTotalPrice()
},
methods:{
getTotalPrice(){
//总计
var price = 0;
this.goodsArr.forEach((item,index)=>{
price += item.num * item.price;
});
this.totalPrice = price;
},
clickBtn(bool,index){
// 获取对应下标的商品数据
var goodsIndex = this.goodsArr[index];
if(bool){
//加
goodsIndex.num++;
}else{
//减
if(goodsIndex.num <= 1){
return;
}
goodsIndex.num--;
};
this.getTotalPrice()
},
isDel(index){
//删除
this.goodsArr.splice(index,1);
this.getTotalPrice();
}
}
});
</script>
</html>
来源：CSDN
作者：weixin_42124996
链接：https://blog.csdn.net/weixin_42124996/article/details/104617367