aida_front/src/component/Account/accountMessage.vue

<template>
    <div class="account_message">
		<div class="account_message_title modal_title_text">
			<div class="">
				消息中心
			</div>
			<div class="account_message_title_setting">设置</div>
		</div>
		<a-tabs class="account_message_body" v-model:activeKey="activeKey" @change="changeTabs">
			<a-tab-pane v-for="item in messageList" :key="item.key">
				<system v-if="item.key == 'system'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></system>
				<privateChat v-if="item.key == 'privateChat'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></privateChat>
				<comment v-if="item.key == 'comment'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></comment>
				<likeMessage v-if="item.key == 'like'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></likeMessage>
				<newFollow v-if="item.key == 'follow'" :ref="item.key" @setReadStatus="setReadStatus" @setAllmessage="setAllmessage"></newFollow>
				<!-- <newFollow v-if="item.key == 'service'" :ref="item.key"></newFollow> -->
				<template #tab>
					<a-badge :count="messageSystem.messageType[item.key]" >
					<span>{{item.title}}</span>
					</a-badge>
				</template>
			</a-tab-pane>
			
<!-- 			
			<a-tab-pane key="1" tab="系统消息">
				<system ref="system"></system>
			</a-tab-pane>
		
			<a-tab-pane key="3" tab="评论">
				<comment></comment>
			</a-tab-pane>
			<a-tab-pane key="4" tab="点赞">
				<likeMessage></likeMessage>
			</a-tab-pane>
			<a-tab-pane key="6" tab="新增粉丝">
				<newFollow ref="newFollow"></newFollow>
			</a-tab-pane>
			<a-tab-pane key="5" tab="客服">Content of Tab Pane 3</a-tab-pane> -->
		</a-tabs>
    </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 { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import system from '@/component/Account/message/system.vue'
import privateChat from '@/component/Account/message/privateChat.vue'
import newFollow from '@/component/Account/message/newFollow.vue'
import likeMessage from '@/component/Account/message/likeMessage.vue'
import comment from '@/component/Account/message/comment.vue'
import { useI18n } from 'vue-i18n'
export default defineComponent({
    components:{
		system,
		privateChat,
		newFollow,
		likeMessage,
		comment,
    },
    setup() {
		const router = useRouter()
        const store = useStore();
		let accountMessage = reactive({
			messageList:[
				{
					title:'系统消息',
					key:'system',
				},
				// {
				// 	title:'私信',
				// 	key:'privateChat',
				// },
				{
					title:'评论',
					key:'comment',
				},{
					title:'点赞',
					key:'like',
				},{
					title:'新增粉丝',
					key:'follow',
				},{
					title:'客服',
					key:'service',
				},
			],
			activeKey: '',
		})
		let domRefs:any = reactive({
			system:ref(null),
			comment:ref(null),
			like:ref(null),
			follow:ref(null),
			service:ref(null)
		})
		let messageSystem = computed(()=>{
			return store.state.UserHabit.messageSystem
		})
		// provide('exhibitionList',exhibitionList)
		let setUserData = ()=>{
			router.push({path:'/home/account/accountEdit'})
		}
		let changeTabs = (key:any)=>{
			let data = {
				page:1,
				size:10,
				type:key
			}
			getHistory(data)
		}
		let setReadStatus = (value:any)=>{
			if(value.isRead == 1)return
			let data = {
				type:accountMessage.activeKey,
				notificationIdList:value.id
			}
			Https.axiosPost(Https.httpUrls.setReadStatus,'',{params:data}).then((rv)=>{
				if(rv){
					console.log(rv);
					
					// store.commit('setMessageSystem',rv)
				}
			})
		}
		let setAllmessage = ()=>{
			let data = {
				type:accountMessage.activeKey
			}
			Https.axiosPost(Https.httpUrls.oneClickRead,'',{params:data}).then((rv)=>{

			})
		}
		let getHistory = (data:any)=>{
			nextTick(()=>{
				let dom = domRefs[data.type][0]
				if(dom.dataList && dom.dataList.length > 0)return
				Https.axiosPost(Https.httpUrls.getHistoryNotification,data).then((rv)=>{
					if(rv){
						console.log(domRefs[data.type][0],rv);
						domRefs[data.type][0].setmessageList(rv)
					}
				})
			})

		}
		onMounted(()=>{
			let key = accountMessage.messageList[0].key
			accountMessage.activeKey = key
			let data = {
				page:1,
				size:10,
				type:key
			}
			getHistory(data)
		})
        return{
           ...toRefs(accountMessage),
           ...toRefs(domRefs),
		   messageSystem,
		   setUserData,
		   setReadStatus,
		   changeTabs,
		   setAllmessage,
        }
    },
    data(){
        return{
            
        }
    },
})
</script>
<style lang="less" scoped>
.account_message{
	width: 100%;
	.account_message_title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 2rem 5rem;
		border-bottom: 1px solid #e9eaec;
		.account_message_title_setting{
			cursor: pointer;
		}
	}
	.account_message_body{
		padding-bottom: 3rem;
		:deep(.ant-tabs-nav){
			padding: 0rem 5rem;
			.ant-tabs-nav-wrap{
				.ant-tabs-tab-btn{
					font-size: 2.4rem;
				}
				.ant-tabs-tab-btn:active{
					color: #39215b;
				}
				.ant-tabs-tab-active{
					.ant-tabs-tab-btn{
						color: #39215b;
						font-weight: 900;
					}
				}
			}
			.ant-tabs-tab:hover{
				color: #39215b;
			}
			.ant-tabs-ink-bar{
				background: #39215b;
			}
		}
		:deep(.ant-tabs-content){
			height: 80rem;
			// min-height: 80rem;
			overflow-y: auto;
		}
	}
}
</style>
<style lang="less">
.account_generalMessage_title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2rem 5rem;
	border-bottom: 1px solid #e9eaec;
	box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
	border: 1px solid #e9eaec;
	border-radius: 5px;
	position: sticky;
	top: 0;
	background: #fff;
	margin-right: 5rem;
	margin-left: 5rem;
	.account_generalMessage_title_setting{
		cursor: pointer;
	}
}
.account_generalMessage_center{
	box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
    border: 1px solid #e9eaec;
    border-radius: 5px;
    padding: 2rem 0;
	margin-right: 5rem;
	margin-left: 5rem;
	.account_generalMessage_item{
		margin-right: 0;
		margin-left: 0;
		display: flex;
		border-radius: 0px;
		justify-content: space-between;
		align-items: center;
		padding: 2rem 5rem;
		border: none;
		border-bottom: 1px solid #e9eaec;
		box-shadow: none;
	}
}
.account_generalMessage_item{
	box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
	border: 1px solid #e9eaec;
	border-radius: 5px;
	padding: 5rem 5rem;
	margin-right: 5rem;
	margin-left: 5rem;
	position: relative;
	cursor: pointer;
	.ant-badge{
		position: absolute;
		transform: translate(-100%, 100%);
		top: 0;
		right: 0;
	}
	.account_generalMessage_item_link{
		color: #39215b;
		cursor: pointer;
		font-weight: 600;
	}
	.account_generalMessage_item_link:hover{
		text-decoration: underline;
	}
}
.account_generalMessage_item:hover{
	background: #efefef;
}
</style>