159 lines
3.7 KiB
Vue
159 lines
3.7 KiB
Vue
<template>
|
|
<div class="account_followFans">
|
|
<!-- <div class="account_followFans_title modal_title_text">
|
|
<div class="">
|
|
{{$t('account.Interact')}}
|
|
</div>
|
|
<div class="account_followFans_title_setting">设置</div>
|
|
</div> -->
|
|
<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>
|
|
<span>{{item.title}}</span>
|
|
<!--
|
|
<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 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();
|
|
const {t} = useI18n()
|
|
let accountMessage = reactive({
|
|
messageList:[
|
|
{
|
|
title:t('account.Follow'),
|
|
key:'follow',
|
|
},
|
|
{
|
|
title:t('account.Fans'),
|
|
key:'fans',
|
|
},
|
|
|
|
],
|
|
activeKey: '',
|
|
})
|
|
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),
|
|
...toRefs(domRefs),
|
|
messageSystem,
|
|
setReadStatus,
|
|
changeTabs,
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.account_followFans{
|
|
width: 100%;
|
|
.account_followFans_title{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 2rem 5rem;
|
|
border-bottom: 1px solid #e9eaec;
|
|
.account_followFans_title_setting{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.account_followFans_body{
|
|
padding-bottom: 3rem;
|
|
:deep(.ant-badge){
|
|
font-size: var(--aida-fsize2);
|
|
}
|
|
:deep(.ant-tabs-nav){
|
|
padding: 0rem 5rem;
|
|
&::before{
|
|
display: none;
|
|
}
|
|
.ant-tabs-nav-wrap{
|
|
.ant-tabs-tab-btn{
|
|
color: #000;
|
|
font-size: 2.4rem;
|
|
}
|
|
.ant-tabs-tab-active{
|
|
.ant-tabs-tab-btn{
|
|
font-weight: 900;
|
|
}
|
|
}
|
|
}
|
|
.ant-tabs-ink-bar{
|
|
background: #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |