Signed-off-by: ljx <809268652@qq.com> 初步完成公告通知，协会动态，办事指引的列表页和详情页

pages/dynamic/dynamic/dynamic.vue

@@ -1,19 +1,180 @@
 <template>
-	<view>
-		
+	<view class="container">
+		<view class="list-box">
+			<view class="list-item-box" v-for="item in list" :key="item.id" @click="onDynamicClick(item)">
+				<view class="main-box">
+					<view class="icon-box">
+						<cover-image class="icon" :src="`/static/notice/22.png`"></cover-image>
+					</view>
+					<view class="content-box">
+						<view class="title">
+							{{item.title}}
+						</view>
+						<view class="text">
+							{{item.content}}
+						</view>
+					</view>
+					<view class="other-box">
+						<view class="date">
+							{{item.time}}
+						</view>
+					</view>
+				</view>
+				<view class="line-box"></view>
+			</view>
+		</view>
 	</view>
 </template>
 
-<script>
-	export default {
-		data() {
-			return {
-				
-			};
-		}
+<script setup>
+	import { ref } from 'vue'
+	import { onLoad } from '@dcloudio/uni-app'
+	
+	const uToast = ref()
+	
+	const searchInputStyle = {
+		backgroundColor: '#E5E5E5'
 	}
-</script>
+	const searchForm = ref({
+		keyword: ''
+	})
+	const list = ref([
+		  {
+		    "id": "1",
+		    "title": "参观科技博览会",
+		    "content": "20名协会成员于10月15日参加了全国科技博览会，收获颇丰。此次活动增进了大家对科技前沿的认识。",
+		    "time": "2023-10-16"
+		  },
+		  {
+		    "id": "2",
+		    "title": "举办文化交流活动",
+		    "content": "我们于10月22日成功举行了文化交流活动，各个文化团体分享了他们的传统和故事，气氛热烈。",
+		    "time": "2023-10-23"
+		  },
+		  {
+		    "id": "3",
+		    "title": "秋季运动会开幕",
+		    "content": "10月29日上午，协会在体育场举办了秋季运动会，吸引了众多会员参与，为大家提供了锻炼身体的机会。",
+		    "time": "2023-10-30"
+		  },
+		  {
+		    "id": "4",
+		    "title": "爱心捐赠活动",
+		    "content": "协会发起的爱心捐赠活动于11月1日正式启动，希望大家积极参与，共同为需要帮助的人贡献一份力量。",
+		    "time": "2023-11-01"
+		  },
+		  {
+		    "id": "5",
+		    "title": "庆祝协会成立周年",
+		    "content": "我们将于12月5日庆祝协会成立五周年，届时会举办庆祝晚会，欢迎所有成员莅临共庆佳节！",
+		    "time": "2023-11-02"
+		  }
 
-<style lang="scss">
+	])
+	function onDynamicClick(dynamic) {
+		uni.navigateTo({
+			url: `/pages/dynamic/dynamicDetail/dynamicDetail?id=${dynamic.id}&title=${dynamic.title}`
+		})
+	}
+</script>
 
+<style lang="scss" scoped>
+	.container {
+		height: 100vh;
+		width: 100vw;
+		background-color: $uni-bg-color;
+		padding: 0 20rpx;
+		
+		.search-box {
+			margin-bottom: 20rpx;
+			::v-deep(.u-search) {
+				background-color: #e5e5e5;
+				border-radius: 50rpx;
+				
+				.u-action {
+					width: 18%;
+					background-color: $uni-color-primary;
+					border-radius: 50rpx;
+					color: $uni-text-color-inverse;
+					margin-right: 8rpx;
+					font-size: 28rpx;
+					line-height: 50rpx;
+					letter-spacing: 3rpx;
+					text-align: center;
+				}
+			}
+		}
+	
+		.list-box {
+			padding: 0 20rpx;
+			.list-item-box {
+				.main-box {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					padding: 30rpx 0;
+					
+					&:active {
+						background-color: $uni-bg-color-hover;
+					}
+					.icon-box {
+						width: 15%;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						.icon {
+							width: 70rpx;
+							height: 70rpx;
+						}
+					}
+					.content-box {
+						width: 67%;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-around;
+						gap: 10rpx;
+						.title {
+							height: calc(70% - 5rpx);
+							font-size: $uni-title-font-size-2;
+							font-weight: bold;
+						}
+						.text {
+							height: calc(30% - 5rpx);
+							font-size: $uni-font-size-3;
+							color: $uni-text-color-grey;
+							@include text-overflow();
+						}
+					}
+					.other-box {
+						width: 18%;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-around;
+						align-items: center;
+						gap: 10rpx;
+						.date {
+							font-size: $uni-font-size-3;
+							color: $uni-text-color-grey;
+						}
+						.tag {
+							font-size: $uni-font-size-3;
+							width: 42rpx;
+							background-color: $uni-color-error;
+							color: $uni-text-color-inverse;
+							border-radius: 20rpx;
+							text-align: center;
+						}
+					}
+				}
+				.line-box {
+					height: 1rpx;
+					width: 80%;
+					background-color: #E5E5E5;
+					margin: 0 auto;
+				}
+			}
+		}
+	}
+		
+	
 </style>

pages/dynamic/dynamicDetail/dynamicDetail.vue

@@ -1,22 +1,76 @@
 <template>
-	<view>
-		
-	</view>
+  <view class="announcement-details">
+    <text class="title">{{ announcement.title }}</text>
+
+    <view class="content">
+      <div class="body" v-html="announcement.content"></div>
+    </view>
+
+    <text class="date">{{ formatDate(announcement.date) }}</text>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
-	}
+export default {
+  data() {
+    return {
+      announcement: {
+        title: "参观科技博览会",
+        content: "<p>20名协会成员于10月15日参加了全国科技博览会，收获颇丰。此次活动增进了大家对科技前沿的认识。</p><img src='/static/notice/ditu.png' />", // 假设这是后端返回的内容
+        date: "2023-10-16T00:00:00Z" // ISO格式日期
+      }
+    };
+  },
+  methods: {
+    formatDate(dateString) {
+      const options = { year: 'numeric', month: 'long', day: 'numeric' };
+      return new Date(dateString).toLocaleDateString('zh-CN', options);
+    }
+  }
+};
 </script>
 
