商品加入购物车逻辑实现

showToast
  <view class="tool_item btn_cart" bindtap="handleCartAdd">
        <view>加入购物车</view>
    </view>
import { requestUtil,getBaseUrl } from "../../utils/requestUtil"

Page({

  /**
   * 页面的初始数据
   */
  data: {
    baseUrl:'',
    productObj:{},
    activeIndex:0
  },
  productInfo:{

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const baseUrl=getBaseUrl();
    this.setData({
        baseUrl
    })
    this.getProductDetail(options.id)
  },
  //tab点击事件
  handleItemTap(e){
    const {index}=e.currentTarget.dataset;
    console.log(index)
    this.setData({
        activeIndex:index
    })
  },
  /**
   * 获取商品详情
   * @param {*} id 
   */
  async getProductDetail(id){
    const result = await requestUtil({
        url:'/product/detail',
        data:{id},
        method:"GET"
    });
    this.productInfo=result.message;
    this.setData({
        productObj:result.message
    })
  },
  //点击事件 商品加入购物车
  handleCartAdd(){
    this.setCartadd();

    wx.showToast({
      title: '加入成功',
      icon:'success',
      mask:true
    })
  },
  //加入购物车
  setCartadd(){
      let cart=wx.getStorageSync('cart')||[];
      console.log("cart="+cart)
      let index=cart.findIndex(v=>v.id===this.productInfo.id);
      if(index===-1){//购物车里面不存在当前商品
        this.productInfo.num=1;
        cart.push(this.productInfo);
      }else{
          //已经存在
          cart[index].num++;
      }
      wx.setStorageSync('cart',cart);//把购物车添加到缓存中
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

你可能感兴趣的:(分布式小程序电商2,javascript,前端,vue.js)