fix

src/component/Account/accountFollowFans.vue

@@ -1,44 +1,110 @@
 <template>
-    <div class="account_message">
-		<div class="account_message_title modal_title_text">
+    <div class="account_followFans">
+		<div class="account_followFans_title modal_title_text">
 			<div class="">
-				消息中心
+				互动
 			</div>
-			<div class="account_message_title_setting">设置</div>
+			<div class="account_followFans_title_setting">设置</div>
 		</div>
-		<a-tabs class="account_message_body" v-model:activeKey="activeKey">
-			<a-tab-pane key="1" tab="系统消息">Content of Tab Pane 1</a-tab-pane>
-			<a-tab-pane key="2" tab="私信" force-render>Content of Tab Pane 2</a-tab-pane>
-			<a-tab-pane key="3" tab="评论">Content of Tab Pane 3</a-tab-pane>
-			<a-tab-pane key="4" tab="点赞">Content of Tab Pane 3</a-tab-pane>
-			<a-tab-pane key="5" tab="客服">Content of Tab Pane 3</a-tab-pane>
+		<a-tabs class="account_followFans_body" v-model:activeKey="activeKey" @change="changeTabs">
+			<a-tab-pane v-for="item in messageList" :key="item.key">
+				<follow v-if="item.key == 'follow'" :ref="item.key"></follow>
+				<fans v-if="item.key == 'fans'" :ref="item.key"></fans>
+				<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} from 'vue'
+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 follow from '@/component/Account/followFans/follow.vue'
+import fans from '@/component/Account/followFans/fans.vue'
 import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
+		follow,
+		fans,
     },
     setup() {
 		const router = useRouter()
         const store = useStore();
 		let accountMessage = reactive({
-			activeKey: ref('1'),
+			messageList:[
+				{
+					title:'关注的人',
+					key:'follow',
+				},
+				{
+					title:'粉丝',
+					key:'fans',
+				},
+				
+			],
+			activeKey: '',
 		})
-		// provide('exhibitionList',exhibitionList)
-		let setUserData = ()=>{
-			router.push({path:'/home/account/accountEdit'})
+		let domRefs:any = reactive({
+			follow:ref(null),
+			fans:ref(null),
+		})
+		let messageSystem = computed(()=>{
+			return store.state.UserHabit.messageSystem
+		})
+		let changeTabs = (key:any)=>{
 		}
+		let setReadStatus = (value:any)=>{
+			return new Promise((resolve,reject)=>{
+				if(value.isRead == 1)return reject('')
+				let data = {
+					type:accountMessage.activeKey,
+					notificationIdList:value.id
+				}
+				Https.axiosPost(Https.httpUrls.setReadStatus,'',{params:data}).then((rv)=>{
+					if(rv){
+						resolve(rv)
+						// store.commit('setMessageSystem',rv)
+					}
+				}).catch((err)=>{
+					reject(err)
+				})
+			})
+			
+		}
+		
+		onMounted(()=>{
+			let key = accountMessage.messageList[0].key
+			accountMessage.activeKey = key
+		})
         return{
            ...toRefs(accountMessage),
-		   setUserData,
+           ...toRefs(domRefs),
+		   messageSystem,
+		   setReadStatus,
+		   changeTabs,
         }
     },
     data(){
@@ -49,22 +115,29 @@ export default defineComponent({
 })
 </script>
 <style lang="less" scoped>
-.account_message{
+.account_followFans{
 	width: 100%;
-	.account_message_title{
+	.account_followFans_title{
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		padding: 2rem 5rem;
 		border-bottom: 1px solid #e9eaec;
-		.account_message_title_setting{
+		.account_followFans_title_setting{
 			cursor: pointer;
 		}
 	}
-	.account_message_body{
-		padding: 0rem 5rem;
+	.account_followFans_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;
@@ -79,6 +152,11 @@ export default defineComponent({
 				background: #39215b;
 			}
 		}
+		:deep(.ant-tabs-content){
+			height: 80rem;
+			// min-height: 80rem;
+			overflow-y: auto;
+		}
 	}
 }
-</style>
+</style>