aida_front/src/component/HomePage/newPosted.vue

<template>
	<div class="newPosted_generalMessage_title modal_title_text">
		<span>动态</span>
		<!-- <div class="newPosted_generalMessage_title_setting pointer" @click="allRead">全部已读</div> -->
	</div>
	<div class="newPosted_generalMessage_center modal_title_text">
		<div class="newPosted_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
			<!-- <a-badge :dot="item.isRead == 0"></a-badge> -->
			<div class="newPosted_generalMessage_item_right">
				<div class="newPosted_generalMessage_item_img pointer" @click="openOtherUsers(item)">
					<img :src="item.avatar" alt="">
				</div>
				
			</div>
			<div class="newPosted_generalMessage_item_content">
				<div class="modal_title_text_intro">{{ item.userName }} </div>
				<div class="newPosted_generalMessage_item_content_title pointer" @click="openOtherWork(item)">{{ item.portfolioName }}</div>
				<div class="modal_title_text_intro">{{ item.createTime }}</div>
			</div>
			<div class="newPosted_generalMessage_item_left">
				<div class="newPosted_generalMessage_item_img">
					<img :src="item.canvas" alt="">
				</div>
			</div>
		</div>
		<div class="newPosted_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
			{{$t('account.dataNull')}}
		</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">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { useRouter,useRoute } from 'vue-router'
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
export default defineComponent({
    components:{
    },
    setup() {
		const router = useRouter()
        const store = useStore();
		let newPostedMessage = reactive({
			activeKey: ref('1'),
			dataList:[
			],
			page:1,
			size:10,
			isNoData: false,
			isShowMark: false,
		})
		let loadingDom:any = ref(null)
		let init = ()=>{
			newPostedMessage.isNoData = false
			newPostedMessage.page = 0
			new IntersectionObserver(
				(entries, observer) => {
					// 如果不是相交，则直接返回
					// console.log(entries[0]);
					if (!entries[0].intersectionRatio) return;
					newPostedMessage.page+=1
					getPostedHistory()
				},
				// { root:worksPage }
			).observe(loadingDom.value);
			let data = {
				type:'newPosted'
			}
			Https.axiosPost(Https.httpUrls.oneClickRead,'',{params:data}).then((rv)=>{
				store.commit('setMessageSystem',{newPosted:0})
			}).catch((err)=>{
			})
		}
		let getPostedHistory = ()=>{
			newPostedMessage.isShowMark = true
			let data = {
				page: newPostedMessage.page,
				size: newPostedMessage.size,
				type:'newPosted'
			}
			Https.axiosPost(Https.httpUrls.getHistoryNotification,data).then((rv)=>{
				newPostedMessage.isShowMark = false
				if(rv.content.length == 0) {
					newPostedMessage.isNoData = true
					return
				}
				newPostedMessage.dataList = rv.content
			}).catch(() => {
				newPostedMessage.isShowMark = false
				newPostedMessage.isNoData = true
			})
		}
		let openOtherUsers = (item:any)=>{
			const routeUrl = router.resolve({
				path:'/home/otherUsers',
				query:{
					userId:item.senderId
				}
			})
			window.open(routeUrl.href,'_blank')
		}
		let openOtherWork = (item:any)=>{
			const routeUrl = router.resolve({
				path:'/home/works',
				query:{
					workId:item.portfolioId
				}
			})
			window.open(routeUrl.href,'_blank')
		}
		onMounted(()=>{
			
		})
        return{
           ...toRefs(newPostedMessage),
		   loadingDom,
		   init,
		   getPostedHistory,
		   openOtherUsers,
		   openOtherWork,
        }
    },
    data(){
        return{
            
        }
    },
})
</script>
<style lang="less" scoped>
.modal_title_text{
	font-size: 2rem;
	line-height: 1.2;
	justify-content: space-between;
}
.pointer{
	cursor: pointer;
}
.newPosted_generalMessage_title{
	display: flex;
}
.newPosted_generalMessage_center{
	width: 100%;
	max-height: 40rem;
    overflow-y: auto;
	.newPosted_generalMessage_item{
		display: flex;
		padding: 1rem 0;
		align-items: center;
	}
	.newPosted_generalMessage_item_right{
		margin-right: 1rem;
		.newPosted_generalMessage_item_img{
			img{
				width: 5rem;
				border-radius: 50%;
				
			}
		}
	}
	.newPosted_generalMessage_item_left{
		height: 10rem;
		margin-left: auto;
		.newPosted_generalMessage_item_img{
			height: 100%;
			img{
				width: 5rem;
				max-height: 100%;
				object-fit: cover;
			}
		}
	}
	.newPosted_generalMessage_item_content{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-right: 1rem;
		.newPosted_generalMessage_item_content_title:hover{
			text-decoration: underline;
		}
		div{
			text-align: left
		}
	}
}
.page_loading_box{
	text-align: center;
	height: 50px;
	.page_loading{
		display: block;
		width: 50px;
		height: 50px;
		margin: 0 auto;
	}
}
</style>