rentease-app/pages/room-detail/room-detail.vue

<template>
  <view class="room-detail-page">
    <view class="custom-nav safe-area-top">
      <view class="nav-content">
        <view class="nav-btn" @click="goBack">
          <uni-icons type="left" size="22" color="#1E293B"></uni-icons>
        </view>
        <text class="nav-title">房间详情</text>
        <view class="nav-btn" @click="editRoom">
          <uni-icons type="compose" size="22" color="#2563EB"></uni-icons>
        </view>
      </view>
    </view>

    <scroll-view scroll-y class="detail-content" v-if="room.id">
      <view class="room-header">
        <text class="room-number">{{room.roomNumber}}</text>
        <view class="room-status" :class="room.status">{{room.statusText}}</view>
      </view>

      <view class="info-section">
        <view class="section-title">基本信息</view>
        <view class="info-card">
          <view class="info-item">
            <text class="label">所属公寓</text>
            <text class="value">{{room.apartmentName}}</text>
          </view>
          <view class="info-divider"></view>
          <view class="info-item">
            <text class="label">房间号</text>
            <text class="value">{{room.roomNumber}}</text>
          </view>
          <view class="info-divider"></view>
          <view class="info-item">
            <text class="label">楼层</text>
            <text class="value">{{room.floor || '--'}}</text>
          </view>
          <view class="info-divider"></view>
          <view class="info-item">
            <text class="label">户型</text>
            <text class="value">{{room.roomType || '--'}}</text>
          </view>
          <view class="info-divider"></view>
          <view class="info-item">
            <text class="label">面积</text>
            <text class="value">{{room.area || '--'}} m²</text>
          </view>
          <view class="info-divider"></view>
          <view class="info-item">
            <text class="label">月租金</text>
            <text class="value price">¥{{room.monthlyPrice || 0}}</text>
          </view>
          <view class="info-divider"></view>
          <view class="info-item">
            <text class="label">年租金</text>
            <text class="value price">¥{{room.yearlyPrice || 0}}</text>
          </view>
          <view class="info-divider"></view>
          <view class="info-item">
            <text class="label">押金</text>
            <text class="value price">¥{{room.deposit || 0}}</text>
          </view>
          <view class="info-divider"></view>
          <view class="info-item">
            <text class="label">主状态</text>
            <text class="value">{{room.statusText}}</text>
          </view>
          <view class="info-divider" v-if="room.status === 'rented' && room.rentalStatusText"></view>
          <view class="info-item" v-if="room.status === 'rented' && room.rentalStatusText">
            <text class="label">租房标识</text>
            <text class="value">{{room.rentalStatusText}}</text>
          </view>
        </view>
      </view>

      <view class="info-section" v-if="room.status === 'rented' && room.rental">
        <view class="section-title">当前租赁</view>
        <view class="rental-card" @click="viewRentalDetail">
          <view class="rental-header">
            <text class="renter-name">{{room.rental.renterName}}</text>
            <view class="rental-status" :class="room.rental.status">{{room.rental.statusText}}</view>
          </view>
          <view class="rental-period">{{room.rental.startDate}} ~ {{room.rental.endDate}}</view>
          <view class="rental-price">¥{{room.rental.rent}}/月</view>
        </view>
      </view>

      <view class="action-section">
        <!-- 空房状态：显示预定和办理入住按钮 -->
        <template v-if="room.status === 'empty'">
          <view class="action-btn warning" @click="reserveRoom">
            <uni-icons type="compose" size="20" color="#FFFFFF"></uni-icons>
            <text>预定</text>
          </view>
          <view class="action-btn primary" @click="addRental">
            <uni-icons type="plus" size="20" color="#FFFFFF"></uni-icons>
            <text>办理入住</text>
          </view>
        </template>
        <!-- 预定状态：显示取消预定和办理入住按钮 -->
        <template v-if="room.status === 'reserved'">
          <view class="action-btn warning" @click="cancelReserve">
            <uni-icons type="close" size="20" color="#FFFFFF"></uni-icons>
            <text>取消预定</text>
          </view>
          <view class="action-btn primary" @click="addRental">
            <uni-icons type="plus" size="20" color="#FFFFFF"></uni-icons>
            <text>办理入住</text>
          </view>
        </template>
        <!-- 已租状态：查看租赁 -->
        <view class="action-btn primary" v-if="room.status === 'rented'" @click="viewRentalDetail">
          <uni-icons type="eye" size="20" color="#FFFFFF"></uni-icons>
          <text>查看租赁</text>
        </view>
        <!-- 删除房间按钮 -->
        <view class="action-btn danger" @click="deleteRoom">
          <uni-icons type="trash" size="20" color="#FFFFFF"></uni-icons>
          <text>删除房间</text>
        </view>
      </view>

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

    <view class="loading-state" v-else-if="isLoading">
      <uni-load-more status="loading"></uni-load-more>
    </view>

    <view class="empty-state" v-else>
      <uni-icons type="home-filled" size="80" color="#CBD5E1"></uni-icons>
      <text class="empty-text">房间不存在</text>
      <button class="back-btn" @click="goBack">返回</button>
    </view>
  </view>
