fix

src/component/Account/message/system.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="account_systemMessage">
 		<div class="account_generalMessage_title modal_title_text">
-			<span>系统消息</span>
+			<!-- <span>系统消息</span> -->
 			<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
 		</div>
 		<div class="account_generalMessage_item modal_title_text" v-for="item in dataList" :key="item.id" @click="setRead(item)">
-			<a-badge dot></a-badge>
+			<a-badge :dot="item.isRead == 0"></a-badge>
 			<div class="account_generalMessage_item_title">
 				<div class="account_generalMessage_item_title_text" :title="item.content">{{ item.content.title }}</div>
 				<div class="modal_title_text_intro">{{ item.createTime }}</div>
@@ -15,6 +15,15 @@
 				<span v-if="item.content.link" class="account_generalMessage_item_link">{{ item.content.link }}</span>
 			</div>
 		</div>
+		<div class="account_generalMessage_item  modal_title_text" style="display:flex;justify-content: center;" v-if="dataList.length == 0 && isNoData">
+			没有任何信息~
+		</div>
+		<div class="page_loading_box" v-show="!isNoData">
+			<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
+			<span v-show="isShowMark">
+				<a-spin size="large" />
+			</span>
+		</div>
     </div>
 </template>
 <script lang="ts">
@@ -28,38 +37,74 @@ import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
     },
-	emits:['setReadStatus','setAllmessage'],
-    props:{
-    },
+	// emits:['putListData'],
+    props:['setReadStatus','setAllmessage','getHistory'],
     setup(prop,{emit}) {
 		const router = useRouter()
         const store = useStore();
 		let accountMessage = reactive({
 			dataList: [],
+			page:1,
+			size:10,
+			isNoData: false,
+			isShowMark: false,
 		})
-		let setmessageList = (data:any)=>{
-			console.log(data);
-			
-			data.content.forEach((item:any) => {
-				item.content = JSON.parse(item.content)
-			});
-			accountMessage.dataList = data.content
+		let loadingDom:any = ref(null)
+		let setmessageList = ()=>{
+			accountMessage.isShowMark = true
+			let data = {
+				page: accountMessage.page,
+				size: accountMessage.size,
+			}
+			prop.getHistory(data).then((rv:any)=>{
+				accountMessage.isShowMark = false
+				if(rv.content.length == 0) {
+					accountMessage.isNoData = true
+					return
+				}
+				rv.content.forEach((item:any) => {
+					item.content = JSON.parse(item.content)
+				});
+				accountMessage.dataList = rv.content
+			}).catch(() => {
+				accountMessage.isShowMark = false
+				accountMessage.isNoData = true
+			})
 		}
 		let setRead = (item:any)=>{
-			emit('setReadStatus',item)
+			prop.setReadStatus(item).then((rv:any)=>{
+				item.isRead = 1
+			}).catch((err:any)=>{
+			})
 		}
 		let allRead = ()=>{
-			emit('setAllmessage')
+			// emit('setAllmessage')
+			prop.setAllmessage().then(()=>{
+			}).catch((err:any)=>{
+			})
 		}
 		// provide('exhibitionList',exhibitionList)
-		
 		onMounted (()=>{
+			accountMessage.isNoData = false
+			accountMessage.page = 0
+			let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
+			new IntersectionObserver(
+				(entries, observer) => {
+					// 如果不是相交，则直接返回
+					// console.log(entries[0]);
+					if (!entries[0].intersectionRatio) return;
+					accountMessage.page+=1
+					setmessageList()
+				},
+				// { root:worksPage }
+			).observe(loadingDom.value);
 		})
         return{
            ...toRefs(accountMessage),
 		   setmessageList,
 		   setRead,
-		   allRead
+		   allRead,
+		   loadingDom,
         }
     },
     data(){