1.效果界面
2.涉及功能
*左侧商品类型、右侧商品可以相互控制；
*商品列表加减及购物车商品加减icon消失、显示；
*商品每一次加减，页面视图变化（数量、价格变化、购物车置灰）；
3.贴上所有代码
1.wxml
{{item.name}}
{{item.name}}
{{itm.title}}
{{itm.info}}
¥{{itm.price}}
{{totalNum}}
¥{{totalMoney}}
去结算
已选商品
{{item.name}}
¥{{item.price}}
{{goodDetail.title}}
¥{{goodDetail.price}}
{{goodDetail.info}}
2.script
createPage({
data: {
foodsList: [], // 商品数据
cartList: [], // 购物车数据
isShowCartMask: false,
totalNum: 0,
totalMoney: 0,
initView: 'item0', // 根据此变量的变化，控制左侧选中状态、右侧滑动
curId: 'item0',
isShowDetail: false,
goodDetail: {},
screenWidth: 0, // 手机屏幕宽度
heightArray: [0] // 右侧每一个类型的高度区间数组
},
onLoad() {
this.getGoodsData()
},
methods: {
async getGoodsData() {
const that = this
const res = await getGoodsInfo({})
this.foodsList = res
wx.getSystemInfo({
success: (ress) => {
that.screenWidth = ress.windowWidth
}
})
this.getHeightSection()
},
// 设置高度区间 所有单位转化为rpx
getHeightSection() {
const that = this
let hg = 0
for (let index = 0; index < that.foodsList.length - 1; index++) {
hg += 70 + that.foodsList[index].list.length * 212
that.heightArray.push(hg)
}
},
// 获取高度区间的下标
getHeightIndex(arr, hg) {
const that = this
arr.forEach((item, index) => {
if (hg >= item) {
that.setData({
curId: 'item' + index
})
}
})
},
// 左边菜单控制右边
scrollToViewFn(e) {
this.setData({
initView: e.target.dataset.id,
curId: e.target.dataset.id
})
},
// 右边滚动控制左边
onPageScroll(e) {
const that = this
let scrollTop = e.detail.scrollTop * 750 / that.screenWidth
this.getHeightIndex(that.heightArray, scrollTop)
},
// 商品列表的减号点击
reduceNum(index, ind, item) {
const that = this
let val = 'foodsList[' + index + '].list[' + ind + '].num'
this.setData({
[val]: item.num - 1
})
// 如果商品为0，就把当前商品在购物车清除
// 如果不为0， 就将当前商品数量减1
if (that.foodsList[index].list[ind].num === 0) {
that.removeAarry(that.cartList, item.id)
} else {
that.cartList.forEach((itm, i) => {
if (itm.id === item.id) {
let value = 'cartList[' + i + '].num'
that.setData({
[value]: itm.num - 1
})
}
})
}
this.computed()
},
// 商品列表的加号点击
addNum(index, ind, item) {
const that = this
let val = 'foodsList[' + index + '].list[' + ind + '].num'
this.setData({
[val]: item.num + 1
})
// 如果商品为1，就把当前商品加入购物车
// 否则， 就将当前商品数量加1
if (that.foodsList[index].list[ind].num === 1) {
let val = { id: item.id, name: item.title, price: item.price, num: 1, index: index, ind: ind, pic: item.pic }
that.cartList.push(val)
} else {
that.cartList.forEach((itm, i) => {
if (itm.id === item.id) {
let value = 'cartList[' + i + '].num'
that.setData({
[value]: itm.num + 1
})
}
})
}
this.computed()
},
// 购物车的减号点击
reduceCart(index, item) {
const that = this
let val = 'foodsList[' + item.index + '].list[' + item.ind + '].num'
let val1 = 'cartList[' + index + '].num'
this.setData({
[val]: item.num - 1,
[val1]: item.num - 1
})
// 如果商品为0，就把当前商品在购物车清除
// 如果不为0， 就将当前商品数量减1
if (that.cartList[index].num === 0) {
that.removeAarry(that.cartList, item.id)
}
this.computed()
},
// 购物车的加号点击
addCart(index, item) {
const that = this
let val = 'cartList[' + index + '].num'
that.setData({
[val]: item.num + 1
})
this.computed()
},
// 清空购物车
clearCart() {
const that = this
wx.showModal({
title: '提示',
content: '清空购物车？',
success: function (res) {
if (res.confirm) {
that.setData({
cartList: []
})
that.foodsList.forEach((item, i) => {
item.list.forEach((itm, j) => {
let value = 'foodsList[' + i + '].list[' + j + '].num'
that.setData({
[value]: 0
})
})
})
that.computed()
}
}
})
},
// 计算选择商品总价格和总数量
computed() {
const that = this
let num = 0
let money = 0
that.cartList.forEach(item => {
num += item.num
money += parseFloat(item.price) * item.num
})
that.setData({
totalNum: num,
totalMoney: money
})
},
// 将数量为0的时候，对应商品在购物车中删除
removeAarry(arr, id) {
arr.forEach((item, index) => {
if (item.id === id) {
arr.splice(index, 1)
}
})
return arr
},
showCartMask() {
this.isShowCartMask = !this.isShowCartMask
},
hiddenCartMak() {
this.isShowCartMask = false
},
stopMaopao() {
},
showGoodDetail(item) {
this.goodDetail = item
this.isShowDetail = true
},
hideDetail() {
this.isShowDetail = false
},
// 订单提交
submitOrder() {
}
}
})3.css