418 lines
9.8 KiB
Vue
418 lines
9.8 KiB
Vue
<template>
|
|
<view class="apartment-detail-page">
|
|
<!-- 自定义导航栏 -->
|
|
<view class="custom-nav safe-area-top">
|
|
<view class="nav-content">
|
|
<view class="nav-back" @click="goBack">
|
|
<uni-icons type="left" size="20" color="#1E293B"></uni-icons>
|
|
</view>
|
|
<text class="nav-title">公寓详情</text>
|
|
<view class="nav-actions">
|
|
<view class="nav-btn" @click="editApartment">
|
|
<uni-icons type="compose" size="20" color="#2563EB"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view scroll-y class="page-content" v-if="apartment">
|
|
<!-- 公寓信息卡片 -->
|
|
<view class="info-card">
|
|
<view class="apartment-header">
|
|
<text class="apartment-name">{{apartment.name}}</text>
|
|
<view class="apartment-status" :class="apartment.status">
|
|
<text>{{getStatusText(apartment.status)}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="apartment-address" v-if="apartment.address">
|
|
<uni-icons type="location" size="16" color="#64748B"></uni-icons>
|
|
<text>{{apartment.address}}</text>
|
|
</view>
|
|
<view class="apartment-contact" v-if="apartment.manager || apartment.phone">
|
|
<view class="contact-item" v-if="apartment.manager">
|
|
<uni-icons type="person" size="16" color="#64748B"></uni-icons>
|
|
<text>负责人: {{apartment.manager}}</text>
|
|
</view>
|
|
<view class="contact-item" v-if="apartment.phone">
|
|
<uni-icons type="phone" size="16" color="#64748B"></uni-icons>
|
|
<text>{{apartment.phone}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 统计概览 -->
|
|
<view class="stats-section">
|
|
<view class="section-title">房间统计</view>
|
|
<view class="stats-grid">
|
|
<view class="stat-card">
|
|
<text class="stat-num">{{stats.total}}</text>
|
|
<text class="stat-label">总房间</text>
|
|
</view>
|
|
<view class="stat-card">
|
|
<text class="stat-num empty">{{stats.empty}}</text>
|
|
<text class="stat-label">空房</text>
|
|
</view>
|
|
<view class="stat-card">
|
|
<text class="stat-num rented">{{stats.rented}}</text>
|
|
<text class="stat-label">在租</text>
|
|
</view>
|
|
<view class="stat-card">
|
|
<text class="stat-num reserved">{{stats.reserved}}</text>
|
|
<text class="stat-label">已预订</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 快捷操作 -->
|
|
<view class="quick-actions">
|
|
<view class="section-title">快捷操作</view>
|
|
<view class="action-grid">
|
|
<view class="action-item" @click="viewRooms">
|
|
<view class="action-icon rooms">
|
|
<uni-icons type="home-filled" size="28" color="#FFFFFF"></uni-icons>
|
|
</view>
|
|
<text class="action-text">查看房源</text>
|
|
</view>
|
|
<view class="action-item" @click="addRoom">
|
|
<view class="action-icon add">
|
|
<uni-icons type="plus-filled" size="28" color="#FFFFFF"></uni-icons>
|
|
</view>
|
|
<text class="action-text">添加房间</text>
|
|
</view>
|
|
<view class="action-item" @click="viewStats">
|
|
<view class="action-icon stats">
|
|
<uni-icons type="chart-filled" size="28" color="#FFFFFF"></uni-icons>
|
|
</view>
|
|
<text class="action-text">收益统计</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 备注信息 -->
|
|
<view class="remark-section" v-if="apartment.remark">
|
|
<view class="section-title">备注信息</view>
|
|
<view class="remark-card">
|
|
<text class="remark-text">{{apartment.remark}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="safe-area-bottom" style="height: 40rpx;"></view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { apartmentApi, roomApi } from '../../api/index.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
apartmentId: null,
|
|
apartment: null,
|
|
stats: {
|
|
total: 0,
|
|
empty: 0,
|
|
rented: 0,
|
|
reserved: 0
|
|
}
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.id) {
|
|
this.apartmentId = options.id
|
|
this.loadData()
|
|
}
|
|
},
|
|
onShow() {
|
|
if (this.apartmentId) {
|
|
this.loadData()
|
|
}
|
|
},
|
|
methods: {
|
|
async loadData() {
|
|
try {
|
|
uni.showLoading({ title: '加载中...' })
|
|
|
|
// 加载公寓详情
|
|
const aptRes = await apartmentApi.getDetail(this.apartmentId)
|
|
this.apartment = aptRes.data || {}
|
|
|
|
// 加载房间统计
|
|
const roomRes = await roomApi.list({ apartmentId: this.apartmentId })
|
|
const rooms = roomRes.data || []
|
|
|
|
this.stats = {
|
|
total: rooms.length,
|
|
empty: rooms.filter(r => r.status === 'empty').length,
|
|
rented: rooms.filter(r => r.status === 'rented').length,
|
|
reserved: rooms.filter(r => r.status === 'reserved').length
|
|
}
|
|
} catch (error) {
|
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
|
} finally {
|
|
uni.hideLoading()
|
|
}
|
|
},
|
|
|
|
editApartment() {
|
|
uni.navigateTo({
|
|
url: `/pages/apartment-add/apartment-add?id=${this.apartmentId}&mode=edit`
|
|
})
|
|
},
|
|
|
|
viewRooms() {
|
|
uni.navigateTo({
|
|
url: `/pages/rooms/rooms?apartmentId=${this.apartmentId}&apartmentName=${encodeURIComponent(this.apartment.name)}`
|
|
})
|
|
},
|
|
|
|
addRoom() {
|
|
uni.navigateTo({
|
|
url: `/pages/room-add/room-add?apartmentId=${this.apartmentId}`
|
|
})
|
|
},
|
|
|
|
viewStats() {
|
|
uni.navigateTo({
|
|
url: `/pages/stats/stats?apartmentId=${this.apartmentId}`
|
|
})
|
|
},
|
|
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
|
|
getStatusText(status) {
|
|
const texts = {
|
|
'active': '运营中',
|
|
'inactive': '已停用',
|
|
'renovating': '装修中'
|
|
}
|
|
return texts[status] || '未知'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.apartment-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-back {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
color: #1E293B;
|
|
}
|
|
|
|
.nav-actions {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 页面内容 */
|
|
.page-content {
|
|
flex: 1;
|
|
padding: 24rpx 32rpx;
|
|
}
|
|
|
|
/* 信息卡片 */
|
|
.info-card {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 24rpx;
|
|
padding: 40rpx 32rpx;
|
|
margin-bottom: 32rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.apartment-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.apartment-name {
|
|
font-size: 40rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.apartment-status {
|
|
padding: 8rpx 20rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 24rpx;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.apartment-address {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
font-size: 28rpx;
|
|
opacity: 0.9;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.apartment-contact {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.contact-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
font-size: 26rpx;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* 区域标题 */
|
|
.section-title {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #94A3B8;
|
|
margin-bottom: 16rpx;
|
|
padding-left: 16rpx;
|
|
}
|
|
|
|
/* 统计区域 */
|
|
.stats-section {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.stat-card {
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 28rpx 16rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.stat-num {
|
|
font-size: 40rpx;
|
|
font-weight: 700;
|
|
color: #2563EB;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.stat-num.empty {
|
|
color: #94A3B8;
|
|
}
|
|
|
|
.stat-num.rented {
|
|
color: #10B981;
|
|
}
|
|
|
|
.stat-num.reserved {
|
|
color: #F59E0B;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 24rpx;
|
|
color: #64748B;
|
|
}
|
|
|
|
/* 快捷操作 */
|
|
.quick-actions {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.action-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
padding: 32rpx 24rpx;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.action-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.action-icon {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.action-icon.rooms {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.action-icon.add {
|
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
}
|
|
|
|
.action-icon.stats {
|
|
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
|
}
|
|
|
|
.action-text {
|
|
font-size: 26rpx;
|
|
color: #1E293B;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 备注区域 */
|
|
.remark-section {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.remark-card {
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
padding: 32rpx;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.remark-text {
|
|
font-size: 28rpx;
|
|
color: #1E293B;
|
|
line-height: 1.6;
|
|
}
|
|
</style>
|