11.小程序-加入购物车

痛定思痛。 2023-02-17 11:09 5阅读 0赞

#### 加入购物车 ####

detail.wxml

<button bindtap="handleAddCar">加入购物车</button>
    
    <button bindtap="handleChangeCar">购物车</button>

detail.js

Page({ 
      data: { 
        goodsInfo: { },
        users: null
      },
      // id是小程序默认或预留的属性，不能命名为id
      myid: 0,
    
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
        this.myid = Number(options.id)
      },
    
      /** * 生命周期函数--监听页面初次渲染完成 */
      onReady: function () { 
        wx.request({ 
          url: `http://localhost:3000/goods/${ this.myid}`,
          success: (res) => { 
            this.setData({ 
              goodsInfo: res.data
            })
          }
        })
      },
    
      // 添加购物车
      handleAddCar () { 
        // 判断是否登录
        if (wx.getStorageSync('isLogin') === true) { 
          // 如果登录成功，跳转到购物车页面
          wx.request({ 
            url: `http://localhost:3000/carts?goodId=${ this.data.goodsInfo.id}`,
            success: (res) => { 
              if (res.data.length === 0) { 
                console.log('post添加新商品')
                // 追加一个新的商品到购物车
                this.addCar()
              } else { 
                console.log('+1')
                // 更新某商品数量 +1
                this.updateCart(res.data[0]) // [0] 是数组转换为对象
              }
            }
          })
        } else { 
          // 如果登录失败，就往选项卡跳转到Center页面
          wx.switchTab({ 
            url: '/pages/center/center',
          })
        }
      },
    
      // 更新商品数量
      updateCart (cartobj) { 
        wx.request({ 
          url: `http://localhost:3000/carts/${ cartobj.id}`,
          method: 'put', // 更新
          data: { 
            ...cartobj,
            number: cartobj.number + 1
          },
          success: () => { 
            // 更新成功提示
            wx.showToast({ 
              title: '加入购物车成功', 
              icon: 'success', 
              duration: 2000 // 几秒后隐藏
            })
          }
        })
      },
    
      // 追加新商品
      addCar () { 
          /* 判断此商品是否存过： 1.如果存过，就更新数据，就让该数据++操作 2.如果没存过，就post新数据存储 */ 
         wx.request({ 
          url: 'http://localhost:3000/carts',
          data: { 
            // 真实工作中，要与后端商品数据结构
            goodId: this.data.goodsInfo.id, // 商品的id
            number: 1, // 加入购物车的数量
            username: wx.getStorageSync('users').nickName, // 用户昵称
            checked: false // 是否选中
          },
          method: 'post', // json-server添加一条新数据的方法
          success: (res) => { 
            // 更新成功提示
            wx.showToast({ 
              title: '加入购物车成功', 
              icon: 'success', 
              duration: 2000 // 几秒后隐藏
            })
          }
        })
      },
        
      // 跳转到购物车
      handleChangeCar () { 
        wx.switchTab({ 
          url: '/pages/shopCar/shopCar',
        })
      }
    
    })