合并代码
This commit is contained in:
@@ -6,13 +6,26 @@
|
||||
</div>
|
||||
<div class="account_message_title_setting">设置</div>
|
||||
</div>
|
||||
<a-tabs class="account_message_body" v-model:activeKey="activeKey">
|
||||
<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="2" tab="私信" force-render>
|
||||
<privateChat ref="privateChat"></privateChat>
|
||||
</a-tab-pane> -->
|
||||
|
||||
<a-tab-pane key="3" tab="评论">
|
||||
<comment></comment>
|
||||
</a-tab-pane>
|
||||
@@ -22,12 +35,12 @@
|
||||
<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-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';
|
||||
@@ -51,15 +64,106 @@ export default defineComponent({
|
||||
const router = useRouter()
|
||||
const store = useStore();
|
||||
let accountMessage = reactive({
|
||||
activeKey: ref('1'),
|
||||
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(){
|
||||
@@ -83,8 +187,9 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
.account_message_body{
|
||||
padding: 0rem 5rem;
|
||||
padding-bottom: 3rem;
|
||||
:deep(.ant-tabs-nav){
|
||||
padding: 0rem 5rem;
|
||||
.ant-tabs-nav-wrap{
|
||||
.ant-tabs-tab-btn{
|
||||
font-size: 2.4rem;
|
||||
@@ -107,9 +212,77 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
:deep(.ant-tabs-content){
|
||||
min-height: 80rem;
|
||||
padding-bottom: 3rem;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user