test/pages/user/cartlist/list.js

// pages/user/cartlist/list.js
const device = wx.getSystemInfoSync(),rect = wx.getMenuButtonBoundingClientRect(); // 获取设备信息
const ratio = 750 / device.windowWidth;
console.log(rect)
const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框
let height = device.windowHeight;
import commonApi from "../../../utils/https/common"
import util from '../../../utils/util'
let app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    menuWidth:width - rect.right + rect.width + 6,
    list:[],
    allChecked:false,
    allPrice:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getList();
  },
  getList:function(){
    commonApi.user_post("cart/get_list",{

    }).then(res=>{
      this.setData({
        list:res.data
      })
    })
  },
  minus:function(e){
    let index = e.currentTarget.dataset.index,list = this.data.list;
    let num = list[index].num;
    if(num<=1) return;
    num = num - 1;
    list[index].num = num;
    this.setData({
      list:list
    })
    this.changeNumber(list[index])
    this.updatePrice()
  },
  add:function(e){
    let index = e.currentTarget.dataset.index,list = this.data.list;
    let num = list[index].num+1;
    list[index].num = num;
    this.setData({
      list:list
    })
    this.changeNumber(list[index])
    this.updatePrice()
  },
  select:function(e){
    let index = e.currentTarget.dataset.index,list = this.data.list;
    if(list[index].product.flag!=1 || list[index].sku.flag!='on'){
      wx.showToast({
        title: '产品已下架',
        icon:'none'
      })
      return;
    }
    list[index].checked = list[index].checked?false:true;
    this.setData({
      list:list
    })
    this.updatePrice()
  },
  selectAll:function(){
    let list = this.data.list,allChecked = this.data.allChecked?false:true;
    list.map(item=>{
      if(item.sku.flag=='on' && item.product.flag==1){
        item.checked = allChecked;
      }
    })
    this.setData({
      allChecked:allChecked,
      list:list
    })
    this.updatePrice()
  },
  changeNumber(item){
    commonApi.user_post("cart/update_sku",{
      sku_id:item.sku.id,
      num:item.num
    }).then(res=>{
    })
  },
  updatePrice:function(){
    let list = this.data.list,price=0;
    list.map(item=>{
      if(item.checked){
        price = price + item.sku.price * item.num;
      }
    })
    this.setData({
      allPrice:price
    })
  },
  order:function(){
    app.globalData.couponInfo = null;
    util.pagePoint({
      event:'cart_order'
    },1)
    let list = this.data.list,price=0,product=[];
    list.map(item=>{
      if(item.checked){
        item.product.type="post";
        product.push({
          product:item.product,
          sku:item.sku,
          productNum:item.num
        })
      }
    })
    if(product.length==0) {
      wx.showToast({
        title: '请先选择产品',
        icon: 'none'
      })
      return;
    }
    app.globalData.postProduct = product;
    wx.navigateTo({
      url: '/pages/order/postOrder/index?from=cart',
    })
  },
  touchStart(e){//移动前点击的位置
    console.log(e)
    // 在开始触摸时将所有startTouchMove设置为flase,对当前的为true
    this.data.list.forEach(cart =>{
      if(cart.isTouchMove)//当istouchMove为true
        cart.isTouchMove = false;//其它的对象都为false
    })
    this.setData({
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY,
      list: this.data.list
    })
  },
  touchmove(e){//移动的位置,用于计算用户滑动的弧度向左还是向右,移动了多少,可以确定删除功能的显示和隐藏
    let index = e.currentTarget.dataset.index;
    // 获取开始的x,y坐标
    let startX = this.data.startX,
        startY = this.data.startY;
    // 获取移动的x,x坐标
    let touchMoveX = e.changedTouches[0].clientX,
        touchMoveY = e.changedTouches[0].clientY;
    // 调用计算角度的方法,获取角度
    var angel = this.angel({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY })
    // 遍历cartArray
    this.data.list.forEach((cart, i ) =>{
      cart.isTouchMove = false;
      // 滑动角度大于30,直接return 视为非滑动意思
      if(Math.abs(angel) > 30) return;
      // 匹配当前所点击的list和滑动的list
      if(i == index){
        // 匹配上后判断滑动方向
        if (touchMoveX > startX){//左滑动隐藏删除
          cart.isTouchMove = false;
        }else{
          cart.isTouchMove = true;
        }
      }
    })
    // 更新数据
    this.setData({
      list:this.data.list
    })
  },
  angel(start,end){//计算滑动的角度 
    // console.log(start,end)
    // 移动坐标减去对应的开始坐标
    var _X = end.X - start.X,
      _Y = end.Y - start.Y;
      // 返回角度 Math.atan() 返回数字的正切值
      return 360 * Math.atan(_Y / _X) / (2 * Math.PI)
  },
  del:function(e){
    let index = e.currentTarget.dataset.index,list = this.data.list;
    commonApi.user_post("cart/del_sku",{
      sku_id:list[index].sku_id
    }).then(res=>{
      if(res.code==1){
        wx.showToast({
          title: '删除成功',
          icon:"success"
        })
        list.splice(index,1);
        this.setData({
          list:list
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    util.pagePoint({
      event:'cart_view'
    },1)
  },

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

  },

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

  },

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

  },

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

  }
})