小程序购物车[实现加减计算金额以及数量]

最新推荐文章于 2024-08-07 16:12:37 发布
最新推荐文章于 2024-08-07 16:12:37 发布
阅读量1.1w 收藏 34
点赞数 6
分类专栏： 小程序 文章标签： 小程序购物车 小程序加减图标计算金额
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35695041/article/details/80760998
版权 

<!--WXML -->





<view class="content_box" wx:for="{{arr}}" wx:key="{{key}}">

<!--中部盒子 -->

<view class="view_ce">

<!--图片盒子 -->

<view class="ProductIco_box">

<image class="ProductIco" src="{{item.img}}"></image>

</view>

<!--内容 -->

<view class="view_content">

<view class='view_title'>{{item.service_name}} </view>

<view class="view_fl">

<text>¥ {{item.price}}</text>

<!--价格和按钮 -->

<view class="view_btn_box">

<!--产品数量不为 0 -->

<view class="view_btn" wx:if="{{item.state == 1}}">

<view class="view_img_left" bindtap='numminus' data-index="{{index}}">

<image src="../../image/-@2x.png"></image>

</view>

<!-- <view class="view_text_center"></view> -->

<input class="view_text_center" disabled='disabled' value="{{item.num}}" bindinput='input_num' data-index="{{index}}"></input>

<view class="view_img_right" bindtap='numadd' data-index="{{index}}">

<image src="../../image/+@2x.png"></image>

</view>

</view>

<!--产品数量为0 -->

<view class="view_add" wx:if="{{item.state == 0}}">

<view class="view_img_add" bindtap='showadd' data-index="{{index}}">

<image src="../../image/+@2x.png"></image>

</view>

</view>

</view>

</view>

</view>

<!--删除按钮 -->

</view>

</view>

<view class='buy_btn_box'>

<view class="collect_bottom">

<view class="collect_right">

<text class="collect_one">共{{add_car_num}}件商品</text>

<text class="collect_two" style='padding-left:20rpx;'>¥ {{price}}</text>

</view>

<text class='buy_btn'>提交订单</text>

</view>



</view>



<!--WXSS-->





.ProductIco_box {

width: 130rpx;

height: 130rpx;

border-radius: 5px;

border: 1rpx solid #ececec;

margin-right: 18rpx;

padding-left:30rpx;

float: left;

}

.ProductIco {

width: 100%;

height: 100%;

border-radius: 5px;

}

.view_ce {

width: 100%;

height: 130rpx;

position: relative;

padding-top: 20rpx;

padding-bottom: 30rpx;

/* background: red; */

border-bottom: 1rpx solid #ececec;

}

.content_box_center {

width: 100%;

padding: 0rpx 20rpx 30rpx 20rpx;

padding-top: 20rpx;

/* margin-bottom: 30rpx; */

height: 182rpx;

z-index: 2;

background: #fff;

position: absolute;

left: 0;

top: 0;

box-sizing: border-box;

border-bottom: 1rpx solid #ececec;

}

.view_content {

float: left;

width: 556rpx;

}

.view_title {

position: relative;

display: inline-block;

top: 15rpx;

width: 556rpx;

font-size: 28rpx;

color: #393939;

}

.view_fl>text {

position: relative;

top: 20rpx;

font-size: 30rpx;

color: #2a2a2a;

margin-right: 18rpx;

}

.view_btn {

width: 150rpx;

height: 44rpx;

float: right;

font-size: 22rpx;

color: #898989;

line-height: 44rpx;

/* display: none; *//* margin-bottom: 5rpx; */

}

.view_text_center, .view_img_left, .view_img_right {

position: relative;

float: left;

}

.view_img_left, .view_img_right {

width: 44rpx;

height: 44rpx;

}



.view_text_center {

width: 58rpx;

height: 44rpx;

text-align: center;

line-height: 44rpx;

font-size: 22rpx;

color: #898989;

}

.view_btn image {



width: 100%;

height: 100%;

}

.view_add {

width: 44rpx;

height: 44rpx;

float: right;

font-size: 22rpx;

color: #898989;

line-height: 44rpx;

/* margin-bottom: 5rpx; */

}

.view_img_add {

width: 44rpx;

height: 44rpx;

}

.view_add image {

width: 100%;

height: 100%;



}

.delete_btn {

position: absolute;

right: 0;

top: 0;

font-size: 32rpx;

background: #ff3b30;

width: 134rpx;

height: 100%;

text-align: center;

line-height: 175rpx;

/* border-bottom: 1px solid #ff3b30; */

color: #fff;

z-index: 1;

}



.collect_right {

position: absolute;

width: 350rpx;

height: 90rpx;

left: 20rpx;

color: #fff;

font-size: 30rpx;

}



.buy_btn{

position: absolute;

width: 200rpx;

height: 90rpx;

line-height: 90rpx;

right: 0rpx;

font-size: 30rpx;

background-color:#f55212;

}

.buy_btn_box {

position: absolute;

bottom: 0rpx;

color: #fff;

width: 100%;

height: 90rpx;

line-height: 90rpx;

text-align: center;

background-color: #323232;

}



