一.首先定义一个点击事件
const app = getApp() 引入全局app.js
<button bindtap="addCart">添加</button>
data:{
id:'',
image:'',
title:''
}
addCart(){
const obj = {}
goods.id = this.id
goods.image =this.image
goods.title = this.title
app.addToCart(obj) //调用这个全局点击事件,把商品对象obj传过去
}
二.由于小程序没有vuex,我们需要在app.js中定义全局变量
//app.js
App({
onLaunch: function () {
},
addToCart(obj) {
// 1.判断是否已经添加进来
const oldInfo = this.globalData.cartList.find((item) => item.iid === obj.iid)
if (oldInfo) {
oldInfo.count += 1
} else {
obj.count = 1
obj.checked = true
this.globalData.cartList.push(obj)
}
// 2.购物车回调
if (this.addCartCallback) {
this.addCartCallback()
}
},
globalData: {
cartList: [],
}
})
三.接下来就是在购物车渲染了
const app = getApp() 引入全局app.js
data:{
cartList:[],
isSelectAll: true,
totalPrice: 0,
totalCounter: 0
}
onLoad(){
this.setData({
cartList: app.globalData.cartList //定义一个空数组,将全局cartList赋给定义的空数组,接下来就用这个数组进行渲染
})
// 2.设置回调
app.addCartCallback = () => {
this.setData({
cartList: app.globalData.cartList
})
this.changeData()
}
这个地方需要注意一下,由于app.js中的onLaunch是异步的,会导致globalData中没有值,这就需要在购物车里面设置一个回调方法,然后在app.js中判断
// 3.设置修改某个商品的回调
app.changeGoodsState = (index, goods) => {
// 1.修改某一项的选中状态
this.setData({
[`cartList[${index}]`]: goods
})
// 2.修改全部选中的状态
const selectAll = !this.data.cartList.find(item => !item.checked)
this.setData({
isSelectAll: selectAll
})
this.changeData()
},
onSelectAll() {
// 1.判断是否是全部选中
if (this.data.isSelectAll) { // 目前全部选中
this.data.cartList.forEach(item => {
item.checked = false
})
this.setData({
cartList: this.data.cartList,
isSelectAll: false,
totalPrice:0
})
}
else { // 某些没选中
let allprice = 0
this.data.cartList.forEach(item => {
item.checked = true
allprice += item.price * item.count
})
this.setData({
cartList: this.data.cartList,
isSelectAll: true,
totalPrice: allprice
})
}
},
allprice(){
this.changeData()
},
removes(){
this.changeData()
this.onShow()
},
changeData() {
// 1.获取所有选中数据
let totalPrice = 0;
let counter = 0;
for (let item of this.data.cartList) {
if (item.checked) {
counter++
totalPrice += item.price * item.count
}
}
// 2.修改数据
this.setData({
totalCounter: counter,
totalPrice: totalPrice
})
},
}
由于购物车没有计算属性,所以每次增加删除等都要调用一次算总价的函数
都要用到这组数据,下面删除全选等
Component({
properties: {
cartList: {
type: Array,
value: []
},
index: {
type: Number
}
},
/**
* 组件的初始数据
*/
data: {
cartList: [],
},
四.删除
remove(e){
const index = app.globalData.cartList.findIndex(item=>item.iid ==e.currentTarget.dataset.id)
if(index!=-1){
app.globalData.cartList.splice(index,1)
}
this.setData({
cartList: app.globalData.cartList
})
this.triggerEvent('removes')
},
根据id进行删除,这是发送点击事件到父组件,第三调用了可见
五.加减进行的函数
change(e) {
//点击加加减减执行的函数
//console.log(e)
let {
type,
id
} = e.currentTarget.dataset;
let index = app.globalData.cartList.findIndex(item => item.iid == id);
//console.log(index, "id是", id)
if (index != -1) {
//console.log(app.globalData.cartList[index])
if (type === "+") {
app.globalData.cartList[index].count++;
} else {
app.globalData.cartList[index].count--;
if (app.globalData.cartList[index].count <= 1) {
app.globalData.cartList[index].count = 1;
}
}
this.setData({
cartList: app.globalData.cartList
})
}
this.triggerEvent('allprice')
},
同样发送了点击事件到第三可见,因为没计算属性
六.单选
onCheckClick(e) {
// 1.查找到对应的商品
const goods = app.globalData.cartList.find(item => item.iid == this.properties.cartList[e.currentTarget.dataset.index].iid)
goods.checked = !goods.checked
console.log(goods)
// 2.获取当前商品的index
const index = e.currentTarget.dataset.index;
// 3.回调
app.changeGoodsState(index, goods)
},