ztb-saas-mini/pages/home/customer-list/index.js

// pages/home/customer/index.js
import Scene from '../../index/scene'
import { getCustomerList } from "../../../api/saas"
const util = require('../../../utils/util')
const event = require('../../../utils/event')
const pinyin = require('../../../utils/pinyin.js')
const app = getApp()

Scene({
  /**
   * 页面的初始数据
   */
  data: {
    type: 0,
    height: app.globalData.fragmentHeight - 100,
    loading: true,
    requesting: false,
    finished: false,
    searchList: [],
    orderList: [],
    form: {
      name: '',
      pageNum: 1,
      pageSize: 1500
    },
    total: 0,
    page: 0,
    index: 0,
    titleHeight: 240,
    indexHeight: 0,
    itemHeight: 0,
    scrollViewId: '', // scroll-view滚动到的子元素的id 锚点
    touchmove: false, // 是否在索引表上滑动
    touchmoveIndex: -1
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if(options.type){
      this.data.type = Number(options.type)
    }
    var height = app.globalData.fragmentHeight - 100
    this.data.indexHeight = height - 48
    var titleHeight = this.px2rpx(app.globalData.CustomBar) + 116
    var itemHeight = parseInt(this.data.indexHeight / 25)
    this.setData({ height, itemHeight, indexHeight: this.data.indexHeight, titleHeight })
    event.on('EventMessage', this, this.onEvent)
    this.fetchCustomerList()
  },
  onEvent: function(message){
    if (message.what == 101) {
      this.onRefreshList()
    } else if (message.what == 102) {
      // this.setData({ [`orderList[${this.data.page}][${this.data.index}]`]: message.detail })
      this.onRefreshList()
    }
  },
  onRefreshList: function () {
    if (this.data.requesting) {
      return
    }
    this.setData({ orderList: [], searchList: [], ['form.pageNum']: 1, ['form.name']: '', loading: true, finished: false })
    this.fetchCustomerList()
  },
  fetchCustomerList: function () {
    if (this.data.requesting || this.data.finished) {
      return
    }
    if (this.data.loading) {
      this.data.requesting = true
    } else {
      this.setData({ requesting: true })
    }
    getCustomerList(this.data.form).then(result => {
      if (result.data && result.data.records && result.data.records.length) {
        // var respList = result.data.records
        // let nowList = `orderList[${this.data.orderList.length}]`
        // var num = this.data.form.pageNum
        // var finished = ((num - 1) * this.data.form.pageSize + respList.length) >= result.data.total
        // this.setData({ [nowList]: respList, ['form.pageNum']: (num + 1), finished, requesting: false, loading: false })
        this.data.total = result.data.total
        this.initList(result.data.records)
      } else {
        this.setData({ finished: true, requesting: false, loading: false })
      }
    }).catch(err => {
      console.log(err)
      this.setData({ requesting: false, loading: false })
      util.showToast(err)
    }).then(() => {
      // this.refresh = this.refresh || this.selectComponent('#refresh')
      // this.refresh.setRefresh(false)
    })
  },
  initList: function(records){
    let orderList = this.data.orderList
    let i = 0
      /**
       * 1、调用外部js的方法ChineseToPinYin对数据进行分组
       * 2、分组的结果存在排序有误的情况,例如I组,V组等没有汉字的分组
       */
    records.forEach(item => {
      let bool = orderList.some(element => {
          return element.sign == pinyin.ChineseToPinYin(item.name).substr(0, 1)
      })
      if (orderList.length == 0 || !bool) {
        orderList.push({ id: i, sign: pinyin.ChineseToPinYin(item.name).substr(0, 1), data: [item] })
        i++
      } else if (bool) {
        let a = pinyin.ChineseToPinYin(item.name).substr(0, 1)
        for (let s in orderList) {
            if (a == orderList[s].sign) {
              orderList[s].data.push(item)
            }
        }
      }
    })
    /**
     * 3、对分组好的数据进行排序
     * 4、根据标志sign的ASCII码进行初次排序筛选
     * 5、如果标志sign不在A到Z之间,则添加到#分组中
    */
    orderList.forEach((item, index) => {
      if ((item.sign.charCodeAt() < 65 || item.sign.charCodeAt() > 90) && item.sign.charCodeAt() != 35) {
        orderList.splice(index, 1, "")
        // 注:此处为防止splice分割后,数组索引index发生变化,故将需要剔除的元素替换为“”,后再将其剔除
        let i = this.data.orderList.findIndex(item => {
          return item.sign == '#'
        })
        if (i != -1) {
          item.data.forEach(element => { orderList[i].data.push(element) })
        } else {
          orderList.push({ id: 99, sign: '#', data: item.data })
        }
      }
    })
    // 利用filter方法,剔除之前存在的空元素
    orderList = orderList.filter(function (item) {
      return item != '' // 注：IE9(不包含IE9)以下的版本没有trim()方法
    })
    // 利用sort方法进行排序
    orderList.sort(this.listSort('sign'))
    // 一般情况下#分组在最下面,在此做以处理
    if (orderList[0].sign == '#') {
      orderList.splice(0, 1).forEach(item => {
        orderList.push(item)
      })
    }
    this.setData({ orderList, requesting: false, loading: false, total: this.data.total })
  },
  // 排序
  listSort(sign) {
    return function (a, b) {
      var value1 = a[sign].charCodeAt()
      var value2 = b[sign].charCodeAt()
      return value1 - value2
    }
  },
  onChange: function({detail}) {
    if(util.isEmpty(detail) || (detail !== detail + '')){
      this.setData({ ['form.name']: '', searchList: [], loading: false })
    } else {
      this.setData({ ['form.name']: detail, loading: true })
      let result = []
      this.data.orderList.forEach(element => {
        element.data.forEach(item => {
          var keyword = detail.toLocaleUpperCase()
          if (item.name.indexOf(keyword) !== -1 || item.mobile.indexOf(keyword) !== -1) {
            result.push(item)
          }
        })
      })
      this.setData({ searchList: result, loading: false })
    }
  },
  customerInfo: function(e){
    var item = null
    if(util.isEmpty(this.data.form.name)){
      this.data.page = e.currentTarget.dataset.page
      this.data.index = e.currentTarget.dataset.index
      item = this.data.orderList[e.currentTarget.dataset.page].data[e.currentTarget.dataset.index]
    } else {
      this.data.index = e.currentTarget.dataset.index
      item = this.data.searchList[e.currentTarget.dataset.index]
    }
    if(this.data.type){
      const channel = this.getOpenerEventChannel()
      channel.emit('onCallback', { what: 130, detail: item })
      wx.navigateBack()
    } else {
      wx.navigateTo({ url: `/pages/home/qrcode-info/index?id=${item.id}&userId=${item.userId}` })
    }
  },
  bindCustomer: function(e){
    var item = null
    if(util.isEmpty(this.data.form.name)){
      this.data.page = e.currentTarget.dataset.page
      this.data.index = e.currentTarget.dataset.index
      item = this.data.orderList[e.currentTarget.dataset.page].data[e.currentTarget.dataset.index]
    } else {
      this.data.index = e.currentTarget.dataset.index
      item = this.data.searchList[e.currentTarget.dataset.index]
    }
    wx.navigateTo({ url: `/pages/home/registe/index?id=${item.id}` })
  },
  addCustomer: function(){
    wx.navigateTo({ url: `/pages/home/customer-info/index?` })
  },
  rpx2px: function(rpx) {
    return rpx / 750 * app.globalData.windowWidth
  },
  px2rpx: function(px) {
    return px * 750 / app.globalData.windowWidth
  },
  touchStart: function(e) {
    this.setData({ touchmove: true })
    let pageY = this.px2rpx(e.touches[0].pageY) 
    let index = Math.floor((pageY - this.data.titleHeight) / this.data.itemHeight)
    let item = this.data.orderList[index]
    if (item) {
      this.setData({ scrollViewId: item.sign == '#' ? 'E_' : item.sign, touchmoveIndex: index })
    }
  },
  touchMove: function(e) {
    let pageY = this.px2rpx(e.touches[0].pageY)
    let index = Math.floor((pageY - this.data.titleHeight) / this.data.itemHeight)
    let item = this.data.orderList[index]
    if (item) {
      this.setData({ scrollViewId: item.sign == '#' ? 'E_' : item.sign, touchmoveIndex: index })
    }
  },
  touchEnd: function() {
    this.setData({ touchmove: false, touchmoveIndex: -1 })
  },
  onUnload: function(){
    event.remove('EventMessage', this)
  }
})