xiangan/pages/user/select-room.vue

<template>
  <view class="select-room-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="room-list" :style="{paddingTop: '120rpx'}">
      <view 
        class="room-item" 
        v-for="(item, index) in filteredRoomList" 
        :key="index"
        @click="selectRoom(item)"
      >
        <view class="room-info">
          <view class="room-name">{{ item.title }}</view>
        </view>
        <view class="room-arrow">›</view>
      </view>
    </view>

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

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

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

export default {
  data() {
    return {
      statusBarHeight: 0,
      searchKeyword: '',
      roomList: [],
      filteredRoomList: [],
      loading: true,
      villageCode: '' // 小区代码，用于查询房屋列表
    }
  },
  onLoad(options) {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    
    // 获取传入的小区代码
    if (options.villageCode) {
      this.villageCode = options.villageCode
    }
    
    // 加载房屋列表
    this.loadRoomList()
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    
    async loadRoomList() {
      try {
        this.loading = true
        
        // 构建查询参数
        const params = {}
        if (this.villageCode) {
          params.baseVillageVillageCode = this.villageCode
        }
        
        const res = await roomListReq(params)
        console.log('房屋列表数据:', res)
        
        if (res.code === 0 && res.data) {
          const list = res.data.filter(item => item.owner === null).map(item => {
            if (item.building) item.title = item.building
            if (item.unit) item.title += item.unit
            item.title += item.roomNumber
            return item
          })
          this.roomList = JSON.parse(JSON.stringify(list))
          this.filteredRoomList = list
        } else {
          this.roomList = []
          this.filteredRoomList = []
          uni.showToast({
            title: res.msg || '获取房屋列表失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取房屋列表失败:', error)
        this.roomList = []
        this.filteredRoomList = []
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    onSearchInput() {
      // 搜索过滤
      if (this.searchKeyword.trim() === '') {
        this.filteredRoomList = this.roomList
      } else {
        const keyword = this.searchKeyword.trim()
        this.filteredRoomList = this.roomList.filter(item => {
          return item.title.includes(keyword)
        })
      }
    },
    
    selectRoom(room) {
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.emit('select', room);
      uni.navigateBack()
    }
  }
}
</script>

<style scoped lang="scss">
.select-room-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;
}

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

.room-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;
  }
}

.room-info {
  flex: 1;
}

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

.room-detail {
  font-size: 26rpx;
  color: #999;
}

.room-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>