From cf568ba8839dbec91ff08efb402c02b957d404e1 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Fri, 25 Apr 2025 15:04:48 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9=E5=8F=8A?=
 =?UTF-8?q?=E5=85=B6=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/helpInfo/index.vue            | 138 +++++++++++
 pages/neighbor/index.vue            |  23 +-
 pages/neighborDetail/index.vue      | 282 +++++++++++++++++++++++
 pages/neighborList/index.vue        | 342 ++++++++++++++++++++++++++++
 pages/service/index.vue             |  22 +-
 pages/serviceNoticeDetail/index.vue | 124 ++++++++++
 pages/serviceNoticeList/index.vue   | 235 +++++++++++++++++++
 pages/serviceTickets/index.vue      | 216 ++++++++++++++++++
 8 files changed, 1373 insertions(+), 9 deletions(-)
 create mode 100644 pages/helpInfo/index.vue
 create mode 100644 pages/neighborDetail/index.vue
 create mode 100644 pages/neighborList/index.vue
 create mode 100644 pages/serviceNoticeDetail/index.vue
 create mode 100644 pages/serviceNoticeList/index.vue
 create mode 100644 pages/serviceTickets/index.vue

diff --git a/pages/helpInfo/index.vue b/pages/helpInfo/index.vue
new file mode 100644
index 0000000..5d4fca5
--- /dev/null
+++ b/pages/helpInfo/index.vue
@@ -0,0 +1,138 @@
+<template>
+	<view class="container">
+		<!-- 引入头部组件 -->
+		<Header :title="'求助'"></Header>
+		<view class="content">
+			<view class="content_wapper">
+				<!-- 添加标题 -->
+				<view class="input-section" >
+					<u-input placeholder="添加标题" v-model="title" border></u-input>
+				</view>
+				
+				<!-- 输入求助内容 -->
+				<view class="textarea-section">
+					<u--textarea placeholder="请输入求助内容..." 
+					v-model="content"
+					border
+					height="300"
+					></u--textarea>
+				</view>
+				
+				<!-- 图片上传 -->
+				<view class="upload-section">
+					<u-upload @afterRead="afterRead"
+					          :fileList="fileList"
+							   :maxCount="1" 
+							   :showUploadList="false"
+							    width="550"
+							    height="450"
+							    >
+						<view class="upload-btn">
+							<u-icon name="plus" size="40" color="#666"></u-icon>
+						</view>
+					</u-upload>
+				</view>
+				
+				<!-- 发布按钮 -->
+				<view class="publish-section">
+					<u-button type="primary" text="立即发布" @click="publish"></u-button>
+				</view>
+			</view>
+			
+		</view>
+		<Footer></Footer>
+	</view>
+
+</template>
+
+<script>
+	import Header from '@/components/header_common.vue';
+	import Footer from '@/components/footer_common.vue';
+	export default {
+		components: {
+			Header,Footer
+		},
+		data() {
+			return {
+				title: '',
+				content: '',
+				fileList: []
+			};
+		},
+		methods: {
+			handleBack() {
+				uni.navigateBack({
+					delta: 1 // 返回上一级页面
+				});
+			},
+			afterRead(event) {
+				// 读取完成后的回调函数
+				const {
+					file
+				} = event;
+				this.fileList.push(file);
+			},
+			publish() {
+				// 发布逻辑
+				console.log('发布:', this.title, this.content, this.fileList);
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.container {
+
+		width: 100%;
+		height: 100vh;
+		/* 占满整个视口高度 */
+		opacity: 1;
+		background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 250, 250, 0) 100%),
+			linear-gradient(0deg, rgba(255, 241, 235, 1) 0%, rgba(192, 219, 250, 1) 100%);
+		position: relative; 
+
+		.content {
+			width: 100%;
+			position: absolute;
+			margin-top: 300rpx;
+			border-top-left-radius: 30rpx;
+			border-top-right-radius: 30rpx;
+			background-color: rgba(255, 255, 255, 0.65);
+			padding-bottom: 60rpx;
+			
+			.content_wapper{
+				width: 90%;
+				margin: 0 auto;
+			}
+	
+		}
+		
+		.input-section{
+			border-bottom: 2rpx solid #C3DCFA;
+			height: 90rpx;
+			line-height: 90rpx;
+		}
+
+		.input-section,
+		.textarea-section,
+		.upload-section {
+			margin-bottom: 30rpx;
+		}
+
+		.upload-btn {
+			width: 220rpx;
+			height: 220rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background-color: #f0f0f0;
+			border-radius: 10rpx;
+		}
+
+		.publish-section {
+			text-align: center;
+			margin-top: 100rpx;
+		}
+
+	}
+</style>
\ No newline at end of file
diff --git a/pages/neighbor/index.vue b/pages/neighbor/index.vue
index ea16a8c..badf86d 100644
--- a/pages/neighbor/index.vue
+++ b/pages/neighbor/index.vue
@@ -11,11 +11,11 @@
 			<view class="body">
 				<view class="text-with-block">
 					<view class="left">
-						<text class="text">社区服务</text>
+						<text class="text">邻里互助</text>
 						<view class="slanted-block"></view>
 					</view>
 
-					<view class="right">
+					<view class="right" @click="goPage('helpInfo')">
 						<view>+</view>
 
 						<!-- <u-icon name="plus-circle" color="#fff" size="24"></u-icon> -->
@@ -78,7 +78,7 @@
 						</view>
 
 					</view>
-					<view class="interact_more">
+					<view class="interact_more" @click="goPage('neighborList')">
 						查看更多
 					</view>
 
@@ -269,8 +269,21 @@
 		onLoad() {
 
 		},
-		methods: {
-
+		methods: {
+			// 跳转不同页面
+			goPage(page){
+				console.log("==进来",page)
+				uni.navigateTo({
+				  url: `/pages/${page}/index`,
+				  // url: '/pages/helpInfo/index', 
+				  success: () => {
+				    console.log('切换到tabBar页面成功');
+				  },
+				  fail: (err) => {
+				    console.error('切换到tabBar页面失败:', err);
+				  }
+				});
+			},
 		}
 	}
 </script>
diff --git a/pages/neighborDetail/index.vue b/pages/neighborDetail/index.vue
new file mode 100644
index 0000000..c7ed22d
--- /dev/null
+++ b/pages/neighborDetail/index.vue
@@ -0,0 +1,282 @@
+<template>
+	<view class="container">
+		<Header :title="'邻里互助详情'"></Header>
+		<!-- 蓝色背景 -->
+		<view class="neighbor_head">
+		</view>
+
+
+		<!-- 白色底部区域 -->
+		<view class="neighbor_body">
+			<!-- 正式页面内容，但是需要留到90%的页面内容和旁边的间隙 -->
+			<view class="body">
+				<view class="text-with-block">
+					<view class="left">
+						<text class="text">邻里互助</text>
+						<view class="slanted-block"></view>
+					</view>
+
+					<view class="right" @click="goPage('helpInfo')">
+						<view>+</view>
+
+						<!-- <u-icon name="plus-circle" color="#fff" size="24"></u-icon> -->
+					</view>
+				</view>
+
+				<view class="interact_body">
+					<view class="body_item">
+						<view class="item_header">
+							<view class="left_section">
+								<image class="avatar" src="/static/imgs/index/nav.png"></image>
+								<view class="info">
+									<text class="name">樱桃小丸子</text>
+									<text class="date">03-24</text>
+								</view>
+							</view>
+							<button class="help_button">求助</button>
+						</view>
+						
+						<view class="body_content">
+							<h3>寻找拼车伙伴</h3>
+							<view class="content_font">
+								每天早晨7:30从社区出发前往政务中心上班，有同路的朋友可以拼车，分担车费。
+							</view>
+							<view class="content_img">
+								<image src="/static/imgs/index/swiper.png"></image>
+							</view>
+						</view>
+
+					</view>
+					
+
+
+				</view>
+			</view>
+		</view>
+
+		<!-- 引入底部 -->
+		<Footer></Footer>
+	</view>
+</template>
+
+<script>
+	import Header from '@/components/header_common.vue';
+	import Footer from '@/components/footer_common.vue';
+	export default {
+		components: {
+			Header,
+			Footer
+		},
+		methods: {
+			// 跳转详情页面
+			goPage(page){
+				uni.navigateTo({
+				  url: `/pages/${page}/index`,
+				  // url: '/pages/helpInfo/index', 
+				  success: () => {
+				    console.log('切换到tabBar页面成功');
+				  },
+				  fail: (err) => {
+				    console.error('切换到tabBar页面失败:', err);
+				  }
+				});
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		// justify-content: center;
+		// background: #f8faff;
+		background: #f8faff;
+		// height: 100vh;
+		// padding: 70rpx 0;
+		// margin-top: 90rpx;
+		padding-bottom: 400rpx;
+
+		.neighbor_head {
+			width: 100%;
+			height: 360rpx;
+			opacity: 1;
+			background: linear-gradient(270deg, rgba(146, 161, 252, 1) 0%, rgba(181, 229, 255, 1) 100%);
+			position: relative;
+		}
+
+
+		.neighbor_body {
+			width: 100%;
+			// height: 300rpx;
+			background: #fff;
+			height: 650rpx;
+			position: absolute;
+			top: 340rpx;
+			z-index: 9;
+
+			.body {
+				width: 90%;
+				margin: 0 5%;
+				position: absolute;
+				top: -150rpx;
+				z-index: 99;
+
+				.text-with-block {
+					display: flex;
+					justify-content: space-between;
+					padding: 20rpx 0;
+					height: 50rpx;
+
+					.left {
+						.text {
+							font-size: 34rpx;
+							font-weight: bold;
+							color: #333;
+							position: relative;
+							z-index: 2;
+							padding-left: 50rpx;
+						}
+
+						.slanted-block {
+							position: absolute;
+							left: 120rpx;
+							top: 46rpx;
+							transform: translateX(-50%) skewX(-40deg);
+							width: 166rpx;
+							height: 24rpx;
+							background-color: #80B3FF;
+							z-index: 1;
+						}
+					}
+
+					.right {
+						font-size: 26rpx;
+						color: #3B8CFF;
+						text-decoration: none;
+						cursor: pointer;
+						// margin-top: 20rpx;
+						margin-right: 20rpx;
+
+						view {
+							color: #fff;
+							width: 32rpx;
+							height: 32rpx;
+							line-height: 28rpx;
+							border: 4rpx solid #fff;
+							border-radius: 50%;
+							text-align: center;
+							font-weight: 500;
+							font-size: 34rpx;
+						}
+					}
+				}
+
+				.interact_body {
+					// display:list-item;
+					grid-template-columns: repeat(2, 1fr);
+					grid-gap: 26rpx;
+					width: 100%;
+					margin-top: -20rpx;
+
+					.body_item {
+						// width: 80%;
+						margin: 40rpx auto;
+						// height: 400rpx;
+						background: #E8F3FF;
+						border-radius: 20rpx;
+						// display: flex;
+						// align-items: flex-start;
+						// gap: 20rpx;
+						padding: 20rpx 30rpx;
+						.item_header{
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+							padding: 20rpx;
+							width: 100%;
+							.left_section {
+							  display: flex;
+							  align-items: center;
+							  width: 75%;
+							  .avatar {
+							    width: 80rpx;
+							    height: 80rpx;
+							    border-radius: 50%;
+							    margin-right: 20rpx;
+							  }
+							  
+							  .info {
+							    display: flex;
+							    flex-direction: column;
+								.name {
+								  font-size: 28rpx;
+								  color: #2e2e2e;
+								}
+								.date {
+								  font-size: 24rpx;
+								  color: #2e2e2e;
+								  margin-top: 10rpx;
+								}
+							  }
+							}
+							.help_button {
+							  width: 120rpx;
+							  height: 50rpx;
+							  line-height: 50rpx;
+							  text-align: center;
+							  background-color: #1890ff;
+							  color: #fff;
+							  border-radius: 10rpx;
+							  font-size: 24rpx;
+							}
+						}
+						
+						.body_content{
+							h3{
+								font-weight: 500;
+								height: 80rpx;
+								line-height: 80rpx;
+								color:#000;
+								font-size:32rpx ;
+							}
+							
+							.content_font{
+								font-weight: normal;
+								color: #3d3d3d;
+								font-size: 26rpx;
+								line-height: 48rpx;
+								margin-top: 20rpx;
+							}
+							
+							.content_img{
+								width: 100%;
+								height: 315rpx ;
+								margin: 40rpx 0;
+									
+								image{
+									width: 100%;
+									height: 100%;
+								}
+							}
+							
+						}
+
+						
+						
+							
+					}
+
+					
+				}
+			}
+		}
+
+
+
+
+
+
+	}
+</style>
\ No newline at end of file
diff --git a/pages/neighborList/index.vue b/pages/neighborList/index.vue
new file mode 100644
index 0000000..23f4b00
--- /dev/null
+++ b/pages/neighborList/index.vue
@@ -0,0 +1,342 @@
+<template>
+	<view class="container">
+	   <Header :title="'邻里互助列表'"></Header>
+		<!-- 蓝色背景 -->
+		<view class="neighbor_head">
+		</view>
+	
+	
+		<!-- 白色底部区域 -->
+		<view class="neighbor_body">
+			<!-- 正式页面内容，但是需要留到90%的页面内容和旁边的间隙 -->
+			<view class="body">
+				<view class="text-with-block">
+					<view class="left">
+						<text class="text">邻里互助</text>
+						<view class="slanted-block"></view>
+					</view>
+	
+					<view class="right" @click="goPage('helpInfo')">
+						<view>+</view>
+	
+						<!-- <u-icon name="plus-circle" color="#fff" size="24"></u-icon> -->
+					</view>
+				</view>
+	
+				<view class="interact_body">
+					<view class="body_item" @click="goPage('neighborDetail')">
+						<view class="item_left">
+							<view class="left_title">
+								寻找拼车伙伴
+							</view>
+							<view class="left_font">
+								每天早晨7:30从社区出发前往政务中心上班，有同路的朋友可以拼车，分担车费
+							</view>
+							<view class="left_botton">
+								未解决
+							</view>
+	
+						</view>
+						<view class="item_right">
+							<view class="right_nav">
+								<image src="/static/imgs/index/nav.png" class="nav"></image>
+								<image src="/static/imgs/index/nav_bg.png" class="bg"></image>
+							</view>
+							<view class="right_name">
+								樱桃小丸子
+							</view>
+							<view class="right_date">
+								2025年3月24日
+							</view>
+	
+						</view>
+					</view>
+					<view class="body_item">
+						<view class="item_left">
+							<view class="left_title">
+								寻找拼车伙伴
+							</view>
+							<view class="left_font">
+								每天早晨7:30从社区出发前往政务中心上班，有同路的朋友可以拼车，分担车费
+							</view>
+							<view class="left_botton">
+								未解决
+							</view>
+	
+						</view>
+						<view class="item_right">
+							<view class="right_nav">
+								<image src="/static/imgs/index/nav.png" class="nav"></image>
+								<image src="/static/imgs/index/nav_bg.png" class="bg"></image>
+							</view>
+							<view class="right_name">
+								樱桃小丸子
+							</view>
+							<view class="right_date">
+								2025年3月24日
+							</view>
+	
+						</view>
+	
+					</view>
+					
+	
+				</view>
+			</view>
+		</view>
+
+		<!-- 引入底部 -->
+		<Footer></Footer>
+	</view>
+</template>
+
+<script>
+	import Header from '@/components/header_common.vue';
+	import Footer from '@/components/footer_common.vue';
+	export default {
+		components: {
+			Header,Footer
+		},
+		methods: {
+			// 跳转详情页面
+			goPage(page){
+				uni.navigateTo({
+				  url: `/pages/${page}/index`,
+				  // url: '/pages/helpInfo/index', 
+				  success: () => {
+				    console.log('切换到tabBar页面成功');
+				  },
+				  fail: (err) => {
+				    console.error('切换到tabBar页面失败:', err);
+				  }
+				});
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		// justify-content: center;
+		// background: #f8faff;
+		background: #f8faff;
+		// height: 100vh;
+		// padding: 70rpx 0;
+		// margin-top: 90rpx;
+		padding-bottom: 400rpx;
+
+		.neighbor_head {
+			width: 100%;
+			height: 360rpx;
+			opacity: 1;
+			background: linear-gradient(270deg, rgba(146, 161, 252, 1) 0%, rgba(181, 229, 255, 1) 100%);
+			position: relative;
+		}
+
+
+		.neighbor_body {
+			width: 100%;
+			// height: 300rpx;
+			background: #fff;
+			height: 650rpx;
+			position: absolute;
+			top: 340rpx;
+			z-index: 9;
+
+			.body {
+				width: 90%;
+				margin: 0 5%;
+				position: absolute;
+				top: -150rpx;
+				z-index: 99;
+
+				.text-with-block {
+					display: flex;
+					justify-content: space-between;
+					padding: 20rpx 0;
+					height: 50rpx;
+
+					.left {
+						.text {
+							font-size: 34rpx;
+							font-weight: bold;
+							color: #333;
+							position: relative;
+							z-index: 2;
+							padding-left: 50rpx;
+						}
+
+						.slanted-block {
+							position: absolute;
+							left: 120rpx;
+							top: 46rpx;
+							transform: translateX(-50%) skewX(-40deg);
+							width: 166rpx;
+							height: 24rpx;
+							background-color: #80B3FF;
+							z-index: 1;
+						}
+					}
+
+					.right {
+						font-size: 26rpx;
+						color: #3B8CFF;
+						text-decoration: none;
+						cursor: pointer;
+						// margin-top: 20rpx;
+						margin-right: 20rpx;
+
+						view {
+							color: #fff;
+							width: 32rpx;
+							height: 32rpx;
+							line-height: 28rpx;
+							border: 4rpx solid #fff;
+							border-radius: 50%;
+							text-align: center;
+							font-weight: 500;
+							font-size: 34rpx;
+						}
+					}
+				}
+
+				.interact_body {
+					// display:list-item;
+					grid-template-columns: repeat(2, 1fr);
+					grid-gap: 26rpx;
+					width: 100%;
+					margin-top: -20rpx;
+
+					.body_item {
+						// width: 80%;
+						margin: 40rpx auto;
+						// height: 400rpx;
+						background: #E8F3FF;
+						border-radius: 20rpx;
+						display: flex;
+						align-items: flex-start;
+						// gap: 20rpx;
+						padding: 20rpx 30rpx;
+
+						.item_left {
+							// flex: 1;
+							// display: flex;
+							// flex-direction: column;
+							// justify-content: space-between;
+							// gap: 10rpx;
+							width: 70%;
+							margin-right: 10%;
+
+							.left_title {
+								font-size: 32rpx;
+								font-weight: bold;
+								color: #333;
+								line-height: 80rpx;
+							}
+
+							.left_font {
+								font-size: 22rpx;
+								color: #3D3D3D;
+								line-height: 1.5;
+							}
+
+							.left_botton {
+
+								width: 134rpx;
+								height: 30rpx;
+								opacity: 1;
+								line-height: 30rpx;
+								padding: 10rpx 20rpx;
+								background-color: #3881FF;
+								color: #fff;
+								font-size: 24rpx;
+								text-align: center;
+								border-radius: 10rpx;
+								// width: fit-content;
+								cursor: pointer;
+								margin: 20rpx 0;
+							}
+
+							.end {
+								background: #9FA3AB;
+							}
+						}
+
+						.item_right {
+							width: 100rpx;
+							display: flex;
+							flex-direction: column;
+							align-items: center;
+							gap: 10rpx;
+							margin-top: 14rpx;
+
+							.right_nav {
+								width: 100rpx;
+								height: 100rpx;
+								background-color: #ccc;
+								border-radius: 50%;
+								/* 圆形头像 */
+								text-align: center;
+								line-height: 100rpx;
+								font-size: 24rpx;
+								color: #fff;
+								position: relative;
+
+								.nav {
+									position: absolute;
+									top: 0;
+									left: 0;
+									width: 100rpx;
+									height: 100rpx;
+									z-index: 2
+								}
+
+								.bg {
+									position: absolute;
+									z-index: 1;
+									top: 20rpx;
+									left: -118rpx;
+									width: 260rpx;
+									height: 260rpx;
+								}
+							}
+
+							.right_name {
+								width: 200rpx;
+								font-size: 24rpx;
+								font-weight: 900;
+								color: #333;
+								text-align: center;
+								// padding-left: 62rpx;
+							}
+
+							.right_date {
+								font-size: 24rpx;
+								color: #999;
+								width: 270rpx;
+								text-align: left;
+								padding-left: 62rpx;
+								margin-top: 12rpx;
+							}
+						}
+					}
+
+					.interact_more {
+						text-align: right;
+						color: #3B8CFF;
+						font-size: 24rpx;
+					}
+				}
+			}
+		}
+
+		
+
+		
+
+
+	}
+</style>
\ No newline at end of file
diff --git a/pages/service/index.vue b/pages/service/index.vue
index 81e8723..2c8efc7 100644
--- a/pages/service/index.vue
+++ b/pages/service/index.vue
@@ -14,7 +14,7 @@
 				<view class="slanted-block"></view>
 
 				<view class="function-area">
-					<view class="function-item">
+					<view class="function-item" @click="goPage('serviceTickets')">
 						<view class="icon">
 							<image src="/static/imgs/service/service_workorder.png"></image>
 						</view>
@@ -39,11 +39,11 @@
 		<view class="content_wapper">
 			<view class="text-with-block notice">
 				<view class="left">
-					<text class="text">社区公告</text>
+					<text class="text">社区通知</text>
 					<view class="slanted-block"></view>
 				</view>
 
-				<view class="right">
+				<view class="right" @click="goPage('serviceNoticeList')">
 					查看更多
 				</view>
 			</view>
@@ -96,7 +96,21 @@
 		onLoad() {
 
 		},
-		methods: {
+		methods: {
+			// 跳转页面
+			goPage(page){
+				console.log("==进来",page)
+				uni.navigateTo({
+				  url: `/pages/${page}/index`,
+				  // url: '/pages/helpInfo/index', 
+				  success: () => {
+				    console.log('切换到tabBar页面成功');
+				  },
+				  fail: (err) => {
+				    console.error('切换到tabBar页面失败:', err);
+				  }
+				});
+			},
 
 		}
 	}
diff --git a/pages/serviceNoticeDetail/index.vue b/pages/serviceNoticeDetail/index.vue
new file mode 100644
index 0000000..9acf7a4
--- /dev/null
+++ b/pages/serviceNoticeDetail/index.vue
@@ -0,0 +1,124 @@
+<template>
+	<view class="container">
+		<!-- 引入头部组件 -->
+		<Header :title="'社区公告'"></Header>
+		<view class="content">
+			<view class="content_wapper">
+				<h3 class="content_title">
+					小区电梯维修通知<text>2025-03-29</text>
+				</h3>
+				
+			</view>
+			
+			<view>
+				1232324435454545
+			</view>
+
+		</view>
+		<Footer></Footer>
+	</view>
+
+</template>
+
+<script>
+	import Header from '@/components/header_common.vue';
+	import Footer from '@/components/footer_common.vue';
+	export default {
+		components: {
+			Header,
+			Footer
+		},
+		data() {
+			return {
+				title: '',
+				content: '',
+				fileList: []
+			};
+		},
+		methods: {
+			handleBack() {
+				uni.navigateBack({
+					delta: 1 // 返回上一级页面
+				});
+			},
+			afterRead(event) {
+				// 读取完成后的回调函数
+				const {
+					file
+				} = event;
+				this.fileList.push(file);
+			},
+			publish() {
+				// 发布逻辑
+				console.log('发布:', this.title, this.content, this.fileList);
+			},
+			// 跳转详情页面
+			goPage(page){
+				uni.navigateTo({
+				  url: `/pages/${page}/index`,
+				  // url: '/pages/helpInfo/index', 
+				  success: () => {
+				    console.log('切换到tabBar页面成功');
+				  },
+				  fail: (err) => {
+				    console.error('切换到tabBar页面失败:', err);
+				  }
+				});
+			},
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.container {
+
+		width: 100%;
+		min-height: 100vh;
+		/* 占满整个视口高度 */
+		opacity: 1;
+		background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 250, 250, 0) 100%),
+			        linear-gradient(0deg, rgba(255, 241, 235, 1) 0%, rgba(192, 219, 250, 1) 100%);
+		position: relative;
+	 
+		.content {
+			width: 100%;
+			position: absolute;
+			margin-top: 200rpx;
+			border-top-left-radius: 30rpx;
+			border-top-right-radius: 30rpx;
+			background-color: rgba(255, 255, 255, 0.65);
+			padding-bottom: 200rpx;
+			.content_wapper{
+				width:100%;
+				background-color: rgba(128, 179, 237, 0.19);
+				border-top-left-radius: 30rpx;
+				border-top-right-radius: 30rpx;
+				height: 100rpx;
+				line-height: 100rpx;
+				
+				.content_title{
+					color:#3B8CFF;
+					font-weight: 500;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					padding: 0 30rpx;
+					font-size:28rpx ;
+					
+					text{
+						display: inline-block;
+						color: #7D7D7D;
+						width: 40%;
+						text-align: right;
+						font-size: 24rpx;
+						font-weight: normal;
+					}
+				}
+				
+			}
+			
+			
+		}
+
+	}
+</style>
\ No newline at end of file
diff --git a/pages/serviceNoticeList/index.vue b/pages/serviceNoticeList/index.vue
new file mode 100644
index 0000000..62742d1
--- /dev/null
+++ b/pages/serviceNoticeList/index.vue
@@ -0,0 +1,235 @@
+<template>
+	<view class="container">
+		<!-- 引入头部组件 -->
+		<Header :title="'社区公告'"></Header>
+		<view class="content">
+			<view class="content_wapper">
+				<view class="notice-list">
+					<view class="notice_item" @click="goPage('serviceNoticeDetail')">
+						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
+						<view class="notice-content">
+							<view class="notice-title">小区电梯维修通知</view>
+							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
+							<view class="notice-date">2025-03-29</view>
+						</view>
+					</view>
+					
+					<view class="notice_item">
+						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
+						<view class="notice-content">
+							<view class="notice-title">小区电梯维修通知</view>
+							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
+							<view class="notice-date">2025-03-29</view>
+						</view>
+					</view>
+					<view class="notice_item">
+						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
+						<view class="notice-content">
+							<view class="notice-title">小区电梯维修通知</view>
+							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
+							<view class="notice-date">2025-03-29</view>
+						</view>
+					</view>
+					<view class="notice_item">
+						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
+						<view class="notice-content">
+							<view class="notice-title">小区电梯维修通知</view>
+							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
+							<view class="notice-date">2025-03-29</view>
+						</view>
+					</view>
+					<view class="notice_item">
+						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
+						<view class="notice-content">
+							<view class="notice-title">小区电梯维修通知</view>
+							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
+							<view class="notice-date">2025-03-29</view>
+						</view>
+					</view>
+					<view class="notice_item">
+						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
+						<view class="notice-content">
+							<view class="notice-title">小区电梯维修通知</view>
+							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
+							<view class="notice-date">2025-03-29</view>
+						</view>
+					</view>
+					<view class="notice_item">
+						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
+						<view class="notice-content">
+							<view class="notice-title">小区电梯维修通知</view>
+							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
+							<view class="notice-date">2025-03-29</view>
+						</view>
+					</view>
+					<view class="notice_item">
+						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
+						<view class="notice-content">
+							<view class="notice-title">小区电梯维修通知</view>
+							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
+							<view class="notice-date">2025-03-29</view>
+						</view>
+					</view>
+					<view class="notice_item">
+						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
+						<view class="notice-content">
+							<view class="notice-title">小区电梯维修通知</view>
+							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
+							<view class="notice-date">2025-03-29</view>
+						</view>
+					</view>
+					<view class="notice_item">
+						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
+						<view class="notice-content">
+							<view class="notice-title">小区电梯维修通知</view>
+							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
+							<view class="notice-date">2025-03-29</view>
+						</view>
+					</view>
+					
+				
+				</view>
+				
+			</view>
+
+		</view>
+		<Footer></Footer>
+	</view>
+
+</template>
+
+<script>
+	import Header from '@/components/header_common.vue';
+	import Footer from '@/components/footer_common.vue';
+	export default {
+		components: {
+			Header,
+			Footer
+		},
+		data() {
+			return {
+				title: '',
+				content: '',
+				fileList: []
+			};
+		},
+		methods: {
+			handleBack() {
+				uni.navigateBack({
+					delta: 1 // 返回上一级页面
+				});
+			},
+			afterRead(event) {
+				// 读取完成后的回调函数
+				const {
+					file
+				} = event;
+				this.fileList.push(file);
+			},
+			publish() {
+				// 发布逻辑
+				console.log('发布:', this.title, this.content, this.fileList);
+			},
+			// 跳转详情页面
+			goPage(page){
+				uni.navigateTo({
+				  url: `/pages/${page}/index`,
+				  // url: '/pages/helpInfo/index', 
+				  success: () => {
+				    console.log('切换到tabBar页面成功');
+				  },
+				  fail: (err) => {
+				    console.error('切换到tabBar页面失败:', err);
+				  }
+				});
+			},
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.container {
+
+		width: 100%;
+		min-height: 100vh;
+		/* 占满整个视口高度 */
+		opacity: 1;
+		background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 250, 250, 0) 100%),
+			linear-gradient(0deg, rgba(255, 241, 235, 1) 0%, rgba(192, 219, 250, 1) 100%);
+		position: relative;
+	 
+		.content {
+			width: 100%;
+			position: absolute;
+			margin-top: 200rpx;
+			border-top-left-radius: 30rpx;
+			border-top-right-radius: 30rpx;
+			background-color: rgba(255, 255, 255, 0.65);
+			// padding-bottom: 60rpx;
+			   padding-bottom: 200rpx;
+			.content_wapper{
+				margin-top:60rpx ;
+				.notice-list {
+					display: flex;
+					flex-direction: column;
+					gap: 20rpx;
+				
+					.notice_item {
+						width: 90%;
+						margin: 0 auto;
+						display: flex;
+						border-radius: 10rpx;
+						overflow: hidden;
+						background: rgba(255, 255, 255, 1);
+						border: 1rpx solid rgba(59, 140, 255, 1);
+						box-shadow: 2rpx 2rpx 4rpx rgba(59, 140, 255, 0.25);
+				
+				
+				
+						.notice-image {
+							width: 180rpx;
+							height: 178rpx;
+							object-fit: cover;
+						}
+				
+						.notice-content {
+							flex: 1;
+							padding: 20rpx;
+							background-color: #fff;
+				
+							.notice-title {
+								font-size: 30rpx;
+								font-weight: bold;
+								color: #4a90e2;
+								margin-bottom: 10rpx;
+							}
+				
+							.notice-description {
+								font-size: 24rpx;
+								color: #7D7D7D;
+								margin-bottom: 10rpx;
+								height: 80rpx;
+								line-height: 40rpx;
+								display: -webkit-box;
+								-webkit-box-orient: vertical;
+								overflow: hidden;
+								text-overflow: ellipsis;
+								-webkit-line-clamp: 2;
+							}
+				
+							.notice-date {
+								font-size: 24rpx;
+								color: #7D7D7D;
+								text-align: right;
+							}
+						}
+					}
+				}
+				
+			}
+			
+			
+		}
+
+	}
+</style>
\ No newline at end of file
diff --git a/pages/serviceTickets/index.vue b/pages/serviceTickets/index.vue
new file mode 100644
index 0000000..09fe8eb
--- /dev/null
+++ b/pages/serviceTickets/index.vue
@@ -0,0 +1,216 @@
+<template>
+	<view class="container">
+		<!-- 引入头部组件 -->
+		<Header :title="'智能工单'"></Header>
+		<view class="conent">
+			<view class="form-item">
+				<view class="label">
+					<u-icon name="order" color="#3B8CFF" size="38"></u-icon>
+					工单内容
+				</view>
+				<textarea v-model="workOrderContent" placeholder="请输入..." style="width: 100%;" />
+				<view class="voice-icon">
+					<u-icon name="mic" color="#409EFF" size="36"></u-icon>
+				</view>
+			</view>
+			<!-- 上传照片/视频 -->
+			<view class="form-item">
+				<view class="label">
+
+					<u-icon name="photo" color="#3B8CFF" size="38"></u-icon>
+					上传照片/视频
+				</view>
+				<view class="upload-area">
+					<u-upload :action="uploadAction" :max-count="8" @on-success="handleUploadSuccess" width="200"
+						height="200"></u-upload>
+				</view>
+				<text class="note">注：照片可识别工单内容，支持分批上传，但最大数量为8</text>
+			</view>
+
+			<!-- 工单分类 -->
+			<view class="form-item" style="height: 60rpx;line-height: 50rpx;">
+				<view class="label" @click="showSelect = true">
+					工单类型
+					<view @click="showPicker = true" class="select-box">
+						{{ workOrderCategory || '请选择' }}
+						<u-icon name="arrow-down" color="#999" size="30"></u-icon>
+					</view>
+				</view>
+
+				
+				<u-picker :show="showSelect" :columns="categoryList" @confirm="handleConfirm"
+					@cancel="handleCancel"></u-picker>
+			</view>
+
+
+			<!-- 工单地点 -->
+			<view class="form-item" style="margin-bottom: 30rpx;height: 200rpx;">
+				<view class="label">
+					<u-icon name="map" color="#3B8CFF" size="38"></u-icon>
+					工作地点
+				</view>
+				<textarea v-model="workOrderLocation" placeholder="请输入..." style="width: 100%;" />
+				
+			</view>
+			
+
+			<!-- 预计上门时间 -->
+			<view class="form-item"  style="height: 200rpx;">
+				<view class="label">
+					<u-icon name="clock" color="#3B8CFF" size="38"></u-icon>
+					期望上门时间
+				</view>
+				<textarea v-model="expectedTime" placeholder="请输入..." style="width: 100%;" />
+				
+			</view>
+			
+			
+
+			<!-- 提交按钮 -->
+			<view class="submit-button">
+				<u-button type="primary" @click="handleSubmit">提交</u-button>
+			</view>
+
+		</view>
+		<!-- 工单内容 -->
+
+
+
+		<Footer></Footer>
+	</view>
+
+</template>
+
+<script>
+	import Header from '@/components/header_common.vue';
+	import Footer from '@/components/footer_common.vue';
+	export default {
+		components: {
+			Header,
+			Footer
+		},
+		data() {
+			return {
+				workOrderContent: '',
+				uploadAction: 'https://your-upload-api.com/upload', // 替换为你的上传接口地址
+				workOrderCategory: '',
+				showSelect: false, // 控制下拉框的显示状态
+				categoryList: [
+					['投诉', '维修']
+				],
+				workOrderLocation: '',
+				expectedTime: ''
+			};
+		},
+		methods: {
+			handleBack() {
+				uni.navigateBack({
+					delta: 1 // 返回上一级页面
+				});
+			},
+			handleUploadSuccess(res) {
+				console.log('上传成功:', res);
+			},
+			handleSubmit() {
+				// 处理提交逻辑
+				console.log('提交数据:', this.workOrderContent, this.workOrderCategory, this.workOrderLocation, this
+					.expectedTime);
+			},
+			// 用户点击“确定”时触发
+			handleConfirm(e) {
+				// const selectedIndex = e[0]; // 获取选中的索引
+				// this.workOrderCategory = this.categoryList[selectedIndex].label;
+				this.showSelect = false; // 关闭选择器
+			},
+			// 用户点击“取消”时触发
+			handleCancel() {
+				this.showSelect = false; // 关闭选择器
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.container {
+
+		width: 100%;
+		height: 130vh;
+	 //    padding-bottom: 400rpx;
+		// margin-bottom: 100rpx;
+		opacity: 1;
+		background: rgba(210, 227, 255, 1);
+ 
+		position: relative;
+
+		.conent {
+			width: 100%;
+			position: absolute;
+			margin-top: 200rpx;
+
+			.form-item {
+				margin-bottom: 20px;
+				height: 400rpx;
+				width: 95%;
+				margin: 0 auto;
+				margin-bottom: 20rpx;
+				background: #fff;
+				padding: 20rpx;
+				display: flex;
+				flex-direction: column;
+				position: relative;
+				// align-items: center;
+
+				.label {
+					font-size: 32rpx;
+					color: #333;
+					margin-bottom: 30px;
+					display: flex;
+					white-space: nowrap;
+				}
+				
+				.select-box {
+				  display: flex;
+				  align-items: center;
+				  // padding: 10rpx;
+				  // border: 2rpx solid #ccc;
+				  // border-radius: 8rpx;
+				  // min-width: 400rpx;
+				  justify-content: space-between;
+		          margin-left: 30rpx;
+				  color: #999;
+				}
+
+				.voice-icon {
+					position: absolute;
+					right: 30rpx;
+					bottom: 20rpx;
+				}
+
+				.upload-area {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					height: 100px;
+				}
+
+				.note {
+					font-size: 20rpx;
+					color: #999;
+					margin-top: 60rpx;
+				}
+
+				.submit-button {
+					text-align: center;
+					margin-top: 20px;
+				}
+
+			}
+		}
+
+
+
+
+
+
+	}
+</style>
\ No newline at end of file