-<style>
+<style scoped>
+.announcement-details {
+  padding: 20px;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100vh; /* 让页面高度撑满 */
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+  text-align: center; /* 标题居中 */
+  margin-bottom: 15px;
+}
+
+.content {
+  flex: 1; /* 占据剩余空间 */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start; /* 内容左对齐 */
+}
+
+.body {
+  font-size: 16px;
+  color: #555;
+  text-align: left; /* 内容左对齐 */
+}
+
+.body img{
+	width: 50%;
+	height: auto;
+}
+
+.date {
+  font-size: 14px;
+  color: #999;
+  text-align: right; /* 时间右对齐 */
+  margin-top: 10px; /* 与内容分离 */
+}
 
 </style>

pages/guide/guide/guide.vue

@@ -1,19 +1,180 @@
 <template>
-	<view>
-		
+	<view class="container">
+		<view class="list-box">
+			<view class="list-item-box" v-for="item in list" :key="item.id" @click="onGuideClick(item)">
+				<view class="main-box">
+					<view class="icon-box">
+						<cover-image class="icon" :src="`/static/notice/22.png`"></cover-image>
+					</view>
+					<view class="content-box">
+						<view class="title">
+							{{item.title}}
+						</view>
+						<view class="text">
+							{{item.content}}
+						</view>
+					</view>
+					<view class="other-box">
+						<view class="date">
+							{{item.time}}
+						</view>
+					</view>
+				</view>
+				<view class="line-box"></view>
+			</view>
+		</view>
 	</view>
 </template>
 
