办事指引、协会动态、通知公告联调接口

api/notice.js

@@ -0,0 +1,67 @@
+import request from '@/utils/request'
+
+// 获取通知公告列表
+export function getNoticeList(){
+	return request({
+		'url': '/notice/list',
+		headers: {
+			isToken: true
+		},
+		'method': 'get'
+	})
+}
+
+// 根据id获取公告详情
+export function getNoticeDetail(id){
+	return request({
+		'url': '/notice/detail?id='+id,
+		headers: {
+			isToken: true
+		},
+		'method': 'get'
+	})
+}
+
+// 获取协会动态列表
+export function getDynamicList(){
+	return request({
+		'url': '/dynamic/list',
+		headers: {
+			isToken: true
+		},
+		'method': 'get'
+	})
+}
+
+// 根据id获取动态详情 
+export function getDynamicDetail(id){
+	return request({
+		'url': '/dynamic/detail?id='+id,
+		headers: {
+			isToken: true
+		},
+		'method': 'get'
+	})
+}
+
+// 获取办事指引列表
+export function getGuideList(){
+	return request({
+		'url': '/guide/list',
+		headers: {
+			isToken: true
+		},
+		'method': 'get'
+	})
+}
+
+// 根据id获取动态详情 
+export function getGuideDetail(id){
+	return request({
+		'url': '/guide/detail?id='+id,
+		headers: {
+			isToken: true
+		},
+		'method': 'get'
+	})
+}

pages/dynamic/dynamic/dynamic.vue

@@ -29,7 +29,7 @@
 <script setup>
 	import { ref } from 'vue'
 	import { onLoad } from '@dcloudio/uni-app'
-	
+	import { getDynamicList } from '@/api/notice.js'
 	const uToast = ref()
 	
 	const searchInputStyle = {
@@ -76,14 +76,24 @@
 			url: `/pages/dynamic/dynamicDetail/dynamicDetail?id=${dynamic.id}&title=${dynamic.title}`
 		})
 	}
