小程序购物车全选反选数量加减总价钱总数量

//不多说了，只是为了记录每次做的小东西，有需要的可以直接复制代码到开发工具查看比较清楚，上代码

<!--pages/map/map.wxml-->
<view class='container'><!-- 加入的商品列表 --><view class="addGoodsList"><view class="titTop"><view class="topLeft"><image bindtap="checkBtn" src="{{checked==true?'http://pics.jiuziran.com/FuxcLrK9xqVgbhbZPtqknbFW1v5K':'http://pics.jiuziran.com/FoMPtL4s9fwsN0EJvvHVIAAJna9Q'}}"></image> <image class="tXiang" src="http://pics.jiuziran.com/@//@wine_Com_Img_size:500/500/1568130900259"></image> <text>酒闪送<text>（顺昌城内）</text></text></view><view class="topRight"><text class="wholeTwo">编辑</text></view></view><view class="containBottom" wx:for="{{goodsList}}" wx:key="{{index}}" data-index="{{index}}"><image class="wImg" catchtap="checkBtnOne" data-index="{{index}}" src="{{item.checkedOne==true?'http://pics.jiuziran.com/FuxcLrK9xqVgbhbZPtqknbFW1v5K':'http://pics.jiuziran.com/FoMPtL4s9fwsN0EJvvHVIAAJna9Q'}}"></image><view class="goodsBox goodsBoxTwo"><view class="godLst"><image class="gImg" src="http://pics.jiuziran.com/@//@wine_Com_Img_size:500/500/1568130900259"></image><view class="goodsList goodsListTwo"><text class="gTitle ">{{item.title}}</text><view class="goodsNumber"><view class="godL"><text class="zpri">¥<text class="pri">{{item.prOne}}</text></text> <text class="pri2">{{item.prTwo}}</text></view><view class="num"><image  class="numImg1" bindtap="jianBtn" data-index="{{index}}" src="http://pics.jiuziran.com/Fqe7zzfze4RMeby12JlJ7iw4epGP"></image><text>{{item.num}}</text><image class="numImg2" bindtap="jiaBtn" data-index="{{index}}" src="http://pics.jiuziran.com/Fvhl1bsFLqYQMFViY2tSNm_5diTk"></image></view></view></view></view></view></view></view><!-- 加入购物车 --><view class="btnBox"><view class="Zprice"><text>¥{{price}}</text><text>含运费20元</text></view><text class="btn2">去结算</text></view><!-- 未加入购物车 --><!-- <view class="btnBox"><view class="Zprice ZpriceTwo"><text>购物车是空的</text></view><text class="btn2 needBtn">差20元起送</text><image class="gwcTwo" src="http://pics.jiuziran.com/FkYDvmvYdm09tiMW5hWon6XFLcV2"></image></view> -->
</view>

