当前位置:   article > 正文

微信小程序加入购物车_微信小程序加入购物车功能

微信小程序加入购物车功能

还是假数据,接上一个页面,来进行点击事件,在上一个页面里添加bindtap,就可以wxml

  1. <view class="shopping_cart" bindtap="bindViewTab" >
  2. 加入购物车
  3. </view>
  4. <view bindtap="buynow" class="shopping_cart">立即购买</view>

然后在写一下点击之后出现的加入数量的遮盖层wxml

  1. <!--加入购物车遮盖层 -->
  2. <view class="zan-dialog {{ showDialog ? 'zan-dialog--show' : '' }}" catchtouchmove='ture' >
  3. <view class="zan-dialog__mask" bindtap="zandialog"/>//取消弹窗
  4. <view class="zan-dialog__container">
  5. <view style="display: flex;">
  6. <view style="flex: 1;" style="width: 125rpx;height: 125rpx;">
  7. <image style="width: 100%;height: 100%;" src="{{list.url}}" ></image>
  8. </view>
  9. <view style="flex: 1;margin-left: 30rpx;">
  10. <view>{{list.title}}</view>
  11. <view>¥{{list.price}}
  12. <span>库存:{{}}</span></view>
  13. </view>
  14. </view>
  15. <view>数量</view>
  16. <view>
  17. <text class="decrease" bindtap="decrease">-</text>
  18. <text class="phonenumber">{{num}}</text>
  19. <text class="increase" bindtap="increase">+</text>
  20. </view>
  21. </view>
  22. </view>

遮盖层css

  1. /* 遮盖层 */
  2. .zan-dialog__mask {
  3. position: fixed;
  4. top: 0;
  5. left: 0;
  6. overflow: hidden;
  7. z-index: 5;
  8. background: rgba(0, 0, 0, 0.5);
  9. height: 100vh;
  10. width: 100%;
  11. display: none;
  12. }
  13. .zan-dialog__container {
  14. position: fixed;
  15. bottom: 100rpx;
  16. width: 100%;
  17. height: 350rpx;
  18. background: #ffffff;
  19. transform: translateY(300%);
  20. transition: all 0.4s ease;
  21. z-index: 12;
  22. border-radius: 20rpx 20rpx 0rpx 0rpx;
  23. padding: 25rpx;
  24. }
  25. .zan-dialog--show .zan-dialog__container {
  26. transform: translateY(0);
  27. }
  28. .zan-dialog--show .zan-dialog__mask {
  29. display: block;
  30. }
  31. /*加减*/
  32. .decrease{
  33. padding: 8rpx 30rpx;
  34. border-top:1px solid #bbbbbb;
  35. border-left:1px solid #bbbbbb;
  36. border-bottom:1px solid #bbbbbb ;
  37. }
  38. .phonenumber{
  39. padding: 8rpx 30rpx;
  40. border: 1px solid #bbbbbb;
  41. }
  42. .increase{
  43. padding: 8rpx 30rpx;
  44. border-top:1px solid #bbbbbb ;
  45. border-right:1px solid #bbbbbb ;
  46. border-bottom:1px solid #bbbbbbbd ;
  47. }

接下来就是点击加入购物车按钮,出现弹窗以及取消和添加的js

  1. 遮盖层首先下data里的初始值是false
  2. showDialog:flase
  3. //加入购物车
  4. bindViewTab:function(e){
  5. /* 先进行一个判断,判断数量是不是等于0,如果是的话showDialog=ture,如果不是的话
  6. showDialog=flase,*/
  7. if(this.data.num === 0){
  8. this.setData({
  9. showDialog: ture
  10. })
  11. } else {
  12. let productInfo = this.data.list//当前的数据
  13. productInfo.num = productInfo.num+this.data.num
  14. //当前数据的数量等于当前数量加上现在输入的数量
  15. var shopping = wx.getStorageSync('shopping') || [];//变量等于本地储存或[]
  16. shopping.push(productInfo)//添加到变量里
  17. //判断物品id是否一样
  18. let idArr = [] //相同id放在同一数组中
  19. let resultArr = [] //最终结果数组
  20. for(let i = 0;i < shopping.length; i++){//遍历shopping
  21. let index = idArr.indexOf(shopping[i].id)
  22. if(index > -1){ //有相同id存在的话,获取index索引位置
  23. resultArr[index].num += shopping[i].num //取相同id的数量累加
  24. }else{
  25. idArr.push(shopping[i].id)
  26. resultArr.push(shopping[i])
  27. }
  28. }
  29. wx.setStorageSync('shopping',resultArr)//本地存储
  30. wx.showToast({
  31. title: '添加购物车成功',
  32. icon: 'success',
  33. duration: 2000,
  34. })
  35. this.setData({
  36. showDialog: false,
  37. num:0,//总数清理,方便下次使用
  38. jial:resultArr.length//数量的长度,就购物车图标上的数量
  39. })
  40. }
  41. }

遮盖层的加减js 

  1. //点击遮盖层最外面的黑色透明背景showDialog=false
  2. zandialog:function(){
  3. this.setData({
  4. showDialog:false
  5. })
  6. },
  7. //减
  8. decrease:function(e){
  9. if(this.data.num < 1){//判断小于1的时候
  10. wx.showToast({
  11. title: '不能再减了~',
  12. icon:'none'
  13. })
  14. return ;
  15. }
  16. var Num = this.data.num - 1;
  17. this.setData({//添加到data里面
  18. num: Num
  19. })
  20. },
  21. //加
  22. increase:function(e){
  23. var Num = this.data.num + 1;
  24. this.setData({
  25. num: Num
  26. })
  27. },

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/654178
推荐阅读
相关标签
  

闽ICP备14008679号