gif:
一、相关文档
组件-》表单组件-》checkbox:
https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html
组件-》视图容器-》swiper:
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
组件-》表单组件-》input:
https://developers.weixin.qq.com/miniprogram/dev/component/input.html
二、代码介绍
1、调后端接口获得商品的全部数据,商品是分类展示的,先将第一类的所有商品都取出来,展示在页面上
onLoad: function (options) {
wx.request({
url: 'http://localhost:8888/wx/day5/food',
success:(res) => {
console.log(res)
if (res.data.code === 200) {
let spuList = res.data.data.categoryList[0].spuList
this.setData({
categoryList: res.data.data.categoryList,
currentFoodList: spuList
})
}
}
})
},
2、每次点击切换tab页时,动态修改currentFootList的值,这个值决定页面渲染的商品列表
handleNav(e) {
let {index} = e.currentTarget.dataset
let {categoryList} = this.data
this.setData({
currentIndex: index,
currentFoodList: categoryList[index].spuList
})
},
3、点击加号或减号时,动态修改一个ordered对象,这个对象保存着所有添加到购物车的商品信息,包括某一个商品添加的数量,ordered这个对象再复制一份放在全局对象中
handleListItemAdd(e) {
let { item } = e.currentTarget.dataset
let {currentIndex, ordered} = this.data
if (ordered[item.spuId]) {
ordered[item.spuId].count = ordered[item.spuId].count + 1
ordered[item.spuId].checked = true
} else {
ordered[item.spuId] = item
ordered[item.spuId].count = 1
ordered[item.spuId].checked = true
}
app.globalData.ordered = ordered
this.setData({
ordered
})
},
4、购物车页面,从全局数据中获取ordered对象,并渲染购物车页面。购物车页面,每个商品都包含一个复选框,根据复选框的勾选情况动态计算总价,商品总数。
priceAndCount() {
let {orderedArr} = this.data
let totalCount = 0
let totalPrice = 0
for (let i = 0; i < orderedArr.length; i++) {
if (orderedArr[i].checked) {
totalCount = totalCount + orderedArr[i].count
totalPrice = totalPrice + orderedArr[i].count * orderedArr[i].currentPrice
}
}
this.setData({
totalCount,
totalPrice
})
},
handleCheckboxChange(e) {
let {value} = e.detail
let {orderedArr} = this.data
for (let i = 0; i < orderedArr.length; i++) {
if (value.indexOf(orderedArr[i].spuId + '') >= 0) {
orderedArr[i].checked = true
} else {
orderedArr[i].checked = false
}
}
this.setData({
orderedArr,
selectAll: value.length === orderedArr.length
})
console.log(e)
this.priceAndCount()
},
5、全选按钮。根据全选按钮的状态,变了整个orderedArr数组,修改每一项的checked属性。
handleSelectAll(e) {
let { value } = e.detail
let { orderedArr } = this.data
let checkedCount = 0
for (let i = 0; i < orderedArr.length; i++) {
if (value.length > 0) {
orderedArr[i].checked = true
checkedCount = checkedCount + 1
} else {
orderedArr[i].checked = false
}
}
this.setData({
orderedArr,
selectAll: checkedCount === orderedArr.length
})
this.priceAndCount()
},
6.购物车页面添加修改数量的加号和减号
<button size="mini" disabled="{{item.subBtnDisabled}}" data-index="{{index}}" bindtap="handleSub">-</button>
<text>数量:{{item.count}}</text>
<button size="mini" data-index="{{index}}" bindtap="handleAdd">+</button>
handleSub(e) {
let { index } = e.currentTarget.dataset
let { orderedArr } = this.data
orderedArr[index].count = orderedArr[index].count - 1
if (orderedArr[index].count <= 1) {
orderedArr[index].subBtnDisabled = true
} else {
orderedArr[index].subBtnDisabled = false
}
this.setData({
orderedArr
})
this.priceAndCount()
},
handleAdd(e) {
let {index} = e.currentTarget.dataset
let {orderedArr} = this.data
orderedArr[index].count = orderedArr[index].count + 1
orderedArr[index].subBtnDisabled = false
this.setData({
orderedArr
})
this.priceAndCount()
},
三、搜索
1.swiper
indicator-dots:是否显示面板指示点
autoplay:是否自动切换
interval:自动切换时间间隔
duration: 滑动动画时长
<swiper
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}">
<view wx:for="{{imgUrls}}" wx:key="{{index}}">
<swiper-item>
<image src="{{item}}" class="m-slide-image"/>
</swiper-item>
</view>
</swiper>
input
<input
type="text"
value="{{searchValue}}"
bindinput="handleInputChange"
placeholder="请输入搜索内容"
class="m-input"></input>
请求搜索接口:
wx.request({
url: 'https://jbiz.share1diantong.com/fa053/topic/search/v1',
method: 'POST',
data: {
"pageNum": 1,
"kw": searchValue,
"pageSize": 10,
"userId": 0
},
success: (res) => {
console.log(res)
this.setData({
list: res.data.data.list
})
console.log(res.data.data.list)
}
})
gif: