shopping_cart.wxml页面:
<!--pages/shopping_cart/shopping_cart.wxml-->
<view class='all'>
<view class='top'>
<image class='top_bg' src='../../img/top_cart.png'></image>
<view class='top_index'>购物车({{list_cart.length}})</view>
<view class='top_edit'>编辑</view>
</view>
<!--是否全选 s -->
<view class='total'>
<view class="allSelect">
<icon wx:if="{{selectAllStatus}}" type='circle' color='#D9BE64' size="20" bindtap='selectAll'></icon>
<icon wx:else type="success" color='#D9BE64' size="20" data-select="{{allSelect}}" bindtap="selectAll" />
<view class="allSelect-text">商品</view>
</view>
</view>
<!--是否全选 e -->
<!--勾选商品 s -->
<view class='commSelect' wx:for="{{list_cart}}" wx:key="{{index}}">
<icon wx:if="{{item.selected}}" type='circle' color='#D9BE64' size="20" data-index="{{index}}" bindtap="selectList"></icon>
<icon wx:else type='success' color='#D9BE64' size="20" data-index="{{index}}" bindtap="selectList"></icon>
<view class='commSelects'>
<view class='commSelect_left'>
<image class='commSelect_left_bg' src='{{item.imgs}}'></image>
</view>
<view class='commSelect_right'>
<view class='text' wx:if="{{item.text}}">{{item.text}}</view>
<view class='msg'>{{item.msg}}</view>
<view class='mon_num'>
<view>¥{{item.mon}}</view>
<view class='num'>
<view bindtap='subCount' data-index='{{index}}'>-</view>
<view>{{item.num}}</view>
<view bindtap='addCount' data-num='{{num}}' data-index='{{index}}'>+</view>
</view>
</view>
<view class='pri_storage'>
<view wx:if="{{item.pri}}">已降¥{{item.pri}}</view>
<view wx:if="{{item.storage}}">{{item.storage}}</view>
</view>
</view>
</view>
</view>
<view class='fulls'>
<view class='full'>【满减】再购2件立享【满3件减10元】</view>
</view>
<!--勾选商品 e -->
<!--结算 s -->
<view class='settlement'>
<view class='settlement_left'>
<view>不含运费 已省:¥{{freight}}</view>
<view class='mons_total'>¥{{mons_total}}</view>
</view>
<navigator>
<view class='settlement_right'>去结算({{check_num}})</view>
</navigator>
</view>
<!--结算 e -->
</view>
shopping_cart.js界面:
// pages/shopping_cart/shopping_cart.js
Page({
/**
* 页面的初始数据
*/
"data": {
"check_num":0, //勾选的个数 默认开始为0
"freight":0, //不含运费已省
// "list_cart":[], //购物车列表
"mons_total":0, //购物总价,默认开始为0
"selectAllStatus": true, //全选状态,默认全选
"allSelect":"circle",
"list_cart":[
{
"imgs":"../../img/del/Group_comm.png",
"text":false,
"msg":"有机特级初榨橄榄油有机特级初榨橄榄油 750ml",
"mon":"148.00",
"num":"2",
"pri":"12.00",
"storage":"库存仅剩 3 件",
"selected":true
},
{
"imgs": "../../img/del/Group_comm.png",
"text": "”每人限购3件,超出件数按原价计算”",
"msg": "有机特级初榨橄榄油有机特级初榨橄榄油 750ml",
"mon": "148.00",
"num": "2",
"pri": false,
"storage": false,
"selected": true
},
{
"imgs": "../../img/del/Group_comm.png",
"text": false,
"msg": "有机特级初榨橄榄油有机特级初榨橄榄油 750ml",
"mon": "148.00",
"num": "2",
"pri": false,
"storage": false,
"selected": true
},
{
"imgs": "../../img/del/Group_comm.png",
"text": false,
"msg": "有机特级初榨橄榄油有机特级初榨橄榄油 750ml",
"mon": "148.00",
"num": "2",
"pri": false,
"storage": false,
"selected": true
},
{
"imgs": "../../img/del/Group_comm.png",
"text": false,
"msg": "有机特级初榨橄榄油有机特级初榨橄榄油 750ml",
"mon": "148.00",
"num": "2",
"pri": false,
"storage": false,
"selected": true
}
]
},
"onload":function(e){
},
/**
* 生命周期函数--监听页面加载
*/
/**
* 当前商品选中事件
*/
selectList:function(e){
var index = e.currentTarget.dataset.index;
var list_cart = this.data.list_cart;
var selected = list_cart[index].selected;
list_cart[index].selected = !selected;
console.log(list_cart[index].selected.length+"fdsafsadfaf")
var selectAllStatus = this.data.selectAllStatus;
console.log(selectAllStatus)
this.getTotalPrice(); //重新获取总价格
var t = this.getTotalPrice();
console.log(index)
if(t== list_cart.length){
console.log(1111111);
this.data.selectAllStatus=false;
} else{
this.data.selectAllStatus =true;
}
this.setData({
list_cart: list_cart,
selectAllStatus: this.data.selectAllStatus
});
},
/**
* 当前商品全选事件
*/
selectAll: function (e) {
var selectAllStatus = this.data.selectAllStatus;
selectAllStatus = !selectAllStatus;
var list_cart = this.data.list_cart;
for (var i = 0; i < list_cart.length ; i++){
list_cart[i].selected = selectAllStatus;
}
this.setData({
selectAllStatus:selectAllStatus,
list_cart:list_cart
});
this.getTotalPrice();
},
/**
* 数量的加的事件绑定
*/
addCount:function(e){
var index = e.currentTarget.dataset.index; //获取当前的下标
var list_cart = this.data.list_cart;
var num = parseInt(list_cart[index].num);
num = num + 1;
list_cart[index].num = num
this.setData({
list_cart: list_cart
});
this.getTotalPrice();
},
/**
* 数量的减的事件绑定
*/
subCount:function(e){
var index = e.currentTarget.dataset.index;
var list_cart = this.data.list_cart;
var num = parseInt(list_cart[index].num);
if(num <= 1){
return false;
}
num = num - 1;
list_cart[index].num = num;
this.setData({
list_cart: list_cart
});
this.getTotalPrice();
},
/**
* 计算总价
*/
getTotalPrice(){
var list_cart = this.data.list_cart //获取购物车列表
var total = 0;
var aa = 0;
var bb = 0;
for (var i = 0; i < list_cart.length; i++) { // 循环列表得到每个数据
if (!list_cart[i].selected){ //判断选中才会计算价格
if(list_cart[i].pri != false){
aa += list_cart[i].pri*list_cart[i].num;
}
bb = bb + 1;
total += parseInt(list_cart[i].num)*list_cart[i].mon;
}
}
this.setData({ // 最后赋值到data中渲染到页面
list_cart: list_cart,
mons_total: total.toFixed(2),
freight:aa.toFixed(2),
check_num:bb.toFixed(0)
})
return bb;
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
});
shopping_cart.wxss页面:
/* pages/shopping_cart/shopping_cart.wxss */
.top{
height:70rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0rpx 40rpx;
border-bottom: 1rpx solid #706565;
}
.top_bg{
width: 18rpx;
height: 33rpx;
}
.top_index{
font-size: 32rpx;
color: #222222;
}
.top_edit{
font-size: 30rpx;
color: #222222;
}
.total{
width: 750rpx;
height: 68rpx;
display: flex;
flex-direction: row;
">#F6F6F6;
align-items: center;
}
.allSelect{
display: flex;
flex-direction: row;
align-items: center;
padding-left:25rpx;
}
.allSelect-text{
font-size: 29rpx;
color: #666666;
padding-left:20rpx;
}
.commSelect{
height: 270rpx;
display: flex;
flex-direction: row;
align-items: center;
padding-left:25rpx;
padding-bottom: 40rpx;
}
.commSelects{
width: 610rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.commSelect_left{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.commSelect_right{
width: 375rpx;
padding-top: 35rpx;
}
.text{
font-size: 22rpx;
color: #FD7070;
}
.msg{
font-size: 26rpx;
color: #222222;
box-shadow: #000000;
}
.commSelect_left_bg{
width: 202rpx;
height: 217rpx;
}
.mon_num{
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 28rpx;
padding: 30rpx 0rpx 20rpx 0rpx;
color: #222222;
box-shadow: #000000;
}
.num{
width: 145rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.pri_storage{
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 22rpx;
color: #9B9580;
}
.all{
position: relative;
}
.fulls{
width: 662rpx;
border-top: 1rpx solid #9B9580;
position: absolute;
left: 91rpx;
top: 413rpx;
}
.full{
width: 460rpx;
height: 40rpx;
font-size: 26rpx;
">#EBEAE6;
display: flex;
flex-direction: row;
align-items: center;
margin-top:20rpx;
color: #9B9580;
}
/*结算 s */
.settlement{
display: flex;
flex-direction: row;
position: fixed;
left: 0rpx;
top: 1100rpx;
">#F6F6F6;
}
.settlement_left{
width: 530rpx;
height: 90rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
.mons_total{
margin: 0rpx 30rpx 0rpx 30rpx;
}
.settlement_right{
width: 220rpx;
height: 90rpx;
">#9B9580;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #ffffff;
}
/*结算 e */
购物车满减java 购物车满减活动功能
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
购物车的实现(未登录时也可以使用)
平时工作的踩坑记录
redis List 拦截器 -
javasession购物车 java购物车功能
本篇文章讲的是如何使用javaweb相关知识模拟购物车功能(web练手小项目)使用到的相关知识(部分知识点在文章中简单涉及到): html cs javascript jsp servlet ajax jQuery Mysql M
javasession购物车 mybatis java mysql servlet -
购物车评价java 购物车jsp
友友们又见面了,购物车是日常中常见的,今天来了解一下它的基本框架:完成一个初级版的购物车:一、思维导图:首先了解需要用到的 表: 用户表商品表订单表购物车表(可无)浏览页面:用户登录页面商品浏览页面购物车页面操作页面:登录操作页面购物车操作页面购物车删除页面 &
购物车评价java eclipse css javascript bootstrap