.collect_big_box {

width: 100%;

height: 100%;

/* position: relative; */

}





<!--JS-->





Page({



/**

* 页面的初始数据

*/

data: {

arr: '',//存储请求回来的数组

ini: 0,

uhide: '',

arr:[

{ img: "http://i1.umei.cc/uploads/tu/201709/9999/7960b0cb2f.jpg", price: 15, state: 0, num: 0, service_name: "老五", },

{ img: "http://i1.umei.cc/uploads/tu/201709/9999/7960b0cb2f.jpg", price: 12.99, state: 0, num: 0, service_name: "Can I Help You", },

{ img: "http://i1.umei.cc/uploads/tu/201709/9999/7960b0cb2f.jpg", price: 10, state: 0, num: 0, service_name: "Can I Help You", }

],

add_car_num: 0,//控制是否初次进入界面

price: '0.00'//价钱

},

// 滚动到底部

lower: function () {

console.log("我到了底部")

},



//数量加函数

numadd: function (e) {

var _this = this;

const index = e.currentTarget.dataset.index;

console.log(index)

let carts = this.data.arr;

let num = carts[index].num;//数量

num = num + 1;

carts[index].num = num;

this.setData({

arr: carts

});

var sum = 0;

for (var i = 0; i < carts.length; i++) {

var QC = _this.data.arr[i].num;

sum += parseFloat(QC);

}

// console.log(sum);

var price = 0;

if (sum > 0) {

for (var i = 0; i < carts.length; i++) {

var QB = _this.data.arr[i].price;

var QR = _this.data.arr[i].num;



price += QB * QR;

}

}

console.log(price.toFixed(2))



this.setData({

add_car_num: sum,

price: price.toFixed(2)

})

},

//数量减函数

numminus: function (e) {

const index = e.currentTarget.dataset.index;

// console.log(index)

let carts = this.data.arr;

// console.log(carts[index].num)

let _this = this;

let num = carts[index].num;

if (num <= 1) {

const index = e.currentTarget.dataset.index;

let carts = this.data.arr;

let state = carts[index].state;//是否初次进入状态

state = 0;

carts[index].state = state;

carts[index].num = 0;

console.log(carts[index].num)

this.setData({

arr: carts,

});

} else {

num = num - 1;

carts[index].num = num;

this.setData({

arr: carts,

});

}

var sum = 0;

for (var i = 0; i < carts.length; i++) {



var QC = _this.data.arr[i].num;

sum += parseFloat(QC);

}

if (sum <= 0) {

this.setData({

ico_num: 0

});

} else {

this.setData({

ico_num: 1

});

}

var price = 0;

if (sum > 0) {

for (var i = 0; i < carts.length; i++) {

var QB = _this.data.arr[i].price;

var QR = _this.data.arr[i].num;



price += QB * QR;

}

}



this.setData({

add_car_num: sum,

price: price.toFixed(2)

});




},

// 产品数量为零时方法

showadd: function (e) {

var _this = this;

const index = e.currentTarget.dataset.index;

// console.log(index)

let carts = this.data.arr;

// console.log(carts[index].state)

let num = carts[index].num;

let state = carts[index].state;

state = 1;

carts[index].state = state;

carts[index].num = 1;

var sum = 0;

for (var i = 0; i < carts.length; i++) {



var QC = _this.data.arr[i].num;

sum += parseFloat(QC);

}

if (sum <= 0) {

this.setData({

ico_num: 0

});

} else {

this.setData({

ico_num: 1

});

}

var price = 0;

if (sum > 0) {

for (var i = 0; i < carts.length; i++) {

var QB = _this.data.arr[i].price;

var QR = _this.data.arr[i].num;



price += QB * QR;

}

}



this.setData({

arr: carts,

add_car_num: sum,

price: price.toFixed(2)

});



},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

var that = this;

// wx.request({

// method:"post",

// url: '',

// data:{id:1},

// success: function (options) {

// console.log(options)

// that.setData({

// arr: options.data.data.datas.service

// })

// }

// })

},



/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {



},

})



<!--如果觉得对你有帮助,请给个赞 谢谢-->

 