</template>

<script>
  import roomApi from '@/api/room.js'
  
  export default {
    data() {
      return {
        roomId: null,
        isLoading: false,
        room: {}
      }
    },
    onLoad(options) {
      if (options.id) {
        this.roomId = options.id
        this.loadRoomDetail(options.id)
      }
    },
    methods: {
      async loadRoomDetail(id) {
        this.isLoading = true
        try {
          const res = await roomApi.getDetail(id)
          if (res.data) {
            const data = res.data
            this.room = {
              id: data.id,
              roomNumber: data.roomNumber,
              floor: data.floor,
              roomType: data.roomType,
              area: data.area,
              monthlyPrice: data.monthlyPrice,
              yearlyPrice: data.yearlyPrice,
              deposit: data.deposit,
              status: data.status || 'vacant',
              statusText: this.getRoomStatusText(data.status),
              rentalStatus: data.rentalStatus,
              rentalStatusText: this.getRentalStatusText(data.rentalStatus),
              apartmentName: data.Apartment && data.Apartment.name || '--',
              rental: data.Rental ? {
                id: data.Rental.id,
                renterName: data.Rental.Renter && data.Rental.Renter.name,
                startDate: data.Rental.startDate,
                endDate: data.Rental.endDate,
                rent: data.Rental.rent,
                status: data.Rental.status,
                statusText: this.getRentalStatusText(data.Rental.status)
              } : null
            }
          }
        } catch (error) {
          console.error('加载房间详情失败:', error)
          uni.showToast({ title: '加载失败', icon: 'none' })
        } finally {
          this.isLoading = false
        }
      },
      editRoom() {
        uni.navigateTo({ url: `/pages/room-add/room-add?id=${this.roomId}&mode=edit` })
      },
      addRental() {
        uni.navigateTo({ url: `/pages/rental-add/rental-add?roomId=${this.roomId}` })
      },
      // 预定房间
      async reserveRoom() {
        uni.showModal({
          title: '确认预定',
          content: '确定要预定这个房间吗？',
          confirmColor: '#2563EB',
          success: async (res) => {
            if (res.confirm) {
              try {
                await roomApi.update(this.roomId, { status: 'reserved' })
                uni.showToast({ title: '预定成功', icon: 'success' })
                this.loadRoomDetail(this.roomId)
              } catch (error) {
                uni.showToast({ title: '预定失败', icon: 'none' })
                console.error(error)
              }
            }
          }
        })
      },
      // 取消预定
      async cancelReserve() {
        uni.showModal({
          title: '确认取消',
          content: '确定要取消预定吗？',
          confirmColor: '#EF4444',
          success: async (res) => {
            if (res.confirm) {
              try {
                await roomApi.update(this.roomId, { status: 'empty' })
                uni.showToast({ title: '取消预定成功', icon: 'success' })
                this.loadRoomDetail(this.roomId)
              } catch (error) {
                uni.showToast({ title: '取消预定失败', icon: 'none' })
                console.error(error)
              }
            }
          }
        })
      },
      viewRentalDetail() {
        if (this.room.rental) {
          uni.navigateTo({ url: `/pages/rental-detail/rental-detail?id=${this.room.rental.id}` })
        }
      },
      deleteRoom() {
        uni.showModal({
          title: '确认删除',
          content: `确定要删除房间"${this.room.roomNumber}"吗？`,
          confirmColor: '#EF4444',
          success: async (res) => {
            if (res.confirm) {
              try {
                await roomApi.delete(this.roomId)
                uni.showToast({ title: '删除成功', icon: 'success' })
                setTimeout(() => uni.navigateBack(), 1500)
              } catch (error) {
                uni.showToast({ title: '删除失败', icon: 'none' })
              }
            }
          }
        })
      },
      goBack() {
        uni.navigateBack()
      },
      getRoomStatusText(status) {
        const map = { empty: '空房', reserved: '预定', rented: '在租' }
        return map[status] || status
      },
      getRentalStatusText(status) {
        const map = { normal: '正常', soon_expire: '即将到期', expired: '已到期' }
        return map[status] || status
      }
    }
  }
