rentease-app/pages/properties/properties.vue

<template>
  <view class="properties-page">
    <!-- 自定义导航栏 -->
    <view class="custom-nav safe-area-top">
      <view class="nav-content">
        <text class="nav-title">房态图</text>
        <view class="nav-actions">
          <view class="nav-btn primary" @click="addProperty">
            <uni-icons type="plus" size="22" color="#FFFFFF"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 公寓选择器 -->
    <view class="apartment-section-header" v-if="apartments.length > 0">
      <scroll-view scroll-x class="apartment-tabs" show-scrollbar="false">
        <view 
          v-for="(apt, index) in apartments" 
          :key="index"
          class="tab-item"
          :class="{ active: selectedApartmentId === apt.id }"
          @click="selectApartment(apt.id)"
        >
          <text class="tab-name">{{apt.name}}</text>
          <text class="tab-count">{{apt.roomCount}}间</text>
        </view>
      </scroll-view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input-wrapper">
        <uni-icons type="search" size="18" color="#909399"></uni-icons>
        <input 
          class="search-input" 
          type="text" 
          v-model="searchKeyword" 
          placeholder="搜索房间号" 
          confirm-type="search"
          @confirm="onSearch"
        />
        <uni-icons v-if="searchKeyword" type="clear" size="16" color="#909399" @click="clearSearch"></uni-icons>
      </view>
    </view>

    <!-- 状态图例 -->
    <view class="status-legend">
      <view class="legend-scroll">
        <view 
          v-for="(filter, index) in statusFilters" 
          :key="index"
          class="legend-item"
          :class="{ active: currentFilter === filter.value }"
          @click="setFilter(filter.value)"
        >
          <view class="legend-dot" :style="{ background: filter.color }"></view>
          <text class="legend-text">{{filter.label}}</text>
          <text class="legend-count">{{getStatusCount(filter.value)}}</text>
        </view>
      </view>
    </view>

    <!-- 房间列表 -->
    <scroll-view
      scroll-y
      class="room-list"
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 空状态 -->
      <view v-if="filteredRooms.length === 0 && !isLoading" class="empty-state">
        <view class="empty-icon">
          <uni-icons type="home-filled" size="80" color="#CBD5E1"></uni-icons>
        </view>
        <text class="empty-title">暂无房间</text>
        <text class="empty-desc">点击右上角添加房间</text>
        <button class="empty-btn" @click="addRoom">添加房间</button>
      </view>

      <!-- 房间卡片网格 -->
      <view v-else class="room-grid">
        <view
          v-for="(room, index) in filteredRooms"
          :key="index"
          class="room-card"
          :class="getRoomStatusClass(room)"
          @click="handleRoomClick(room)"
        >
          <text class="room-number">{{room.roomNumber}}</text>
          <view class="room-info">
            <text class="room-price" v-if="room.monthlyPrice">¥{{room.monthlyPrice}}/月</text>
            <text class="room-tenant" v-if="room.renterName">{{room.renterName}}</text>
            <text class="room-date" v-if="room.endDate">{{formatDate(room.endDate)}}到期</text>
          </view>
          <view class="room-status-tag">{{getRoomStatusText(room)}}</view>
        </view>
      </view>

      <uni-load-more v-if="filteredRooms.length > 0" :status="loadStatus"></uni-load-more>

      <!-- 底部统计栏 -->
      <view class="bottom-stats">
        <view class="stats-content">
          <view class="stat-item">
            <text class="stat-value">{{currentApartmentStats.total}}</text>
            <text class="stat-label">总房间</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item">
            <text class="stat-value" style="color: #67C23A;">{{currentApartmentStats.rented}}</text>
            <text class="stat-label">在租</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item">
            <text class="stat-value" style="color: #909399;">{{currentApartmentStats.empty}}</text>
            <text class="stat-label">空房</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item highlight">
            <text class="stat-value" style="color: #409EFF;">{{currentApartmentStats.occupancyRate}}%</text>
            <text class="stat-label">出租率</text>
          </view>
        </view>
      </view>

      <view class="safe-area-bottom" style="height: 120rpx;"></view>
    </scroll-view>
  </view>