+	function init() {
+		getDynamicList().then(res=>{
+			if(res?.data){
+				list.value = res.data
+			}
+		})
+	}
+	onLoad(()=>{
+		init();
+	})
 </script>
 
 <style lang="scss" scoped>
 	.container {
-		height: 100vh;
+		// height: 100vh;
 		width: 100vw;
 		background-color: $uni-bg-color;
-		padding: 0 20rpx;
+		padding: 0 20rpx env(safe-area-inset-bottom, 0);
 		
 		.search-box {
 			margin-bottom: 20rpx;

pages/dynamic/dynamicDetail/dynamicDetail.vue

@@ -1,76 +1,105 @@
 <template>
-  <view class="announcement-details">
-    <text class="title">{{ announcement.title }}</text>
+	<view class="announcement-details">
+		<text class="title">{{ announcement.title }}</text>
+		<text class="date">{{ announcement.date }}</text>
+		<view class="content">
+			<u-parse :html="announcement.content" :selectable="true" :show-with-animation="true" style="width: 100%;"></u-parse>
+		</view>
+	</view>
+</template>
 
-    <view class="content">
-      <u-parse :html="announcement.content" :selectable="true"></u-parse>
-    </view>
+<script setup>
+	import {
+		ref
+	} from 'vue'
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
+	import {
+		getDynamicDetail
+	} from '@/api/notice.js'
+	const announcement = ref({
+		title: "",
+		content: "", // 假设这是后端返回的内容
+		date: "" // ISO格式日期
+	})
 
-    <text class="date">{{ formatDate(announcement.date) }}</text>
-  </view>
-</template>
+	function formatDate(dateString) {
+		const options = {
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric'
+		};
+		return new Date(dateString).toLocaleDateString('zh-CN', options);
+	}
 
-<script>
-export default {
-  data() {
-    return {
-      announcement: {
-        title: "参观科技博览会",
-        content: "<p>20名协会成员于10月15日参加了全国科技博览会，收获颇丰。此次活动增进了大家对科技前沿的认识。</p><img src='https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/notice/ditu.jpg' />", // 假设这是后端返回的内容
-        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);
-    }
-  }
-};
+	function init(id) {
+		getDynamicDetail(id).then(res => {
+			if (res?.data) {
+				announcement.value = res.data
+			}
+		})
+	}
+	onLoad((option) => {
+		const {
+			id
+		} = option
+		init(id)
+	})
 </script>
 
 <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;
-}
+	.announcement-details {
+		padding: 20px;
+		background-color: #ffffff;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		/* height: 100vh; */
+		/* 让页面高度撑满 */
+		
+		margin-bottom: env(safe-area-inset-bottom, 0);
+	}
 
-.content {
-  flex: 1; /* 占据剩余空间 */
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start; /* 内容左对齐 */
-}
+	.title {
+		font-size: 24px;
+		font-weight: bold;
+		color: #333;
+		text-align: center;
+		/* 标题居中 */
+		margin-bottom: 15px;
+	}
 
-.body {
-  font-size: 16px;
-  color: #555;
-  text-align: left; /* 内容左对齐 */
-}
+	.content {
+		flex: 1;
+		/* 占据剩余空间 */
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		/* 内容左对齐 */
+	}
 
-.body img{
-	width: 50%;
-	height: auto;
-}
+	.body {
+		font-size: 16px;
+		color: #555;
+		text-align: left;
+		/* 内容左对齐 */
+	}
 
-.date {
-  font-size: 14px;
-  color: #999;
-  text-align: right; /* 时间右对齐 */
-  margin-top: 10px; /* 与内容分离 */
-}
+	.body img {
+		width: 50%;
+		height: auto;
+	}
 
-</style>
+	.date {
+		font-size: 14px;
+		color: #999;
+		text-align: right;
+		/* 时间右对齐 */
+		margin-top: 10px;
+		/* 与内容分离 */
+	}
+	
+	/* 全局样式穿透 */
+	
+</style>

pages/guide/guide/guide.vue

@@ -4,7 +4,8 @@
 			<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="`https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/notice/icon-1.jpg`"></cover-image>
+						<cover-image class="icon"
+							:src="`https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/notice/icon-1.jpg`"></cover-image>
 					</view>
 					<view class="content-box">
 						<view class="title">
@@ -27,50 +28,64 @@
 </template>
 
 <script setup>
-	import { ref } from 'vue'
-	import { onLoad } from '@dcloudio/uni-app'
-	
+	import {
+		ref
+	} from 'vue'
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
+	import { getGuideList } from '@/api/notice.js'
 	const uToast = ref()
-	
+
 	const searchInputStyle = {
 		backgroundColor: '#E5E5E5'
 	}
 	const searchForm = ref({
 		keyword: ''
 	})
-	const list = ref([
-  {
-    "id": "1",
-    "title": "申请加入协会指南",
-    "desc": "想要加入我们的协会吗？请填写申请表并提交至办公室，审核后会通知您结果。",
-    "date": "2023-10-01"
-  },
-  {
-    "id": "2",
-    "title": "报销流程说明",
-    "desc": "如需进行费用报销，请准备相关发票，填写报销申请表并交由财务部门审批。",
-    "date": "2023-09-15"
-  },
-  {
-    "id": "3",
-    "title": "会议室预约流程",
-    "desc": "欲预约会议室，请访问协会官网填写预约表格，确认后将收到预约确认邮件。",
-    "date": "2023-10-05"
-  },
-  {
-    "id": "4",
-    "title": "活动报名流程",
-    "desc": "参加活动需要提前报名，可以通过协会公众号扫码填写报名表，截止日期为活动前两天。",
-    "date": "2023-10-10"
-  },
-  {
-    "id": "5",
-    "title": "投诉建议提交指引",
-    "desc": "若有意见或建议，请下载投诉建议表，填写完毕后发送至协会邮箱，我们将及时处理并反馈您的意见。",
-    "date": "2023-10-12"
-  }
-]
-)
+	const list = ref([{
+			"id": "1",
+			"title": "申请加入协会指南",
+			"desc": "想要加入我们的协会吗？请填写申请表并提交至办公室，审核后会通知您结果。",
+			"date": "2023-10-01"
+		},
+		{
+			"id": "2",
+			"title": "报销流程说明",
+			"desc": "如需进行费用报销，请准备相关发票，填写报销申请表并交由财务部门审批。",
+			"date": "2023-09-15"
+		},
+		{
+			"id": "3",
+			"title": "会议室预约流程",
+			"desc": "欲预约会议室，请访问协会官网填写预约表格，确认后将收到预约确认邮件。",
+			"date": "2023-10-05"
+		},
+		{
+			"id": "4",
+			"title": "活动报名流程",
+			"desc": "参加活动需要提前报名，可以通过协会公众号扫码填写报名表，截止日期为活动前两天。",
+			"date": "2023-10-10"
+		},
+		{
+			"id": "5",
+			"title": "投诉建议提交指引",
+			"desc": "若有意见或建议，请下载投诉建议表，填写完毕后发送至协会邮箱，我们将及时处理并反馈您的意见。",
+			"date": "2023-10-12"
+		}
+	])
+	
+	function init() {
+		getGuideList().then(res=>{
+			if(res?.data){
+				list.value = res.data
+			}
+		})
+	}
+	onLoad(()=>{
+		init();
+	})
+	
 	function onGuideClick(guide) {
 		uni.navigateTo({
 			url: `/pages/guide/guideDetail/guideDetail?id=${guide.id}&title=${guide.title}`
@@ -83,14 +98,14 @@
 		height: 100vh;
 		width: 100vw;
 		background-color: $uni-bg-color;
-		padding: 0 20rpx;
-		
+		padding: 0 20rpx env(safe-area-inset-bottom, 0);
 		.search-box {
 			margin-bottom: 20rpx;
+
 			::v-deep(.u-search) {
 				background-color: #e5e5e5;
 				border-radius: 50rpx;
-				
+
 				.u-action {
 					width: 18%;
 					background-color: $uni-color-primary;
@@ -104,40 +119,46 @@
 				}
 			}
 		}
-	
+
 		.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;
@@ -145,6 +166,7 @@
 							@include text-overflow();
 						}
 					}
+
 					.other-box {
 						width: 18%;
 						display: flex;
@@ -152,10 +174,12 @@
 						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;
@@ -166,6 +190,7 @@
 						}
 					}
 				}
