复制粘贴直接用
shopcart.wxml
<!--pages/shopcart/shopcart.wxml-->
<scroll-view class="scroll" scroll-y="true">
<view class="separate"></view>
<view wx:for="{{carts}}" wx:key="id">
<view class="cart_container">
<view class='select_icon'>
<icon wx:if="{{item.ischecked}}" type="success" color="red" bindtap="judge_checked" data-index="{{index}}" />
<icon wx:else type="circle" bindtap="judge_checked" data-index="{{index}}"/>
</view>
<image class="item-image" src="{{item.image}}"></image>
<view class="column">
<view class="bjj">
<text class="title">{{item.title}}</text>
<view class='ljt'>
<image class='ljt1' src='/images/ljt.png' bindtap='deleteList' data-index="{{index}}"></image>
</view>
</view>
<view class="row1">
<text class="sku-price">￥</text>
<text class="sku-price1">{{item.price}}</text>
</view>
<view class='sku'>
<view class='mm' bindtap="minusCount" data-index="{{index}}">-</view>
<view class='mm'>{{item.num}}</view>
<view class='mm' bindtap="addCount" data-index="{{index}}">+</view>
</view>
</view>
</view>
<view class="separate"></view>
</view>
</scroll-view>
<view class="bottom_total">
<view class="bottom_line"></view>
<view class="row">
<view class='iconAll'>
<icon wx:if="{{selectAllStatus}}" type="success" color="red" bindtap="selectAll" data-index="{{index}}" />
<icon wx:else type="circle" bindtap="selectAll" data-index="{{index}}"/>
</view>
<text class="small_text">全选</text>
<text>合计:￥ </text>
<text class="price">{{totalPrice}}</text>
<button class="button-red" bindtap="toBuy" formType="submit">去结算</button>
</view>
</view>
shopcart.wxss
/* pages/shopcart/shopcart.wxss */
.cart_container {
display: flex;
flex-direction: row;
}
.scroll {
margin-bottom: 120rpx;
}
.column {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
align-items: center;
}
.row1{
display: flex;
flex-direction: row;
align-items: center;
}
.sku {
margin-top: -70rpx;
margin-left: 198rpx;
}
.sku-price {
color: red;
position: relative;
margin-top: 70rpx;
}
.sku-price1 {
color: red;
position: relative;
margin-top: 70rpx;
width: 140rpx;
overflow: hidden;
white-space: nowrap;
}
.price {
color: red;
position: relative;
}
.title {
font-size: 38rpx;
margin-top: 40rpx;
width:350rpx;
display: block;
line-height: 40rpx;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
.small_text {
font-size: 28rpx;
margin-right: 40rpx;
margin-left: 10rpx;
}
.item-allselect {
width: 40rpx;
height: 40rpx;
margin-left: 20rpx;
}
.bottom_line {
width: 100%;
height: 2rpx;
background: lightgray;
}
.bottom_total {
position: fixed;
display: flex;
flex-direction: column;
bottom: 0;
width: 100%;
height: 120rpx;
line-height: 120rpx;
background: white;
}
.button-red {
background-color: #f44336; /* 红色 */
}
button {
position: fixed;
right: 0;
color: white;
text-align: center;
display: inline-block;
font-size: 30rpx;
border-radius: 0rpx;
width: 30%;
height: 120rpx;
line-height: 120rpx;
}
.iconAll{
margin-top: 15px;
}
.select_icon{
margin-top:60rpx;
}
.item-image {
width: 180rpx;
height: 180rpx;
margin: 20rpx ;
}
.mm{
display:inline-block;
line-height:20px;
padding:5px 0;
text-align:center;
min-width:40px;
box-sizing:border-box;
vertical-align:middle;
font-size:12px;
border:1rpx solid #dddee1;
}
.ljt{
height: 30px;
width: 25px;
margin-top: 50rpx;
margin-left: 55rpx;
}
.ljt1{
height: 29px;
width: 24px;
}
.bjj{
display: flex;
flex-direction: row;
}
shopcart.js
// pages/shopcart/shopcart.js
Page({
/**
* 页面的初始数据
*/
data: {
carts: [], // 购物车列表
hasList: false, // 列表是否有数据
totalPrice: 0, // 总价，初始为0
selectAllStatus: false, // 全选状态
},
/**
* 计算价格
*/
getTotalPrice() {
let carts = this.data.carts; // 获取购物车列表
let total = 0; //最终价格
for (let i = 0; i < carts.length; i++) { // 循环列表得到每个数据
if (carts[i].ischecked == true) { // 判断选中才会计算价格
total += carts[i].price * carts[i].num; // 所有价格加起来
}
}
this.setData({ // 最后赋值到data中渲染到页面
carts: carts,
totalPrice: total.toFixed(2)
});
},
/**
* 选择事件
*/
judge_checked(e) {
let aAllprice = 0;
let selectAllStatus = this.data.selectAllStatus;
const index = e.currentTarget.dataset.index; // 获取data- 传进来的index
let carts = this.data.carts;
const ischecked = carts[index].ischecked; //获取当前商品的选中状态
carts[index].ischecked = !ischecked; // 改变状态
//得知是否全选
for (let i = 0; i < carts.length; i++) {
aAllprice = aAllprice + this.data.carts[i].price * this.data.carts[i].num;
}
this.getTotalPrice() //重新计算总价
let allmoney = this.data.totalPrice
if (aAllprice != allmoney) {
selectAllStatus = false
} else {
selectAllStatus = true
}
this.setData({
carts: carts,
selectAllStatus: selectAllStatus
});
},
/**
*数量加减功能
*/
// 增加数量
addCount(e) {
const index = e.currentTarget.dataset.index;
let carts = this.data.carts;
let num = carts[index].num;
num = num + 1;
carts[index].num = num;
this.setData({
carts: carts
});
this.getTotalPrice();
},
// 减少数量
minusCount(e) {
const index = e.currentTarget.dataset.index;
let carts = this.data.carts;
let num = carts[index].num;
if (num <= 1) {
return false;
}
num = num - 1;
carts[index].num = num;
this.setData({
carts: carts
});
this.getTotalPrice();
},
//全选事件
selectAll(e) {
let selectAllStatus = this.data.selectAllStatus; // 是否全选状态
selectAllStatus = !selectAllStatus;
let carts = this.data.carts;
if (!this.data.selectAllStatus){
for (let i = 0; i < carts.length; i++) {
carts[i].ischecked = true
}
}else{
for (let i = 0; i < carts.length; i++) {
carts[i].ischecked = false
}
}
this.setData({
selectAllStatus: selectAllStatus,
carts: carts
});
this.getTotalPrice(); // 重新获取总价
},
//删除商品
deleteList(e){
const index = e.currentTarget.dataset.index; // 获取data- 传进来的index
let carts = this.data.carts;
carts.splice(index, 1); // 删除购物车列表里这个商品
this.setData({
carts: carts
});
if (!carts.length) { // 如果购物车为空
this.setData({
hasList: false // 修改标识为false，显示购物车为空页面
});
} else {
this.getTotalPrice(); //重新计算价格
}
wx.showToast({
title: '已删除',
icon: 'success',
});
},
//去结算
toBuy() {
wx.showToast({
title: '去结算',
icon: 'success',
duration: 3000
});
this.setData({
showDialog: !this.data.showDialog
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.setData({
hasList: true, // 既然有数据了，那设为true吧
carts: [
{ id: 1, title: '羊肉 半斤', image: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=782046930,1105099424&fm=27&gp=0.jpg", price: 66, ischecked: false, num: 1},
{ id: 2, title: '大饼', image: "https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=11f83d125a3d26972e86005b65cb9ec3/72f082025aafa40ffaefce05a064034f78f01938.jpg", price: 10, ischecked: false,num: 1},
{ id: 3, title: '一呀么咿呀么咿呀蚂蚁', image: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=782046930,1105099424&fm=27&gp=0.jpg", price: 55, ischecked: false, num: 1 },
]
});
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
各个功能注释上都有
有个单独的功能 拿出来单独提一下
那个购物车加减按钮
<view class='mm' bindtap="minusCount" data-index="{{index}}">-</view>
<view class='mm'>{{item.num}}</view>
<view class='mm' bindtap="addCount" data-index="{{index}}">+</view>
css样式如下
display:inline-block;
line-height:20px;
padding:5px 0;
text-align:center;
min-width:40px;
box-sizing:border-box;
vertical-align:middle;
font-size:12px;
border:1rpx solid #dddee1;
删除按钮图片位置
图片自己复制改名为 ljt.png 便可以直接复制粘贴代码用
