From df4d53358354503618197120db70aa4754cd0794 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E6=96=87=E6=B6=9B?= <1909118034@qq.com>
Date: Thu, 3 Apr 2025 00:05:54 +0800
Subject: [PATCH] =?UTF-8?q?=E7=89=A9=E4=B8=9A=E5=82=AC=E7=BC=B4=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2(home)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main.ts                        |   6 +-
 pages.json                     |  75 ++--
 pages/index/index.vue          |   8 +-
 pagesB/call/index.vue          | 729 +++++++++++++++++++++++++++++++++
 pagesB/questionnaire/list.vue  |  89 +++-
 unocss/a-hua-unocss/index.scss | 247 +++++++++++
 6 files changed, 1105 insertions(+), 49 deletions(-)
 create mode 100644 pagesB/call/index.vue

diff --git a/main.ts b/main.ts
index 94b8f57..44c70cb 100644
--- a/main.ts
+++ b/main.ts
@@ -23,16 +23,16 @@ import {
 export function createApp() {
 	const app = createSSRApp(App)
 	app.use(pinia);
-	
+
 	// 全局挂载 useUserInfo，使 nvue 页面可以使用
 	const userInfoStore = useUserInfo()
 	uni.$store = {
 		state: userInfoStore.$state,
-		commit: (name: string, value: any) => {
+		commit: (name : string, value : any) => {
 			userInfoStore[name](value)
 		}
 	}
-	
+
 	return {
 		app
 	}
diff --git a/pages.json b/pages.json
index 5d6f7ba..70962c4 100644
--- a/pages.json
+++ b/pages.json
@@ -180,40 +180,49 @@
 	}, {
 		"root": "pagesB",
 		"pages": [{
-			"path": "complaint/index",
-			"style": {
-				"enablePullDownRefresh": true,
-				"navigationBarTextStyle": "black",
-				"navigationStyle": "custom",
-				"navigationBarTitleText": "投诉管理"
+				"path": "complaint/index",
+				"style": {
+					"enablePullDownRefresh": true,
+					"navigationBarTextStyle": "black",
+					"navigationStyle": "custom",
+					"navigationBarTitleText": "投诉管理"
+				}
+			}, {
+				"path": "complaint/detail",
+				"style": {
+					"enablePullDownRefresh": false,
+					"navigationBarTextStyle": "black",
+					"navigationStyle": "custom",
+					"navigationBarTitleText": "投诉管理详情"
+				}
+			},
+			{
+				"path": "questionnaire/list",
+				"style": {
+					"enablePullDownRefresh": false,
+					"navigationBarTextStyle": "black",
+					"navigationStyle": "custom",
+					"navigationBarTitleText": "问卷列表"
+				}
+			},
+			{
+				"path": "questionnaire/detail",
+				"style": {
+					"enablePullDownRefresh": false,
+					"navigationBarTextStyle": "black",
+					"navigationStyle": "custom",
+					"navigationBarTitleText": "问卷详情"
+				}
+			}, {
+				"path": "call/index",
+				"style": {
+					"enablePullDownRefresh": false,
+					"navigationBarTextStyle": "black",
+					"navigationStyle": "custom",
+					"navigationBarTitleText": "物业催缴"
+				}
 			}
-		},{
-			"path": "complaint/detail",
-			"style": {
-				"enablePullDownRefresh": false,
-				"navigationBarTextStyle": "black",
-				"navigationStyle": "custom",
-				"navigationBarTitleText": "投诉管理详情"
-			}
-		},
-		{
-			"path": "questionnaire/list",
-			"style": {
-				"enablePullDownRefresh": false,
-				"navigationBarTextStyle": "black",
-				"navigationStyle": "custom",
-				"navigationBarTitleText": "问卷列表"
-			}
-		},
-		{
-			"path": "questionnaire/detail",
-			"style": {
-				"enablePullDownRefresh": false,
-				"navigationBarTextStyle": "black",
-				"navigationStyle": "custom",
-				"navigationBarTitleText": "问卷详情"
-			}
-		}]
+		]
 	}],
 	"condition": {
 		"current": 0, // 当前激活的条件，默认为 0
diff --git a/pages/index/index.vue b/pages/index/index.vue
index f560dde..ea4a904 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -153,7 +153,7 @@
 		{
 			image: uni.$globalData?.RESOURCE_URL + 'home/grid/cuijiao.png',
 			title: '物业催缴',
-			type: ''
+			type: 'call'
 		},
 		{
 			image: uni.$globalData?.RESOURCE_URL + 'home/grid/tousu.png',
@@ -287,6 +287,12 @@
 					url: '/pagesB/questionnaire/list'
 				});
 				break;
+			case 'call':
+				// 问卷管理
+				uni.navigateTo({
+					url: '/pagesB/call/index'
+				});
+				break;
 			default:
 				break;
 		}
