合并代码

This commit is contained in:
X1627315083
2024-08-19 10:36:46 +08:00
parent a8ab30f30c
commit e4b3ebe88b
30 changed files with 857 additions and 472 deletions

View File

@@ -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>