接上一个页面,我们已经把要加的物品以及数量本地已经储存好了,现在可以用了,首先页面是这样的
没有数据是页面
有数据时候的页面
现在先把他的wxml页面写出来
<view style="padding-top: {{pageTopHeight}}px;">
<view class="shopping_wrap">
<view class="shopping_p">
<view style="text-align: left;flex: 1;">100%正品保证</view>
<view style="text-align: center;flex: 1;">所以商品精挑细选</view>
<view style="text-align: right;flex: 1;">售后无忧</view>
</view>
<view style="padding: 20rpx;display: flex;">
<view style="flex: 1;">
购物数量
<span style="color: #fc5452;padding-left: 10rpx;">{{sunm}}</span>
</view>
//有数据的时候出现,是管理也是删除
<view wx:if="{{list.length != 0}}" bindtap="management">
{{edit_name}}
</view>
</view>
</view>
<!-- 购物车商品 -->
//判断有数据的时候出现
<view wx:if="{{list.length != 0}}" style="margin:50rpx 0;width: 100%;" >
<view style="background-color: #fff;padding: 30rpx;">
<view>乐优直采></view>
//遍历数据
<view wx:for="{{list}}" wx:key="id" style="display: flex;padding: 30rpx 0;" >
<view style="display: flex;">
//选中和没选中,我用的是图片
<view style="margin-right: 10rpx;margin-top: 50rpx;">
//来进行判断是true和false
<image wx:if="{{item.checked}}" data-index="{{index}}"
class="radio_chek" bindtap="selectList"
src='/Images/31xuanzhong.png'></image>
<image wx:else src='/Images/yuanxingweixuanzhong.png'
class="radio_chek" data-index="{{index}}" bindtap="selectList"></image>
</view>
//遍历商品图片
<image bindtap="bindViewTab" id="{{item.id}}" style="width: 1
50rpx;height: 150rpx;" src="{{item.url}}" ></image>
</view>
<view style="margin-top: 15rpx;margin-left: 20rpx;">
<view style="line-height: 40rpx;" bindtap="bindViewTab" id="
{{item.id}}">{{item.title}}</view>
<view style="color: #e93323;line-height: 80rpx;" bindtap="bindViewTab"
id="{{item.id}}">¥{{item.price}}</view>
// 加减
<view style="padding-left: 200rpx;margin-top: -45rpx;">
<text class="decrease" bindtap="decrease" data-index="
{{index}}">-</text>
<text class="phonenumber">{{item.num}}</text>
<text class="increase" bindtap="increase" data-index="
{{index}}">+</text>
</view>
</view>
</view>
</view>
<view style="display: flex;background: #fff;padding:30rpx 20rpx ;position:
absolute;bottom: 0;width: 100%;">
//全选
<view style="flex:1">
// 选中与不选中
<image wx:if="{{selectAllStatus===true}}" class="total-select"
bindtap="selectAll" src='/Images/31xuanzhong.png'></image>
<image wx:else class="total-select"
bindtap="selectAll"src='/Images/yuanxingweixuanzhong.png'></image>
<text style="position: absolute;top: 35rpx;left: 85rpx;">全选({{sunm}})
</text>
</view>
<view style='flex: 1;text-align: right;display:{{show_edit}}'>
<text style="color: #e93323;margin-left: -30rpx;">¥{{totalPrice}}</text>
<text class="placeanorder" bindtap="immediately">立即下单</text>
</view>
<view style='flex: 1;text-align: right;display:{{edit_show}}'>
<text class="delete" bindtap="deleteList" data-id="{{item.id}}"> 删除
</text>
</view>
</view>
</view>
//如果没有数据的话
<view wx:else>
<image style="width: 100%;height: 100vh;" src="/Images/8.png"></image>
</view>
</view>
出来之后把他的js写出来,页面,加,减已经计算
data的数据
data: {
totalPrice:'0',//总价
sunm:"0", //数量
selectAllStatus:false, //全选
edit_name:'管理',
show_edit: "block",
edit_show: "none",
},
获取数据
onLoad: function (options) {
setInterval(() => {
var li = wx.getStorageSync('shopping')//商品本地存储
this.setData({//数据添加到data里面
list:li,
sunm:li.num
})
},100)
},
//减
decrease:function(e){
const index = e.currentTarget.dataset.index; // 获取点击的索引
// 获取商品数据
let list = this.data.list;
// 获取商品数量
let num = list[index].num;
// 判断num小于等于1 return; 点击无效
if (num <= 1) {
return false;
}
// else num大于1 点击减按钮 数量--
num = num - 1;
list[index].num = num;
this.setData({ //数据添加到data里面
list: list
});
wx.setStorageSync('shopping',list)//本地存储
// 调用计算金额方法
this.count_price();
},
//加
increase:function(e){
// 获取点击的索引
const index = e.currentTarget.dataset.index;
// 获取商品数据
let list = this.data.list;
// 获取商品数量
let num = list[index].num;
// 点击递增
num = num + 1;
list[index].num = num;
// console.log(list[index].num,'list[index].num')
var Num = this.data.num + 1;
this.setData({//数据添加到data里面
list: list,
})
wx.setStorageSync('shopping',list)//本地存储
this.count_price() // 调用计算金额方法
},
//计算
count_price() {
// 获取商品列表数据
let list = this.data.list;
// 声明一个变量接收数组列表price
let total = 0;
let sunlu = 0
// 循环列表得到每个数据
for (let i = 0; i < list.length; i++) {
// 判断选中计算价格
if (list[i].checked === true) {
// 所有价格加起来 count_money
total += list[i].num * list[i].price;
sunlu += list[i].id.length;
list[i]. totalPrice = total
}
}
wx.setStorageSync('shopping',list)
// 最后赋值到data中渲染到页面
this.setData({
sunm:sunlu,
totalPrice: total.toFixed(2)
});
},
接下来是选中和不选以及全选
页面以及js
// 选中
selectList(e) {
var that=this;
// 获取选中的索引
var index = e.currentTarget.dataset.index;
// 获取到商品列表数据
var list = that.data.list;
// 默认全选
that.data.selectAllStatus = true;
// 循环数组数据,判断----选中/未选中[selected]
list[index].checked = !list[index].checked;
// 如果数组数据全部为selected[true],全选
for (var i = list.length - 1; i >= 0; i--) {
if (!list[i].checked) {
that.data.selectAllStatus =false;
break;
}
}
// 重新渲染数据
that.setData({
list: list,
selectAllStatus: that.data.selectAllStatus
})
// 调用计算金额方法
that.count_price();
},
// 全选
selectAll:function(e){
// 全选ICON默认选中
let selectAllStatus = this.data.selectAllStatus;
console.log( selectAllStatus," selectAllStatus")
// true ----- false
selectAllStatus = !selectAllStatus;
// 获取商品数据
let list = this.data.list;
console.log( list," this.data.list")
// 循环遍历判断列表中的数据是否选中
for (let i = 0; i < list.length; i++) {
list[i].checked = selectAllStatus;
}
// 页面重新渲染
this.setData({
selectAllStatus: selectAllStatus,
list: list
});
// 计算金额方法
this.count_price();
},
管理,取消和删除的页面和js
// 管理/取消
management:function(){
var that = this;
var bool=true;
if(bool){//在data里面初始值是管理
that.setData({
edit_show: "block",//下面按钮会变成删除
edit_name: "取消",
show_edit:"none"
})
bool=false;
}else{
that.setData({
edit_show: "none",
edit_name: "管理",
show_edit: "block"//下面按钮会变成立即下单
})
bool = true;
}
},
//删除 批量删除
deleteList:function(e){
// 获取商品列表数据
let list = this.data.list;
var ll = []
//遍历数据
for (let i = 0; i < list.length; i++) {
if(list[i].checked ===true){//判断一下按钮等于true吗,有的话走下面的
list[i].index = i//添加一下下标
ll.push(list[i]) //添加到数组里
}
}
if(ll.length!=''){//判断数组里不等于空
var index=[]//数据的下标
var numl = ll.length//数据的长度
for (let i = 0; i < ll.length; i++) {//遍历数据
index.push(ll[i].index) //添加数据的下标
}
this.data.list.splice(index,numl);//删除数据的下标和数量
// 更新data数据对象
if (this.data.list.length > 0) {
this.setData({
list: this.data.list,
sunm:0,
})
wx.setStorageSync('shopping',this.data.list);//本地存储
} else {
this.setData({
list: this.data.list.checked,
sunm:0,
})
wx.setStorageSync('shopping', []);//本地存储
}
}else{//等于空的话走这一步
wx.showToast({
title: '请选择商品',
icon:'none'
})
}
},
wxss
/* 正品 */
.shopping_wrap{
display: block;
width: 100%;
background: #fff;
padding-top: 50rpx;
}
.shopping_p{
display: flex;
line-height: 70rpx;
background: #f5f5f5;
width: 100%;
font-size: 12px;
color: #b6b6b6;
padding: 0px 80rpx;
}
/* 加减 */
.decrease{
padding: 8rpx 30rpx;
border-top:1px solid #bbbbbb;
border-left:1px solid #bbbbbb;
border-bottom:1px solid #bbbbbb ;
}
.phonenumber{
padding: 8rpx 30rpx;
border: 1px solid #bbbbbb;
}
.increase{
padding: 8rpx 30rpx;
border-top:1px solid #bbbbbb ;
border-right:1px solid #bbbbbb ;
border-bottom:1px solid #bbbbbbbd ;
}
/* */
.radio_chek{
width: 50rpx;
height: 50rpx;
}
/* */
.total-select{
width: 50rpx;
height: 50rpx;
}
/* 下单 */
.placeanorder{
background: #e93323;
color: #fff;
padding: 10px 50rpx;
border-radius: 100rpx;
margin-left: 20rpx;
}
.delete{
border: 1px solid #e93323;
padding: 10px 60rpx;
color:#e93323 ;
border-radius: 100rpx;
}
现在购物车这一块已完毕,有更简单的也可以留言,我可以在改进改进