专栏首页田超学前端微信小程序 购物车代码
原创

微信小程序 购物车代码

OK,继续开工。。。

要开发一款购物功能的小程序,购物车功能是非常必须的,所以,开干……

wxml:

<view  wx:for="{{list}}" style="margin-left:30rpx" wx:key>
  <view bindtap="BindList" data-id="{{item.id}}" data-price="{{item.totle}}">
  
    <icon type="success" size="20" color="red" wx:if="{{item.select==true}}"/> 
    <icon type="circle" size="20"  wx:else/>
    {{item.name}}---单价:{{item.price}}
  </view>
<view class="count">
   <view class="add" bindtap="BindAdd" data-id="{{item.id}}">+</view>
   <input class="import" value="{{item.InputValue}}"  data-id="{{item.id}}" bindinput='BindInput'></input>
   <view class="reduce {{minusStatus}}" bindtap="BindReaduce" data-id="{{item.id}}">-</view>
</view>
<view>商品价格:{{item.totle}}</view>
</view>
<view>商品总价格: {{total}}</view>
<view  bindtap="BindListall" >
<icon type="success" size="20" color="red" wx:if="{{selectall==true}}"/> 
    <icon type="circle" size="20"  wx:else/>全部购物车
</view>

wxss:

.checkbox{padding: 50rpx;}
.checkbox-handle{margin-bottom: 40rpx;}
.count{overflow: hidden;width:300rpx;margin-top: 50rpx}
.add{float:left;border:2rpx solid #D0CCCB;padding: 1rpx 20rpx;margin-left: 60rpx}
.import{border:2rpx solid #D0CCCB;vertical-align: top;width:80rpx;display:inline-block;text-align: center;margin-left: 12rpx;font-size:28rpx }
.reduce{float:right;display: inline-block;border:2rpx solid #D0CCCB;padding: 1rpx 20rpx}
/* .disabled{color: #ccc;}
.normal{color:#000} */

js:

const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [{ name: '商品1', id: 1, select: false, price: 50, InputValue: 1, totle: 50 }, { name: '商品2', id: 2, select: false, price: 55, InputValue: 1, totle: 55 }, { name: '商品3', id: 3, select: false, price: 70, InputValue: 1, totle: 70 }, { name: '商品4', id: 4, select: false, price: 100, InputValue: 1, totle: 100 }],
    selectall: false,
    InputValue: 1,
    total: 0,
    minusStatus: 'disabled'
  },

  BindAdd(e){
    var that = this
    that.item_total(e, 1)
  },

  BindReaduce(e){
    var that = this
    that.item_total(e, -1)
  },

  //加减计算价格

  item_total(e,nums){
    var that = this
    var list = that.data.list
    var n = e.currentTarget.dataset.id - 1
    var num = that.data.list[n].InputValue;
    if(nums < 0){
      num--
    }else{
      num++
    }
    var minusStatus = num <= 1 ? 'disabled' : 'normal';
    if (num > 0){
      list[n].InputValue = num;
    }else{
      list[n].InputValue == 1;
    }
    list[n].totle = parseInt(list[n].InputValue) * parseInt(list[n].price)
    

    that.sum();
    that.setData({
      list: list,
      minusStatus: minusStatus
    })
  },

  // 计算总金额
  sum() {
    var that = this
    var list = that.data.list;
    var total = 0;
    for (var i = 0; i < list.length; i++) {
      if (list[i].select) {
        total += list[i].InputValue * list[i].price;
      }
    }
    var newValue = parseInt(total * 100);
    total = newValue / 100.0;
    that.setData({
      list: list,
      total: total
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that  = this
    // console.log(app.globalData.userInfo)
  },

  BindInput(e){
    var that = this
    var list = that.data.list
    var n = e.currentTarget.dataset.id -1
    list[n].totle = parseInt(e.detail.value) * parseInt(list[n].price)
    var t = "list["+n+"].totle"
    var v = "list["+n+"].InputValue"
    if (e.detail.value == ''){
      that.setData({
        [v]: 1,
        [t]: list[n].price
      })
    }
    that.setData({
      [t]: list[n].totle,
    })
  },

  //全部选择
  BindListall(e){
    var that = this
    var list = that.data.list
    var total = that.data.total
    let selectAllStatus = that.data.selectall;
    selectAllStatus = !selectAllStatus;
    var totals = 0
    for(var i = 0;i < list.length ; i++){
      list[i].select = selectAllStatus;
    }
    that.setData({
      selectall: selectAllStatus,
      list: list,
      total: totals.toFixed(2)
    })
    that.sum();
  },

  // 选择商品
  BindList(e) {
    console.log(e)
    var that = this
    const index = e.currentTarget.dataset.id-1;
    let list = that.data.list;        
    const select = list[index].select;         
    list[index].select = !select;              
    that.setData({
      list: list
    });
    that.sum(); 
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

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

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

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

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

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

在判断加减数量的时候,minusStatus 这个属性是被我写在了产品的外面,所以,没做减到1的的时候,减号改变颜色,需要的可以把minusStatus 这个属性写到产品里面。。

收工。。。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序开发:canvas 多行文字换行(二)

    微信小程序开发中,canvas画出一篇文章,由于句子长短不一,画起来确实是费劲,查了不少资料,总结一下:

    田超
  • 微信小程序 canvas 循环画分行内容

    for (var a = 0; a < content.length; a++) {

    田超
  • 【微信小程序】c# 实现获取openid、session_key 服务端

    田超
  • 测试面试题集-Python列表去重

    ITester软件测试小栈
  • linux内核源码 -- list链表

    list是新队列的head指针, 包括的元素从原head队列的第一个元素到entry, head队列仅包括余下的元素

    扫帚的影子
  • C 链表 - linux 如何实现

    链表是基本数据结构, 一开始学习数据结构时, 我一般这么定义, 对应实现从头或尾插入的处理函数,

    orientlu
  • Python的list()函数

    原文链接:https://www.runoob.com/python/att-list-list.html

    于小勇
  • Python函数: any()和all(

    平常的文本处理工作中,我经常会遇到这么一种情况:用python判断一个string是否包含一个list里的元素。

    py3study
  • Typecho用模板和插件完美还原Wordpress功能

    本站使用的模板是简洁风initial,本来为了与主页适配是要自己扒模板的,但是意外发现有人已经做过了,叫AttentionX,两款模板下载链接均附在下方。 T...

    赵帆同学GXUZF.COM
  • spring静态代理、JDK与CGLIB动态代理、AOP+IoC

    现在需求发生了变化,要求项目中所有的类在执行方法时输出执行耗时。最直接的办法是修改源代码,如下所示:

    Java架构师历程

扫码关注云+社区

领取腾讯云代金券