</script>

<style scoped>
  .room-detail-page {
    min-height: 100vh;
    background: #F8FAFC;
    display: flex;
    flex-direction: column;
  }
  .custom-nav {
    background: #FFFFFF;
    border-bottom: 2rpx solid #F1F5F9;
  }
  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 32rpx;
  }
  .nav-btn {
    width: 72rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  .nav-title {
    font-size: 34rpx;
    font-weight: 600;
    color: #1E293B;
  }
  .detail-content {
    flex: 1;
    padding: 24rpx 32rpx;
  }
  .room-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 32rpx;
    margin-bottom: 24rpx;
  }
  .room-number {
    font-size: 48rpx;
    font-weight: 700;
    color: #1E293B;
  }
  .room-status {
    padding: 8rpx 20rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    font-weight: 500;
  }
  .room-status.vacant {
    background: #D1FAE5;
    color: #059669;
  }
  .room-status.rented {
    background: #DBEAFE;
    color: #2563EB;
  }
  .info-section {
    margin-bottom: 24rpx;
  }
  .section-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 16rpx;
  }
  .info-card {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 0 24rpx;
  }
  .info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 0;
  }
  .label {
    font-size: 28rpx;
    color: #64748B;
  }
  .value {
    font-size: 28rpx;
    color: #1E293B;
    font-weight: 500;
  }
  .value.price {
    color: #EF4444;
    font-weight: 700;
  }
  .info-divider {
    height: 2rpx;
    background: #F1F5F9;
  }
  .rental-card {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 24rpx;
  }
  .rental-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12rpx;
  }
  .renter-name {
    font-size: 30rpx;
    font-weight: 600;
    color: #1E293B;
  }
  .rental-status {
    padding: 4rpx 12rpx;
    border-radius: 6rpx;
    font-size: 20rpx;
  }
  .rental-status.active {
    background: #D1FAE5;
    color: #059669;
  }
  .rental-period {
    font-size: 24rpx;
    color: #64748B;
    margin-bottom: 8rpx;
  }
  .rental-price {
    font-size: 28rpx;
    color: #EF4444;
    font-weight: 600;
  }
  .action-section {
    display: flex;
    gap: 24rpx;
    margin-top: 32rpx;
  }
  .action-btn {
    flex: 1;
    height: 88rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
  }
  .action-btn.primary {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    box-shadow: 0 8rpx 24rpx rgba(37, 99, 235, 0.3);
  }
  .action-btn.warning {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 8rpx 24rpx rgba(245, 158, 11, 0.3);
  }
  .action-btn.danger {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    box-shadow: 0 8rpx 24rpx rgba(239, 68, 68, 0.3);
  }
  .action-btn text {
    font-size: 30rpx;
    font-weight: 600;
    color: #FFFFFF;
  }
  .loading-state, .empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120rpx;
  }
  .empty-text {
    font-size: 30rpx;
    color: #64748B;
    margin: 24rpx 0 40rpx;
  }
  .back-btn {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF;
    font-size: 30rpx;
    font-weight: 600;
    padding: 24rpx 80rpx;
    border-radius: 16rpx;
    border: none;
  }
</style>