+
 				.line-box {
 					height: 1rpx;
 					width: 80%;
@@ -175,6 +200,4 @@
 			}
 		}
 	}
-		
-	
-</style>
+</style>

pages/guide/guideDetail/guideDetail.vue

@@ -1,76 +1,105 @@
 <template>
-  <view class="announcement-details">
-    <text class="title">{{ announcement.title }}</text>
+	<view class="announcement-details">
+		<text class="title">{{ announcement.title }}</text>
+		<text class="date">{{ announcement.date }}</text>
+		<view class="content">
+			<u-parse :html="announcement.content" :selectable="true" :show-with-animation="true" style="width: 100%;"></u-parse>
+		</view>
+	</view>
+</template>
 
-    <view class="content">
-      <u-parse :html="announcement.content" :selectable="true"></u-parse>
-    </view>
+<script setup>
+	import {
+		ref
+	} from 'vue'
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
+	import {
+		getGuideDetail
+	} from '@/api/notice.js'
+	const announcement = ref({
+		title: "",
+		content: "", // 假设这是后端返回的内容
+		date: "" // ISO格式日期
+	})
 
-    <text class="date">{{ formatDate(announcement.date) }}</text>
-  </view>
-</template>
+	function formatDate(dateString) {
+		const options = {
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric'
+		};
+		return new Date(dateString).toLocaleDateString('zh-CN', options);
+	}
 
