作为一个电商平台，怎么能没有购物车页面，购物车要实现的功能有：勾选要付款的商品、增加商品数量、计算总价等功能。
源码链接下载：https://download.csdn.net/download/qq_39404258/11141525 （积分是csdn默认设置的，我也没办法）
先上购物车效果图：
在app.json中先配置该页面，不必多说。 "pages/shopcat/shopcat"
js
Page({
/**
* 页面的初始数据
*/
data: {
icons: ["../img/plus_pink.png", "../img/jian_pink.png"],
check:true,
totalfee:0,
items: [
{
id: 0,
title: '红裙子',
spec: 'L',
imgUrl: '../img/shop1.jpg',
sale: '199',
count: 1,
selected: true,
total: 855,
},
{
id: 1,
title: '饮品',
spec: '小杯',
count: 1,
selected: true,
total: 855,
imgUrl: '../img/shop2.jpg',
sale: 19,
},
{
id: 2,
title: '白衣服',
spec: 'XL',
count: 1,
imgUrl: '../img/shop3.jpg',
sale: 99,
selected: true,
total: 855
},
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var self = this;
var items = [];
items = this.data.items; //获得items数组
let fee = 0;
for (var i = 0; i < this.data.items.length; i++) {
fee = fee + items[i].count * items[i].sale;
}
self.setData({
totalfee: fee
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
// 减按钮控件
jianFn: function (e) {
let self = this
let items=this.data.items;
let id = e.currentTarget.dataset.id;
if (items[id].count <= 1) {
items[id].count=1;
self.setData({
items:items
})
} else {
items[id].count = items[id].count - 1;
let fee = 0;
for (var i = 0; i < this.data.items.length; i++) {
if (items[i].selected) {
fee = fee + items[i].count * items[i].sale;
}
}
self.setData({
items:items,
totalfee: fee
})
}
},
// 加按钮控件
plusFn: function (e) {
var self = this
var items = [];
items =this.data.items; //获得items数组
var id = e.currentTarget.dataset.id; // 获得wxml的data-id的值 data-id与dataset.id对应
items[id].count = items[id].count + 1;
// let totalfee = this.data.totalfee;
let fee = 0;
for (var i = 0; i < this.data.items.length;i++){
if (items[i].selected){
fee = fee + items[i].count * items[i].sale;
}
}
self.setData({
items: items,
totalfee: fee
})
},
//单选按钮
radiocon: function (e) {
let id = e.currentTarget.dataset.id;
var items = this.data.items;
var selected = items[id].selected ;
if (items[id].selected){
items[id].selected=false;
}
else{
items[id].selected=true;
}
let fee = 0;
for (var i = 0; i < this.data.items.length; i++) {
if (items[i].selected){
fee = fee + items[i].count * items[i].sale;
}
}
this.setData({
items: items,
totalfee: fee
})
},
//全选按钮
all: function (e) {
var check=this.data.check;
var items = this.data.items;
if (check){
check=false;
for(var i=0;i<items.length;i++){
items[i].selected = false;
}
}
else {
check = true;
for (var i = 0; i < items.length; i++) {
items[i].selected = true;
}
}
let fee = 0;
for (var i = 0; i < this.data.items.length; i++) {
if (items[i].selected) {
fee = fee + items[i].count * items[i].sale;
}
}
this.setData({
check: check,
items: items,
totalfee: fee
})
},
//立即购买按钮
confirmPay: function (e) {
wx.navigateTo({
url: 'orderconfirm/orderconfirm',
})
}
})解释一点：items = this.data.items; //获得items数组
在传值时 self.setData({ items:items, 这一句 你只能改变items的值传过去 ，如果你只想改变items[1].selected,而写成
self.setData({ selected：selected 是不可以的，因为selected这个属性在items里面，而self.setData只能得到data下面的值。所以你只能通过改变items来改变值。
2.json
{
"usingComponents": {},
"navigationBarTitleText": "购物车",
"enablePullDownRefresh": true
}3.wxml
<view style='background:#EEE'>
<view class='lists'>
<!--bindtap绑定事件-->
<view class='list' bindtap='toDetail' wx:key="" wx:for="{{items}}" wx:for-index="index" wx:for-item="item" data-obj='{{item}}'>
<view class='radio-group'>
<radio color='red' data-id='{{item.id}}' bindtap='radiocon' checked='{{item.selected}}'></radio></view>
<image class='list-left' src='{{item.imgUrl}}'></image>
<view class='list-right'>
<view class='right-text'>{{item.title}}</view>
<view>
<view class='spec'>{{item.spec}}</view>
<view class='column'>
<view class='sale'>￥{{item.sale}}</view>
<view class='total'>库存：{{item.total}}件</view>
<view class='item'>
<image data-id='{{item.id}}' src='{{icons[1]}}' bind:tap="jianFn"></image>
</view>
<view class='item'>{{item.count}}</view>
<view class='item'>
<image data-id='{{item.id}}' src='{{icons[0]}}' bind:tap="plusFn"></image>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="bottom">
<view class="bottom-operate">
<view class="bottom-left count"><radio color='red' class="radio-total" checked='{{check}}' bindtap='all'></radio>全选</view>
<view class="bottom-operate price">合计：
<text style="color:#FF0000">￥{{totalfee}}</text>
</view>
<view class="bottom-operate space"></view>
<view class="bottom-operate button" catchtap='confirmPay' style='background-color:#FF0000;'>立即购买</view>
</view>
</view>
</view>
这里有个坑：改变radio颜色的参数是 color="red" 而不是style="color:red",并且radio按下去之后再按是取消不掉的，需要自己做处理，需要动态的去处理checked这个属性。
改变radio样式可参考这篇博文：https://blog.csdn.net/qq_41617704/article/details/80973966
4.wxss
.lists{
padding: 10rpx 20rpx ;
box-sizing: border-box;
}
.list{
padding: 30rpx 10rpx;
background: #FFF;
box-sizing: border-box;
display: flex;
flex-direction: row;
margin-top: 20rpx;
}
.column{
margin-top: 30rpx;
background: #FFF;
display: flex;
flex-direction: row;
}
.radio-group{
margin-top: 7%;
transform:scale(0.7);
}
.radio-total{
transform:scale(0.7);
}
.list-left{
width:15%;
height:70px
}
.list-right{
width:70%;
height:100%;
padding-left:36rpx;
display: flex;
flex-direction: column;
}
.right-text{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.sale{
color:#e91e56;
font-weight:bold;
font-size:16px;
width: 80px;
}
.spec{
font-size: 10px;
color:#808080;
}
.total{
display: flex;
align-items: center;
font-size: 10px;
color:#808080;
width: 80px;
}
.item image{
margin-left: 15rpx;
margin-right: 15rpx;
width: 50rpx;
height: 50rpx;
}
/*底部操作栏*/
.bottom{
width: 100%;
height: 90rpx;
position: fixed;
bottom: 0;
display: block;
}
.bottom-operate{
width: 100%;
height: 90rpx;
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
font-size: 32rpx;
background-color: #FFF;
color: #A6A6A6;
}
.bottom-left{
width: 100%;
height: 90rpx;
display: flex;
justify-content: left;
flex-direction: row;
align-items: center;
font-size: 32rpx;
background-color: #FFF;
color: #A6A6A6;
}
.bottom-operate .count{
width: 30%;
height: 100%;
}
.bottom-operate .price{
width: 30%;
height: 100%;
}
.bottom-operate .space{
width: 10%;
height: 100%;
}
.bottom-operate .button{
width: 20%;
height: 100%;
color:#FFF;
}
源码链接下载：https://download.csdn.net/download/qq_39404258/11141525 （积分是csdn默认设置的，我也没办法）