微信购物车案例

微信购物车案例

1.读取本地缓存的购物车数据 微信缓存数据

2. 渲染出读取的购物车物品实例

   const carts = wx.getStorageSync('carts')
    this.setData({
          carts, 
        }) 

3. 添加新的物品

3.1 商品已存在 数量+1

3.2 商品未存在 重新存储最新的数据

addChart() {
		// 获取缓存中的数据
		let Carts = wx.getStorageSync('carts') || []
		let index = Carts.findIndex((v) => v.goods_id == this.data.goods_id)
		if (index === -1) {
			// 不存在 数量为初始值1
			this.GoodsInfo.num = 1
			// 状态为 默认选中状态
			this.GoodsInfo.cheackd = true
			Carts.push(this.GoodsInfo)
		} else {
			// 存在 数量为+1
			Carts[index].num++
		}
		// 更新缓存数据
	    wx.setStorageSync('carts', Carts)
	    // 每次添加需要更新一下全选按钮的状态
		let allcheack = Carts.every(item=>item.cheackd)
        wx.setStorageSync('allcheack',allcheack)  
		wx.showToast({
			title: '添加成功！',
			icon: 'success',
			duration: 1500,
			mask: true,
		})
	},

4.全选与反选

 /**
     * 全选与反选
     * @param {*} options 
     */
    allcheacks(){
        let newdata = this.data.carts // 获取购物车商品的实例
    this.setData({
        allcheack:!this.data.allcheack  // 点击一次状态取反
    })  
    if(!this.data.allcheack){
       // 反选 购物车内所有商品的选中状态为false
        newdata.forEach((item)=>{   
             item.cheackd = false  
         })  
         // 总金额为0
        this.setData({
            totalMoenys:0
        })
      }else{
      // 全选 购物车内所有商品的选中状态为true
        newdata.forEach((item)=>{
             item.cheackd = true
         })  
      } 
      // 更新数量
      	let totalnum = newdata.filter((item) => item.cheackd == true).length
      // 无论是全选还是反选 都要重新渲染数据
        this.setData({
        carts:newdata，
        totalnum 
    
        })
        // 更新缓存
        wx.setStorageSync('carts', newdata)
        // 更新总金额
        this.totallMoney()
       // 缓存当前全选按钮的状态 下次渲染要保持一致 
       wx.setStorageSync('allcheack', this.data.allcheack)
       
    },

5. 计算金额和显示数量

 /**
     * 计算总金额
     * @param {*} options 
     */
    totallMoney(){
        // 1. 通过map重构数组，得到{cheackd：true/false,total:1215} 的一组数据
        // 2. 通过过滤函数filter 将cheackd：fals 的商品过滤掉（未选中）
        // 3. 通过计算函数reduce 计算出总金额
        // 4. 更新总金额
    let  totalMoenys  = this.data.carts.map(item=>{
        return {cheackd:item.cheackd , total:(item.num*item.goods_price)}
    }).filter(item =>(item.cheackd == true)).reduce((v,c)=> v + c.total,0)
       this.setData({
        totalMoenys,
       }) 
    },

6. 加1 或减 1

 /**
     * 修改数量
     * @param {*} options 
     */
    eidit(e){
        // 1. 加1 和 减1 使用的是同一个函数 根据 type进行判断 1. 为加 2. 为减
      let {type}= e.currentTarget.dataset
      let {cid}= e.currentTarget.dataset
      //console.log(type);
      let newCarts = this.data.carts
      // 2. 根据cid 找到对应的商品
      newCarts.forEach(item=>{
          if(item.goods_id == cid){
          // 3. 根据类型判断是加还是减
              if(type == 1){
              // 3.1 执行加1操作   判断 当前的数量有没有超过最大值 
              // 3.11 超过设为最大值
              // 3.12 未超过加1 
                  item.num >= item.goods_number ? item.num =item.goods_number :item.num++
                  // 更新最新金额
                  this.totallMoney()
              } else if(type == 2){
               // 3.2 执行减1操作   判断 当前的数量有没有低于0 
              // 3.21 低于0 设为0
              // 3.22 不低于1 数量减1 
                	item.num <= 1 ? (item.num = 1) : item.num--
                  // 更新最新金额
                this.totallMoney()
              }
          }
          // 更新为最新数据
          this.setData({
              carts:newCarts
          })
          // 更新缓存
          wx.setStorageSync('carts', newCarts)
      })
    },

7. 选择某一个支付

  /**
     * 选择谋一个
     * @param {*} e 
     */
    cheackOne(e){
   
        let {cid} = e.currentTarget.dataset
        let newCarts = this.data.carts
         // 1. 根据cid 找到对应的商品
         // 2. 改变状态 应该使用取反 而不是具体的true/false 
        newCarts.forEach(item=>{
            if(item.goods_id == cid){
                 item.cheackd = !item.cheackd
            }
         
        })
          // 更新数量
      	let totalnum = newdata.filter((item) => item.cheackd == true).length
        //  更新全选按钮的状态
        let allcheack = newCarts.every(item=>item.cheackd)
        // 3. 更新最新数据
        this.setData({
            carts:newCarts,
            allcheack,
            totalnum 
        })
        // 更新最新总额
        this.totallMoney()
        // 更新缓存
        wx.setStorageSync('carts', newCarts)
       //  更新全选按钮的状态
       wx.setStorageSync('allcheack', this.data.allcheack)
    },

8.删除

	/**
	 * 删除商品
	 * @param {*} options
	 */
	deleted(e) {
	/**
	 * 删除商品
	 * @param {*} options
	 */
	deleted(e) {
		let that = this
		wx.showModal({
			title: ' 删除提示！',
			content: '确定要删除此商品?',
			showCancel: true,
			cancelText: '取消',
			cancelColor: '#000000',
			confirmText: '确定',
			confirmColor: '#3CC51F',
			success: (result) => {
				if (result.confirm) {
				 
			let { cid } = e.currentTarget.dataset
					// console.log(cid)
					let newCarts = this.data.carts
			
					for (let i = 0; i < newCarts.length; i++) {
						if (newCarts[i].goods_id == cid) {
							newCarts.splice(i, 1)
							// 删除后直接 break
							break
						}
					}
			  // 更新数量
			      	let totalnum = newdata.filter((item) => item.cheackd == true).length
					this.setData({
						carts: newCarts,
						totalnum 
					})
					 // 更新最新总额
					this.totallMoney()
							  // 更新缓存
				wx.setStorageSync('carts', newCarts)
				// 更新 全选按钮的状态  购物车可能全部清空了
				let allcheack = newCarts.length!=0?newCarts.every(item=>item.cheackd):false
				        wx.setStorageSync('allcheack',allcheack)    
						this.setData({
				            allcheack
				             
						})
					},		  
				}
			},
		})
	},