微信小程序纯前端完整购物车实现方法

图片编辑模式

mycart.js代码

// pages/mycart/mycart.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    goods: [{
        id: 1,
        name: "拼色短袖T恤",
        model: "白色,S",
        price: 22,
        num: 1,
        imgurl: "/image/src/good1.png"
      },
      {
        id: 2,
        name: "拼色短袖T恤",
        model: "黑色,S",
        price: 25,
        num: 1,
        imgurl: "/image/src/good2.png"

      },
      {
        id: 3,
        name: "拼色短袖T恤",
        model: "蓝色,S",
        price: 28,
        num: 1,
        imgurl: "/image/src/good4.png"
      },
      {
        id: 4,
        name: "拼色短袖T恤",
        model: "紫色,S",
        price: 32,
        num: 1,
        imgurl: "/image/src/good6.png"
      }
    ],
    //所有商品的数
    goodscount: 0,
    is_edit: 0,
    //是否全选,s是编辑模式
    is_check_all_s: 0,
    is_check_all_d: 0,
    //结算时被选中的件数
    select_scount: 0,
    money: 0,
    num_input: 1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let goods = this.data.goods
    let goodscount = 0
    for (let i = 0; i < goods.length; i++) {
      goodscount += goods[i].num
      //添加一个新的属性默认值为0,这个属性用来判断在编辑模式商品是否被选中
      goods[i].dot_s = 0
      //在非编辑模式下商品是否被选中
      goods[i].dot_d = 0
    }
    this.setData({
      goodscount: goodscount,
      goods: goods
    })
  },
  goshopping_func() {
    wx.navigateTo({
      url: '/pages/shop/shop',
    })
  },
  //改变购物车模式
  change_edit_func() {
    let is_edit = this.data.is_edit
    let goods = this.data.goods
    let is_check_all_s = this.data.is_check_all_s
    let is_check_all_d = this.data.is_check_all_d
    if (is_edit == 1) {
      for (let i = 0; i < goods.length; i++) {
        //添加一个新的属性默认值为0
        goods[i].dot_s = 0
      }
    } else {
      for (let i = 0; i < goods.length; i++) {
        //添加一个新的属性默认值为0
        goods[i].dot_d = 0
      }
    }
    this.setData({
      is_edit: !is_edit,
      goods: goods,
      is_check_all_s: 0,
      is_check_all_d: 0,
      //改变购物车模式时,所有选中商品数清零
      select_scount: 0,
      money: 0
    })
  },
  //商品在俩个模式中被选中时的处理
  select_goods_func(e) {
    let id = e.currentTarget.dataset.id
    let goods = this.data.goods
    let is_edit = this.data.is_edit
    if (is_edit) {
      for (let i = 0; i < goods.length; i++) {
        if (goods[i].id == id) {
          goods[i].dot_s = !goods[i].dot_s
        }
      }
    } else {
      for (let i = 0; i < goods.length; i++) {
        if (goods[i].id == id) {
          goods[i].dot_d = !goods[i].dot_d
  • 6
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值