菜鸟老五
关注
专栏目录
微信小程序：购物车加减
Dove言和
03-19 4285
此贴为自己记录贴，以便日后做到同样的项目能给自己提个醒 在加入购物车时，会将商品编号（goods_id）、数量（quan）等有用的信息存入购物车表（cart），有则在原有的基础上添加数量，无则新增一条数据，从而生成一个cart表的id。打开购物车时，将id、goods_id、quan赋值，如果商品库存或者状态发生变化，也要改要体现出来，例如库存不够、该商品已下架之类的。 购物车的加减和输...
小程序实现抛入购物车效果，计算金额，加减等功能
09-30
该小程序案例实现了购物车加减计算金额，单选全选计算金额，计算数量，删除，以及抛物线点击商品抛入购物车效果.
vue、微信小程序 实现简单购物车加购动画效果
最新发布
weixin_60631847的博客
08-07 373
🛒 购物车</view>-- 这里可以添加一个隐藏的列表来模拟加购的商品，但在这个例子中我们省略它 --></view>-- 假设我们用一个动画元素来模拟加购的动画 -->商品加入购物车
微信小程序-购物车数字加减
记录学习编程的日常
02-18 913
微信小程序-购物车数字加减 效果图 2.wxml文件 <!-- 主容器 --> <view class="stepper"> <!-- 减号 --> <text class="{{minusStatus}}" bindtap="bindMinus">-</text> <!-- 数值 --> <input class="input" type="number" bindcha
微信小程序购物车 数量加减功能
weixin_40762926的博客
11-19 3286
现在就为大家介绍这个小组件，在小程序中，该如何去写 下图为本项目的图： wxml： <!-- 主容器 --> <view class="stepper"> <!-- 减号 --> <text class="{{minusStatus}}" bindtap="bindMinus">-</text> <!-- 数值 --> <input type="nu...
微信小程序之购物车
书写人生
05-22 9888
登录成功、付款成功，而且还拥有了自己的一辆车： 购物车 也发现了自己的不足之处： 余额不足。 为大家介绍的就是购物车 这里演示从商品列表中添加到购物车 下面先做商品列表页。如下图： 布局分析： 首先一个list的主盒子，接着是item盒子，这是必须的。       然后把item分成左侧的图片部分，和右侧的说
微信小程序带购物车功能 移动开发实现菜单切换，加减数量，汇总金额，实现支付的用例.zip
06-20
在这个“微信小程序带购物车功能 移动开发实现菜单切换，加减数量，汇总金额，实现支付的用例”中，我们将探讨微信小程序如何实现购物车的各种核心功能，包括菜单切换、商品数量的增减、总价计算以及支付流程。...
购物车小程序
04-18
在开发“购物车小程序”时，我们需要关注的关键知识点包括用户界面设计、数据管理、状态管理、事件处理以及响应式更新。下面将详细阐述这些方面。 1. 用户界面设计： - 全选与单选：在购物车页面，通常会有一个...
小程序实现完整购物车[全选/反选计算金额/加减计算数量跟金额]
热门推荐
菜鸟老五
07-20 2万+
代码注释很容易理解 <!-- 最外层视图pages --> <view class="pages"> <view wx:if="{{hasList}}"> <!-- 编辑 --> <view class='edit'> <label class='edit_btn' bindtap...
小程序多个商品数量之间的增减与总价
weixin_30906671的博客
09-12 444
wxml: <view class="container"> <block wx:for="{{carts}}" wx:key="key"> <view class='carts'> <text class='name'>{{item.title}}</text> <v...
微信小程序购物车产品计价
weixin_30596023的博客
06-01 247
微信小程序购物车产品计价： 问题：当选中商品，价格累加时会出现无限循环小数 解答：在计算前先parseFloat(变量)，再计算的最后使用(变量).toFixed(2)保留两位小数 例如： jiaCart:function(e){ var pid = e.currentTarget.id; var pic = parseFloat(e.currentTarget.dat...
小程序外卖点餐购物车效果
07-02
具体效果https://www.jianshu.com/p/5297bb542e2a，只有点餐的效果，价格和数量的计算。
小程序购物车的实现
11-23
小程序购物商城,详情 购物车,地址,商品分类,,商品列表 效果演示https://jltsxz-1257907537.cos.ap-guangzhou.myqcloud.com/up/20181123/297aaf49cd174d6699d73fd6e0c5a1a3.gif
小程序加入购物车代码
09-18
一个完整的微信小程序开发demo，绝对打开你的小程序之旅 一个完整的微信小程序开发demo，绝对打开你的小程序之旅
（六）Vue项目——微商城：实现购物车结算信息、商品数量加减
m0_71824048的博客
05-31 2999
通过window+Apache+php+MySQL 服务器配置提升对项目开发认识。
微信小程序购物车数量加减功能的实现
ainie0728的博客
10-19 1752
实现一个简单的数量增减功能 1.wxml <view class='stepper sum'> <text class='{{minusStatus}}' type='number' bindtap='bindMinus'>-</text> <input bindinput='bindManual' value...
小程序实现完整购物车[全选反选计算金额加减计算数量跟金额]
皮皮的博客
09-26 1238
小程序实现完整购物车[全选/反选计算金额/加减计算数量跟金额] 一、wxml页面代码模块 <view wx:if="{{hasList}}"> <view class="order_list"> <view class="order" wx:for="{{list}}" wx:key="{{index}}"> <view class...
微信小程序 - 实现购物车结算
weixin_34310127的博客
10-12 3734
      示例源码下载：小程序-实现购物车结算
微信小程序购物车
a13145211的博客
03-06 932
今天写了一个完整的微信小程序购物车项目！ 写的代码很长。一般百度搜索到 一般会看到很多dome。而且很详细，不过他们写的 其实也就是dome。如果调用接口也是需要改变很多东西，所以照抄 还是不行的。不过你们可以看着他们的详细dome在看着我的思路。 简单说一下看着他们的dome遇到的问题。 一、我们需要后台的哪些接口，不仅改变了前端页面，也改变了后台的数据。 1、购物车的列表接口 2、购物车商品...
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜鸟老五

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值