zoukankan      html  css  js  c++  java
  • 微信 小程序组件 加入购物车全套 one js

    // pages/shop/shop.js
    Page({

    /**
    * 页面的初始数据
    */
    data: {
    carts: [
    { teaname: '冠军乌龙茶-150g', image: '../../imgs/car/shopping_pic_1.png', num: '1', price: '1200.00', sum: '1200.0', selected: true, cid: 1001, },
    { teaname: '18年老茶-150g', image: '../../imgs/car/shopping_pic_1.png', num: '1', price: '600.00', sum: '600.0', selected: true, cid: 1001, },
    ],

    // 实现bindSelectAll事件,改变全选状态
    selectedAllStatus: false,

    total: '',
    // 页面打开时的短暂加载数据初始化1
    newload: '',
    minusStatuses: "disabled",
    //判断购物车是否为空时的页面
    hasList: true
    },

    /**
    * 生命周期函数--监听页面加载
    */
    onLoad: function (options) {
    this.sum();
    // 页面打开时的短暂加载函数2
    this.newload();
    this.minusStatuses();
    },
    // -------------------------------------------------------------------------------
    // 页面打开时的短暂加载函数3
    newload: function () {
    // wx.showModal({
    // title: '提示',
    // content: '这是一个模态弹窗',
    // success: function (res) {
    // if (res.confirm) {
    // console.log('用户点击确定')
    // } else if (res.cancel) {
    // console.log('用户点击取消')
    // }
    // }
    // })
    wx.showLoading({
    title: '加载中',
    });

    setTimeout(function () {
    wx.hideLoading()
    }, 1000);
    // setTimeout(function () {
    // this.setData({
    // newload: 1,
    // });
    // this.data.newload=''
    // }, 2000)
    },
    // -------------------------------------------------------------------------------

    // setTimeout(function () {
    // animation.translate(30).step()
    // this.setData({
    // animationData: animation.export()
    // })
    // }.bind(this), 5000)
    // --------------------------------------------------------------------------------
    // 减号被禁用时在初始化数据函数
    minusStatuses:function(){
    var minusStatuses=[];
    var length = this.data.carts.length;
    for (var i = 0; i < length;i++){
    minusStatuses.push("disabled");
    }
    this.setData({
    minusStatuses: minusStatuses
    });
    },
    bindMinus: function (e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    var sum = this.data.carts[index].sum;
    var price = this.data.carts[index].price;
    console.log(1);
    // 如果只有1件了,就不允许再减了
    if (num > 1) {
    num--;
    }
    // 只有大于一件的时候,才能normal状态,否则disable状态
    var minusStatus = (num <= 1 ? 'disabled' : 'normal');
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = num;
    carts[index].sum = (num * price).toFixed(1);
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 将数值与状态写回
    this.setData({
    carts: carts,
    minusStatuses: minusStatuses
    });
    this.sum();
    },
    bindPlus: function (e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    var sum = this.data.carts[index].sum;
    var price = this.data.carts[index].price;
    // console.log(num);
    // 自增
    num++;
    // 只有大于一件的时候,才能normal状态,否则disable状态
    var minusStatus = (num <= 1) ? 'disabled' : 'normal';
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = num;
    carts[index].sum = (num * price).toFixed(1);
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 将数值与状态写回
    this.setData({
    carts: carts,
    minusStatuses: minusStatuses
    });
    this.sum();
    },
     
    bindManual:function(e){
    // console.log(e.detail.value)
    var cheValue = e.detail.value;
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    var sum = this.data.carts[index].sum;
    var price = this.data.carts[index].price;
    // console.log(num);
     
    if (cheValue == '' || cheValue==0){
    cheValue=1
    }
    // 只有大于一件的时候,才能normal状态,否则disable状态
    var minusStatus = (cheValue <= 1) ? 'disabled' : 'normal';
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = cheValue;
    carts[index].sum = (cheValue * price).toFixed(1);
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;

    // 将数值与状态写回
    this.setData({
    carts: carts,
    minusStatuses: minusStatuses
    });
    this.sum();
    },
    // -----------------------------------------------------------------------------------------
    // 单击复选框是否选中
    bindCheckbox: function (e) {
    /*绑定点击事件,将checkbox样式改变为选中与非选中*/
    //拿到下标值,以在carts作遍历指示用
    var index = parseInt(e.currentTarget.dataset.index);
    //原始的icon状态
    var selected = this.data.carts[index].selected;
    var carts = this.data.carts;
    // 对勾选状态取反
    carts[index].selected = !selected;
    // 写回经点击修改后的数组
    this.setData({
    carts: carts
    });
    this.sum();
    },
    // ---------------
    // 全选复选框是否选中
    bindSelectAll: function () {
    // 环境中目前已选状态
    var selectedAllStatus = this.data.selectedAllStatus;
    // 取反操作
    selectedAllStatus = !selectedAllStatus;
    // 购物车数据,关键是处理selected值
    var carts = this.data.carts;
    // 遍历
    for (var i = 0; i < carts.length; i++) {
    carts[i].selected = selectedAllStatus;
    }
    this.setData({
    selectedAllStatus: selectedAllStatus,
    carts: carts
    });
    this.sum();
    },
    // -----------------------------------------------------------------------------------------
    // 全选
    bindCheckout: function () {
    // 初始化toastStr字符串
    var toastStr = 'cid:';
    // 遍历取出已勾选的cid
    for (var i = 0; i < this.data.carts.length; i++) {
    if (this.data.carts[i].selected) {
    toastStr += this.data.carts[i].cid;
    toastStr += ' ';
    }
    }
    //存回data
    this.setData({
    // toastHidden: false,
    // toastStr: toastStr
    });
    },
    bindToastChange: function () {
    this.setData({
    // toastHidden: true
    });
    },
    // -----------------------------------------------------------------------------------------
    // 计算总的金额
    sum: function () {
    var carts = this.data.carts;
    // 计算总金额
    var total = 0;
    for (var i = 0; i < carts.length; i++) {
    if (carts[i].selected) {
    total += carts[i].num * carts[i].price;
    }
    }
    total = total.toFixed(1);
    // 写回经点击修改后的数组
    this.setData({
    carts: carts,
    total: '¥' + total
    });
    },
    // -----------------------------------------------------------
    // 购物车删除
    deleteList(e) {
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    carts.splice(index, 1); // 删除购物车列表里这个商品
    this.setData({
    carts: carts
    });
    if (!carts.length) { // 如果购物车为空
    this.setData({
    hasList: false // 修改标识为false,显示购物车为空页面
    });
    } else { // 如果不为空
    this.sum(); // 重新计算总价格
    }
    },

    // ------------------------------------------------------------------
    // 回tabar中的首页
    tobackHome: function () {
    wx.switchTab({
    url: '/pages/index/index'
    })
    },
    // -----------------------------------------------------------


    /**
    * 生命周期函数--监听页面初次渲染完成
    */
    onReady: function () {

    },

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

    },

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

    },

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

    },

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

    },

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

    },

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

    }
    })
  • 相关阅读:
    转载(SQL Server 存储过程的分页)
    学会了怎么样利用捕获异常提示数据库主键重复错误
    遇到.net加了验证控件的表单无法提交的问题
    过劳死IT界杀手 [注:该文属于转载,非原创],好可怕啊!
    很喜欢的一些道理。
    学会了在DropDownList的项里加多个空格
    好东东:asp.net利用多线程执行长时间的任务,客户端显示出任务的执行进度的示例
    javascript判断字符长度最好的方法
    layui中使用layverify进行非必填整数校验
    SuppressWarnings抑制警告的关键字
  • 原文地址:https://www.cnblogs.com/dianzan/p/7519949.html
Copyright © 2011-2022 走看看