xiangan/pages/user/select-community.vue

<template>
  <view class="select-community-page">
    <!-- 搜索框 -->
    <view class="search-container">
      <view class="search-box">
        <text class="search-icon">🔍</text>
        <input
          class="search-input"
          v-model="searchKeyword"
          placeholder="搜索小区名称"
          @input="onSearchInput"
        />
      </view>
    </view>

    <!-- 小区列表 -->
    <view class="community-list" :style="{paddingTop: '120rpx'}">
      <view
        class="community-item"
        v-for="(item, index) in filteredCommunityList"
        :key="index"
        @click="selectCommunity(item)"
      >
        <view class="community-info">
          <view class="community-name">{{ item.name }}</view>
        </view>
        <view class="community-arrow">›</view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-container" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 空状态 -->
    <view class="empty-container" v-if="!loading && filteredCommunityList.length === 0">
      <text class="empty-text">暂无小区数据</text>
    </view>
  </view>
</template>

<script>
import { communityListReq } from '@/api/common.js'

export default {
  data() {
    return {
      statusBarHeight: 0,
      searchKeyword: '',
      communityList: [],
      filteredCommunityList: [],
      loading: true
    }
  },
  onLoad() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    // 加载小区列表
    this.loadCommunityList()
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },

    async loadCommunityList() {
      try {
        this.loading = true
        const res = await communityListReq()

        if (res.code === 0 && res.data) {
          this.communityList = JSON.parse(JSON.stringify(res.data))
          this.filteredCommunityList = res.data
        } else {
          this.communityList = []
          this.filteredCommunityList = []
          uni.showToast({
            title: res.msg || '获取小区列表失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取小区列表失败:', error)
        this.communityList = []
        this.filteredCommunityList = []
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    onSearchInput() {
      // 搜索过滤
      if (this.searchKeyword.trim() === '') {
        this.filteredCommunityList = this.communityList
      } else {
        this.filteredCommunityList = this.communityList.filter(item =>
          item.name && item.name.includes(this.searchKeyword.trim())
        )
        console.log(this.filteredCommunityList)
      }
    },

    selectCommunity(community) {
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.emit('select', community);
      uni.navigateBack()
    }
  }
}
</script>

<style scoped lang="scss">
.select-community-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.custom-navbar {
  background: #fff;
  border-bottom: 1rpx solid #eee;

  .nav-content {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32rpx;
    position: relative;
  }

  .nav-left {
    width: 80rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .nav-back {
    font-size: 48rpx;
    color: #333;
    font-weight: 300;
  }

  .nav-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 36rpx;
    color: #333;
    font-weight: 500;
  }

  .nav-right {
    width: 80rpx;
  }
}

.search-container {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 24rpx 32rpx;
  background: #fff;
  border-bottom: 1rpx solid #eee;
}

.search-box {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 48rpx;
  padding: 0 32rpx;
  height: 80rpx;
}

.search-icon {
  font-size: 32rpx;
  color: #999;
  margin-right: 16rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.community-list {
  background: #fff;
  margin-top: 16rpx;
  min-height: calc(100vh - 200rpx);
}

.community-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background: #f8f8f8;
  }
}

.community-info {
  flex: 1;
}

.community-name {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.community-address {
  font-size: 26rpx;
  color: #999;
}

.community-arrow {
  font-size: 36rpx;
  color: #ccc;
  font-weight: 300;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 120rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>