bjquanjiang
/
DigitalScholl

<template>
  <view id="contact" class="page">
    <!-- 顶部搜索栏 -->
    <l-banner v-model="searchText" placeholder="搜索公司名/部门名/职员姓名" type="search" noSearchButton fixed fill />

    <!-- 树形列表 -->
    <l-organize-tree v-if="ready && !searchText" @userClick="userClick" />
    <!-- 如果用户输入了搜索关键字，只列出用户 -->
    <view v-else-if="ready" class="user-item-list">
      <l-organize-single-item v-for="item of searchList" @click="userClick" :key="item.id" :item="item" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      treeRoot: {},
      searchText: '',
      ready: true
    }
  },

  onPullDownRefresh() {
    this.ready = false
    this.$nextTick(() => {
      this.ready = true
      uni.stopPullDownRefresh()
    })
  },

  methods: {
    // 处理点击用户的场合，跳转到消息页
    userClick(item) {
	  return 
      this.NAV_TO(`/pages/msg/chat?id=${item.id}&name=${item.name}`)
    }
  },

  computed: {
    // 用户输入关键字搜索时的列表
    searchList() {
      if (!this.searchText) {
        return []
      }

      return Object.entries(this.GET_GLOBAL('user'))
        .filter(([id, item]) => item.name.includes(this.searchText))
        .map(([id, item]) => ({
          ...item,
          type: 'user',
          id
        }))
    }
  }
}
</script>

<style lang="less">
page {
  padding-top: 100rpx;
}
</style>