-<script>
-	export default {
-		data() {
-			return {
-				
-			};
-		}
+<script setup>
+	import { ref } from 'vue'
+	import { onLoad } from '@dcloudio/uni-app'
+	
+	const uToast = ref()
+	
+	const searchInputStyle = {
+		backgroundColor: '#E5E5E5'
+	}
+	const searchForm = ref({
+		keyword: ''
+	})
+	const list = ref([
+  {
+    "id": "1",
+    "title": "申请加入协会指南",
+    "content": "想要加入我们的协会吗？请填写申请表并提交至办公室，审核后会通知您结果。",
+    "time": "2023-10-01"
+  },
+  {
+    "id": "2",
+    "title": "报销流程说明",
+    "content": "如需进行费用报销，请准备相关发票，填写报销申请表并交由财务部门审批。",
+    "time": "2023-09-15"
+  },
+  {
+    "id": "3",
+    "title": "会议室预约流程",
+    "content": "欲预约会议室，请访问协会官网填写预约表格，确认后将收到预约确认邮件。",
+    "time": "2023-10-05"
+  },
+  {
+    "id": "4",
+    "title": "活动报名流程",
+    "content": "参加活动需要提前报名，可以通过协会公众号扫码填写报名表，截止日期为活动前两天。",
+    "time": "2023-10-10"
+  },
+  {
+    "id": "5",
+    "title": "投诉建议提交指引",
+    "content": "若有意见或建议，请下载投诉建议表，填写完毕后发送至协会邮箱，我们将及时处理并反馈您的意见。",
+    "time": "2023-10-12"
+  }
+]
+)
+	function onGuideClick(guide) {
+		uni.navigateTo({
+			url: `/pages/guide/guideDetail/guideDetail?id=${guide.id}&title=${guide.title}`
+		})
 	}
 </script>
 
-<style lang="scss">
-
+<style lang="scss" scoped>
+	.container {
+		height: 100vh;
+		width: 100vw;
+		background-color: $uni-bg-color;
+		padding: 0 20rpx;
+		
+		.search-box {
+			margin-bottom: 20rpx;
+			::v-deep(.u-search) {
+				background-color: #e5e5e5;
+				border-radius: 50rpx;
+				
+				.u-action {
+					width: 18%;
+					background-color: $uni-color-primary;
+					border-radius: 50rpx;
+					color: $uni-text-color-inverse;
+					margin-right: 8rpx;
+					font-size: 28rpx;
+					line-height: 50rpx;
+					letter-spacing: 3rpx;
+					text-align: center;
+				}
+			}
+		}
+	
+		.list-box {
+			padding: 0 20rpx;
+			.list-item-box {
+				.main-box {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					padding: 30rpx 0;
+					
+					&:active {
+						background-color: $uni-bg-color-hover;
+					}
+					.icon-box {
+						width: 15%;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						.icon {
+							width: 70rpx;
+							height: 70rpx;
+						}
+					}
+					.content-box {
+						width: 67%;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-around;
+						gap: 10rpx;
+						.title {
+							height: calc(70% - 5rpx);
+							font-size: $uni-title-font-size-2;
+							font-weight: bold;
+						}
+						.text {
+							height: calc(30% - 5rpx);
+							font-size: $uni-font-size-3;
+							color: $uni-text-color-grey;
+							@include text-overflow();
+						}
+					}
+					.other-box {
+						width: 18%;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-around;
+						align-items: center;
+						gap: 10rpx;
+						.date {
+							font-size: $uni-font-size-3;
+							color: $uni-text-color-grey;
+						}
+						.tag {
+							font-size: $uni-font-size-3;
+							width: 42rpx;
+							background-color: $uni-color-error;
+							color: $uni-text-color-inverse;
+							border-radius: 20rpx;
+							text-align: center;
+						}
+					}
+				}
+				.line-box {
+					height: 1rpx;
+					width: 80%;
+					background-color: #E5E5E5;
+					margin: 0 auto;
+				}
+			}
+		}
+	}
+		
+	
 </style>

pages/guide/guideDetail/guideDetail.vue

@@ -1,19 +1,76 @@
 <template>
-	<view>
-		
-	</view>
+  <view class="announcement-details">
+    <text class="title">{{ announcement.title }}</text>
+
+    <view class="content">
+      <div class="body" v-html="announcement.content"></div>
+    </view>
+
+    <text class="date">{{ formatDate(announcement.date) }}</text>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				
-			};
-		}
-	}
+export default {
+  data() {
+    return {
+      announcement: {
+        title: "申请加入协会指南",
+        content: "<p>想要加入我们的协会吗？请填写申请表并提交至办公室，审核后会通知您结果。</p><img src='/static/notice/ditu.png' />", // 假设这是后端返回的内容
+        date: "2023-10-01T00:00:00Z" // ISO格式日期
+      }
+    };
+  },
+  methods: {
+    formatDate(dateString) {
+      const options = { year: 'numeric', month: 'long', day: 'numeric' };
+      return new Date(dateString).toLocaleDateString('zh-CN', options);
+    }
+  }
+};
 </script>
 