diff --git a/pagesB/call/index.vue b/pagesB/call/index.vue
new file mode 100644
index 0000000..d97deef
--- /dev/null
+++ b/pagesB/call/index.vue
@@ -0,0 +1,729 @@
+<template>
+	<view class="call-page">
+		<!-- 自定义导航栏 -->
+		<wd-navbar :bordered="false"
+			custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
+			safeAreaInsetTop fixed placeholder>
+			<template #left>
+				<view class="li-ml-15 li-mt-10 li-flex li-items-center">
+					<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
+						@click="toPages({type:'nav'})"></text>
+					<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
+						@click="toPages({type:'home'})"></text>
+					<text class="li-text-42">物业费催缴</text>
+				</view>
+			</template>
+			<template #right>
+				<view class="li-mr-30 li-flex li-items-center">
+					<view class="community-switch li-flex li-items-center" @click="showCommunityPicker = true">
+						<text class="li-text-30 li-text-primary li-mr-10">{{activeCommunity.name}}</text>
+						<text class="ri-arrow-down-s-line li-text-30"></text>
+					</view>
+				</view>
+			</template>
+		</wd-navbar>
+		<!-- 导航栏背景 -->
+		<view class="nav-bg-layer"></view>
+
+		<!-- 页面内容 -->
+		<view class="content">
+			<!-- 小区信息 -->
+			<view class="community-card li-mx-40 li-mt-40">
+				<view class="community-header li-p-30">
+					<view class="li-flex li-justify-between li-items-center">
+						<text class="community-name li-text-42 li-font-bold li-text-white">{{activeCommunity.name}}</text>
+						<view class="li-px-20 li-py-10 li-bg-rgba(255,255,255,0.3) li-rd-30" @click="handleRefresh">
+							<text class="li-text-28 li-text-white">刷新数据</text>
+						</view>
+					</view>
+					<view class="li-flex li-items-center li-mt-20">
+						<text class="li-text-28 li-text-white li-opacity-80">{{activeCommunity.address}}</text>
+					</view>
+					<view class="li-flex li-items-center li-mt-10">
+						<text class="li-text-28 li-text-white li-opacity-80">欠费总量：</text>
+						<text class="li-text-32 li-text-white li-font-bold">{{activeCommunity.totalUnpaid}}</text>
+					</view>
+				</view>
+				<view class="community-footer li-p-30 li-bg-white">
+					<view class="li-flex li-items-center">
+						<text class="li-text-28 li-text-#666">物业管理中心：</text>
+						<text class="li-text-28 li-text-#333">{{activeCommunity.managementAddress}}</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 楼栋选择 (使用wd-tabs组件) -->
+			<view class="building-tabs-container li-mt-30">
+				<wd-tabs v-model="activeBuilding" :slidable="'always'" sticky bg-color="#fff" line-height="3px" inactive-color="#666" color="#3e9bff">
+					<wd-tab v-for="item in buildingList" :key="item.id" :name="item.id" :title="item.name">
+						<!-- 单元选择 (使用wd-tabs组件) -->
+						<view class="unit-selector li-mt-20 li-mx-30">
+							<view class="li-mb-20">
+								<text class="li-text-30 li-font-bold">选择单元</text>
+							</view>
+							<view class="unit-buttons li-flex li-flex-wrap">
+								<view v-for="unit in unitList" :key="unit.value"
+									class="unit-button li-flex-center li-mr-20 li-mb-20"
+									:class="activeUnitId === String(unit.value) ? 'unit-button-active' : ''"
+									@click="activeUnitId = String(unit.value)">
+									<text class="unit-text" :class="activeUnitId === String(unit.value) ? 'unit-text-active' : ''">{{unit.label}}</text>
+									<view v-if="getUnitUnpaidCount(unit.value) > 0" class="unit-badge">{{getUnitUnpaidCount(unit.value)}}</view>
+								</view>
+							</view>
+							
+							<!-- 楼层和房屋数据 -->
+							<view class="house-list li-mt-30 li-pb-40">
+								<view v-for="(floor, floorIndex) in floorHouseList" :key="floorIndex" class="floor-item li-mb-20">
+									<view class="floor-header li-py-15 li-px-30">
+										<text class="li-text-30 li-font-bold li-text-#333">{{floor.floor}}层</text>
+									</view>
+									<view class="house-grid">
+										<view v-for="(house, houseIndex) in floor.houses" :key="houseIndex" 
+											class="house-card" @click="showHouseDetailFunc(house)">
+											<view class="house-card-inner">
+												<view class="house-icon li-flex-center">
+													<text class="ri-building-2-line li-text-60 li-text-#3e9bff"></text>
+													<!-- 欠费标记 -->
+													<view v-if="house.unpaid > 0" class="unpaid-badge">{{house.unpaid}}</view>
+												</view>
+												<view class="house-info li-mt-15">
+													<text class="li-text-30 li-font-bold li-text-#333 li-text-center">{{house.number}}</text>
+													<view class="li-flex li-items-center li-justify-center li-mt-5">
+														<text class="li-text-24" :class="house.unpaid > 0 ? 'li-text-#ff4d4f' : 'li-text-#52c41a'">
+															{{house.unpaid > 0 ? house.unpaid + '笔欠费' : '无欠费'}}
+														</text>
+													</view>
+												</view>
+											</view>
+										</view>
+									</view>
+								</view>
+								
+								<!-- 空状态 -->
+								<view v-if="floorHouseList.length === 0" class="empty-state li-py-100 li-flex-center li-flex-col">
+									<text class="ri-file-list-3-line li-text-100 li-text-#ccc"></text>
+									<text class="li-text-30 li-text-#999 li-mt-20">该单元暂无数据</text>
+								</view>
+							</view>
+						</view>
+					</wd-tab>
+				</wd-tabs>
+			</view>
+		</view>
+
+		<!-- 小区选择器 -->
+		<wd-picker v-model="showCommunityPicker" :columns="communityList" title="选择小区"
+			v-model:value="selectedCommunity" @confirm="handleCommunityConfirm" label-key="name" value-key="id" />
+
+		<!-- 房屋详情弹窗 -->
+		<wd-popup v-model="showHouseDetail" position="bottom" >
+			<view class="house-detail" :style="{ height: '60vh' }">
+				<view class="detail-header li-p-30 li-bottom-border">
+					<view class="li-flex li-justify-between li-items-center">
+						<text class="li-text-36 li-font-bold">{{selectedHouse.number}}</text>
+						<text class="ri-close-line li-text-50 li-text-#999" @click="showHouseDetail = false"></text>
+					</view>
+					<view class="li-flex li-items-center li-mt-10">
+						<text class="li-text-28 li-text-#666">{{activeCommunity.name}} {{getActiveBuilding().name}} {{activeUnit}}单元</text>
+					</view>
+				</view>
+				<scroll-view scroll-y class="detail-content-scroll">
+					<view class="detail-content li-p-30">
+						<view v-if="selectedHouse.unpaid > 0">
+							<view class="li-flex li-justify-between li-items-center li-mb-20">
+								<text class="li-text-32 li-font-bold">欠费账单</text>
+								<text class="li-text-28 li-text-#3e9bff">共 {{selectedHouse.unpaid}} 笔</text>
+							</view>
+							<view v-for="(bill, index) in selectedHouse.bills" :key="index" class="bill-item li-p-30 li-mb-20">
+								<view class="li-flex li-items-center li-justify-between">
+									<text class="li-text-30 li-font-bold">{{bill.type}}</text>
+									<text class="li-text-30 li-text-#ff4d4f">￥{{bill.amount}}</text>
+								</view>
+								<view class="li-flex li-items-center li-mt-15">
+									<text class="li-text-26 li-text-#999">账单期间：</text>
+									<text class="li-text-26 li-text-#666">{{bill.period}}</text>
+								</view>
+								<view class="li-flex li-items-center li-mt-10">
+									<text class="li-text-26 li-text-#999">逾期时间：</text>
+									<text class="li-text-26 li-text-#666">{{bill.overdueTime}}</text>
+								</view>
+								<view class="li-flex li-justify-between li-items-center li-mt-20">
+									<wd-button size="small" type="info" plain @click="callOwner(selectedHouse)">电话催缴</wd-button>
+									<wd-button size="small" type="primary" @click="sendReminder(selectedHouse)">发送通知</wd-button>
+								</view>
+							</view>
+						</view>
+						<view v-else class="empty-bills li-py-60 li-flex-center li-flex-col">
+							<text class="ri-check-double-line li-text-100 li-text-#52c41a"></text>
+							<text class="li-text-30 li-text-#666 li-mt-20">该住户暂无欠费</text>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</wd-popup>
+	</view>
+</template>
+
+<script setup>
+	import { ref, reactive, computed, onMounted, watch } from 'vue';
+	import { onLoad } from '@dcloudio/uni-app';
+	import { useNavigation } from '@/hooks/useNavigation';
+	import { useToast } from '@/uni_modules/wot-design-uni';
+
+	const Toast = useToast();
+
+	// 使用导航composable
+	const {
+		hasMultiplePages,
+		isTabBarPage,
+		checkRouteStack
+	} = useNavigation();
+
+	// 小区列表
+	const communityList = ref([
+		[
+			{ id: '1', name: '九仙花苑' },
+			{ id: '2', name: '阳光花园小区' },
+			{ id: '3', name: '翠湖庭院' },
+			{ id: '4', name: '金色家园' }
+		]
+	]);
+
+	// 当前选中的小区
+	const selectedCommunity = ref('1');
+	const showCommunityPicker = ref(false);
+
+	// 获取当前选中的小区数据
+	const activeCommunity = computed(() => {
+		const communityData = {
+			'1': {
+				id: '1',
+				name: '九仙花苑',
+				address: '福建省-福州市-鼓楼区',
+				managementAddress: '东街道33号社区中心',
+				totalUnpaid: 3624
+			},
+			'2': {
+				id: '2',
+				name: '阳光花园小区',
+				address: '福建省-福州市-台江区',
+				managementAddress: '茶亭街道15号物业中心',
+				totalUnpaid: 1856
+			},
+			'3': {
+				id: '3',
+				name: '翠湖庭院',
+				address: '福建省-福州市-晋安区',
+				managementAddress: '王庄街道8号物业中心',
+				totalUnpaid: 2145
+			},
+			'4': {
+				id: '4',
+				name: '金色家园',
+				address: '福建省-福州市-仓山区',
+				managementAddress: '城门镇1号物业中心',
+				totalUnpaid: 1023
+			}
+		};
+		return communityData[selectedCommunity.value];
+	});
+
+	// 楼栋列表
+	const buildingList = ref([
+		{ id: '1', name: '1号楼' },
+		{ id: '2', name: '2号楼' },
+		{ id: '3', name: '3号楼' },
+		{ id: '5', name: '5号楼' },
+		{ id: '6', name: '6号楼' },
+		{ id: '7', name: '7号楼' },
+		{ id: '8', name: '8号楼' },
+		{ id: '9', name: '9号楼' },
+		{ id: '10', name: '10号楼' },
+		{ id: '11', name: '11号楼' },
+		{ id: '12', name: '12号楼' }
+	]);
+
+	// 单元列表
+	const unitList = ref([
+		{ value: 1, label: '1单元' },
+		{ value: 2, label: '2单元' },
+		{ value: 3, label: '3单元' },
+		{ value: 4, label: '4单元' },
+		{ value: 5, label: '5单元' },
+		{ value: 6, label: '6单元' }
+	]);
+
+	// 当前选中的楼栋
+	const activeBuilding = ref('1');
+	// 当前选中的单元 (使用字符串类型)
+	const activeUnitId = ref('1');
+	// 兼容原有的数字类型单元ID
+	const activeUnit = computed(() => parseInt(activeUnitId.value));
+	
+	// 监听activeUnit变化，更新floorHouseList
+	watch(activeUnit, (newVal) => {
+		console.log('activeUnit changed to', newVal);
+	});
+
+	// 房屋数据
+	const houseData = reactive({
+		// 1号楼 1单元数据
+		'1-1': [
+			{
+				floor: '1',
+				houses: [
+					{ id: '1-1-101', number: '1-1001', unpaid: 0, owner: '张先生', phone: '13812345678', bills: [] },
+					{ id: '1-1-102', number: '1-1002', unpaid: 3, owner: '刘女士', phone: '13812345679', bills: [
+						{ type: '物业费', amount: '568.00', period: '2023-07-01 至 2023-12-31', overdueTime: '2024-01-15' },
+						{ type: '水费', amount: '124.50', period: '2023-12-01 至 2023-12-31', overdueTime: '2024-01-15' }
+					] },
+					{ id: '1-1-103', number: '1-1003', unpaid: 2, owner: '陈先生', phone: '13812345680', bills: [
+						{ type: '电费', amount: '356.80', period: '2023-12-01 至 2023-12-31', overdueTime: '2024-01-15' }
+					] },
+					{ id: '1-1-104', number: '1-1004', unpaid: 0, owner: '林女士', phone: '13812345681', bills: [] },
+					{ id: '1-1-105', number: '1-1005', unpaid: 4, owner: '黄先生', phone: '13812345682', bills: [
+						{ type: '物业费', amount: '568.00', period: '2023-07-01 至 2023-12-31', overdueTime: '2024-01-15' },
+						{ type: '水费', amount: '124.50', period: '2023-12-01 至 2023-12-31', overdueTime: '2024-01-15' },
+						{ type: '电费', amount: '356.80', period: '2023-12-01 至 2023-12-31', overdueTime: '2024-01-15' }
+					] },
+					{ id: '1-1-106', number: '1-1006', unpaid: 1, owner: '张先生', phone: '13812345683', bills: [
+						{ type: '物业费', amount: '568.00', period: '2023-07-01 至 2023-12-31', overdueTime: '2024-01-15' }
+					] }
+				]
+			},
+			{
+				floor: '2',
+				houses: [
+					{ id: '1-1-201', number: '2-1002', unpaid: 0, owner: '李女士', phone: '13812345679', bills: [] }
+				]
+			},
+			{
+				floor: '3',
+				houses: [
+					{ id: '1-1-301', number: '3-1003', unpaid: 0, owner: '王先生', phone: '13812345680', bills: [] }
+				]
+			},
+			{
+				floor: '4',
+				houses: [
+					{ id: '1-1-401', number: '4-1004', unpaid: 6, owner: '赵女士', phone: '13812345681', bills: [
+						{ type: '物业费', amount: '568.00', period: '2023-07-01 至 2023-12-31', overdueTime: '2024-01-15' },
+						{ type: '水费', amount: '124.50', period: '2023-12-01 至 2023-12-31', overdueTime: '2024-01-15' },
+						{ type: '电费', amount: '356.80', period: '2023-12-01 至 2023-12-31', overdueTime: '2024-01-15' },
+						{ type: '停车费', amount: '300.00', period: '2023-11-01 至 2023-12-31', overdueTime: '2024-01-15' },
+						{ type: '垃圾处理费', amount: '45.00', period: '2023-10-01 至 2023-12-31', overdueTime: '2024-01-15' },
+						{ type: '维修基金', amount: '120.00', period: '2023-07-01 至 2023-12-31', overdueTime: '2024-01-15' }
+					] }
+				]
+			},
+			{
+				floor: '5',
+				houses: [
+					{ id: '1-1-501', number: '5-1005', unpaid: 0, owner: '钱先生', phone: '13812345682', bills: [] }
+				]
+			},
+			{
+				floor: '6',
+				houses: [
+					{ id: '1-1-601', number: '6-1006', unpaid: 6, owner: '孙女士', phone: '13812345683', bills: [
+						{ type: '物业费', amount: '568.00', period: '2023-07-01 至 2023-12-31', overdueTime: '2024-01-15' },
+						{ type: '水费', amount: '124.50', period: '2023-12-01 至 2023-12-31', overdueTime: '2024-01-15' },
+						{ type: '电费', amount: '356.80', period: '2023-12-01 至 2023-12-31', overdueTime: '2024-01-15' },
+						{ type: '停车费', amount: '300.00', period: '2023-11-01 至 2023-12-31', overdueTime: '2024-01-15' },
+						{ type: '垃圾处理费', amount: '45.00', period: '2023-10-01 至 2023-12-31', overdueTime: '2024-01-15' },
+						{ type: '维修基金', amount: '120.00', period: '2023-07-01 至 2023-12-31', overdueTime: '2024-01-15' }
+					] }
+				]
+			}
+		],
+		// 1号楼 2单元数据
+		'1-2': [
+			{
+				floor: '1',
+				houses: [
+					{ id: '1-2-101', number: '1-2001', unpaid: 3, owner: '周先生', phone: '13812345684', bills: [
+						{ type: '物业费', amount: '568.00', period: '2023-07-01 至 2023-12-31', overdueTime: '2024-01-15' }
+					] }
+				]
+			},
+			{
+				floor: '2',
+				houses: [
+					{ id: '1-2-201', number: '2-2002', unpaid: 0, owner: '吴女士', phone: '13812345685', bills: [] }
+				]
+			}
+		],
+		// 添加5单元和6单元的空数据
+		'1-4': [],
+		'1-5': [],
+		'1-6': []
+	});
+
+	// 获取当前楼栋单元的房屋列表
+	const floorHouseList = computed(() => {
+		const key = `${activeBuilding.value}-${activeUnit.value}`;
+		return houseData[key] || [];
+	});
+
+	// 获取当前选中的楼栋对象
+	const getActiveBuilding = () => {
+		return buildingList.value.find(item => item.id === activeBuilding.value) || { id: '', name: '' };
+	};
+
+	// 获取单元欠费数量
+	const getUnitUnpaidCount = (unit) => {
+		const key = `${activeBuilding.value}-${unit}`;
+		if (!houseData[key]) return 0;
+		
+		return houseData[key].reduce((total, floor) => {
+			return total + floor.houses.filter(house => house.unpaid > 0).length;
+		}, 0);
+	};
+
+	// 房屋详情弹窗
+	const showHouseDetail = ref(false);
+	const selectedHouse = ref({
+		id: '',
+		number: '',
+		unpaid: 0,
+		owner: '',
+		phone: '',
+		bills: []
+	});
+
+	// 显示房屋详情
+	const showHouseDetailFunc = (house) => {
+		selectedHouse.value = house;
+		showHouseDetail.value = true;
+	};
+
+	// 电话催缴
+	const callOwner = (house) => {
+		uni.makePhoneCall({
+			phoneNumber: house.phone,
+			success: () => {
+				console.log('拨打电话成功');
+			},
+			fail: () => {
+				Toast.fail('拨打电话失败');
+			}
+		});
+	};
+
+	// 发送通知
+	const sendReminder = (house) => {
+		Toast.success('已发送催缴通知');
+		setTimeout(() => {
+			showHouseDetail.value = false;
+		}, 1500);
+	};
+	
+	// 小区选择确认
+	const handleCommunityConfirm = (selected) => {
+		selectedCommunity.value = selected[0].id;
+	};
+
+	// 刷新数据
+	const handleRefresh = () => {
+		Toast.success('数据已刷新');
+	};
+
+	// 页面跳转
+	const toPages = (item) => {
+		switch (item.type) {
+			case 'nav':
+				uni.navigateBack({
+					delta: 1
+				});
+				break;
+			case 'home':
+				uni.switchTab({
+					url: '/pages/index/index'
+				});
+				break;
+			default:
+				break;
+		}
+	};
+
+	// 生命周期钩子
+	onLoad(() => {
+		checkRouteStack();
+	});
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #F7F8FA;
+	}
+
+	.call-page {
+		min-height: 100vh;
+	}
+
+	.nav-bg-layer {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: calc(var(--status-bar-height) + 88rpx);
+		background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
+		z-index: 10;
+		backdrop-filter: blur(10px);
+		-webkit-backdrop-filter: blur(10px);
+	}
+
+	.content {
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+
+	.community-switch {
+		height: 60rpx;
+		padding: 0 20rpx;
+		border-radius: 30rpx;
+		background-color: rgba(62, 155, 255, 0.1);
+	}
+
+	.community-card {
+		border-radius: 20rpx;
+		overflow: hidden;
+		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+
+		.community-header {
+			background: linear-gradient(135deg, #3e9bff, #2374e1);
+			position: relative;
+			overflow: hidden;
+
+			&::before {
+				content: '';
+				position: absolute;
+				top: -50%;
+				right: -20%;
+				width: 400rpx;
+				height: 400rpx;
+				border-radius: 50%;
+				background: rgba(255, 255, 255, 0.1);
+				z-index: 0;
+			}
+
+			&::after {
+				content: '';
+				position: absolute;
+				bottom: -30%;
+				left: -10%;
+				width: 300rpx;
+				height: 300rpx;
+				border-radius: 50%;
+				background: rgba(255, 255, 255, 0.05);
+				z-index: 0;
+			}
+		}
+
+		.community-footer {
+			border-radius: 0 0 20rpx 20rpx;
+		}
+	}
+
+	.building-tabs-container {
+		background-color: #fff;
+	}
+	
+	.unit-selector {
+		background-color: #fff;
+		padding: 30rpx;
+		border-radius: 16rpx;
+	}
+	
+	.unit-buttons {
+		flex-wrap: wrap;
+	}
+	
+	.unit-button {
+		position: relative;
+		width: 140rpx;
+		height: 80rpx;
+		background-color: #f7f8fa;
+		border-radius: 12rpx;
+		transition: all 0.2s;
+		
+		&-active {
+			background: rgba(62, 155, 255, 0.1);
+			border: 1px solid rgba(62, 155, 255, 0.3);
+		}
+		
+		.unit-text {
+			font-size: 28rpx;
+			color: #666;
+			font-weight: 500;
+			
+			&-active {
+				color: #3e9bff;
+				font-weight: bold;
+			}
+		}
+		
+		.unit-badge {
+			position: absolute;
+			top: -10rpx;
+			right: -10rpx;
+			min-width: 36rpx;
+			height: 36rpx;
+			border-radius: 18rpx;
+			background-color: #ff4d4f;
+			color: #fff;
+			font-size: 20rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: 0 8rpx;
+			box-shadow: 0 2rpx 6rpx rgba(255, 77, 79, 0.3);
+		}
+		
+		&:active {
+			opacity: 0.8;
+			transform: scale(0.98);
+		}
+	}
+	
+	.house-list {
+		padding: 0 2rpx;
+	}
+
+	.floor-item {
+		background-color: #fff;
+		border-radius: 16rpx;
+		overflow: hidden;
+		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+		margin-bottom: 30rpx;
+
+		.floor-header {
+			background-color: #f5f7fa;
+			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+		}
+		
+		.house-grid {
+			display: flex;
+			flex-wrap: wrap;
+			padding: 20rpx;
+		}
+	}
+
+	.house-card {
+		width: 25%;
+		padding: 8rpx;
+		box-sizing: border-box;
+		
+		@media screen and (max-width: 768rpx) {
+			width: 33.33%;
+		}
+		
+		@media screen and (max-width: 580rpx) {
+			width: 50%;
+		}
+		
+		&-inner {
+			background-color: #fff;
+			border-radius: 12rpx;
+			padding: 15rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			border: 1px solid rgba(0, 0, 0, 0.03);
+			transition: all 0.2s;
+			height: 180rpx;
+			justify-content: center;
+			
+			&:active {
+				background-color: #f9f9f9;
+				transform: scale(0.98);
+			}
+		}
+		
+		.house-icon {
+			position: relative;
+			width: 80rpx;
+			height: 80rpx;
+			background-color: #eef6ff;
+			border-radius: 40rpx;
+			margin-bottom: 10rpx;
+		}
+		
+		.unpaid-badge {
+			position: absolute;
+			top: -10rpx;
+			right: -10rpx;
+			min-width: 40rpx;
+			height: 40rpx;
+			border-radius: 20rpx;
+			background-color: #ff4d4f;
+			color: #fff;
+			font-size: 22rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: 0 10rpx;
+			box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+		}
+		
+		.house-info {
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			
+			.li-text-30 {
+				font-size: 28rpx;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				max-width: 100%;
+			}
+		}
+	}
+
+	.house-detail {
+		height: 100%;
+		border-radius: 24rpx 24rpx 0 0;
+		overflow: hidden;
+		background-color: #fff;
+		display: flex;
+		flex-direction: column;
+
+		.detail-header {
+			padding-top: constant(safe-area-inset-top);
+			padding-top: env(safe-area-inset-top);
+			flex-shrink: 0;
+		}
+		
+		.detail-content-scroll {
+			flex: 1;
+			height: calc(100% - 120rpx);
+		}
+
+		.detail-content {
+			padding-bottom: constant(safe-area-inset-bottom);
+			padding-bottom: env(safe-area-inset-bottom);
+		}
+
+		.bill-item {
+			background-color: #f9f9f9;
+			border-radius: 16rpx;
+			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+		}
+
+		.li-bottom-border {
+			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+		}
+	}
+
+	.empty-state {
+		min-height: 300rpx;
+	}
+
+	::v-deep .wd-navbar__placeholder {
+		height: calc(var(--status-bar-height) + 88rpx) !important;
+		padding-top: constant(safe-area-inset-top) !important;
+		padding-top: env(safe-area-inset-top) !important;
+	}
+</style>
\ No newline at end of file
diff --git a/pagesB/questionnaire/list.vue b/pagesB/questionnaire/list.vue
index 8be0dc3..25a7160 100644
--- a/pagesB/questionnaire/list.vue
+++ b/pagesB/questionnaire/list.vue
@@ -31,10 +31,13 @@
 		</wd-navbar>
 		<!-- 导航栏背景 -->
 		<view class="nav-bg-layer"></view>
-
+		
+		<!-- 整页背景 -->
+		<view class="page-bg"></view>
 
 		<!-- 筛选区域 -->
 		<view class="filter-section li-w-92% li-mx-auto li-mt-30">
+		
 			<!-- 问卷状态筛选 -->
 			<view class="li-flex li-items-center li-flex-wrap">
 				<text v-for="(item, index) in statusList" :key="index"
@@ -44,6 +47,12 @@
 				</text>
 			</view>
 		</view>
+		
+			<!-- 小区选择器 -->
+			<view class="li-px-15">
+				<wd-picker size="large"  v-model="showVillagePicker" :columns="pickerVillageList" title="选择小区"
+					v-model:value="selectedVillage" @confirm="handleVillageConfirm" label-key="label" value-key="value" />
+			</view>
 
 		<!-- 问卷列表 -->
 		<view class="li-w-92% li-mx-auto li-mt-30 li-pb-30">
@@ -143,7 +152,7 @@
 	const hasPermission = ref(true); // 实际项目中应该从用户信息或权限系统中获取
 
 	// 状态管理
-	const selectedVillage = ref('1'); // 设置默认选中的小区
+	const selectedVillage = ref('ALL'); // 设置默认为全部小区
 	const activeStatus = ref('ALL');
 	const loading = ref(false);
 	const finished = ref(false);
@@ -362,6 +371,29 @@
 		resetList();
 		loadQuestionnaireList();
 	});
