weilaibike-work-weapp/pages/parkMange/parkManage.js

// pages/parkMange/parkManage.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    active: 1, // 1停车区  2禁停区
    checked: false, //switch 选择
    parkList: [], //停车区列表
    noParkList: [], //禁停区列表
    showArea: false, //显示所属大区选择框
    showType: false, //显示区域类型
    areaList: [], //所属大区选项
    areaName: '', //大区名称
    typeList: [{ //区域类型选项
      type: 1,
      name: '禁停区'
    }, {
      type: 2,
      name: '停车区'
    }],
    typeName: '', //区域类型名称
    type: '', //区域类型
    parkName: '', //停车区域名称
    searchName: '', //搜索框停车区域名称
    parkNum: 0, //停车上限
    areaChecked: true, //默认区域状态
    showPop: false, //显示弹窗
    option1: [{
      text: '全部区域',
      value: 0,
      areaID: ''
    }],
    value1: 0,
    areaId: '', //弹窗区域id
    area_id: '', //全部区域id
    // status: true, //true为正常显示，false为显示删除按钮
    editShow: false, //显示 绘制围栏(false) || 保存（save）
    parkId: '',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    if (options.type == 1) {
      this.setData({
        active: 2
      })
    } else if (options.type == 2) {
      this.setData({
        active: 1
      })
    }
    this.getAreas();
    let that = this;
    app.request('index', '', 'GET').then(res => {
      if (res.statusCode == 200) {
        var data = res.data
        for (var i = 0; i < data.wx_area.length; i++) {
          data.wx_area[i].value = i + 1
        }
        this.setData({
          areaList: res.data.wx_area,
          option1: that.data.option1.concat(data.wx_area)
        })
        console.log(that.data.areaList)
      }
    })
  },
  // 编辑停车区
  edit(e) {
    console.log(e);
    let type = e.currentTarget.dataset.item.type;
    let typeName = ''
    if (type == 1) {
      typeName = '禁停区'
    } else if (type == 2) {
      typeName = "停车区"
    }
    this.setData({
      showPop: true,
      editShow: true,
      parkId: e.currentTarget.dataset.item.id,
      areaName: e.currentTarget.dataset.item.area_name,
      parkName: e.currentTarget.dataset.item.name,
      typeName: typeName,
      areaChecked: e.currentTarget.dataset.item.status,
      parkNum: e.currentTarget.dataset.item.max_number,
      areaId: e.currentTarget.dataset.item.area_id,
      type: e.currentTarget.dataset.item.type
    })
  },
  //搜索输入停车点名称
  nameInp(e) {
    this.setData({
      searchName: e.detail.value
    })
    if (!this.data.searchName) {
      this.getAreas();
    }
  },
  //搜索
  seek() {
    let that = this;
    console.log(this.data.searchName)
    if (!this.data.searchName) {
      wx.showToast({
        title: '请输入停车点名称',
        icon: 'none'
      })
    } else {
      let type = ''
      if (this.data.active == 1) {
        type = 2
      } else {
        type = 1
      }
      let data = {
        name: that.data.searchName,
        type: type
      }
      app.request('parking', data, 'GET').then(res => {
        console.log(res)
        if (that.data.active == 1) {
          that.setData({
            parkList: res.data
          })
        } else if (that.data.active == 2) {
          that.setData({
            noParkList: res.data
          })
        }
      })
    }
  },
  // 删除停车区
  remove(e) {
    let that = this;
    let parkId = e.currentTarget.dataset.item.id;
    let type = e.currentTarget.dataset.item.type;
    let name = ''
    if (type == 1) {
      name = '禁停区'
    } else if (type == 2) {
      name = '停车区'
    }
    wx.showModal({
      title: '提示',
      content: '确定要删除【' + e.currentTarget.dataset.item.name + '】' + name + '？',
      success(res) {
        if (res.confirm) {
          app.request('parking/' + parkId, '', 'DELETE').then(res => {
            if (res.statusCode == 204) {
              wx.showToast({
                title: '删除成功',
                icon: 'none',
                duration: 2000,
                success: function() {
                  setTimeout(function() {
                    that.getAreas();
                  }, 2000)
                }
              })
            }
          })
        } else if (res.cancel) {
          wx.showToast({
            title: '取消成功',
            icon: 'none'
          })
        }
      }
    })
  },
  //手指触摸动作开始 记录起点X坐标
  touchstart: function(e) {
    //开始触摸时 重置所有删除
    this.data.parkList.forEach(function(v, i) {
      if (v.isTouchMove) //只操作为true的
        v.isTouchMove = false;
    })
    this.setData({
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY,
      parkList: this.data.parkList
    })
  },
  //滑动事件处理
  touchmove: function(e) {
    var that = this,
      index = e.currentTarget.dataset.index, //当前索引
      startX = that.data.startX, //开始X坐标
      startY = that.data.startY, //开始Y坐标
      touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
      touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
      //获取滑动角度
      angle = that.angle({
        X: startX,
        Y: startY
      }, {
        X: touchMoveX,
        Y: touchMoveY
      });
    that.data.parkList.forEach(function(v, i) {
      v.isTouchMove = false
      //滑动超过30度角 return
      if (Math.abs(angle) > 30) return;
      if (i == index) {
        if (touchMoveX > startX) //右滑
          v.isTouchMove = false
        else //左滑
          v.isTouchMove = true
      }
    })
    //更新数据
    that.setData({
      parkList: that.data.parkList
    })
  },
  //手指触摸动作开始 记录起点X坐标
  touchstart1: function(e) {
    //开始触摸时 重置所有删除
    this.data.noParkList.forEach(function(v, i) {
      if (v.isTouchMove) //只操作为true的
        v.isTouchMove = false;
    })
    this.setData({
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY,
      noParkList: this.data.noParkList
    })
  },
  //滑动事件处理
  touchmove1: function(e) {
    var that = this,
      index = e.currentTarget.dataset.index, //当前索引
      startX = that.data.startX, //开始X坐标
      startY = that.data.startY, //开始Y坐标
      touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
      touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
      //获取滑动角度
      angle = that.angle({
        X: startX,
        Y: startY
      }, {
        X: touchMoveX,
        Y: touchMoveY
      });
    that.data.noParkList.forEach(function(v, i) {
      v.isTouchMove = false
      //滑动超过30度角 return
      if (Math.abs(angle) > 30) return;
      if (i == index) {
        if (touchMoveX > startX) //右滑
          v.isTouchMove = false
        else //左滑
          v.isTouchMove = true
      }
    })
    //更新数据
    that.setData({
      noParkList: that.data.noParkList
    })
  },
  /**
   * 计算滑动角度
   * @param {Object} start 起点坐标
   * @param {Object} end 终点坐标
   */
  angle: function(start, end) {
    var dX = end.X - start.X,
      dY = end.Y - start.Y
    //返回角度 /Math.atan()返回数字的反正切值
    return 360 * Math.atan(dY / dX) / (2 * Math.PI);
  },
  //tab上方选择区域
  change: function(e) {
    wx.showLoading({
      title: '加载中',
    })
    var that = this;
    that.setData({
      area_id: that.data.option1[e.detail].areaID,
      searchName: ''
    })
    let data = '';
    let url = '';
    let tabType = ''
    if (that.data.active == 1) {
      tabType = 2
    } else if (that.data.active == 2) {
      tabType = 1
    }
    this.getAreas();

  },
  // 选择所属大区
  choiceArea() {
    this.setData({
      showArea: !this.data.showArea
    })
  },
  //获取所属大区名
  getAreaName(e) {
    this.setData({
      showArea: false,
      areaName: e.currentTarget.dataset.name,
      areaId: e.currentTarget.dataset.id
    })
  },
  //停车区域名称
  bindKeyInput(e) {
    this.setData({
      parkName: e.detail.value
    })
  },
  //选择区域类型
  choiceType() {
    this.setData({
      showType: !this.data.showType
    })
  },
  // 获取区域名
  getTypeName(e) {
    console.log(e);
    this.setData({
      showType: false,
      typeName: e.currentTarget.dataset.idx.name,
      type: e.currentTarget.dataset.idx.type
    })
  },
  // 停车上限
  numInput(e) {
    this.setData({
      parkNum: e.detail.value
    })
  },
  // 改变区域状态
  changeState() {
    this.setData({
      areaChecked: !this.data.areaChecked
    })
  },
  // 切换tab
  choice(e) {
    let that = this;
    console.log(that.data)
    console.log(that.data.area_id, 5555)
    that.setData({
      active: e.currentTarget.dataset.idx,
    })
    that.getAreas();
  },
  //添加停车区
  addPark() {
    let that = this;
    that.setData({
      areaName: '',
      parkName: '',
      parkNum: 0,
      areaChecked: true,
      editShow:false,
    })
    if (that.data.active == 1) {
      this.setData({
        typeName: '停车区',
        type: 2,

      })
    } else if (that.data.active == 2) {
      that.setData({
        typeName: '禁停区',
        type: 1
      })
    }
    this.setData({
      showPop: true
    })
  },
  // 获取所有停车区
  getAreas() {
    wx.showLoading({
      title: '加载中',
    })
    let that = this;
    let data = '';
    let url = '';
    let tabType = ''
    if (that.data.active == 1) {
      tabType = 2
    } else if (that.data.active == 2) {
      tabType = 1
    }
    if (that.data.area_id == '') {
      url = 'parking?type=' + tabType
    } else {
      url = 'parking?type=' + tabType + "&&area_id=" + that.data.area_id
    }
    app.request(url, '', 'GET').then(res => {
      if (res.statusCode == 200) {
        wx.hideLoading();
        if (that.data.active == 1) {
          that.setData({
            parkList: res.data
          })
        } else if (that.data.active == 2) {
          that.setData({
            noParkList: res.data
          })
        }
      }
    })
  },
  //控制开关按钮
  switchCon(e) {
    let that = this;
    let len = e.currentTarget.dataset.idx;
    let arr = '';
    if (that.data.active == 1) {
      arr = that.data.parkList;
    } else if (that.data.active == 2) {
      arr = that.data.noParkList
    }
    arr[len].status = !arr[len].status
    let park_id = e.currentTarget.dataset.id; //停车区id
    let status = '' //开关状态
    if (that.data.active == 1) {
      that.setData({
        parkList: arr
      })
    } else if (that.data.active == 2) {
      that.setData({
        noParkList: arr
      })
    }
    if (arr[len].status == false) {
      status = 0
    } else if (arr[len].status == true) {
      status = 1
    }
    let data = {
      status: status,
      id: park_id
    }
    app.request('parking/status', data, 'POST').then(res => {
      if (res.statusCode == 200) {
        wx.showToast({
          title: '修改成功',
          icon: 'none'
        })
      }
    })
  },
  //绘制围栏
  draw() {
    let that = this;
    if (!that.data.areaName) {
      wx.showToast({
        title: '请选择所属大区',
        icon: 'none'
      })
    } else if (!that.data.parkName) {
      wx.showToast({
        title: '停车区域名称不能为空',
        icon: 'none'
      })
    } else if (!that.data.typeName) {
      wx.showToast({
        title: '请选择区域类型',
        icon: 'none'
      })
    } else if (that.data.parkNum === '') {
      wx.showToast({
        title: '请输入停车上限',
        icon: 'none'
      })
    } else {
      if (that.data.editShow == false) { //绘制围栏
        wx.navigateTo({
          url: '/pages/parkArea/parkArea?area_id=' + that.data.areaId + "&&max_number=" + that.data.parkNum + "&&name=" + that.data.parkName + "&&status=" + that.data.areaChecked + "&&type=" + that.data.type,
        })
      } else if (that.data.editShow == true) { //保存
        let state = JSON.parse(that.data.areaChecked);
        if (state) {
          state = 1
        } else {
          state = 0
        }
        let data = {
          area_id: that.data.areaId,
          max_number: that.data.parkNum,
          name: that.data.parkName,
          status: state,
          type: that.data.type,
        }
        app.request('parking/' + that.data.parkId, data, 'PUT').then(res => {
          if (res.statusCode == 200) {
            console.log(that.data.status)
            wx.showToast({
              title: '保存成功',
              icon: 'none',
              duration: 2000,
              success: function() {
                setTimeout(function() {
                  that.setData({
                    showPop: false
                  })
                  that.getAreas();
                }, 2000)
              }
            })

          } else if (res.statusCode == 422) {
            wx.showToast({
              title: res.data.errors.name[0],
              icon: 'none'
            })
          }
        })
      }
    }
  },
  //取消
  cancel() {
    this.setData({
      showPop: false
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})