/隐藏滚动条/
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
/* pages/map/map.wxss /
page{
background: #fff;
}
/ 商品 /
.goodsBox{
display: flex;
padding-top: 30rpx;
box-sizing: border-box;
}
.godLst{
width: 100%;
display: flex;
border-bottom: 1px solid #EEEEEE;
margin: auto 24rpx 32rpx;
}
.goodsBox image{
width: 178rpx;
height: 168rpx;
margin:0 20rpx 30rpx 0rpx;
}
.goodsList{
width: 320rpx;
}
.goodsList .g1{
width: 320rpx;
height: 32rpx;
font-family: PingFangSC-Medium;
font-size: 32rpx;
color: #333333;
line-height: 32rpx;
font-weight: 600;
display: flex;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1; / 限制在一个块元素显示的文本的行数 /
-webkit-box-orient: vertical; / 垂直排列 /
word-break: break-all; / 内容自动换行 /
}
.goodsList .g2{
display: flex;
align-items: center;
justify-content: center;
width: 136rpx;
height: 32rpx;
background: #F6F6F6;
font-family: PingFangSC-Regular;
font-size: 20rpx;
color: #2B2B2B;
line-height: 20rpx;
margin:18rpx 0 22rpx 0;
}
.goodsList .g3{
font-family: PingFangSC-Regular;
font-size: 20rpx;
color: #999999;
letter-spacing: 0;
text-align: justify;
line-height: 20rpx;
display: flex;
margin-bottom: 16rpx;
}
.goodsNumber{
display: flex;
justify-content: space-between;
/ margin-top: 16rpx; */
}
.godL{
display: flex;
}
.goodsNumber .zpri{
font-family: PingFangSC-Medium;
font-size: 24rpx;
color: #FF5C4D;
letter-spacing: 0;
text-align: justify;
line-height: 36rpx;
margin-right: 14.2rpx;
}
.goodsNumber .pri{
font-family: PingFangSC-Medium;
font-size: 32rpx;
color: #FF5C4D;
letter-spacing: 0;
text-align: justify;
line-height: 36rpx;
}
.goodsNumber .pri2{
font-family: PingFangSC-Regular;
font-size: 20rpx;
color: #999999;
letter-spacing: 0;
text-align: justify;
line-height: 40rpx;
text-decoration: line-through;
}
.num{
display: flex;
justify-content: center;
}
.num text{
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #2B2B2B;
line-height: 48rpx;
margin:0 24rpx;

}
.num .numImg1,.num .numImg2{
width: 48rpx;
height: 48rpx;
margin: 0;
}
.num .numImg2{

}
/* 底部按钮 /
.btnBox{
width:100% ;
height:98rpx;
display: flex;
position: fixed;
bottom: 0;
z-index: 60;
}
.Zprice{
width: 470rpx;
height:98rpx;
background: #544F4F;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 148rpx;
box-sizing: border-box;
}
.Zprice text:first-child{
font-family: PingFangSC-Medium;
font-size: 32rpx;
color: #FFFFFF;
letter-spacing: 0;
line-height: 32rpx;
margin-bottom: 8rpx;
}
.Zprice text:last-child{
font-family: PingFangSC-Regular;
font-size: 20rpx;
color: #999999;
letter-spacing: 0;
text-align: justify;
line-height: 20rpx;
}
.btn2{
width: 280rpx;
height:98rpx;
background-image: linear-gradient(90deg, #FF4F4F 0%, #FF8644 100%);
font-family: PingFangSC-Medium;
font-size: 32rpx;
color: #FFFFFF;
letter-spacing: 0;
text-align: center;
line-height: 32rpx;
display: flex;
justify-content: center;
align-items: center;
}
.gwc,.gwcTwo {
width: 96rpx;
height: 96rpx;
position: fixed;
bottom: 28rpx;
left: 24rpx;
z-index: 120;
}
.addNumber{
width: 32rpx;
height: 32rpx;
display: flex;
align-self: center;
justify-content: center;
position: fixed;
bottom: 96rpx;
left: 84rpx;
z-index: 121;
background: #FFDF3F;
border-radius: 7.5px;
font-family: PingFangSC-Medium;
font-size: 24rpx;
color: #2B2B2B;
line-height: 24rpx;
}
/ 未加入购物车 */
.needBtn{
background: #686868 !important;
}
.ZpriceTwo text,.needBtn{
font-family: PingFangSC-Medium !important;
font-size: 32rpx !important;
color: #FFFFFF !important;
letter-spacing: 0 !important;
line-height: 32rpx !important;
}
/*加入的商品列表 /
.addGoodsList{
width: 100%;
height: 480rpx;
background: #FFFFFF;
}
.titTop{
height: 98rpx;
border-bottom: 1px solid #EEEEEE;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32rpx;
box-sizing: border-box;
}
.topLeft,.topRight{
display: flex;
align-items: center;
}
.topLeft image,.topRight image,.wImg{
width: 32rpx;
height: 32rpx;
margin-right: 20rpx;
}
.titTop .tXiang{
width: 48rpx !important;
height: 48rpx !important;
margin-right: 16rpx !important;
}
.topLeft text,.topRight text{
font-family: PingFangSC-Regular;
font-size: 32rpx;
color: #2B2B2B;
text-align: center;
line-height: 32rpx;
}
.topRight .wholeTwo{
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #666666;
text-align: right;
line-height: 28rpx;
}
.containBottom{
width: 100%;
display: flex;
align-items: center;
padding: 0 0 0 32rpx;
box-sizing: border-box;
}
.goodsBoxTwo{
width: 670rpx !important;
height: 164rpx;
padding-top: 16.6rpx !important;
}
.goodsBoxTwo .gTitle{
display: flex;
width: 384rpx !important;
height: 32rpx ;
font-family: PingFangSC-Medium ;
font-size: 32rpx ;
color: #333333 ;
line-height: 32rpx ;
margin:32rpx 0 24rpx 0;
overflow : hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1; / 限制在一个块元素显示的文本的行数 /
-webkit-box-orient: vertical; / 垂直排列 /
word-break: break-all; / 内容自动换行 */
}
.goodsBoxTwo .gImg{
width: 136.8rpx;
height: 130.6rpx;
}
.goodsListTwo{
width: 460rpx !important;
}