+
+	// 新增变量
+	const showVillagePicker = ref(false);
+	const pickerVillageList = ref([
+		[
+			{ value: 'ALL', label: '全部小区' },
+			{ value: '1', label: '阳光花园小区' },
+			{ value: '2', label: '翠湖庭院' },
+			{ value: '3', label: '金色家园' }
+		]
+	]);
+
+	// 新增方法
+	const getVillageName = (value) => {
+		const village = villageList.value.find(item => item.value === value);
+		return village ? village.label : '未知小区';
+	};
+
+	const handleVillageConfirm = (selectedItem) => {
+		selectedVillage.value = selectedItem[0].value;
+		resetList();
+		loadQuestionnaireList();
+	};
 </script>
 
 <style lang="scss">
@@ -371,7 +403,8 @@
 
 	.questionnaire-page {
 		min-height: 100vh;
-
+		position: relative;
+		z-index: 0;
 	}
 
 	.nav-bg-layer {
@@ -381,39 +414,64 @@
 		width: 100%;
 		height: calc(var(--status-bar-height) + 88rpx);
 		background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
-		z-index: -1;
+		z-index: 10;
 		backdrop-filter: blur(10px);
 		-webkit-backdrop-filter: blur(10px);
 	}
-
+	
+	.page-bg {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: linear-gradient(180deg, rgba(247, 248, 250, 0.9) 0%, rgba(247, 248, 250, 1) 100%);
+		z-index: -2;
+	}
 
 	.filter-section {
-		border-radius: 20rpx;
-		padding: 20rpx;
+		padding: 20rpx 0 0;
+		position: sticky;
+		top: calc(var(--status-bar-height) + 88rpx);
+		z-index: 9;
+		background: rgba(255, 255, 255, 0.85);
 		backdrop-filter: blur(10px);
 		-webkit-backdrop-filter: blur(10px);
-		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
 	}
 
 	.status-tag {
-		padding: 8rpx 24rpx;
+		height: 60rpx;
+		padding: 0 30rpx;
 		border-radius: 30rpx;
 		font-size: 28rpx;
 		color: #666;
-		background: #f5f5f5;
-		margin-right: 16rpx;
+		background: rgba(255, 255, 255, 0.8);
+		margin-right: 20rpx;
 		margin-bottom: 16rpx;
 		transition: all 0.3s;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border: 2rpx solid transparent;
+
+		&:active {
+			transform: scale(0.95);
+			opacity: 0.8;
+		}
 	}
 
 	.status-tag.active {
 		color: #0070F0;
-		background: rgba(0, 112, 240, 0.1);
+		background: rgba(255, 255, 255, 0.95);
 		font-weight: 500;
+		border-color: #0070F0;
+		box-shadow: 0 2rpx 12rpx rgba(0, 112, 240, 0.15);
 	}
 
 	.questionnaire-card {
 		transition: all 0.3s;
+		position: relative;
+		z-index: 1;
 
 		&:active {
 			transform: scale(0.98);
@@ -472,4 +530,11 @@
 	::v-deep .wd-select__right-icon {
 		color: #666 !important;
 	}
+
+	.village-filter {
+		.select-box {
+			background: rgba(255, 255, 255, 0.9);
+			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/unocss/a-hua-unocss/index.scss b/unocss/a-hua-unocss/index.scss
index 139597f..2783821 100644
--- a/unocss/a-hua-unocss/index.scss
+++ b/unocss/a-hua-unocss/index.scss
@@ -1,2 +1,249 @@
 
+.li-items-center{align-items:center}
+.items-center{align-items:center}
+.justify-end{justify-content:end}
+.li-justify-center{justify-content:center}
+.justify-center{justify-content:center}
+.li-justify-between{justify-content:space-between}
+.justify-between{justify-content:space-between}
+.li-bg-white{background-color:rgb(255,255,255)}
+.li-flex{display:flex}
+.li-flex-center{display:flex;align-items:center;justify-content:center}
+.li-flex-col{flex-direction:column}
+.li-font-bold{font-weight:bold}
+.li-h-130{height:130rpx}
+.li-h-160{height:160rpx}
+.li-h-220{height:220rpx}
+.li-h-58{height:58rpx}
+.li-justify-around{justify-content:space-around}
+.li-ml-22{margin-left:22rpx}
+.li-ml-25{margin-left:25rpx}
+.li-ml-35{margin-left:35rpx}
+.li-mr-5{margin-right:5rpx}
+.li-mt-10{margin-top:10rpx}
+.li-mt-12{margin-top:12rpx}
+.li-mt-14{margin-top:14rpx}
+.li-mt-15{margin-top:15rpx}
+.li-mt-20{margin-top:20rpx}
+.li-mt-30{margin-top:30rpx}
+.li-mx-auto{margin-left:auto;margin-right:auto}
+.li-pt-15{padding-top:15rpx}
+.li-px-25{padding-left:25rpx;padding-right:25rpx}
+.li-px-30{padding-left:30rpx;padding-right:30rpx}
+.li-px-40{padding-left:40rpx;padding-right:40rpx}
+.li-px-50{padding-left:50rpx;padding-right:50rpx}
+.li-py-25{padding-top:25rpx;padding-bottom:25rpx}
+.li-rd-10{border-radius:10rpx}
+.li-rd-15{border-radius:15rpx}
+.li-text-010B3E-color{color:rgb(1,11,62)}
+.li-text-22{font-size:22rpx}
+.li-text-24{font-size:24rpx}
+.li-text-26{font-size:26rpx}
+.li-text-28{font-size:28rpx}
+.li-text-30{font-size:30rpx}
+.li-text-343333-color{color:rgb(52,51,51)}
+.li-text-43{font-size:43rpx}
+.li-text-AFB2B8-color{color:rgb(175,178,184)}
+.li-text-B1B0B0-color{color:rgb(177,176,176)}
+.li-text-F42429-color{color:rgb(244,36,41)}
+.li-w-130{width:130rpx}
+.li-w-310{width:310rpx}
+.li-w-58{width:58rpx}
+.li-w-full-70{width:70%}
+.li-w-full-88{width:88%}
+.border-4-white{border-style:solid;border-color:rgb(255,255,255);border-width:4rpx}
+.bg-f9f9f9{background-color:rgb(249,249,249)}
+.bg-FFFFFF{background-color:rgb(255,255,255)}
+.li-h-110{height:110rpx}
+.li-items-start{align-items:start}
+.li-mb-12{margin-bottom:12rpx}
+.li-mb-20{margin-bottom:20rpx}
+.li-mb-8{margin-bottom:8rpx}
+.li-ml-15{margin-left:15rpx}
+.li-ml-20{margin-left:20rpx}
+.li-mr-10{margin-right:10rpx}
+.li-mr-12{margin-right:12rpx}
+.li-mr-3{margin-right:3rpx}
+.li-mr-6{margin-right:6rpx}
+.li-mt-40{margin-top:40rpx}
+.li-mt-90{margin-top:90rpx}
+.li-pb-25{padding-bottom:25rpx}
+.li-pb-30{padding-bottom:30rpx}
+.li-pl-20{padding-left:20rpx}
+.li-pl-30{padding-left:30rpx}
+.li-pr-30{padding-right:30rpx}
+.li-pt-2{padding-top:2rpx}
+.li-pt-20{padding-top:20rpx}
+.li-pt-30{padding-top:30rpx}
+.li-py-6{padding-top:6rpx;padding-bottom:6rpx}
+.li-rd-20{border-radius:20rpx}
+.li-text-009aff-color{color:rgb(0,154,255)}
+.li-text-32{font-size:32rpx}
+.li-text-40{font-size:40rpx}
+.li-text-42{font-size:42rpx}
+.li-text-55{font-size:55rpx}
+.li-text-5f5f5f-color{color:rgb(95,95,95)}
+.li-text-666-color{color:rgb(102,102,102)}
+.li-text-70{font-size:70rpx}
+.li-text-9a9a9a-color{color:rgb(154,154,154)}
+.li-text-right{text-align:right}
+.li-w-110{width:110rpx}
+.li-w-150{width:150rpx}
+.li-w-400{width:400rpx}
+.li-w-full-85{width:85%}
+.li-w-full-92{width:92%}
+.overflow-hidden{overflow:hidden}
+.li-ml-6{margin-left:6rpx}
+.li-mt-300-important{margin-top:300rpx !important}
+.li-p-15{padding:15rpx}
+.li-pb-15{padding-bottom:15rpx}
+.li-pt-25{padding-top:25rpx}
+.li-pt-4{padding-top:4rpx}
+.li-text-333333-color{color:rgb(51,51,51)}
+.li-text-36{font-size:36rpx}
+.li-text-ff0000-color{color:rgb(255,0,0)}
+.li-w-full-100{width:100%}
+.li-h-100{height:100rpx}
+.li-h-240{height:240rpx}
+.li-h-250{height:250rpx}
+.li-h-50{height:50rpx}
+.li-h-60{height:60rpx}
+.li-items-end{align-items:end}
+.li-justify-start{justify-content:start}
+.li-mb-2{margin-bottom:2rpx}
+.li-ml-4{margin-left:4rpx}
+.li-ml-50{margin-left:50rpx}
+.li-mr-20{margin-right:20rpx}
+.li-mr-50{margin-right:50rpx}
+.li-mt-26{margin-top:26rpx}
+.li-mt-6{margin-top:6rpx}
+.li-mt-60{margin-top:60rpx}
+.li-mx-20{margin-left:20rpx;margin-right:20rpx}
+.li-mx-40{margin-left:40rpx;margin-right:40rpx}
+.li-pb-10{padding-bottom:10rpx}
+.li-pb-14{padding-bottom:14rpx}
+.li-pb-20{padding-bottom:20rpx}
+.li-pt-8{padding-top:8rpx}
+.li-py-20{padding-top:20rpx;padding-bottom:20rpx}
+.li-rd-full-50{border-radius:50%}
+.li-rd-tl-30-important{border-top-left-radius:30rpx !important}
+.li-rd-tr-30-important{border-top-right-radius:30rpx !important}
+.li-text-000000-color{color:rgb(0,0,0)}
+.li-text-19171B-color{color:rgb(25,23,27)}
+.li-text-20{font-size:20rpx}
+.li-text-34{font-size:34rpx}
+.li-text-38{font-size:38rpx}
+.li-text-706e70-color{color:rgb(112,110,112)}
+.li-text-B2B2B2-color{color:rgb(178,178,178)}
+.li-text-BBBDDA-color{color:rgb(187,189,218)}
+.li-text-F2F7FD-color{color:rgb(242,247,253)}
+.li-text-F8C883-color{color:rgb(248,200,131)}
+.li-text-FFFFFF-color{color:rgb(255,255,255)}
+.li-text-b1bbc7-color{color:rgb(177,187,199)}
+.li-w-100{width:100rpx}
+.li-w-240{width:240rpx}
+.li-w-50{width:50rpx}
+.li-w-60{width:60rpx}
+.li-w-full-94{width:94%}
+
+.li-ml-200{margin-left:200rpx}
+.li-ml-30{margin-left:30rpx}
+.li-mr-30{margin-right:30rpx}
+.li-text-25{font-size:25rpx}
+.li-text-35{font-size:35rpx}
+.li-text-46{font-size:46rpx}
+.li-w-full-80{width:80%}
+
+.li-mb-25{margin-bottom:25rpx}
+.li-w-full-90{width:90%}
+
+.li-font-550{font-weight:550}
+.li-h-68{height:68rpx}
+.li-mt-100{margin-top:100rpx}
+.li-mt-28{margin-top:28rpx}
+.li-mt-32{margin-top:32rpx}
+.li-mx-10{margin-left:10rpx;margin-right:10rpx}
+.li-pt-270{padding-top:270rpx}
+.li-rd-40{border-radius:40rpx}
+.li-text-2EA1EA-color{color:rgb(46,161,234)}
+.li-text-a5a5a5-color{color:rgb(165,165,165)}
+.li-w-420{width:420rpx}
+
+
+.li-font-400{font-weight:400}
+.li-m-30{margin:30rpx}
+.li-text-595959-color{color:rgb(89,89,89)}
+
+
+.li-mb-30{margin-bottom:30rpx}
+.li-ml-10{margin-left:10rpx}
+.li-mr-200{margin-right:200rpx}
+.li-mr-4{margin-right:4rpx}
+.li-mt-100-important{margin-top:100rpx !important}
+.li-mt-4{margin-top:4rpx}
+.li-mt-50{margin-top:50rpx}
+.li-mt-8{margin-top:8rpx}
+.li-py-40{padding-top:40rpx;padding-bottom:40rpx}
+.li-text-0070F0-color{color:rgb(0,112,240)}
+.li-text-333-color{color:rgb(51,51,51)}
+.li-text-44{font-size:44rpx}
+.li-text-48{font-size:48rpx}
+.li-text-90{font-size:90rpx}
+.li-text-999-color{color:rgb(153,153,153)}
+.li-text-center{text-align:center}
+.li-text-white{color:rgb(255,255,255)}
+.li-w-500{width:500rpx}
+
+
+
+.li-mb-10{margin-bottom:10rpx}
+.li-mb-15{margin-bottom:15rpx}
+.li-mb-40{margin-bottom:40rpx}
+.li-my-20{margin-top:20rpx;margin-bottom:20rpx}
+.li-p-30{padding:30rpx}
+.li-py-30{padding-top:30rpx;padding-bottom:30rpx}
+.li-text-07c160-color{color:rgb(7,193,96)}
+
+.li-h-90{height:90rpx}
+.li-text-47{font-size:47rpx}
+.li-w-90{width:90rpx}
+
+.li-block{display:block}
+.li-border-b{border-style:solid;border-color:b;border-width:1rpx}
+.li-items-baseline{align-items:baseline}
+.li-mr-15{margin-right:15rpx}
+.li-mt-5{margin-top:5rpx}
+.li-opacity-100{undefined:1}
+.li-py-60{padding-top:60rpx;padding-bottom:60rpx}
+.li-rd-12{border-radius:12rpx}
+.li-rd-16{border-radius:16rpx}
+.li-text-0a4696-color{color:rgb(10,70,150)}
+
+.li-flex-1{flex:1}
+.li-flex-wrap{flex-wrap:wrap}
+.li-line-clamp-2{overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-box-orient:vertical;-webkit-line-clamp:2}
+.li-text-999999-color{color:rgb(153,153,153)}
+.li-w-160{width:160rpx}
+.li-w-full-96{width:96%}
+
+.li-mt-25{margin-top:25rpx}
+
+.li-text-52{font-size:52rpx}
+
+
+
+
+
+.li-h-100{height:100rpx}
+.li-ml-30{margin-left:30rpx}
+.li-mr-30{margin-right:30rpx}
+.li-pt-2{padding-top:2rpx}
+.li-rd-full-50{border-radius:50%}
+.li-text-25{font-size:25rpx}
+.li-text-35{font-size:35rpx}
+.li-text-46{font-size:46rpx}
+.li-w-100{width:100rpx}
+.li-w-full-80{width:80%}
+
+