-<script>
-export default {
-  data() {
-    return {
-      announcement: {
-        title: "申请加入协会指南",
-        content: "<p>想要加入我们的协会吗？请填写申请表并提交至办公室，审核后会通知您结果。</p><img src='https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/notice/ditu.jpg' />", // 假设这是后端返回的内容
-        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);
-    }
-  }
-};
+	function init(id) {
+		getGuideDetail(id).then(res => {
+			if (res?.data) {
+				announcement.value = res.data
+			}
+		})
+	}
+	onLoad((option) => {
+		const {
+			id
+		} = option
+		init(id)
+	})
 </script>
 
 <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;
-}
+	.announcement-details {
+		padding: 20px;
+		background-color: #ffffff;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		/* height: 100vh; */
+		/* 让页面高度撑满 */
+		
+		margin-bottom: env(safe-area-inset-bottom, 0);
+	}
 
-.content {
-  flex: 1; /* 占据剩余空间 */
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start; /* 内容左对齐 */
-}
+	.title {
+		font-size: 24px;
+		font-weight: bold;
+		color: #333;
+		text-align: center;
+		/* 标题居中 */
+		margin-bottom: 15px;
+	}
 
-.body {
-  font-size: 16px;
-  color: #555;
-  text-align: left; /* 内容左对齐 */
-}
+	.content {
+		flex: 1;
+		/* 占据剩余空间 */
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		/* 内容左对齐 */
+	}
 
-.body img{
-	width: 50%;
-	height: auto;
-}
+	.body {
+		font-size: 16px;
+		color: #555;
+		text-align: left;
+		/* 内容左对齐 */
+	}
 
-.date {
-  font-size: 14px;
-  color: #999;
-  text-align: right; /* 时间右对齐 */
-  margin-top: 10px; /* 与内容分离 */
-}
+	.body img {
+		width: 50%;
+		height: auto;
+	}
 
-</style>
+	.date {
+		font-size: 14px;
+		color: #999;
+		text-align: right;
+		/* 时间右对齐 */
+		margin-top: 10px;
+		/* 与内容分离 */
+	}
+	
+	/* 全局样式穿透 */
+	
+</style>

pages/index/index.vue

@@ -28,7 +28,7 @@
 					<u-section title="课程预告" sub-title="查看更多" sub-color="#000000"></u-section>
 				</template>
 				<template v-slot:body>
-					<lg-swiper v-if="reportList.length!=0" :sildeItems="courseList" @swiperClick="swiperClick" image="courseImg"  title="courseName"></lg-swiper>
+					<lg-swiper v-if="courseList.length!=0" :sildeItems="courseList" @swiperClick="swiperClick" image="courseImg"  title="courseName"></lg-swiper>
 					<u-empty text="暂无内容" mode="data" v-else></u-empty>
 				</template>
 			</u-card>