</template>

<script>
  import apartmentApi from '@/api/apartment.js'
  import roomApi from '@/api/room.js'
  import statisticsApi from '@/api/statistics.js'

  export default {
    data() {
      return {
        isLoading: false,
        isRefreshing: false,
        apartments: [],
        selectedApartmentId: null,
        rooms: [],
        apartmentStats: {}, // 公寓统计数据
        currentFilter: 'all',
        loadStatus: 'more',
        page: 1,
        pageSize: 20,
        searchKeyword: '',
        statusFilters: [
          { label: '全部', value: 'all', color: '#409EFF' },
          { label: '空置', value: 'empty', color: '#67C23A' },
          { label: '已租', value: 'rented', color: '#409EFF' },
          { label: '即将到期', value: 'soon_expire', color: '#E6A23C' },
          { label: '已到期', value: 'expired', color: '#F56C6C' },
          { label: '预定', value: 'reserved', color: '#909399' }
        ]
      }
    },
    computed: {
      filteredRooms() {
        let list = this.rooms
        // 按状态筛选
        if (this.currentFilter !== 'all') {
          list = list.filter(room => room.status === this.currentFilter)
        }
        // 按关键词搜索
        if (this.searchKeyword.trim()) {
          const keyword = this.searchKeyword.trim().toLowerCase()
          list = list.filter(room => room.roomNumber.toLowerCase().includes(keyword))
        }
        return list
      },
      currentApartmentStats() {
        const total = this.rooms.length
        const rented = this.rooms.filter(r => r.status === 'rented').length
        const empty = this.rooms.filter(r => r.status === 'empty').length
        const soonExpire = this.rooms.filter(r => r.status === 'soon_expire').length
        return {
          total,
          rented,
          empty,
          soonExpire,
          occupancyRate: total > 0 ? Math.round((rented / total) * 100) : 0
        }
      }
    },
    onLoad(options) {
      this.loadApartments()
    },
    onShow() {
      if (this.selectedApartmentId) {
        this.loadRooms()
      }
    },
    methods: {
      async loadApartments() {
        try {
          // 使用统计接口获取公寓列表及统计数据
          const res = await statisticsApi.getApartmentRoomStatusStats()
          if (res.data) {
            this.apartments = res.data.map(apt => ({
              id: apt.apartmentId,
              name: apt.apartment,
              roomCount: apt.total || 0
            }))
            // 保存统计数据
            this.apartmentStats = {}
            res.data.forEach(apt => {
              this.apartmentStats[apt.apartmentId] = {
                total: apt.total || 0,
                empty: apt.empty || 0,
                rented: apt.rented || 0,
                soonExpire: apt.soon_expire || 0,
                expired: apt.expired || 0,
                reserved: apt.reserved || 0
              }
            })
            if (this.apartments.length > 0 && !this.selectedApartmentId) {
              this.selectedApartmentId = this.apartments[0].id
              this.loadRooms()
            }
          }
        } catch (error) {
          console.error('加载公寓列表失败:', error)
        }
      },
      
      async loadRooms() {
        if (!this.selectedApartmentId) return
        this.isLoading = true
        try {
          const res = await roomApi.list({
            apartmentId: this.selectedApartmentId
          })
          if (res.data) {
            const list = res.data.map(room => ({
              id: room.id,
              roomNumber: room.roomNumber,
              area: room.area,
              monthlyPrice: room.rent || room.monthlyPrice,
              status: this.getRoomStatus(room),
              rentalStatus: room.rentalStatus,
              renterName: room.Renter?.name,
              renterPhone: room.Renter?.phone,
              rentalId: room.Rental?.id,
              endDate: room.Rental?.endDate
            }))
            if (this.page === 1) {
              this.rooms = list
            } else {
              this.rooms = [...this.rooms, ...list]
            }
            this.loadStatus = this.rooms.length < (res.total || 0) ? 'more' : 'noMore'
          }
        } catch (error) {
          console.error('加载房间列表失败:', error)
        } finally {
          this.isLoading = false
          this.isRefreshing = false
        }
      },
      
      getRoomStatus(room) {
        // 与Web端Status.vue保持一致，直接使用room.status
        return room.status || 'empty'
      },

      getRoomStatusClass(room) {
        // 根据status和rentalStatus确定样式类，与Web端保持一致
        if (room.status === 'empty') return 'status-empty'
        if (room.status === 'rented') {
          if (room.rentalStatus === 'expired') return 'status-expired'
          if (room.rentalStatus === 'soon_expire') return 'status-soon-expire'
          return 'status-rented'
        }
        if (room.status === 'reserved') return 'status-reserved'
        return ''
      },
      
      formatDate(date) {
        if (!date) return '-'
        const d = new Date(date)
        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
      },
      
      selectApartment(id) {
        this.selectedApartmentId = id
        this.page = 1
        this.loadRooms()
      },
      
      setFilter(value) {
        this.currentFilter = value
      },
      
      getStatusCount(status) {
        // 使用接口返回的统计数据
        const stats = this.apartmentStats[this.selectedApartmentId]
        if (!stats) return 0
        if (status === 'all') return stats.total
        const keyMap = {
          'empty': 'empty',
          'rented': 'rented',
          'soon_expire': 'soonExpire',
          'expired': 'expired',
          'reserved': 'reserved'
        }
        return stats[keyMap[status]] || 0
      },
      
      getStatusColor(status) {
        const colors = {
          empty: '#67C23A',
          rented: '#409EFF',
          soon_expire: '#E6A23C',
          expired: '#F56C6C',
          reserved: '#909399'
        }
        return colors[status] || '#909399'
      },
      
      getStatusText(status) {
        // 保持与Web端一致的文本映射
        const texts = {
          empty: '空置',
          rented: '已租',
          soon_expire: '即将到期',
          expired: '已到期',
          reserved: '预定'
        }
        return texts[status] || status
      },

      getRoomStatusText(room) {
        // 与Web端Status.vue#getRoomStatusText保持一致
        if (room.status === 'empty') return '空置'
        if (room.status === 'rented') {
          if (room.rentalStatus === 'expired') return '已到期'
          if (room.rentalStatus === 'soon_expire') return '即将到期'
          return '已租'
        }
        if (room.status === 'reserved') return '预定'
        return room.status
      },
      
      handleRoomClick(room) {
        uni.navigateTo({
          url: `/pages/room-detail/room-detail?id=${room.id}`
        })
      },
      
      rentRoom(room) {
        uni.navigateTo({
          url: `/pages/rental-add/rental-add?roomId=${room.id}`
        })
      },
      
      reserveRoom(room) {
        uni.showModal({
          title: '预订房间',
          content: `确定要预订房间 ${room.roomNumber} 吗？`,
          success: (res) => {
            if (res.confirm) {
              uni.showToast({ title: '预订功能开发中', icon: 'none' })
            }
          }
        })
      },
      
      confirmRent(room) {
        uni.navigateTo({
          url: `/pages/rental-add/rental-add?roomId=${room.id}`
        })
      },
      
      createBill(room) {
        uni.navigateTo({
          url: `/pages/bill-add/bill-add?roomId=${room.id}&renterId=${room.renterId}`
        })
      },
      
      addProperty() {
        // 直接跳转到添加房间页面
        this.addRoom()
      },
      
      addRoom() {
        if (!this.selectedApartmentId) {
          uni.showToast({ title: '请先选择公寓', icon: 'none' })
          return
        }
        uni.navigateTo({
          url: `/pages/room-add/room-add?apartmentId=${this.selectedApartmentId}`
        })
      },
      
      onRefresh() {
        this.isRefreshing = true
        this.page = 1
        this.loadRooms()
      },
      
      loadMore() {
        if (this.loadStatus === 'noMore') return
        this.loadStatus = 'loading'
        this.page++
        this.loadRooms()
      },
      
      showFilter() {
        uni.showToast({ title: '筛选功能', icon: 'none' })
      },

      onSearch() {
        // 搜索时不需要重新加载数据，computed 会自动过滤
        uni.showToast({ title: `搜索: ${this.searchKeyword}`, icon: 'none', duration: 1000 })
      },

      clearSearch() {
        this.searchKeyword = ''
      }
    }
  }