Page({

/**

页面的初始数据
/
data: {
checked: true,//全选状态
count:’’,//加入购物车数量
price:0,//总价钱
goodsList:[],
goodsList:[
{
title:‘盛堡小麦白德国啤酒德国啤’,
prOne:22.5,
prTwo:22.5,
checkedOne: true,
num: 0
},
{
title: ‘盛堡小麦白德国啤酒德国啤’,
prOne: 22.5,
prTwo: 22.5,
checkedOne: true,
num: 0
},
{
title: ‘盛堡小麦白德国啤酒德国啤’,
prOne: 22.5,
prTwo: 22.5,
checkedOne: true,
num: 0
},
],
},
// 全选
checkBtn: function (e) {
var that = this
// 全选ICON默认选中
let checked = this.data.checked;
// true ----- false
checked = !checked;
// 获取商品数据
let goodsList = this.data.goodsList;
// 循环遍历判断列表中的数据是否选中
for (let i = 0; i < goodsList.length; i++) {
goodsList[i].checkedOne = checked;
}
// 页面重新渲染
this.setData({
checked: checked,
goodsList: goodsList
});
this.zPrice()
},
// 单选
checkBtnOne:function(e){
var that = this;
// 获取选中的单选框索引
var index = e.currentTarget.dataset.index;
// 获取到商品列表数据
var goodsList = that.data.goodsList;
// 默认全选
that.data.checked = true;
// 循环数组数据，判断----选中/未选中[selected]
goodsList[index].checkedOne = !goodsList[index].checkedOne;
// 如果数组数据全部为selected[true],全选
for (var i = goodsList.length - 1; i >= 0; i–) {
if (!goodsList[i].checkedOne) {
that.data.checked = false;
break;
}
}
// 重新渲染数据
that.setData({
goodsList: goodsList,
checked: that.data.checked
})
this.zPrice()
},
// 加数量
jiaBtn: function (e){
var that=this
let index = e.currentTarget.dataset.index
let goodsList=that.data.goodsList
let num = that.data.goodsList[index].num
num=num+1
goodsList[index].num=num
console.log(that.data.goodsList[index].num)
that.setData({
goodsList: goodsList,
addGoods: true,
addGooding: false,
})
this.zPrice()
},
//减数量
jianBtn: function (e) {
var that = this
let index=e.currentTarget.dataset.index
let goodsList=that.data.goodsList
let num =goodsList[index].num
if (num<=0){
return false;
}
num = num - 1
goodsList[index].num = num
that.setData({
goodsList: goodsList,
count: that.data.goodsList[index].num,
})
this.zPrice()
},
// 计算总价
zPrice(){
var that = this
let goodsList=that.data.goodsList;
var prc = 0;
for (let i = 0; i < goodsList.length; i++) {
if (goodsList[i].checkedOne){
prc += goodsList[i].num * goodsList[i].prOne;
}
}
that.setData({
goodsList: goodsList,
price: prc,
})
},
/*
生命周期函数–监听页面加载
*/
onLoad: function (options) {

/**

生命周期函数–监听页面初次渲染完成
*/
onReady: function () {

/**

生命周期函数–监听页面显示
*/
onShow: function () {
// var that = this
// var prc=0;
// for (let i = 0; i < that.data.goodsList.length; i++) {
// var money = that.data.goodsList[i].prOne;
// var cot = that.data.goodsList[i].num;
// prc += money * cot;
// }
// that.setData({
// price: prc,
// })
},

/**

生命周期函数–监听页面隐藏
*/
onHide: function () {

/**

生命周期函数–监听页面卸载
*/
onUnload: function () {

/**

页面相关事件处理函数–监听用户下拉动作
*/
onPullDownRefresh: function () {

/**

页面上拉触底事件的处理函数
*/
onReachBottom: function () {

/**

用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

小程序购物车全选反选数量加减总价钱总数量相关推荐

小程序购物车全选、单选、计算总价js
// 购物车jsdata: {//购物车列表Goods: [],index: '',isAllselected: false,totalPrice: 0,rid: '',selectedList: [ ...
vue中实现商品购物车全选反选
项目需求: 实现一个购物车全选框实现对商家和商品的全选商家全选框实现对当前商家所有商品的全选取消其中一个商品则取消对应商家全选和全选框选中一个商家下的所有商品则勾选对应商家的全选框,不勾选全选 ...
uniapp中购物车demo（全选反选、计算总价、改变商品数量）
复选框checkbox插件下载地址这个插件可以使用Vue中的双向绑定,方便(给购物车列表中的数据添加双向绑定的属性即可) HTML <template><view class=&q ...
属性动画+购物车+全选反选+选中计算价格+单个删除
效果图导入依赖 apply plugin: 'com.android.application' android {compileSdkVersion 26 buildToolsVersion &qu ...
微信小程序js日期格式转化及加减
项目中需要用到日期的格式转化及相关的加减,根据需要的情况,整理了部分方法.并列出date的构造方法及方法以作记录. 一.以下是根据小程序demo中util.js文件修改的 const formatTi ...
微信小程序时间加法_微信小程序日期转换、比较、加减
//日期转时间戳 functiongetUnixTime(dateStr){var newstr = dateStr.replace(/-/g,'/');var date = newDate(news ...
微信小程序全选，微信小程序checkbox，微信小程序购物车
微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选设计思路: 一.从网络上传入以下Json数据格式的数组 1.标题titl ...
微信小程序购物车数量加减功能
微信小程序购物车数量加减功能 wxml  <view class="stepper">  < ...
android商品数量加减,微信小程序实现一个简单的商品数量加减案例
简介这是一个用微信小程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用,很简单哦~~~. 核心js方法说明addCount(增加数量) delCount (减少数量) ...

小程序购物车全选反选数量加减总价钱总数量

小程序购物车全选反选数量加减总价钱总数量相关推荐

最新文章

热门文章

小程序购物车全选反选 数量加减 总价钱 总数量

小程序购物车全选反选 数量加减 总价钱 总数量相关推荐

最新文章

热门文章

小程序购物车全选反选数量加减总价钱总数量

小程序购物车全选反选数量加减总价钱总数量相关推荐