feat(zflb): 添加房源欠费状态展示功能

- 在房源数据结构中新增 isArrears 字段表示是否欠费- 页面中增加“缴费提醒”标签，用于标识欠费房源
- 调整状态标题上方，并增大标签位置至房屋标签尺寸
- 根据房源状态动态设置按钮类型，提升视觉区分度
- 更新样式以支持更大更清晰的状态标签显示

src/views/zf/zflb.vue

@@ -46,6 +46,7 @@ export interface ASimplifiedHouseInfoVo {
   createTime: string // 创建时间
   updateTime: string // 更新时间
   area: string // 面积
+  isArrears: boolean // 是否欠费
 }
 
 export interface BaseResponse {
@@ -174,7 +175,7 @@ const getList = async () => {
 const formatDisplayData = (item: ASimplifiedHouseInfoVo) => {
   return {
     id: item.id,
-    buildingNumber:item.building,//楼栋数
+    buildingNumber: item.building, //楼栋数
     houseNameNumber: item.houseName,
     priceRange: item.rentRange ? `${item.rentRange}` : '面议',
     address: item.address,
@@ -183,6 +184,7 @@ const formatDisplayData = (item: ASimplifiedHouseInfoVo) => {
     floor: item.floor,
     facilities: '配套设施', // 接口没有这个字段，可以根据实际情况调整
     building: item.building,
+    isArrears: item.isArrears, // 是否欠费
   }
 }
 
@@ -447,13 +449,34 @@ onMounted(() => {
                 class="h-full shadow-xl hover:shadow-2xl transition-all duration-300 rounded-2xl border-0 overflow-hidden group cursor-pointer"
               >
                 <div>
-                  <div class="flex justify-between items-start">
-                    <h3 class="text-xl font-bold text-gray-800">{{ item.buildingNumber }}栋{{ item.houseNameNumber }}</h3>
+                  <!-- 状态标签移至下方 -->
+                  <div class="flex items-center justify-between pt-2 gap-2">
+                    <div class="flex items-center gap-2">
+                      <el-tag
+                        :type="item.status === '可租' ? 'success' : 'warning'"
+                        size="large"
+                        class="custom-large-tag"
+                      >
+                        {{ item.status }}
+                      </el-tag>
+                      <el-tag
+                        v-if="item.isArrears"
+                        type="danger"
+                        size="large"
+                        class="custom-large-tag"
+                        >缴费提醒</el-tag
+                      >
+                    </div>
                     <div class="text-right">
                       <div class="text-2xl font-bold text-blue-600">{{ item.priceRange }}</div>
                       <div class="text-sm text-gray-500">元/月</div>
                     </div>
                   </div>
+                  <div class="flex justify-between items-start">
+                    <h1 class="text-xl font-bold text-gray-800">
+                      {{ item.buildingNumber }}栋{{ item.houseNameNumber }}
+                    </h1>
+                  </div>
                   <div class="space-y-3 mb-6">
                     <div class="flex items-center text-gray-600">
                       <el-icon class="mr-2 text-blue-500"><MapPin /></el-icon>
@@ -471,16 +494,10 @@ onMounted(() => {
                       <el-icon class="mr-2 text-orange-500"><Settings /></el-icon>
                       <span class="text-sm">配套：{{ item.facilities }}</span>
                     </div>
-                    <!-- 状态标签移至下方 -->
-                    <div class="flex items-center pt-2">
-                      <el-tag :type="item.status === '可租' ? 'success' : 'warning'" size="default">
-                        {{ item.status }}
-                      </el-tag>
-                    </div>
                   </div>
                   <div class="flex gap-2">
                     <el-button
-                      type="primary"
+                      :type="item.status === '可租' ? 'success' : 'warning'"
                       size="default"
                       class="w-full"
                       @click="viewDetails(item)"
@@ -570,4 +587,10 @@ onMounted(() => {
 .animate-spin {
   animation: spin 1s linear infinite;
 }
+
+/* 增大标签字体大小 */
+.custom-large-tag {
+  font-size: 16px !important;
+  padding: 10px 16px !important;
+}
 </style>