本文介绍了一个基于微信小程序实现的购物车组件，该组件具备商品分类、动态加载、购物车功能，包括商品增删、数量调整及总价计算。通过wxml、wxss和js代码详细展示了如何构建响应式布局，实现流畅的用户体验。
废话不多说 先上效果图
wxml
<view class="serverContainer">
<view class="menuTopClass"></view>
<view class="menu">
<view class="menuItem {{current == 0 ? 'active' : ''}}" data-index="0" bindtap="selectMenuList">企业服务</view>
<view class="menuItem {{current == 1 ? 'active' : ''}}" data-index="1" bindtap="selectMenuList">会员服务</view>
</view>
<swiper bindchange="toggleService" current="{{current}}">
<swiper-item>
<view class="serverContent">
<view class="serverList">
<view class="listItem {{enterpriseItem == 0 ? 'active' : ''}}">秘书服务</view>
<view class="listItem {{enterpriseItem == 1 ? 'active' : ''}}">工商注册</view>
<view class="listItem {{enterpriseItem == 2 ? 'active' : ''}}">财务审计</view>
<view class="listItem {{enterpriseItem == 3 ? 'active' : ''}}">知识产权</view>
</view>
<scroll-view scroll-y class="serverItem" data-watchItem="enterpriseItem" data-arr="itemTop_e" bindscroll="scrollView">
<!-- 一个区块循环一个东西 -->
<view wx:key="index" class="itemContent" wx:for="{{enterpriseList}}">
<view class="itemTitle enterpriseTitle" wx:if="{{item.data.length != 0}}">{{item.name}}</view>
<view class="itemContentLi" wx:for="{{item.data}}" wx:for-item="itemData" wx:key="itemIndex" wx:for-index="itemIndex">
<image class="itemImage" src="{{itemData.image}}"></image>
<view class="itemInfo">
<view class="titleInfo">{{itemData.name}}</view>
<view class="typeInfo">{{itemData.type}}</view>
<view class="money">¥{{itemData.money}}</view>
<view class="buyButton" data-list="enterpriseList" data-parant="{{index}}" data-index="{{itemIndex}}" data-handle="+" bindtap="handleGoods">购买服务</view>
</view>
</view>
</view>
</scroll-view>
</view>
</swiper-item>
<swiper-item>
<view class="serverContent">
<view class="serverList">
<view class="listItem {{memberItem == 0 ? 'active' : ''}}">美食特惠</view>
<view class="listItem {{memberItem == 1 ? 'active' : ''}}">下午茶</view>
<view class="listItem {{memberItem == 2 ? 'active' : ''}}">手机维修</view>
<view class="listItem {{memberItem == 3 ? 'active' : ''}}">烟酒糖茶</view>
<view class="listItem {{memberItem == 4 ? 'active' : ''}}">行李箱包</view>
</view>
<scroll-view scroll-y class="serverItem" data-watchItem="memberItem" data-arr="itemTop_m" bindscroll="scrollView">
<view wx:key="index" class="itemContent" wx:for="{{memberServiceList}}">
<view class="itemTitle memberTitle" wx:if="{{item.data.length != 0}}">{{item.name}}</view>
<view class="itemContentLi" wx:for="{{item.data}}" wx:for-item="itemData" wx:key="itemIndex" wx:for-index="itemIndex">
<image class="itemImage" src="{{itemData.image}}"></image>
<view class="itemInfo">
<view class="titleInfo">{{itemData.name}}</view>
<view class="typeInfo">{{itemData.type}}</view>
<view class="money">¥{{itemData.money}}</view>
<view class="controlView">
<view class="controlBtn" data-index="{{itemIndex}}" wx:if="{{itemData.total != 0}}" data-list="memberServiceList" data-parant="{{index}}" data-index="{{itemIndex}}" bindtap="handleGoods" data-handle="-">
<view class="btn">
<image src="../../images/subtract.svg" class="subtract" />
</view>
</view>
<view class="total" wx:if="{{itemData.total != 0}}">{{itemData.total}}</view>
<view class="controlBtn" data-list="memberServiceList" data-parant="{{index}}" data-index="{{itemIndex}}" data-handle="+" bindtap="handleGoods">
<view class="btn">
<image src="../../images/add.svg" class="add" />
</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</swiper-item>
</swiper>
</view>
<view class="mask" hidden="{{!selectGoods}}"></view>
<view class="buyGoodsList {{selectGoods ? 'buyGoodsFade' : ''}}">
<view class="titleInfo">
<view class="cancel" bindtap="selectCar" data-status="0">取消</view>
<view class="title">已添加商品</view>
<view class="sure">确认</view>
</view>
<view class="clear">
<view class="clearBtn" bindtap="clearBuyList">
清空
</view>
</view>
<scroll-view class="goodsListContent" scroll-y>
<view class="goodsInfo" wx:for="{{buyGoodsList}}" wx:key="{{index}}">
<view class="goodsName">{{item.name}}</view>
<view class="goodsHandle">
<view class="controlBtn" data-index="{{index}}" data-id="{{item.goodsID}}" bindtap="shoppingCarHandle" data-handle="-">
<view class="btn">
<image src="../../images/subtract.svg" class="subtract" />
</view>
</view>
<view class="total">{{item.total}}</view>
<view class="controlBtn" data-index="{{index}}" data-id="{{item.goodsID}}" data-handle="+" bindtap="shoppingCarHandle">
<view class="btn">
<image src="../../images/add.svg" class="add" />
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="shoppingCar {{COUNT_TOTAL > 0 ? 'shoppingCarFade' : ''}}" >
<view class="goodsListInfo">
<image src="../../images/shoppingCar.svg" data-status="1" bindtap="selectCar" class="goodsCarIcon">
</image>
<view class="goodsTotal">{{COUNT_TOTAL}}</view>
<view class="money">¥{{COUNT_MONEY}}</view>
</view>
<view class="sureBuy" bindtap="sureBuy">
确认购买
</view>
</view>wxss
.serverContainer{
width: 100%;
height: 100%;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
display: flex;
flex-direction: column;
}
.menuTopClass{
width: 100%;
height: 1rpx;
box-shadow: 0 1rpx 6rpx 0 #E1E1E3;
}
.menu{
width: 100%;
height: 100rpx;
flex: 0 0 100rpx;
display: flex;
justify-content: center;
box-shadow: 0 1rpx 6rpx 0 #E1E1E3;
align-items: center;
z-index: 1;
}
.menu .menuItem{
width: 160rpx;
text-align: center;
line-height: 52rpx;
height: 52rpx;
border-radius: 32rpx;
font-size: 24rpx;
color: #113B73
}
.menu .active{
color: #fff;
background-color: #113B73
}
.serverContent{
width: 100%;
height: 100%;
display: flex;
}
.serverList{
flex: 0 0 190rpx;
background-color: #f7f8fa;
height: 100%;
}
.serverList .listItem{
width: 100%;
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 26rpx;
color: #7C8594;
position: relative;
}
.serverList .active{
background-color: #fff;
color: #333333;
}
.serverList .active::after{
content: '';
height: 34rpx;
width: 6rpx;
background-color: #113B73;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
margin: auto 0px;
}
.serverItem{
flex: 1 0;
box-sizing: border-box;
}
.itemContent{
width: 100%;
padding: 0 20rpx;
box-sizing: border-box;
}
.itemContent .itemTitle{
font-size: 24rpx;
color: #333333;
padding: 20rpx 0px 30rpx;
}
.itemContent .itemContentLi{
display: flex;
margin-bottom: 20rpx;
width: 100%;
overflow: hidden;
padding-bottom: 30rpx;
border-bottom: 1rpx solid #E5E5E5;
}
.itemContent .itemContentLi .itemImage{
flex: 0 0 140rpx;
width: 140rpx;
height: 140rpx;
margin-right: 30rpx;
}
.itemContent .itemContentLi .itemInfo{
position: relative;
flex: 1 1 auto;
}
.itemContent .itemContentLi .itemInfo .titleInfo{
font-size: 28rpx;
color: #333333;
width: 100%;
margin-bottom: 12rpx;
}
.itemContent .itemContentLi .itemInfo .titleInfo, .itemContent .itemContentLi .itemInfo .typeInfo{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.itemContent .itemContentLi .itemInfo .typeInfo{
font-size: 26rpx;
color: #7C8594;
margin-bottom: 14rpx;
}
.itemContent .itemContentLi .itemInfo .money{
font-size: 32rpx;
color: #FA7D1D;
}
.itemContent .itemContentLi .itemInfo .buyButton{
text-align: center;
background: #FA9B1D;
border-radius: 4rpx;
font-size: 24rpx;
color: #FFFFFF;
width: 140rpx;
height: 48rpx;
line-height: 48rpx;
position: absolute;
right: 0px;
bottom: 0px;
}
swiper{
flex: 1 0;
}
.controlView, .goodsHandle{
display: flex;
justify-content: flex-end;
align-items: center;
}
.controlView{
position: absolute;
right: 0px;
bottom: -10px;
}
.goodsHandle{
flex: 0 0 300rpx;
}
.controlView .controlBtn{
padding: 5px;
}
.controlView .controlBtn .btn, .goodsHandle .controlBtn .btn{
width: 50rpx;
height: 50rpx;
border-radius: 50%;
background-color: #EAEEF3;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden
}
.controlView .controlBtn .btn .add, .goodsHandle .controlBtn .btn .add{
width: 20px;
height: 20px;
}
.controlView .total, .goodsHandle .total{
font-size: 26rpx;
color: #333333;
flex: 0 0 50rpx;
text-align: center;
}
.controlView .controlBtn .btn .subtract, .goodsHandle .controlBtn .btn .subtract{
width: 20px;
}
.shoppingCar{
width: 100%;
height: 98rpx;
background-color: #fff;
display: flex;
bottom: -98rpx;
align-items: center;
position: fixed;
z-index: 20;
border-top: 1rpx solid #DCDEE0;
transition: all 0.3s ease-in-out
}
.shoppingCarFade{
bottom: 0;
}
.shoppingCar .goodsListInfo{
flex: 1 0 auto;
display: flex;
align-items: center;
padding-left: 40rpx;
box-sizing: border-box;
position: relative;
}
.shoppingCar .goodsListInfo .goodsCarIcon{
width: 52rpx;
height: 52rpx;
}
.shoppingCar .goodsListInfo .goodsTotal{
padding: 0rpx 12rpx;
height: 20rpx;
background: #FA9B1D;
border: 1rpx solid #FFFFFF;
border-radius: 10rpx;
font-size: 20rpx;
color: #FFFFFF;
text-align: center;
position: relative;
top: -15rpx;
left: -10rpx;
line-height: 19rpx;
}
.shoppingCar .goodsListInfo .money{
font-size: 36rpx;
color: #FA7D1D;
margin-left: 20rpx;
}
.shoppingCar .sureBuy{
flex: 0 0 320rpx;
background-color: #FA9B1D;
font-size: 30rpx;
height: 100%;
color: #FFFFFF;
text-align: center;
line-height: 98rpx
}
.mask{
position: fixed;
left: 0px;
bottom: 0px;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0.5;
background-color: #000000;
}
.buyGoodsList{
position: absolute;
bottom: -100%;
width: 100%;
background-color: #fff;
padding: 0 20rpx;
box-sizing: border-box;
z-index: 9;
transition: bottom 0.3s ease-in-out
}
.buyGoodsFade{
bottom: 98rpx;
}
.buyGoodsList .titleInfo{
height: 100rpx;
display: flex;
font-size: 30rpx;
color: #494949;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #E5E5E5;
}
.buyGoodsList .titleInfo .sure{
color: #113B73;
}
.buyGoodsList .clear{
font-size: 24rpx;
color: #888888;
height: 96rpx;
display: flex;
align-items: center;
justify-content: flex-end;
border-bottom: 1rpx solid #E5E5E5;
}
.buyGoodsList .clear .clearBtn{
padding: 25rpx 0rpx 25rpx 30rpx;
width: auto;
}
/* 查看已经购买的商品滚动容器高度 */
.goodsListContent{
max-height: 400rpx;
}
.goodsListContent .goodsInfo{
height: 97rpx;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 24rpx;
color: #8F8F95;
}
js 部分
// 元素出现的距离
let itemParams = {
itemTop_e: [],
itemTop_m: []
}
// 初始化请求的 商品列表数据
let enterpriseList, memberServiceList
// 计算购买的数量 以及购买的数据
let [COUNT_MONEY, COUNT_TOTAL, buyGoodsList] = [0, 0, []]
Page({
data: {
enterpriseList: [],
memberServiceList: [],
enterpriseItem: 0, // 企业服务
memberItem: 0, // 会员服务
current: 0,
buyGoodsList: [],
COUNT_MONEY: 0, // 计算的全部价格
COUNT_TOTAL: 0, // 购买的数量
selectGoods: false // 点击购物车详情的时候出现遮罩 以及内容
},
onLoad() {
// 模拟请求真实数据
setTimeout(() => {
enterpriseList = [
// 秘书服务
{
name: '秘书服务',
data: [{
image: 'https://api.beeoffices.com/upload/xwork/servicesFiles/2019073012115166816.jpg',
name: '前台展示',
type: '秘书服务',
total: 0,
money: '300'
},
{
image: 'https://api.beeoffices.com/upload/xwork/servicesFiles/2019073012115166816.jpg',
name: '后台展示',
type: '秘书服务',
total: 0,
money: '300'
},
{
image: 'https://api.beeoffices.com/upload/xwork/servicesFiles/2019073012115166816.jpg',
name: '充值服务',
type: '秘书服务',
total: 0,
money: '300'
},
{
image: 'https://api.beeoffices.com/upload/xwork/servicesFiles/2019073012115166816.jpg',
name: '蜜汁充值',
type: '秘书服务',
total: 0,
money: '300'
}
]
},
// 工商注册
{
name: '工商注册',
data: [{
image: 'https://api.beeoffices.com/upload/xwork/servicesFiles/2019073012115166816.jpg',
name: '前台展示',
type: '工商注册',
total: 0,
money: '300'
},
{
image: 'https://api.beeoffices.com/upload/xwork/servicesFiles/2019073012115166816.jpg',
name: '后台展示',
type: '工商注册',
total: 0,
money: '300'
},
{
image: 'https://api.beeoffices.com/upload/xwork/servicesFiles/2019073012115166816.jpg',
name: '工商注册',
type: '工商注册',
total: 0,
money: '300'
},
{
image: 'https://api.beeoffices.com/upload/xwork/servicesFiles/2019073012115166816.jpg',
name: '蜜汁充值',
type: '工商注册',
type: '工商注册',
total: 0,
money: '300'
}
]
},
// 财务审计
{
name: '财务审计',
data: [{
image: 'https://api.beeoffices.com/upload/xwork/servicesFiles/2019073012115166816.jpg',
name: '前台展示',
type: '财务审计',
total: 0,
money: '300'
},
{
image: 'https://api.beeoffices.com/upload/xwork/servicesFiles/2019073012115166816.jpg',
name: '后台展示',
type: '财务审计',
total: 0,
money: '300'
},
{
image: 'https://api.beeoffices.com/upload/xwork/servicesFiles/2019073012115166816.jpg',
name: '',
type: '财务审计',
total: 0,
money: '300'
},
{
image: 'https://api.beeoffices.com/upload/xwork/servicesFiles/2019073012115166816.jpg',
name: '蜜汁充值',
type: '财务审计',
total: 0,
money: '300'
}
]
},
// 知识产权
{
name: '知识产权',
data: [{
image: 'https://api.beeoffices.com/upload/xwork/servicesFiles/2019073012115166816.jpg',
name: '前台展示',
type: '知识产权',
total: 0,
money: '300'
},
{
image: 'https://api.beeoffices.com/upload/xwork/servicesFiles/2019073012115166816.jpg',
name: '后台展示',
type: '知识产权',
total: 0,
money: '300'
},
{
image: 'https://api.beeoffices.com/upload/xwork/servicesFiles/2019073012115166816.jpg',
name: '',
type: '知识产权',
total: 0,
money: '300'
},
{
image: 'https://api.beeoffices.com/upload/xwork/servicesFiles/2019073012115166816.jpg',
name: '蜜汁充值',
type: '知识产权',
total: 0,
money: '300'
}
]
}
]
memberServiceList = [
// 美食特惠
{
name: '美食特惠',
data: [{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '美食特惠',
total: 0,
money: '300'
},
{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '美食特惠',
total: 0,
money: '300'
},
{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '美食特惠',
total: 0,
money: '300'
},
{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '美食特惠',
total: 0,
money: '300'
}
]
},
// 下午茶
{
name: '下午茶',
data: [
{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '下午茶',
total: 0,
money: '300'
},
{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '下午茶',
total: 0,
money: '300'
},
{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '下午茶',
total: 0,
money: '300'
},
{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '下午茶',
total: 0,
money: '300'
}
]
},
// 手机维修
{
name: '手机维修',
data: [{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '手机维修',
money: '300',
total: 0
},
{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '手机维修',
total: 0,
money: '300'
},
{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '手机维修',
total: 0,
money: '300'
},
{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '手机维修',
total: 0,
money: '300'
}
]
},
// 烟酒糖茶
{
name: '烟酒糖茶',
data: [{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '烟酒糖茶',
total: 0,
money: '300'
},
{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '烟酒糖茶',
total: 0,
money: '300'
},
{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '烟酒糖茶',
total: 0,
money: '300'
},
{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '烟酒糖茶',
total: 0,
money: '300'
},
{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '烟酒糖茶',
total: 0,
money: '300'
}
]
},
// 行李箱包
{
name: '行李箱包',
data: [{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '行李箱包',
total: 0,
money: '300'
},
{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '行李箱包',
total: 0,
money: '300'
},
{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '行李箱包',
total: 0,
money: '300'
},
{
image: 'http://img.redocn.com/sheji/20190529/shouhuidangaomeishishengripaiduiyuansu_10379403.jpg',
name: '榴莲千层蛋糕',
type: '行李箱包',
total: 0,
money: '300'
}
]
},
]
// 考虑到两张表 的商品 id 可能是一样的 所以我们要给一个类别 通过类别判断加入商品
enterpriseList.map((item, index) => {
item.data.map((items, itemIndex) => {
items['goodsID'] = `1-${index}-${itemIndex}`
items['goodsIndex'] = `${index},${itemIndex}`
items['goodsList'] = `enterpriseList`
})
})
memberServiceList.map((item, index) => {
item.data.map((items, itemIndex) => {
items['goodsID'] = `2-${index}-${itemIndex}`
items['goodsIndex'] = `${index},${itemIndex}`
items['goodsList'] = `memberServiceList`
})
})
this.setData({
enterpriseList: enterpriseList,
memberServiceList: memberServiceList
})
// 获取元素距离顶部的距离
this.getDomClientHeight('.enterpriseTitle', 'top', (params) => {
itemParams.itemTop_e = params
})
this.getDomClientHeight('.memberTitle', 'top', (params) => {
itemParams.itemTop_m = params
})
}, 1000)
},
// 获取节点信息
getDomClientHeight(el, attr, fn) {
const query = wx.createSelectorQuery()
query.selectAll(el).boundingClientRect((rects) => {
let params = []
rects.forEach((rect) => {
// rect.top // 节点的上边界坐标
// rect.height // 节点的高度
params.push(rect[attr])
})
fn && fn(params)
}).exec()
},
// 企业服务 scroll 事件
scrollView(e) {
let scrollTop = e.detail.scrollTop
let arrName = e.currentTarget.dataset.arr
let watchName = e.currentTarget.dataset.watchitem
let findIndex = -1
let isClos = false
itemParams[arrName].map((item, index) => {
if (isClos) return
if (scrollTop < item) {
findIndex = index
isClos = true
}
})
this.setData({
[watchName]: findIndex
})
},
// 左右滑动 顶部menu 跟随当前页显示
toggleService(event) {
this.setData({
current: event.detail.current
})
},
// 对商品的操作
handleGoods(event) {
let parant = event.currentTarget.dataset.parant
let index = event.currentTarget.dataset.index
let list = event.currentTarget.dataset.list
let handle = event.currentTarget.dataset.handle
let updateStr = list + '[' + parant + '].data' + '[' + index + '].total'
let currentData = this.data[list][parant].data[index]
let [findEl, findIndex] = [[], -1]
if (handle == '-') {
--currentData.total
COUNT_TOTAL--
COUNT_MONEY -= Number(currentData.money)
findEl = buyGoodsList.filter((item, index) => {
findIndex = index
return item.goodsID == currentData.goodsID
})
this.setData({
['buyGoodsList['+ findIndex +'].total']: currentData.total
})
} else {
++currentData.total
COUNT_TOTAL++
COUNT_MONEY += Number(currentData.money)
// 如果是第一次添加商品
if (buyGoodsList.length == 0) {
buyGoodsList.push(currentData)
} else {
// 第二次 或者 第N次添加商品 查找是否有重复的
findEl = buyGoodsList.filter((item, index) => {
findIndex = index
return item.goodsID == currentData.goodsID
})
// 如果已购买的商品里面没有的话 则 新增一个商品
if (findEl.length == 0) {
buyGoodsList.push(currentData)
} else { // 如果已有的话则 增加数量
this.setData({
['buyGoodsList['+ findIndex +'].total']: currentData.total
})
}
}
}
this.setData({
[updateStr]: currentData.total,
COUNT_TOTAL,
COUNT_MONEY,
buyGoodsList
})
},
// 点击菜单栏切换 当前显示页
selectMenuList(event) {
let index = event.currentTarget.dataset.index
this.setData({
current: index
})
},
// 点击购物车 || 点击遮罩 || 点击取消
selectCar(event) {
let status = Boolean(Number(event.currentTarget.dataset.status))
this.setData({
selectGoods: status
})
},
// 购物车内的操作
shoppingCarHandle(event) {
let id = event.currentTarget.dataset.id
let handle = event.currentTarget.dataset.handle
let index = event.currentTarget.dataset.index
let [findEl, findIndex] = [[], -1]
let viewEl = buyGoodsList[index]
// 找到对应的元素 在页面显示上同步 数据
let goodsIndex = viewEl.goodsIndex.split(',')
let updateEl = viewEl.goodsList + '[' + goodsIndex[0] + '].data[' + goodsIndex[1] +'].total'
if (handle == '-') { // 减去数量
--viewEl.total
--COUNT_TOTAL
COUNT_MONEY -= Number(buyGoodsList[index].money)
} else { // 数量 + 1
++viewEl.total
++COUNT_TOTAL
COUNT_MONEY += Number(buyGoodsList[index].money)
}
this.setData({
COUNT_TOTAL: COUNT_TOTAL,
COUNT_MONEY: COUNT_MONEY,
[updateEl]: viewEl.total
})
if (viewEl.total <= 0) { // 小于等于 0 的时候 把这个商品从购物车中删除
buyGoodsList.splice(index, 1)
this.setData({
buyGoodsList: buyGoodsList
})
if (COUNT_TOTAL == 0) { // 商品总数为 0 的时候则 隐藏
this.setData({
selectGoods: false
})
}
} else {
this.setData({
['buyGoodsList['+ index +'].total']: viewEl.total
})
}
},
// 确认购买购物车中的物品
sureBuy() {
},
// 清空购物车
clearBuyList() {
// 清空 购买的数据
enterpriseList.map((item, index) => {
item.data.map((items, itemIndex) => {
items['total'] = 0
})
})
memberServiceList.map((item, index) => {
item.data.map((items, itemIndex) => {
items['total'] = 0
})
})
this.setData({
buyGoodsList: [],
COUNT_TOTAL: 0,
COUNT_MONEY: 0,
enterpriseList,
memberServiceList,
selectGoods: false
})
}
})源码地址 https://github.com/EMMMMMMMMMMMMM/miniProgram_shoppingCar
扫一扫
4877
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
