修改: 获取通知和动态列表的接口，增加分页和搜索；指引增加分享

api/notice.js

@@ -1,13 +1,14 @@
 import request from '@/utils/request'
 
 // 获取通知公告列表
-export function getNoticeList(){
+export function getNoticeList(data){
 	return request({
 		'url': '/notice/list',
 		headers: {
 			isToken: true
 		},
-		'method': 'get'
+		data: data,
+		'method': 'post'
 	})
 }
 
@@ -23,13 +24,14 @@ export function getNoticeDetail(id){
 }
 
 // 获取协会动态列表
-export function getDynamicList(){
+export function getDynamicList(data){
 	return request({
 		'url': '/dynamic/list',
 		headers: {
 			isToken: true
 		},
-		'method': 'get'
+		data: data,
+		'method': 'post'
 	})
 }
 

pages/dynamic/dynamic/dynamic.vue

@@ -1,36 +1,26 @@
 <template>
 	<view class="container">
-		<!-- <u-sticky>
+		<u-sticky>
 			<view class="search-box">
-				<u-search
-					v-model="searchForm.keyword"
-					:clearabled="true"
-					bg-color="#E5E5E5"
-					:input-style="searchInputStyle"
-					placeholder="请输入搜索内容"
-					@search="onSearchConfirm"
-					@custom="onSearchConfirm"
-					@clear="onSearchClear"
-				></u-search>
+				<u-search v-model="searchForm.keyword" :clearabled="true" bg-color="#E5E5E5" placeholder="请输入搜索内容"
+					@search="onSearchConfirm" @custom="onSearchConfirm"></u-search>
 			</view>
-		</u-sticky> -->
+		</u-sticky>
 		<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">
-						<view class="iconfont icon-yingfengdongtai"></view>
-						<!-- <cover-image class="icon" :src="`${FILE_URL}/notice/icon-1.jpg`"></cover-image> -->
+						<!-- <view class="iconfont icon-yingfengdongtai"></view> -->
+						<image
+							mode="aspectFill"
+							style="width: 250rpx;height: 200rpx;"
+							:src="item.imgUrl ?? '/static/images/avatar-img/1.png'"></image>
 					</view>
 					<view class="content-box">
-						<view class="title">
+						<view class="title" style="margin-bottom: 30rpx;">
 							{{item.title}}
 						</view>
-						<!-- <view class="text">
-							{{item.desc}}
-						</view> -->
-					</view>
-					<view class="other-box">
-						<view class="date">
+						<view class="date" style="text-align: right;">
 							{{item.date}}
 						</view>
 					</view>
@@ -38,13 +28,20 @@
 				<view class="line-box"></view>
 			</view>
 		</view>
+		<u-loadmore :status="status" :load-text="loadText" style="margin: 20rpx 0;"/>
 	</view>
 </template>
 
 <script setup>
-	import { ref } from 'vue'
-	import { onLoad } from '@dcloudio/uni-app'
-	import { getDynamicList } from '@/api/notice.js'
+	import {
+		ref
+	} from 'vue'
+	import {
+		onLoad,onReachBottom
+	} from '@dcloudio/uni-app'
+	import {
+		getDynamicList
+	} from '@/api/notice.js'
 	const uToast = ref()
 	import configService from '@/utils/baseurl.js'
 	const FILE_URL = configService.FILE_URL;
@@ -52,67 +49,67 @@
 		backgroundColor: '#E5E5E5'
 	}
 	const searchForm = ref({
-		keyword: ''
+		keyword: '',
+		pageNumber: 1,
+		pageSize: 20
+	})
+	const total = ref(0);
+	const status = ref('loadmore');
+	const loadText = ref({
+		loadmore: '点击或上拉加载更多',
+		loading: '努力加载中',
+		nomore: '已加载全部数据'
 	})
-	const list = ref([
-		  {
-		    "id": "1",
-		    "title": "参观科技博览会",
-		    "desc": "20名协会成员于10月15日参加了全国科技博览会，收获颇丰。此次活动增进了大家对科技前沿的认识。",
-		    "date": "2023-10-16"
-		  },
-		  {
-		    "id": "2",
-		    "title": "举办文化交流活动",
-		    "desc": "我们于10月22日成功举行了文化交流活动，各个文化团体分享了他们的传统和故事，气氛热烈。",
-		    "date": "2023-10-23"
-		  },
-		  {
-		    "id": "3",
-		    "title": "秋季运动会开幕",
-		    "desc": "10月29日上午，协会在体育场举办了秋季运动会，吸引了众多会员参与，为大家提供了锻炼身体的机会。",
-		    "date": "2023-10-30"
-		  },
-		  {
-		    "id": "4",
-		    "title": "爱心捐赠活动",
-		    "desc": "协会发起的爱心捐赠活动于11月1日正式启动，希望大家积极参与，共同为需要帮助的人贡献一份力量。",
-		    "date": "2023-11-01"
-		  },
-		  {
-		    "id": "5",
-		    "title": "庆祝协会成立周年",
-		    "desc": "我们将于12月5日庆祝协会成立五周年，届时会举办庆祝晚会，欢迎所有成员莅临共庆佳节！",
-		    "date": "2023-11-02"
-		  }
-
-	])
+	const list = ref([])
+
 	function onDynamicClick(dynamic) {
 		uni.navigateTo({
 			url: `/pages/dynamic/dynamicDetail/dynamicDetail?id=${dynamic.id}&title=${dynamic.title}`
 		})
 	}
-	function init() {
-		getDynamicList().then(res=>{
-			if(res?.data){
-				list.value = res.data
+	function onSearchConfirm() {
+		// console.log(searchForm.value.keyword, 1211)
+		searchForm.value.pageNumber = 1
+		search()
+	}
+
+	function search() {
+		status.value = 'loading'
+		list.value = searchForm.value.pageNumber === 1 ? [] : list.value
+		getDynamicList(searchForm.value).then(res => {
+			total.value = res.count
+			list.value = [...list.value, ...res.data]
+			searchForm.value.pageNumber = searchForm.value.pageNumber + 1
+			if(total.value === list.value.length){
+				status.value = 'nomore' 
+			}else{
+				status.value = 'loadmore' 
 			}
+		}).catch(err=>{
+			status.value = 'nomore'
 		})
 	}
-	onLoad(()=>{
-		init();
+	onLoad(() => {
+		searchForm.value.pageNumber = 1
+		search()
+	})
+	onReachBottom(()=>{
+		if(status.value === 'nomore'){
+			return
+		}
+		search()
 	})
 </script>
 
 <style lang="scss" scoped>
 	.container {
-		// height: 100vh;
 		width: 100vw;
 		background-color: #FFFFFF;
 		padding: 0 20rpx env(safe-area-inset-bottom, 0);
 
 		.search-box {
 			margin-bottom: 20rpx;
+
 			::v-deep(.u-search) {
 				background-color: #e5e5e5;
 				border-radius: 50rpx;
@@ -133,41 +130,53 @@
 
 		.list-box {
 			padding: 0 20rpx;
+
 			.list-item-box {
 				.main-box {
 					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					padding: 30rpx 0;
+					// justify-content: space-between;
+					// align-items: center;
+					padding: 15rpx 0;
 
 					&:active {
 						background-color: $uni-bg-color-hover;
 					}
+
 					.icon-box {
-						width: 15%;
+						flex: 0 0 auto;
+						// width: 15%;
+						margin-right: 20rpx;
 						display: flex;
 						justify-content: center;
 						align-items: center;
+						image{
+							border-radius: 20rpx;
+						}
 						.icon {
 							width: 70rpx;
 							height: 70rpx;
 						}
-						.iconfont{
+
+						.iconfont {
 							font-size: 60rpx;
 							color: #0069f6;
 						}
 					}
+
 					.content-box {
-						width: 67%;
+						// width: 67%;
 						display: flex;
 						flex-direction: column;
 						justify-content: space-around;
 						gap: 10rpx;
+						width: 100%;
+
 						.title {
-							height: calc(70% - 5rpx);
+							// 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;
@@ -175,6 +184,7 @@
 							@include text-overflow();
 						}
 					}
+
 					.other-box {
 						width: 18%;
 						display: flex;
@@ -182,10 +192,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;
@@ -196,6 +208,7 @@
 						}
 					}
 				}
+
 				.line-box {
 					height: 1rpx;
 					width: 80%;
@@ -205,6 +218,4 @@
 			}
 		}
 	}
-
-
-</style>
+</style>

pages/guide/guideDetail/guideDetail.vue

@@ -13,11 +13,12 @@
 		ref
 	} from 'vue'
 	import {
-		onLoad
+		onLoad, onShareAppMessage, onShareTimeline
 	} from '@dcloudio/uni-app'
 	import {
 		getGuideDetail
 	} from '@/api/notice.js'
+	const currentId = ref(null);
 	const announcement = ref({
 		title: "",
 		content: "", // 假设这是后端返回的内容
@@ -44,8 +45,24 @@
 		const {
 			id
 		} = option
+		currentId.value = id
 		init(id)
 	})
+	
+	onShareAppMessage(async (res) => {
+		return {
+			title: announcement.value.title,
+			path: `/pages/guide/guideDetail/guideDetail?id=${currentId.value}`
+		};
+	})
+	
+	onShareTimeline(async () => {
+		// console.log(imgurl.value)
+		return {
+			title: announcement.value.title,
+			query: `id=${currentId.value}`
+		};
+	})
 </script>
 
 <style scoped>

pages/notice/notice/notice.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="container">
-		<!-- <u-sticky>
+		<u-sticky>
 			<view class="search-box">
 				<u-search
 					v-model="searchForm.keyword"
@@ -10,10 +10,9 @@
 					placeholder="请输入搜索内容"
 					@search="onSearchConfirm"
 					@custom="onSearchConfirm"
-					@clear="onSearchClear"
 				></u-search>
 			</view>
-		</u-sticky> -->
+		</u-sticky>
 		<view class="list-box">
 			<view class="list-item-box" v-for="item in list" :key="item.id" @click="onNoticeClick(item)">
 				<view class="main-box">
@@ -21,29 +20,31 @@
 						<view class="iconfont icon-a-tongzhigonggao"></view>
 						<!-- <cover-image class="icon" :src="`${FILE_URL}/notice/icon-2.jpg`"></cover-image> -->
 					</view>
-					<view class="content-box">
-						<view class="title">
-							{{item.title}}
+					<view style="width: 100%;display: flex;
+					justify-content: space-between;
+					align-items: center;gap: 10rpx;">
+						<view class="content-box">
+							<view class="title">
+								{{item.title}}
+							</view>
 						</view>
-						<!-- <view class="text">
-							{{item.desc}}
-						</view> -->
-					</view>
-					<view class="other-box">
-						<view class="date">
-							{{item.date}}
+						<view class="other-box">
+							<view class="date">
+								{{item.date}}
+							</view>
 						</view>
 					</view>
 				</view>
 				<view class="line-box"></view>
 			</view>
 		</view>
+		<u-loadmore :status="status" :load-text="loadText" style="margin: 20rpx 0;"/>
 	</view>
 </template>
 
 <script setup>
 	import { ref } from 'vue'
-	import { onLoad } from '@dcloudio/uni-app'
+	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
 	import { getNoticeList } from '@/api/notice.js'
 	import configService from '@/utils/baseurl.js'
 	const FILE_URL = configService.FILE_URL;
@@ -53,40 +54,18 @@
 		backgroundColor: '#E5E5E5'
 	}
 	const searchForm = ref({
-		keyword: ''
+		keyword: '',
+		pageNumber: 1,
+		pageSize: 20
 	})
-	const list = ref([
-		{
-			id: '1',
-			title: '2023年度团队建设活动',
-			desc: '为了增强团队凝聚力，定于10月30日举行年度团队建设活动。请全员准时参加，期待大家的积极参与！',
-			date: '2024-10-20'
-		},
-		{
-			id: '2',
-			title: "新员工入职培训",
-			date: "2024-10-18",
-			desc: "欢迎新加入的同事们！我们将于10月25日举办入职培训，届时会介绍公司的文化及各部门职能。"
-		},
-		{
-			id: '3',
-			title: "系统维护通知",
-			date: "2023-10-15",
-			desc: "为提升系统性能，我们将在10月22日进行系统维护，期间系统可能无法访问，请提前做好相关准备。"
-		},
-		{
-			id: '4',
-			title: "年度业绩总结会议",
-			date: "2023-11-01",
-			desc: "请各部门准备年度业绩总结报告，并按时参加11月10日的总结会议，共同探讨未来发展计划。"
-		},
-		{
-			id: '5',
-			title: "义务植树活动",
-			date: "2023-10-12",
-			desc: "我们将在10月28日组织义务植树活动，希望大家积极报名参加，一起为环境保护贡献一份力量。"
-		}
-	])
+	const total = ref(0);
+	const status = ref('loadmore');
+	const loadText = ref({
+		loadmore: '点击或上拉加载更多',
+		loading: '努力加载中',
+		nomore: '已加载全部数据'
+	})
+	const list = ref([])
 	function init() {
 		getNoticeList().then(res=>{
 			if(res?.data){
@@ -99,24 +78,52 @@
 			url: `/pages/notice/noticeDetail/noticeDetail?id=${notice.id}&title=${notice.title}`
 		})
 	}
-	onLoad(()=>{
-		init();
+	function onSearchConfirm() {
+		// console.log(searchForm.value.keyword, 1211)
+		searchForm.value.pageNumber = 1
+		search()
+	}
+	function search() {
+		status.value = 'loading'
+		list.value = searchForm.value.pageNumber === 1 ? [] : list.value
+		getNoticeList(searchForm.value).then(res => {
+			total.value = res.count
+			list.value = [...list.value, ...res.data]
+			searchForm.value.pageNumber = searchForm.value.pageNumber + 1
+			if(total.value === list.value.length){
+				status.value = 'nomore' 
+			}else{
+				status.value = 'loadmore' 
+			}
+		}).catch(err=>{
+			status.value = 'nomore'
+		})
+	}
+	onLoad(() => {
+		searchForm.value.pageNumber = 1
+		search()
+	})
+	onReachBottom(()=>{
+		if(status.value === 'nomore'){
+			return
+		}
+		search()
 	})
 </script>
 
 <style lang="scss" scoped>
 	.container {
-		// height: 100vh;
 		width: 100vw;
 		background-color: #FFFFFF;
 		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;
@@ -130,44 +137,52 @@
 				}
 			}
 		}
-
+	
 		.list-box {
 			padding: 0 20rpx;
+	
 			.list-item-box {
 				.main-box {
 					display: flex;
-					justify-content: space-between;
+					// justify-content: space-between;
 					align-items: center;
 					padding: 30rpx 0;
-
+	
 					&:active {
 						background-color: $uni-bg-color-hover;
 					}
+	
 					.icon-box {
+						flex: 0 0 auto;
 						width: 15%;
 						display: flex;
 						justify-content: center;
 						align-items: center;
+	
 						.icon {
 							width: 70rpx;
 							height: 70rpx;
 						}
-						.iconfont{
+	
+						.iconfont {
 							font-size: 60rpx;
 							color: #0069f6;
 						}
 					}
+	
 					.content-box {
-						width: 67%;
+						// 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;
@@ -175,17 +190,21 @@
 							@include text-overflow();
 						}
 					}
+	
 					.other-box {
+						flex: 0 0 auto;
 						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;
@@ -196,6 +215,7 @@
 						}
 					}
 				}
+	
 				.line-box {
 					height: 1rpx;
 					width: 80%;