epdc-volunteer-mp-js/components/selectInput/index.js

Component({
  properties: {
    // 是否显示底部弹出页面
    isShow: {
      type: Boolean,
      observer: function (newVal) {
        if(newVal) {
          this.show()
        } else {
          this.hide()
        }
      }
    },
    // 返回给父组件的值是label还是value，默认value
    getTypeValue: {
      type: Boolean,
      value: true
    },
    // 列表数据，转换为checkList
    listData: {
      type: Array,
      value: []
    },
    // 默认数据，复显
    defaultList: {
      type: Array,
      value: []
    },
    // listData中的label 名，默认 label
    label: {
      type: String,
      value: 'label'
    },
    // listData中的value 名，默认 value
    value: {
      type: String,
      value: 'value'
    },
    // 单选还是多选，默认多选 (未实现)
    // isSingle: {
    //   type: Boolean,
    //   value: false
    // }
  },
  data: {
    checkList: [],
    checkedItemLabels: [], // 选中的label集合
    checkedItemValues: [], // 选中的value集合
    searchList: [], // 搜索结果列表
    searchKey: '', // 搜索的值
    searchFocus: false,
    initAnimation: '',
  },
  lifetimes: {
    attached () {
      this.animation = wx.createAnimation({
        duration: 600,
        timingFunction: 'ease'
      })
      this.hide()
      
      this.initData()
    }
  },
  methods: {
    // pageLifetimes 无效
    show () {
      this.animation.translateY(0).step()
  　  this.setData({
        initAnimation: this.animation.export()
  　　})
      this.initData()
    },
    hide () {
      this.animation.translateY(500).step()
      this.setData({
        initAnimation: this.animation.export()
      })
    },
    initData () {
      this.data.checkList = []
      this.data.checkedItemLabels = []
      this.data.checkedItemValues = []
      this.data.listData.forEach((item, key) => {
        let checkListItem = {
          label: item[this.data.label],
          value: item[this.data.value],
          checked: false
        }
        this.data.checkList.push(checkListItem)
      })
      if (this.data.defaultList.length > 0) {
        this.data.defaultList.forEach(item => {
          this.data.checkList.forEach(checkItem => {
            if(item == checkItem.value) {
              checkItem.checked = true
            }
          })
        })
      }
      let checkedLabel = []
      let checkedValue = []
      this.data.checkList.forEach(item => {
        if (item.checked) {
          checkedLabel.push(item.label)
          checkedValue.push(item.value)
        }
      })
      this.setData({
        checkList: this.data.checkList,
        checkedItemLabels: checkedLabel,
        checkedItemValues: checkedValue
      })
    },
    changeCheckedItem(e) {
      let changeItem = e.currentTarget.dataset.item
      changeItem.checked = !changeItem.checked
      this.data.checkList.forEach(item => {
        if (changeItem.value == item.value) {
          item.checked = changeItem.checked
        }
      })
      let checkedLabels = this.data.checkedItemLabels
      let checkedValues = this.data.checkedItemValues
      if (changeItem.checked) {
        checkedLabels.push(changeItem.label)
        checkedValues.push(changeItem.value)
      } else {
        let delIndex = checkedValues.indexOf(changeItem.value)
        if (delIndex > -1) {
          checkedLabels.splice(delIndex, 1)
          checkedValues.splice(delIndex, 1)
        }
      }
      this.setData({
        checkList: this.data.checkList,
        checkedItemLabels: checkedLabels,
        checkedItemValues: checkedValues,
        searchList: [],
        searchKey: ''
      })
    },
    onInput (e) {
      let value = e.detail.value.toLowerCase()
      let list = []
      this.data.checkList.forEach(item => {
        if (item.label.toLowerCase().indexOf(value) > -1) {
          list.push(item)
        }
      })
      this.setData({
        searchList: list,
        searchKey: value
      })
    },
    onFocus () {
      this.setData({
        searchFocus: true
      })
    },
    onblur () {
      this.setData({
        searchFocus: false
      })
    },
    confirm () {
      let values = this.data.getTypeValue ? this.data.checkedItemValues : this.data.checkedItemLabels
      this.triggerEvent('onConfirm', { itemList: values })
    },
    cancel () {
      this.triggerEvent('onCancel')
    }
  }
})