-<style lang="scss">
+<style scoped>
+.announcement-details {
+  padding: 20px;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100vh; /* 让页面高度撑满 */
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+  text-align: center; /* 标题居中 */
+  margin-bottom: 15px;
+}
+
+.content {
+  flex: 1; /* 占据剩余空间 */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start; /* 内容左对齐 */
+}
+
+.body {
+  font-size: 16px;
+  color: #555;
+  text-align: left; /* 内容左对齐 */
+}
+
+.body img{
+	width: 50%;
+	height: auto;
+}
+
+.date {
+  font-size: 14px;
+  color: #999;
+  text-align: right; /* 时间右对齐 */
+  margin-top: 10px; /* 与内容分离 */
+}
 
 </style>

pages/notice/notice/notice.vue

@@ -1,19 +1,188 @@
 <template>
-	<view>
-		
+	<view class="container">
+<!-- 		<view class="search-box">
+			<u-search
+				v-model="searchForm.keyword"
+				:clearabled="true"
+				bg-color="#E5E5E5"
+				:input-style="searchInputStyle"
+				placeholder="请输入搜索内容"
+			></u-search>
+		</view> -->
+		<view class="list-box">
+			<view class="list-item-box" v-for="item in list" :key="item.id" @click="onNoticeClick(item)">
+				<view class="main-box">
+					<view class="icon-box">
+						<cover-image class="icon" :src="`/static/notice/notice.png`"></cover-image>
+					</view>
+					<view class="content-box">
+						<view class="title">
+							{{item.title}}
+						</view>
+						<view class="text">
+							{{item.content}}
+						</view>
+					</view>
+					<view class="other-box">
+						<view class="date">
+							{{item.time}}
+						</view>
+					</view>
+				</view>
+				<view class="line-box"></view>
+			</view>
+		</view>
 	</view>
 </template>
 
