LpRealName/pages/realName/workbench/myOrg/index.vue

<template>
  <view class="contact-page">
    <u-navbar class="u-navbar" title="我的组织" placeholder @leftClick="leftClick" leftIconColor="#fff"
              bgColor="#00337A" :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"/>
    <!-- 搜索框 -->
    <view class="search-box">
      <view class="search-input">
        <uni-icons type="search" size="16" color="#999"></uni-icons>
        <input
            type="text"
            v-model="searchText"
            placeholder="搜索"
            placeholder-class="placeholder"
        />
      </view>
      <text class="cancel-btn" @tap="onCancel">取消</text>
    </view>

    <scroll-view class="content" scroll-y="true">
    <!-- 列表区域 -->
    <view class="list-container">
      <template v-for="item in formattedList">
        <view
            :key="item.id"
            class="list-item"
            :style="{ paddingLeft: item.level * 20 + 15 + 'px' }"
            @tap="onItemClick(item)"
        >
          <view class="item-content">
            <text class="item-icon" v-if="item.type === 'team'">↳</text>
            <text class="item-name">{{item.name}}</text>
          </view>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </template>
    </view>
    </scroll-view>

    <!-- 加载中提示 -->
    <view v-if="loading" class="loading">
      <uni-icons type="spinner-cycle" size="24" color="#999"></uni-icons>
      <text>加载中...</text>
    </view>

    <!-- 错误提示 -->
    <view v-if="error" class="error">
      <text>{{error}}</text>
      <button @tap="fetchData">重试</button>
    </view>

  </view>
</template>

<script>
import config from '@/config'

export default {
  data() {
    return {
      searchText: '',
      listData: [],
      loading: false,
      error: null
    }
  },
  computed: {
    formattedList() {
      if (!this.searchText) return this.formatData(this.listData);
      return this.formatData(this.listData.filter(item =>
          item.name.toLowerCase().includes(this.searchText.toLowerCase())
      ));
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      this.error = null
      let param={
        name:this.searchText,
        proId:uni.getStorageSync('realNameUser').proId,
        teamId:uni.getStorageSync('realNameUser').teamId
      }
      console.log("param:",param)
        uni.request({
          url: config.realAppUrl+'/offLine/selectMailTree', // 替换为实际的API端点
          method: 'post',
          data: JSON.stringify(param),
          header: {
            'content-type': 'application/json',
            Authorization: uni.getStorageSync('realNameToken')
          },
          success: res => {
            res = res.data;
            if(res.code==200){
              console.log(res)
              this.listData=res.data;

            }
            this.loading = false
          },
          fail: err => {
            console.log(err)
            this.loading = false
          }
        })

    },
    onCancel() {
      this.searchText=''
    },
    onItemClick(item) {
      // 处理点击事件
      console.log('点击了:', item)

      const type = item.type
      const value = item.id

      uni.navigateTo({
        url: `/pages/realName/workbench/myOrg/addressBook?type=${encodeURIComponent(type)}&value=${encodeURIComponent(value)}`
      })
    },
    formatData(data) {
      return data.map(item => ({...item, level: this.getLevel(item.id)}))
    },
    getLevel(id) {
      let level = 0;
      let current = this.listData.find(item => item.id === id);
      while (current && current.pId !== 0) {
        level++;
        current = this.listData.find(item => item.id === current.pId);
      }
      return level;
    },
    // 返回
    leftClick() {
      console.log('返回')
      uni.navigateBack({
        delta: 1 // 返回
      });
    },
    goAdd(){
      uni.navigateTo({
        url: `/pages/realName/workbench/safeguarding/add`
      })
    },
  }
}
</script>

<style lang="scss">
.contact-page {
  min-height: 100vh;
  background-color: #f5f5f5;

  .search-box {
    padding: 10px 15px;
    background-color: #fff;
    display: flex;
    align-items: center;

    .search-input {
      flex: 1;
      height: 36px;
      background: #f5f5f5;
      border-radius: 18px;
      display: flex;
      align-items: center;
      padding: 0 12px;

      input {
        flex: 1;
        margin-left: 8px;
        font-size: 14px;
      }

      .placeholder {
        color: #999;
      }
    }

    .cancel-btn {
      padding-left: 15px;
      font-size: 14px;
      color: #007AFF;
    }
  }

  .list-container {
    background-color: #fff;

    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 15px;
      border-bottom: 1px solid #f5f5f5;

      .item-content {
        display: flex;
        align-items: center;

        .item-icon {
          width: 24px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          background: #f0f0f0;
          border-radius: 4px;
          margin-right: 10px;
          font-size: 12px;
          color: #666;
        }

        .item-name {
          font-size: 15px;
          color: #333;
        }
      }
    }
  }

  .loading, .error {
    padding: 20px;
    text-align: center;
    color: #999;

    .uni-icons {
      margin-right: 10px;
    }
  }

  .error {
    color: #ff4d4f;

    button {
      margin-top: 10px;
      padding: 5px 10px;
      background-color: #007AFF;
      color: #fff;
      border: none;
      border-radius: 4px;
    }
  }

  .content{
    width: 100%;
    height: 84vh;
    margin-top: 20rpx;
    background-color: #f8f8f8;
    padding-bottom: 40rpx;
  }
}
</style>