@@ -269,8 +269,10 @@
 	
 	function init() {
 		homeCourseList().then(res=>{
+			// console.log(1000, res.data)
 			if(res?.data){
 				courseList.value = res.data
+				console.log(courseList.value)
 			}
 		})
 		homeReportList().then(res=>{

pages/notice/notice/notice.vue

@@ -38,7 +38,7 @@
 <script setup>
 	import { ref } from 'vue'
 	import { onLoad } from '@dcloudio/uni-app'
-	
+	import { getNoticeList } from '@/api/notice.js'
 	const uToast = ref()
 	
 	const searchInputStyle = {
@@ -79,19 +79,29 @@
 			desc: "我们将在10月28日组织义务植树活动，希望大家积极报名参加，一起为环境保护贡献一份力量。"
 		}
 	])
+	function init() {
+		getNoticeList().then(res=>{
+			if(res?.data){
+				list.value = res.data
+			}
+		})
+	}
 	function onNoticeClick(notice) {
 		uni.navigateTo({
 			url: `/pages/notice/noticeDetail/noticeDetail?id=${notice.id}&title=${notice.title}`
 		})
 	}
+	onLoad(()=>{
+		init();
+	})
 </script>
 
 <style lang="scss" scoped>
 	.container {
-		height: 100vh;
+		// height: 100vh;
 		width: 100vw;
 		background-color: $uni-bg-color;
-		padding: 0 20rpx;
+		padding: 0 20rpx env(safe-area-inset-bottom, 0);
 		
 		.search-box {
 			margin-bottom: 20rpx;

pages/notice/noticeDetail/noticeDetail.vue

@@ -1,76 +1,105 @@
 <template>
-  <view class="announcement-details">
-    <text class="title">{{ announcement.title }}</text>
+	<view class="announcement-details">
+		<text class="title">{{ announcement.title }}</text>
+		<text class="date">{{ announcement.date }}</text>
+		<view class="content">
+			<u-parse :html="announcement.content" :selectable="true" :show-with-animation="true" style="width: 100%;"></u-parse>
+		</view>
+	</view>
+</template>
 
-    <view class="content">
-      <u-parse :html="announcement.content" :selectable="true"></u-parse>
-    </view>
+<script setup>
+	import {
+		ref
+	} from 'vue'
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
+	import {
+		getNoticeDetail
+	} from '@/api/notice.js'
+	const announcement = ref({
+		title: "",
+		content: "", // 假设这是后端返回的内容
+		date: "" // ISO格式日期
+	})
 
-    <text class="date">{{ formatDate(announcement.date) }}</text>
-  </view>
-</template>
+	function formatDate(dateString) {
+		const options = {
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric'
+		};
+		return new Date(dateString).toLocaleDateString('zh-CN', options);
+	}
 
-<script>
-export default {
-  data() {
-    return {
-      announcement: {
-        title: "2023年度团队建设活动",
-        content: "<p>为了增强团队凝聚力，定于10月30日举行年度团队建设活动。</p><img src='https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/notice/ditu.jpg' />", // 假设这是后端返回的内容
-        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);
-    }
-  }
-};
+	function init(id) {
+		getNoticeDetail(id).then(res => {
+			if (res?.data) {
+				announcement.value = res.data
+			}
+		})
+	}
+	onLoad((option) => {
+		const {
+			id
+		} = option
+		init(id)
+	})
 </script>
 
 <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;
-}
+	.announcement-details {
+		padding: 20px;
+		background-color: #ffffff;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		/* height: 100vh; */
+		/* 让页面高度撑满 */
+		
+		margin-bottom: env(safe-area-inset-bottom, 0);
+	}
 
-.content {
-  flex: 1; /* 占据剩余空间 */
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start; /* 内容左对齐 */
-}
+	.title {
+		font-size: 24px;
+		font-weight: bold;
+		color: #333;
+		text-align: center;
+		/* 标题居中 */
+		margin-bottom: 15px;
+	}
 
-.body {
-  font-size: 16px;
-  color: #555;
-  text-align: left; /* 内容左对齐 */
-}
+	.content {
+		flex: 1;
+		/* 占据剩余空间 */
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		/* 内容左对齐 */
+	}
 
-.body img{
-	width: 50%;
-	height: auto;
-}
+	.body {
+		font-size: 16px;
+		color: #555;
+		text-align: left;
+		/* 内容左对齐 */
+	}
 
-.date {
-  font-size: 14px;
-  color: #999;
-  text-align: right; /* 时间右对齐 */
-  margin-top: 10px; /* 与内容分离 */
-}
+	.body img {
+		width: 50%;
+		height: auto;
+	}
 
-</style>
+	.date {
+		font-size: 14px;
+		color: #999;
+		text-align: right;
+		/* 时间右对齐 */
+		margin-top: 10px;
+		/* 与内容分离 */
+	}
+	
+	/* 全局样式穿透 */
+	
+</style>