-<script>
-	export default {
-		data() {
-			return {
-				
-			};
+<script setup>
+	import { ref } from 'vue'
+	import { onLoad } from '@dcloudio/uni-app'
+	
+	const uToast = ref()
+	
+	const searchInputStyle = {
+		backgroundColor: '#E5E5E5'
+	}
+	const searchForm = ref({
+		keyword: ''
+	})
+	const list = ref([
+		{
+			id: '1',
+			title: '2023年度团队建设活动',
+			content: '为了增强团队凝聚力，定于10月30日举行年度团队建设活动。请全员准时参加，期待大家的积极参与！',
+			time: '2024-10-20'
+		},
+		{
+			id: '2',
+			title: "新员工入职培训",
+			time: "2024-10-18",
+			content: "欢迎新加入的同事们！我们将于10月25日举办入职培训，届时会介绍公司的文化及各部门职能。"
+		},
+		{
+			id: '3',
+			title: "系统维护通知",
+			time: "2023-10-15",
+			content: "为提升系统性能，我们将在10月22日进行系统维护，期间系统可能无法访问，请提前做好相关准备。"
+		},
+		{
+			id: '4',
+			title: "年度业绩总结会议",
+			time: "2023-11-01",
+			content: "请各部门准备年度业绩总结报告，并按时参加11月10日的总结会议，共同探讨未来发展计划。"
+		},
+		{
+			id: '5',
+			title: "义务植树活动",
+			time: "2023-10-12",
+			content: "我们将在10月28日组织义务植树活动，希望大家积极报名参加，一起为环境保护贡献一份力量。"
 		}
+	])
+	function onNoticeClick(notice) {
+		uni.navigateTo({
+			url: `/pages/notice/noticeDetail/noticeDetail?id=${notice.id}&title=${notice.title}`
+		})
 	}
 </script>
 
-<style lang="scss">
-
+<style lang="scss" scoped>
+	.container {
+		height: 100vh;
+		width: 100vw;
+		background-color: $uni-bg-color;
+		padding: 0 20rpx;
+		
+		.search-box {
+			margin-bottom: 20rpx;
+			::v-deep(.u-search) {
+				background-color: #e5e5e5;
+				border-radius: 50rpx;
+				
+				.u-action {
+					width: 18%;
+					background-color: $uni-color-primary;
+					border-radius: 50rpx;
+					color: $uni-text-color-inverse;
+					margin-right: 8rpx;
+					font-size: 28rpx;
+					line-height: 50rpx;
+					letter-spacing: 3rpx;
+					text-align: center;
+				}
+			}
+		}
+	
+		.list-box {
+			padding: 0 20rpx;
+			.list-item-box {
+				.main-box {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					padding: 30rpx 0;
+					
+					&:active {
+						background-color: $uni-bg-color-hover;
+					}
+					.icon-box {
+						width: 15%;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						.icon {
+							width: 70rpx;
+							height: 70rpx;
+						}
+					}
+					.content-box {
+						width: 67%;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-around;
+						gap: 10rpx;
+						.title {
+							height: calc(70% - 5rpx);
+							font-size: $uni-title-font-size-2;
+							font-weight: bold;
+						}
+						.text {
+							height: calc(30% - 5rpx);
+							font-size: $uni-font-size-3;
+							color: $uni-text-color-grey;
+							@include text-overflow();
+						}
+					}
+					.other-box {
+						width: 18%;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-around;
+						align-items: center;
+						gap: 10rpx;
+						.date {
+							font-size: $uni-font-size-3;
+							color: $uni-text-color-grey;
+						}
+						.tag {
+							font-size: $uni-font-size-3;
+							width: 42rpx;
+							background-color: $uni-color-error;
+							color: $uni-text-color-inverse;
+							border-radius: 20rpx;
+							text-align: center;
+						}
+					}
+				}
+				.line-box {
+					height: 1rpx;
+					width: 80%;
+					background-color: #E5E5E5;
+					margin: 0 auto;
+				}
+			}
+		}
+	}
+		
+	
 </style>

pages/notice/noticeDetail/noticeDetail.vue

@@ -1,19 +1,76 @@
 <template>
-	<view>
-		
-	</view>
+  <view class="announcement-details">
+    <text class="title">{{ announcement.title }}</text>
+
+    <view class="content">
+      <div class="body" v-html="announcement.content"></div>
+    </view>
+
+    <text class="date">{{ formatDate(announcement.date) }}</text>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				
-			};
-		}
-	}
+export default {
+  data() {
+    return {
+      announcement: {
+        title: "2023年度团队建设活动",
+        content: "<p>为了增强团队凝聚力，定于10月30日举行年度团队建设活动。</p><img src='/static/notice/ditu.png' />", // 假设这是后端返回的内容
+        date: "2023-10-20T00:00:00Z" // ISO格式日期
+      }
+    };
+  },
+  methods: {
+    formatDate(dateString) {
+      const options = { year: 'numeric', month: 'long', day: 'numeric' };
+      return new Date(dateString).toLocaleDateString('zh-CN', options);
+    }
+  }
+};
 </script>
 
-<style lang="scss">
+<style scoped>
+.announcement-details {
+  padding: 20px;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100vh; /* 让页面高度撑满 */
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+  text-align: center; /* 标题居中 */
+  margin-bottom: 15px;
+}
+
+.content {
+  flex: 1; /* 占据剩余空间 */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start; /* 内容左对齐 */
+}
+
+.body {
+  font-size: 16px;
+  color: #555;
+  text-align: left; /* 内容左对齐 */
+}
+
+.body img{
+	width: 50%;
+	height: auto;
+}
+
+.date {
+  font-size: 14px;
+  color: #999;
+  text-align: right; /* 时间右对齐 */
+  margin-top: 10px; /* 与内容分离 */
+}
 
 </style>