139 lines
3.9 KiB
Vue
139 lines
3.9 KiB
Vue
<template>
|
|
<div class="account_systemMessage">
|
|
<div class="account_generalMessage_title modal_title_text">
|
|
<!-- <span>系统消息</span> -->
|
|
<div class="account_generalMessage_title_setting" @click="allRead">{{$t('account.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="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>
|
|
</div>
|
|
<div class="modal_title_text_intro">
|
|
{{ item.content.content }}
|
|
<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">
|
|
{{$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 { useStore } from "vuex";
|
|
import { useI18n } from 'vue-i18n'
|
|
export default defineComponent({
|
|
components:{
|
|
},
|
|
// 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 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)=>{
|
|
prop.setReadStatus(item).then((rv:any)=>{
|
|
item.isRead = 1
|
|
}).catch((err:any)=>{
|
|
})
|
|
}
|
|
let allRead = ()=>{
|
|
// emit('setAllmessage')
|
|
prop.setAllmessage().then(()=>{
|
|
accountMessage.dataList.forEach((item:any)=>{
|
|
item.isRead = 1
|
|
})
|
|
}).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,
|
|
loadingDom,
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.account_systemMessage{
|
|
width: 100%;
|
|
.account_generalMessage_item{
|
|
.account_generalMessage_item_title{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 2rem;
|
|
.account_generalMessage_item_title_text{
|
|
max-width: 80%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.modal_title_text_intro{
|
|
margin-left: 4rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|