前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序 购物车代码

微信小程序 购物车代码

原创
作者头像
田超
发布2018-07-27 16:42:31
2.5K0
发布2018-07-27 16:42:31
举报
文章被收录于专栏:田超学前端

OK,继续开工。。。

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

wxml:

代码语言:javascript
复制
<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:

代码语言:javascript
复制

.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:

代码语言:javascript
复制
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 这个属性写到产品里面。。

收工。。。

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档