</script>

<style scoped>
  .properties-page {
    min-height: 100vh;
    background: #F5F7FA;
    display: flex;
    flex-direction: column;
  }

  /* 导航栏 */
  .custom-nav {
    background: #FFFFFF;
    border-bottom: 1rpx solid #EBEEF5;
  }

  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 32rpx;
  }

  .nav-title {
    font-size: 36rpx;
    font-weight: 700;
    color: #303133;
  }

  .nav-actions {
    display: flex;
    gap: 16rpx;
  }

  .nav-btn {
    width: 72rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #F5F7FA;
    transition: all 0.2s;
  }

  .nav-btn:active {
    transform: scale(0.95);
    background: #EBEEF5;
  }

  .nav-btn.primary {
    background: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%);
    box-shadow: 0 4rpx 16rpx rgba(64, 158, 255, 0.3);
  }

  /* 统计概览卡片 */
  .statistics-overview {
    padding: 24rpx 32rpx;
    background: #FFFFFF;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16rpx;
  }

  .stat-card {
    border-radius: 16rpx;
    padding: 20rpx 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 100%);
  }

  .stat-card.total {
    background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
  }

  .stat-card.empty {
    background: linear-gradient(135deg, #11998E 0%, #38EF7D 100%);
    box-shadow: 0 4rpx 16rpx rgba(17, 153, 142, 0.3);
  }

  .stat-card.rented {
    background: linear-gradient(135deg, #4FACFE 0%, #00F2FE 100%);
    box-shadow: 0 4rpx 16rpx rgba(79, 172, 254, 0.3);
  }

  .stat-card.soon-expire {
    background: linear-gradient(135deg, #FA709A 0%, #FEE140 100%);
    box-shadow: 0 4rpx 16rpx rgba(250, 112, 154, 0.3);
  }

  .stat-icon {
    margin-bottom: 8rpx;
    opacity: 0.9;
  }

  .stat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .stat-number {
    font-size: 36rpx;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
  }

  .stat-label {
    font-size: 22rpx;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 4rpx;
  }

  /* 搜索栏 */
  .search-bar {
    background: #FFFFFF;
    padding: 20rpx 32rpx;
    border-bottom: 1rpx solid #EBEEF5;
  }

  .search-input-wrapper {
    display: flex;
    align-items: center;
    background: #F5F7FA;
    border-radius: 32rpx;
    padding: 16rpx 24rpx;
    gap: 16rpx;
  }

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

  .search-input::placeholder {
    color: #909399;
  }

  /* 公寓选择器 */
  .apartment-section-header {
    background: #FFFFFF;
    border-bottom: 1rpx solid #EBEEF5;
    padding: 16rpx 0;
  }

  .apartment-tabs {
    white-space: nowrap;
    padding: 0 32rpx;
  }

  .tab-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 16rpx 32rpx;
    margin-right: 16rpx;
    border-radius: 12rpx;
    background: #F5F7FA;
    border: 2rpx solid transparent;
    transition: all 0.2s;
  }

  .tab-item.active {
    background: #ECF5FF;
    border-color: #409EFF;
  }

  .tab-name {
    font-size: 28rpx;
    font-weight: 600;
    color: #303133;
  }

  .tab-count {
    font-size: 22rpx;
    color: #909399;
    margin-top: 4rpx;
  }

  /* 状态图例 */
  .status-legend {
    background: #FFFFFF;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #EBEEF5;
  }

  .legend-scroll {
    display: flex;
    padding: 0 32rpx;
    gap: 16rpx;
    flex-wrap: wrap;
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 12rpx 20rpx;
    background: #F5F7FA;
    border-radius: 24rpx;
    border: 2rpx solid transparent;
    transition: all 0.2s;
  }

  .legend-item.active {
    background: #ECF5FF;
    border-color: #409EFF;
  }

  .legend-dot {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
  }

  .legend-text {
    font-size: 24rpx;
    color: #606266;
  }

  .legend-count {
    font-size: 22rpx;
    color: #909399;
    background: #FFFFFF;
    padding: 2rpx 10rpx;
    border-radius: 10rpx;
    margin-left: 4rpx;
  }

  /* 房间列表 */
  .room-list {
    flex: 1;
    padding: 24rpx 32rpx;
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120rpx 60rpx;
  }

  .empty-icon {
    margin-bottom: 32rpx;
  }

  .empty-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #303133;
    margin-bottom: 12rpx;
  }

  .empty-desc {
    font-size: 26rpx;
    color: #909399;
    margin-bottom: 40rpx;
  }

  .empty-btn {
    background: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%);
    color: #FFFFFF;
    font-size: 28rpx;
    font-weight: 500;
    padding: 16rpx 40rpx;
    border-radius: 12rpx;
    border: none;
    box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3);
    line-height: 1.5;
  }

  /* 房间卡片网格 */
  .room-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
  }

  .room-card {
    background: #FFFFFF;
    border: 2rpx solid #EBEEF5;
    border-radius: 16rpx;
    padding: 24rpx;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    min-height: 160rpx;
  }

  .room-card:active {
    transform: scale(0.98);
  }

  /* 状态样式 */
  .room-card.status-empty {
    border-color: #67C23A;
    background: #F0F9FF;
  }

  .room-card.status-rented {
    border-color: #409EFF;
    background: #ECF5FF;
  }

  .room-card.status-soon-expire {
    border-color: #E6A23C;
    background: #FDF6EC;
  }

  .room-card.status-expired {
    border-color: #F56C6C;
    background: #FEF0F0;
  }

  .room-card.status-reserved {
    border-color: #909399;
    background: #F4F4F5;
  }

  .room-number {
    font-size: 32rpx;
    font-weight: 700;
    color: #303133;
    margin-bottom: 12rpx;
    display: block;
  }

  .room-info {
    font-size: 24rpx;
    color: #606266;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 4rpx;
  }

  .room-price {
    color: #F56C6C;
    font-weight: 600;
  }

  .room-tenant {
    color: #409EFF;
  }

  .room-date {
    color: #909399;
  }

  .room-status-tag {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    font-size: 20rpx;
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
    background: rgba(255, 255, 255, 0.9);
    color: #606266;
    font-weight: 500;
  }

  /* 底部统计栏 */
  .bottom-stats {
    background: #FFFFFF;
    border-top: 1rpx solid #EBEEF5;
    border-radius: 16rpx;
    margin: 24rpx 0;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  }

  .stats-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20rpx 32rpx;
  }

  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
  }

  .stat-item.highlight {
    background: linear-gradient(135deg, #ECF5FF 0%, #F5F7FA 100%);
    border-radius: 12rpx;
    padding: 12rpx 0;
    margin: -12rpx 0;
  }

  .stat-divider {
    width: 2rpx;
    height: 40rpx;
    background: #EBEEF5;
  }

  .bottom-stats .stat-value {
    font-size: 32rpx;
    font-weight: 700;
    color: #303133;
    margin-bottom: 4rpx;
  }

  .bottom-stats .stat-label {
    font-size: 22rpx;
    color: #909399;
  }
</style>