微信小程序购物车功能
Posted 新恒
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序购物车功能相关的知识，希望对你有一定的参考价值。
<view class=\'shop-mana\'>
<text class=\'management\'>管理您的购物车</text>
<text class=\'goto\'>点击立即前往>></text>
</view>
<view class=\'carts\'>
<view class=\'goods\' wx:for="{{goods}}" wx:key="goods">
<view class=\'goods-check\'>
<!-- wx:if 是否选择显示不同图标 -->
<icon wx:if="{{item.selected}}" type="success" color="red" bindtap="change" data-index="{{index}}" />
<icon wx:else type="circle" bindtap="change" data-index="{{index}}"/>
<!-- <icon type="{{item.select}}" size="22" data-index="{{index}}" data-select="{{item.select}}" bindtap="change" /> -->
</view>
<view class=\'goods-details\'>
<view class=\'goods-img\'>
<image src=\'{{staticImg}}shopping-carts/item1.png\'></image>
</view>
<view class=\'goods-title\'>
<view class=\'goods-name\'>{{item.goodsName}}</view>
<view class=\'goods-apply\'>{{item.goodsApply}}</view>
<view class=\'goods-bot\'>
<text class=\'goods-pri\'>¥{{item.goodsPrice}}</text>
<view class="goods-number">
<button class="goods-minu" data-index="{{index}}" data-num="{{item.num}}" bindtap="subtraction">-</button>
<text class="num">{{item.num}}</text>
<button class="goods-add" data-index="{{index}}" data-num="{{item.num}}" bindtap="addtion">+</button>
</view>
</view>
</view>
</view>
</view>
</view>
<view class=\'goods-footer\'>
<view class="allSelect">
<!-- <icon type="{{allSelect}}" size="22" data-select="{{allSelect}}" bindtap="allSelect" class=\'allse\' /> -->
<icon wx:if="{{selectAllStatus}}" type="success" color="red" bindtap="selectAll" class=\'allse\' />
<icon wx:else type="circle" bindtap="selectAll" class=\'allse\'/>
<view class="allSelect-text">全选</view>
</view>
<text class=\'sum\'>合计:</text>
<text class=\'total-pri\'>¥{{totalPrice}}</text>
<view class=\'settlement\'>结算
<text>({{num}})</text>
</view>
</view>
page{
background-color:#f0f0f0;
font-family: "微软雅黑";
}
.shop-mana{
width: 100%;
height: 70rpx;
background-color:#fffeee;
border-bottom: 1rpx solid #ccc;
}
.management{
float: left;
height: 70rpx;
line-height: 70rpx;
font-size: 26rpx;
margin-left: 40rpx;
}
.goto{
float: right;
height: 70rpx;
line-height: 70rpx;
font-size: 26rpx;
color: #c00;
margin-right: 30rpx;
cursor: pointer;
}
.carts{
width: 100%;
height: 520px;
overflow-y: scroll;
}
.goods{
width: 100%;
height: 275rpx;
background: #fff;
margin-bottom: 15rpx;
box-sizing: border-box;
padding:35rpx 17rpx;
}
.goods-check{
float: left;
width: 74rpx;
height: 205rpx;
line-height: 205rpx;
text-align: center;
/* */
}
.checkbox{
width: 36rpx;
height: 36rpx;
}
.goods-details{
float: left;
width: 642rpx;
height: 205rpx;
}
.goods-img{
float: left;
width: 200rpx;
height: 200rpx;
margin-top:5rpx;
margin-right: 20rpx;
}
.goods-img image{
width: 200rpx;
height: 200rpx;
}
.goods-title{
float: left;
width: 423rpx;
height: 205rpx;
}
.goods-name{
width:100%;
height: 70rpx;
margin-bottom: 15rpx;
font-size: 30rpx;
line-height: 35rpx;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.goods-apply{
font-size: 24rpx;
width: 100%;
color: #888888;
height: 30rpx;
line-height: 30rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.goods-bot{
width: 100%;
height: 60rpx;
line-height: 60rpx;
margin-top:35rpx;
}
.goods-pri{
float: left;
height: 60rpx;
line-height: 60rpx;
font-size: 32rpx;
font-weight: 700;
color: #c00;
}
.goods-number{
margin-top:5rpx;
float: right;
width:160rpx;
height: 60rpx;
line-height: 60rpx;
}
.goods-minu{
float: left;
width:50rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
font-size: 28rpx;
padding:0;
border-radius: 0;
}
.num{
float: left;
width:40rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
font-size: 24rpx;
}
.goods-add{
float: left;
width:50rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
font-size: 28rpx;
padding:0;
border-radius: 0;
}
.goods-num{
float: right;
margin-right: 15rpx;
height: 35rpx;
line-height: 35rpx;
font-size: 26rpx;
color: #888888;
}
.goods-footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100rpx;
background-color:#fff;
/* */
}
.allSelect{
float: left;
width:150rpx;
height: 100rpx;
line-height: 100rpx;
font-size: 24rpx;
box-sizing: border-box;
padding-left: 30rpx;
}
.allse{
float: left;
height: 100rpx;
line-height: 100rpx;
margin-top:18rpx;
}
.allSelect-text{
float: left;
margin-left:10rpx;
font-size: 24rpx;
height: 100rpx;
line-height: 100rpx;
}
.sum{
float: left;
height: 100rpx;
line-height: 100rpx;
font-size: 24rpx;
margin-left:25rpx;
}
.total-pri{
float: left;
height: 100rpx;
line-height: 100rpx;
font-size: 32rpx;
color:#c00;
margin-left: 5rpx;
}
.settlement{
float: right;
width: 260rpx;
height: 100rpx;
line-height: 100rpx;
text-align: center;
color: #fff;
font-size: 32rpx;
background-color:#c00;
cursor: pointer;
}
const app = getApp()
Page({
data: {
staticImg: app.globalData.staticImg,
goods:[
{
code: "0001",
goodsName: \'汽车玻璃水大瓶雨刷精车用雨刮水清洁剂清洗液除油膜 2L……\',
goodsApply: \'适用于各种型号的车辆\',
goodsPrice: \'178.99\',
num: \'1\',
},
{
code: "0002",
goodsName: \'汽车玻璃水大瓶雨刷精车用雨刮水清洁剂清洗液除油膜 2L……\',
goodsApply: \'适用于各种型号的车辆\',
goodsPrice: \'178.99\',
num: \'1\',
},
],
totalPrice:\'0.00\',
num:\'0\',
},
// 单个选中
change: function (e) {
var that = this;
const index = e.currentTarget.dataset.index; // 获取data- 传进来的index
var goods = that.data.goods; // 获取购物车列表
var selectAllStatus = that.data.selectAllStatus; //获取全选状态
const selected = goods[index].selected; // 获取当前商品的选中状态
goods[index].selected = !selected; // 改变状态
goods[index][\'selected\'] = !selected;
//判断有一个没有选中，全选取消
var j = 0;
for (var i = 0; i < goods.length; i++) {
if (goods[i].selected == true) {
j++;
continue;
} else {
selectAllStatus = false;
}
}
if (j == goods.length) {
selectAllStatus = true;
}
//如果都选中，全选也选中实现
that.setData({
goods: goods,
selectAllStatus: selectAllStatus,
});
//调用计算数目方法
that.countNum()
//计算金额
that.count()
},
// 全选事件
selectAll: function(e) {
var that = this;
var selectAllStatus = that.data.selectAllStatus; // 是否全选状态
selectAllStatus = !selectAllStatus;
var goods = that.data.goods;
for (var i = 0; i < goods.length; i++) {
goods[i].selected = selectAllStatus;
goods[i][\'selected\'] = selectAllStatus; // 改变所有商品状态
}
that.setData({
selectAllStatus: selectAllStatus,
goods: goods
});
//调用计算数目方法
that.countNum()
//计算金额
that.count()
},
//加法
addtion: function (e) {
console.log(e)
var that = this
//得到下标
var index = e.currentTarget.dataset.index
//得到点击的值
var num = e.currentTarget.dataset.num
//默认99件最多
if (num < 100) {
num++
}
//把新的值给新的数组
var newList = that.data.goods
newList[index].num = num
//把新的数组传给前台
that.setData({
goods: newList
})
//调用计算数目方法
that.countNum()
//计算金额
that.count()
},
//减法
subtraction: function (e) {
var that = this
//得到下标
var index = e.currentTarget.dataset.index
//得到点击的值
var num = e.currentTarget.dataset.num
//把新的值给新的数组
var newList = that.data.goods
//当1件时，点击移除
if (num == 1) {
num==1
} else {
num--
newList[index].num = num
}
//把新的数组传给前台
that.setData({
goods: newList
})
//调用计算数目方法
that.countNum()
//计算金额
that.count()
},
//计算数量
countNum: function () {
var that = this
//遍历数组，把既选中的num加起来
var newList = that.data.goods
var allNum = 0
for (var i = 0; i < newList.length; i++) {
if (newList[i].selected) {
allNum += parseInt(newList[i].num)
}
}
that.setData({
num: allNum
})
},
//计算金额方法
count: function () {
var that = this
//选中的订单，数量*价格加起来
var goodsPrice = parseFloat(that.data.goods.goodsPrice)
var newList = that.data.goods
var newCount = 0.00
for (var i = 0; i < newList.length; i++) {
if (newList[i].selected) {
newCount += newList[i].goodsPrice * newList[i].num
}
}
that.setData({
// newCount: newCount.toFixed(2),
totalPrice: newCount,
})
},
})
以上是关于微信小程序购物车功能的主要内容，如果未能解决你的问题，请参考以下文章