fix
This commit is contained in:
@@ -58,7 +58,7 @@ export default defineComponent({
|
||||
route:'/home/account/accountMessage',
|
||||
icon:'fi-rr-envelope'
|
||||
},{
|
||||
name:'粉丝&关注',
|
||||
name:'关注&粉丝',
|
||||
route:'/home/account/accountFollowFans',
|
||||
icon:'fi-rr-envelope'
|
||||
},
|
||||
@@ -147,3 +147,95 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
</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;
|
||||
margin-left: auto
|
||||
}
|
||||
.account_generalMessage_title_seach{
|
||||
display: flex;
|
||||
input{
|
||||
padding-left: 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.search_icon_block{
|
||||
background: #39215b;
|
||||
color: #fff;
|
||||
padding: .5rem 2rem;
|
||||
font-size: 1.8rem;
|
||||
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;
|
||||
}
|
||||
.page_loading_box{
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
.page_loading{
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -4,11 +4,9 @@
|
||||
<div class="upload_item">
|
||||
<div class="upload_file_item">
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
:capture="null"
|
||||
list-type="picture-card"
|
||||
:before-upload="beforeUpload"
|
||||
:headers="{Authorization:token}"
|
||||
v-model:file-list="fileList"
|
||||
:customRequest="function(){}"
|
||||
:maxCount="1"
|
||||
@@ -18,29 +16,28 @@
|
||||
<div
|
||||
class="upload_tip_block"
|
||||
>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
<!-- <i class="fi fi-br-upload"></i> -->
|
||||
<img :src="uploadUrl" alt="">
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
<img src="../../assets/images/homePage/alipay.svg" alt="">
|
||||
</div>
|
||||
<div class="accountEdit_page_body">
|
||||
<div class="accountEdit_page_body_item">
|
||||
<div class="accountEdit_page_body_item_name">用户名:</div>
|
||||
<div class="accountEdit_page_body_item_inut">
|
||||
<input type="text" disabled value="123">
|
||||
<input type="text" disabled :value="cookieUserInfo.userName">
|
||||
</div>
|
||||
</div>
|
||||
<div class="accountEdit_page_body_item">
|
||||
<div class="accountEdit_page_body_item_name">邮箱:</div>
|
||||
<div class="accountEdit_page_body_item_inut">
|
||||
<input type="text" disabled value="123">
|
||||
<input type="text" disabled :value="cookieUserInfo.email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="accountEdit_page_body_item">
|
||||
<div class="started_btn">
|
||||
<div class="started_btn" @click="setSubmit">
|
||||
Submit
|
||||
</div>
|
||||
</div>
|
||||
@@ -49,7 +46,7 @@
|
||||
</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 { Modal,message } from 'ant-design-vue';
|
||||
import { useStore } from "vuex";
|
||||
@@ -62,19 +59,24 @@ export default defineComponent({
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
let accountHomeData = reactive({
|
||||
let userInfo:any= computed(()=>{
|
||||
return store.state.UserHabit.userInfo
|
||||
})
|
||||
let cookieUserInfo = JSON.parse(getCookie('userInfo') as any)
|
||||
let accountHomeData:any = reactive({
|
||||
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
|
||||
uploadUrl:'',
|
||||
uploadUrl:userInfo.value?.avatar,
|
||||
uploadFile:undefined,
|
||||
token:'',
|
||||
fileList:[]
|
||||
})
|
||||
let Cropper = ref()
|
||||
// provide('exhibitionList',exhibitionList)
|
||||
let handleCropperSuccess = (event:any)=>{
|
||||
console.log(event);
|
||||
|
||||
let {file, fileData,base64} =event
|
||||
console.log(file,fileData);
|
||||
accountHomeData.fileList[0].status = 'done'
|
||||
accountHomeData.uploadUrl = base64
|
||||
accountHomeData.uploadFile = file
|
||||
Cropper.value.closeCropper()
|
||||
}
|
||||
let beforeUpload=(file:any,fileList:any)=>{
|
||||
@@ -126,13 +128,31 @@ export default defineComponent({
|
||||
// this.fileList.splice(index, 1)
|
||||
// }
|
||||
}
|
||||
let setSubmit = ()=>{
|
||||
if(!accountHomeData.uploadFile)return
|
||||
let param = new FormData();
|
||||
param.append('file',accountHomeData.uploadFile);
|
||||
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||||
Https.axiosPost(Https.httpUrls.uploadAvatar,param,config)
|
||||
.then((rv)=>{
|
||||
let data = {
|
||||
avatar : rv
|
||||
}
|
||||
store.commit("setUserInfo", data)
|
||||
message.success('提交成功')
|
||||
})
|
||||
|
||||
}
|
||||
return{
|
||||
...toRefs(accountHomeData),
|
||||
userInfo,
|
||||
cookieUserInfo,
|
||||
Cropper,
|
||||
handleCropperSuccess,
|
||||
beforeUpload,
|
||||
fileUploadChange,
|
||||
deletUploadFile,
|
||||
setSubmit,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@@ -156,15 +176,17 @@ export default defineComponent({
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
}
|
||||
.accountEdit_page_head_upload{
|
||||
width: auto;
|
||||
}
|
||||
.upload_item{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
:deep(.ant-upload-list-picture-card-container){
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
.accountEdit_page_body{
|
||||
|
||||
@@ -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>
|
||||
@@ -4,19 +4,19 @@
|
||||
<div class="content_item content_item_user">
|
||||
<div class="content_item_user_left">
|
||||
<div class="content_item_user_left_detail">
|
||||
<img src="../../assets/images/homePage/alipay.svg" alt="">
|
||||
<img :src="userInfo?.avatar" alt="">
|
||||
</div>
|
||||
<div class="content_item_user_left_detail">
|
||||
<div class="modal_title_text">
|
||||
<div>用户名</div>
|
||||
<div class="modal_title_text_assistant">邮箱: 2222</div>
|
||||
<div>{{ cookieUserInfo.userName }}</div>
|
||||
<div class="modal_title_text_assistant"><span>邮箱: </span>{{ cookieUserInfo?.email }}</div>
|
||||
</div>
|
||||
<div class="content_item_user_left_detail_bottom">
|
||||
<div>
|
||||
<span>关注:</span>22
|
||||
<span>关注:</span>{{ userInfo?.followeeCount }}
|
||||
</div>
|
||||
<div>
|
||||
<span>粉丝:</span>22
|
||||
<span>粉丝:</span>{{ userInfo?.followerCount }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -74,6 +74,14 @@ export default defineComponent({
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
const store = useStore();
|
||||
let userInfo:any= computed(()=>{
|
||||
return store.state.UserHabit.userInfo
|
||||
})
|
||||
let cookieUserInfo = ref(null)
|
||||
if(getCookie('userInfo')){
|
||||
let userInfo:any = getCookie('userInfo')
|
||||
cookieUserInfo.value = JSON.parse(userInfo)
|
||||
}
|
||||
let accountHomeData = reactive({
|
||||
})
|
||||
// provide('exhibitionList',exhibitionList)
|
||||
@@ -81,6 +89,8 @@ export default defineComponent({
|
||||
router.push({path:'/home/account/accountEdit'})
|
||||
}
|
||||
return{
|
||||
userInfo,
|
||||
cookieUserInfo,
|
||||
...toRefs(accountHomeData),
|
||||
setUserData,
|
||||
}
|
||||
|
||||
@@ -8,11 +8,11 @@
|
||||
</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>
|
||||
<system v-if="item.key == 'system'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></system>
|
||||
<privateChat v-if="item.key == 'privateChat'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></privateChat>
|
||||
<comment v-if="item.key == 'comment'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></comment>
|
||||
<likeMessage v-if="item.key == 'like'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></likeMessage>
|
||||
<newFollow v-if="item.key == 'follow'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></newFollow>
|
||||
<!-- <newFollow v-if="item.key == 'service'" :ref="item.key"></newFollow> -->
|
||||
<template #tab>
|
||||
<a-badge :count="messageSystem.messageType[item.key]" >
|
||||
@@ -82,10 +82,11 @@ export default defineComponent({
|
||||
},{
|
||||
title:'新增粉丝',
|
||||
key:'follow',
|
||||
},{
|
||||
title:'客服',
|
||||
key:'service',
|
||||
},
|
||||
// {
|
||||
// title:'客服',
|
||||
// key:'service',
|
||||
// },
|
||||
],
|
||||
activeKey: '',
|
||||
})
|
||||
@@ -104,57 +105,61 @@ export default defineComponent({
|
||||
router.push({path:'/home/account/accountEdit'})
|
||||
}
|
||||
let changeTabs = (key:any)=>{
|
||||
let data = {
|
||||
page:1,
|
||||
size:10,
|
||||
type:key
|
||||
}
|
||||
getHistory(data)
|
||||
// if(accountMessage.activeKey == 'service')return
|
||||
}
|
||||
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)
|
||||
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)
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
let setAllmessage = ()=>{
|
||||
let data = {
|
||||
type:accountMessage.activeKey
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.oneClickRead,'',{params:data}).then((rv)=>{
|
||||
|
||||
return new Promise((resolve,reject)=>{
|
||||
let data = {
|
||||
type:accountMessage.activeKey
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.oneClickRead,'',{params:data}).then((rv)=>{
|
||||
resolve(rv)
|
||||
}).catch((err)=>{
|
||||
reject(err
|
||||
)
|
||||
})
|
||||
})
|
||||
}
|
||||
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)=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
data.type = accountMessage.activeKey
|
||||
let url = Https.httpUrls.getHistoryNotification
|
||||
if(data.type == 'follow'){
|
||||
url = Https.httpUrls.porfolioGetFollowerList
|
||||
}
|
||||
Https.axiosPost(url,data).then((rv)=>{
|
||||
if(rv){
|
||||
console.log(domRefs[data.type][0],rv);
|
||||
domRefs[data.type][0].setmessageList(rv)
|
||||
// domRefs[data.type][0].setmessageList(rv,data)
|
||||
console.log(rv);
|
||||
|
||||
resolve(rv)
|
||||
}
|
||||
}).catch((err)=>{
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
onMounted(()=>{
|
||||
let key = accountMessage.messageList[0].key
|
||||
accountMessage.activeKey = key
|
||||
let data = {
|
||||
page:1,
|
||||
size:10,
|
||||
type:key
|
||||
}
|
||||
getHistory(data)
|
||||
})
|
||||
return{
|
||||
...toRefs(accountMessage),
|
||||
@@ -164,6 +169,7 @@ export default defineComponent({
|
||||
setReadStatus,
|
||||
changeTabs,
|
||||
setAllmessage,
|
||||
getHistory,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@@ -219,70 +225,4 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
||||
|
||||
156
src/component/Account/followFans/fans.vue
Normal file
156
src/component/Account/followFans/fans.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="account_fans">
|
||||
<div class="account_generalMessage_title modal_title_text">
|
||||
<span class="account_generalMessage_title_seach">
|
||||
<input type="text" @keydown.enter="searchFollowFansList" class="search_input" v-model="getListData.seachContent">
|
||||
<div class="search_icon_block" @click="searchFollowFansList">
|
||||
<i class="icon iconfont icon-sousuo"></i>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="account_generalMessage_center modal_title_text">
|
||||
<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id">
|
||||
<div class="account_generalMessage_item_right">
|
||||
<div class="account_generalMessage_item_right_img">
|
||||
<img :src="item.avatar" alt="">
|
||||
</div>
|
||||
<div class="account_generalMessage_item_right_title">
|
||||
<div class="">{{ item.senderUserName }}</div>
|
||||
<div class="modal_title_text_intro">{{ item.createTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_item_left">
|
||||
<div v-if="item?.isFollow == 0" @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div>
|
||||
<div v-else @click.stop="setFollow(item)" >{{$t('newScaleImage.Unfollow')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && getListData.isNoData">
|
||||
没有任何信息~
|
||||
</div>
|
||||
<div class="page_loading_box" v-show="!getListData.isNoData">
|
||||
<span class="page_loading" ref="loadingDom" v-show="!getListData.isShowMark"></span>
|
||||
<span v-show="getListData.isShowMark">
|
||||
<a-spin size="large" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 { useI18n } from 'vue-i18n'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
// emits:['setReadStatus','setAllmessage'],
|
||||
props:[''],
|
||||
setup(prop,{emit}) {
|
||||
const router = useRouter()
|
||||
const store = useStore();
|
||||
let accountFollofFans:any = reactive({
|
||||
getListData: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
seachContent:'',
|
||||
isNoData: false,
|
||||
isShowMark: false,
|
||||
},
|
||||
dataList:ref([
|
||||
|
||||
])
|
||||
})
|
||||
let loadingDom:any = ref(null)
|
||||
let searchFollowFansList = ()=>{
|
||||
accountFollofFans.getListData.page = 1
|
||||
getFollowFansList()
|
||||
}
|
||||
let getFollowFansList = ()=>{
|
||||
accountFollofFans.getListData.isShowMark = true
|
||||
let data = accountFollofFans.getListData
|
||||
Https.axiosPost(Https.httpUrls.porfolioGetFollowerList,data).then((rv)=>{
|
||||
if(rv){
|
||||
accountFollofFans.getListData.isShowMark = false
|
||||
if(rv.length == 0) {
|
||||
accountFollofFans.getListData.isNoData = true
|
||||
return
|
||||
}
|
||||
accountFollofFans.dataList = rv
|
||||
}
|
||||
}).catch(() => {
|
||||
accountFollofFans.getListData.isShowMark = false
|
||||
accountFollofFans.getListData.isNoData = true
|
||||
})
|
||||
}
|
||||
|
||||
onMounted (()=>{
|
||||
accountFollofFans.getListData.isNoData = false
|
||||
accountFollofFans.getListData.page = 0
|
||||
new IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
// 如果不是相交,则直接返回
|
||||
// console.log(entries[0]);
|
||||
if (!entries[0].intersectionRatio) return;
|
||||
accountFollofFans.getListData.page+=1
|
||||
getFollowFansList()
|
||||
},
|
||||
// { root:worksPage }
|
||||
).observe(loadingDom.value);
|
||||
})
|
||||
return{
|
||||
...toRefs(accountFollofFans),
|
||||
searchFollowFansList,
|
||||
getFollowFansList,
|
||||
loadingDom,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.account_fans{
|
||||
width: 100%;
|
||||
.account_generalMessage_center{
|
||||
.account_generalMessage_item{
|
||||
.account_generalMessage_item_right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.account_generalMessage_item_right_img{
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
margin-right: 2rem;
|
||||
cursor: pointer;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.account_generalMessage_item_left{
|
||||
div{
|
||||
padding: .5rem 2rem;
|
||||
border-radius: 4rem;
|
||||
border: 2px solid #e9eaec;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.account_generalMessage_item:hover{
|
||||
background: #ffffff;
|
||||
}
|
||||
.account_generalMessage_item:last-child{
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
157
src/component/Account/followFans/follow.vue
Normal file
157
src/component/Account/followFans/follow.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="account_follow">
|
||||
<div class="account_generalMessage_title modal_title_text">
|
||||
<span class="account_generalMessage_title_seach">
|
||||
<input type="text" @keydown.enter="searchFollowFansList" class="search_input" v-model="getListData.seachContent">
|
||||
<div class="search_icon_block" @click="searchFollowFansList">
|
||||
<i class="icon iconfont icon-sousuo"></i>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="account_generalMessage_center modal_title_text">
|
||||
<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id">
|
||||
<a-badge :dot="item.isRead == 0"></a-badge>
|
||||
<div class="account_generalMessage_item_right">
|
||||
<div class="account_generalMessage_item_right_img">
|
||||
<img :src="item.senderUserAvatar" alt="">
|
||||
</div>
|
||||
<div class="account_generalMessage_item_right_title">
|
||||
<div class="">{{ item.senderUserName }}</div>
|
||||
<div class="modal_title_text_intro">{{ item.createTime }} 关注了你</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_item_left">
|
||||
<div v-if="item?.isFollow == 0" @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div>
|
||||
<div v-else @click.stop="setFollow(item)" >{{$t('newScaleImage.Unfollow')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && getListData.isNoData">
|
||||
没有任何信息~
|
||||
</div>
|
||||
<div class="page_loading_box" v-show="!getListData.isNoData">
|
||||
<span class="page_loading" ref="loadingDom" v-show="!getListData.isShowMark"></span>
|
||||
<span v-show="getListData.isShowMark">
|
||||
<a-spin size="large" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 { useI18n } from 'vue-i18n'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
// emits:['setReadStatus','setAllmessage'],
|
||||
props:[''],
|
||||
setup(prop,{emit}) {
|
||||
const router = useRouter()
|
||||
const store = useStore();
|
||||
let accountFollofFans = reactive({
|
||||
getListData: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
seachContent:'',
|
||||
isNoData: false,
|
||||
isShowMark: false,
|
||||
},
|
||||
dataList:ref([
|
||||
|
||||
])
|
||||
})
|
||||
let loadingDom:any = ref(null)
|
||||
let searchFollowFansList = ()=>{
|
||||
accountFollofFans.getListData.page = 1
|
||||
getFollowFansList()
|
||||
}
|
||||
let getFollowFansList = ()=>{
|
||||
accountFollofFans.getListData.isShowMark = true
|
||||
let data = accountFollofFans.getListData
|
||||
Https.axiosPost(Https.httpUrls.porfolioGetFolloweeList,data).then((rv)=>{
|
||||
if(rv){
|
||||
accountFollofFans.getListData.isShowMark = false
|
||||
if(rv.length == 0) {
|
||||
accountFollofFans.getListData.isNoData = true
|
||||
return
|
||||
}
|
||||
accountFollofFans.dataList = rv
|
||||
}
|
||||
}).catch(() => {
|
||||
accountFollofFans.getListData.isShowMark = false
|
||||
accountFollofFans.getListData.isNoData = true
|
||||
})
|
||||
}
|
||||
|
||||
onMounted (()=>{
|
||||
accountFollofFans.getListData.isNoData = false
|
||||
accountFollofFans.getListData.page = 0
|
||||
new IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
// 如果不是相交,则直接返回
|
||||
// console.log(entries[0]);
|
||||
if (!entries[0].intersectionRatio) return;
|
||||
accountFollofFans.getListData.page+=1
|
||||
getFollowFansList()
|
||||
},
|
||||
// { root:worksPage }
|
||||
).observe(loadingDom.value);
|
||||
})
|
||||
return{
|
||||
...toRefs(accountFollofFans),
|
||||
searchFollowFansList,
|
||||
getFollowFansList,
|
||||
loadingDom,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.account_follow{
|
||||
width: 100%;
|
||||
.account_generalMessage_center{
|
||||
.account_generalMessage_item{
|
||||
.account_generalMessage_item_right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.account_generalMessage_item_right_img{
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
margin-right: 2rem;
|
||||
cursor: pointer;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.account_generalMessage_item_left{
|
||||
div{
|
||||
padding: .5rem 2rem;
|
||||
border-radius: 4rem;
|
||||
border: 2px solid #e9eaec;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.account_generalMessage_item:hover{
|
||||
background: #ffffff;
|
||||
}
|
||||
.account_generalMessage_item:last-child{
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,46 +1,38 @@
|
||||
<template>
|
||||
<div class="account_comment">
|
||||
<div class="account_generalMessage_title modal_title_text">
|
||||
<span>收到的评论</span>
|
||||
<!-- <span>收到的评论</span> -->
|
||||
<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_center modal_title_text">
|
||||
|
||||
<div class="account_generalMessage_item">
|
||||
<div class="account_generalMessage_item" v-for="item in dataList" @click="setRead(item)">
|
||||
<a-badge :dot="item.isRead == 0"></a-badge>
|
||||
<div class="account_generalMessage_item_right">
|
||||
<div class="account_generalMessage_item_right_img" @click="openOtherUsers">
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
|
||||
<div class="account_generalMessage_item_right_img" @click.stop="openOtherUsers(item)">
|
||||
<img :src="item.avatar" alt="">
|
||||
</div>
|
||||
<div class="account_generalMessage_item_right_title">
|
||||
<div class="account_generalMessage_item_right_title_name">名字 <span>回复你的作品</span></div>
|
||||
<div class="account_generalMessage_item_right_title_center modal_title_text_assistant">回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容</div>
|
||||
<div class="account_generalMessage_item_right_works modal_title_text_intro">回复作品名</div>
|
||||
<div class="account_generalMessage_item_right_title_name">{{ item.userName }} <span>回复你的作品</span></div>
|
||||
<div class="account_generalMessage_item_right_title_center modal_title_text_assistant">{{ item.content }}</div>
|
||||
<div class="account_generalMessage_item_right_works modal_title_text_intro" @click.stop="openOtherWork(item)">{{ item.portfolioName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_item_left">
|
||||
<div class="account_generalMessage_item_left_delete modal_title_text_intro">
|
||||
<span class="icon iconfont icon-shanchu operate_icon"></span>
|
||||
</div>
|
||||
<div class="modal_title_text_intro">2024-06-05</div>
|
||||
<div class="modal_title_text_intro">{{ item.createTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_item">
|
||||
<div class="account_generalMessage_item_right">
|
||||
<div class="account_generalMessage_item_right_img">
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
|
||||
</div>
|
||||
<div class="account_generalMessage_item_right_title">
|
||||
<div class="account_generalMessage_item_right_title_name">名字 <span>回复你的作品</span></div>
|
||||
<div class="account_generalMessage_item_right_title_center modal_title_text_assistant">回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容</div>
|
||||
<div class="account_generalMessage_item_right_works modal_title_text_intro">回复作品名</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_item_left">
|
||||
<div class="account_generalMessage_item_left_delete modal_title_text_intro">
|
||||
<span class="icon iconfont icon-shanchu operate_icon"></span>
|
||||
</div>
|
||||
<div class="modal_title_text_intro">2024-06-05</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
|
||||
没有任何信息~
|
||||
</div>
|
||||
<div class="page_loading_box" v-show="!isNoData">
|
||||
<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
|
||||
<span v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -56,56 +48,92 @@ import { useI18n } from 'vue-i18n'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
setup() {
|
||||
props:['setReadStatus','setAllmessage','getHistory'],
|
||||
setup(prop,{emit}) {
|
||||
|
||||
const router = useRouter()
|
||||
const store = useStore();
|
||||
let accountMessage = reactive({
|
||||
activeKey: ref('1'),
|
||||
dataList:ref([
|
||||
{
|
||||
name:'张三',
|
||||
avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
|
||||
time:'2024-01-01 12:00:00',
|
||||
content:'关注了你',
|
||||
isRead:false
|
||||
},
|
||||
{
|
||||
name:'李四',
|
||||
avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
|
||||
}
|
||||
])
|
||||
dataList:[
|
||||
],
|
||||
page:1,
|
||||
size:10,
|
||||
isNoData: false,
|
||||
isShowMark: false,
|
||||
})
|
||||
// let ws = new WebSocket('ws://127.0.0.1:3000')
|
||||
// console.log(ws);
|
||||
|
||||
// ws.onopen = ()=>{
|
||||
// console.log(222);
|
||||
// let data = {
|
||||
// cmd:4,
|
||||
// data:{
|
||||
// msg:'222'
|
||||
// }
|
||||
// }
|
||||
// ws.send(JSON.stringify(data))
|
||||
// // ws.onmessage = (data)=>{
|
||||
// // console.log(data);
|
||||
// // }
|
||||
// }
|
||||
// provide('exhibitionList',exhibitionList)
|
||||
let openOtherUsers = ()=>{
|
||||
let loadingDom:any = ref(null)
|
||||
let setmessageList = ()=>{
|
||||
accountMessage.isShowMark = true
|
||||
let data = {
|
||||
page: accountMessage.page,
|
||||
size: accountMessage.size,
|
||||
}
|
||||
prop.getHistory(data).then((rv:any)=>{
|
||||
accountMessage.isShowMark = false
|
||||
if(rv.content.length == 0) {
|
||||
accountMessage.isNoData = true
|
||||
return
|
||||
}
|
||||
accountMessage.dataList = rv.content
|
||||
}).catch(() => {
|
||||
accountMessage.isShowMark = false
|
||||
accountMessage.isNoData = true
|
||||
})
|
||||
}
|
||||
let setRead = (item:any)=>{
|
||||
prop.setReadStatus(item).then((rv:any)=>{
|
||||
item.isRead = 1
|
||||
}).catch((err:any)=>{
|
||||
})
|
||||
}
|
||||
let allRead = ()=>{
|
||||
// emit('setAllmessage')
|
||||
prop.setAllmessage().then(()=>{
|
||||
}).catch((err:any)=>{
|
||||
})
|
||||
}
|
||||
let openOtherUsers = (item:any)=>{
|
||||
const routeUrl = router.resolve({
|
||||
path:'/home/otherUsers',
|
||||
query:{
|
||||
id:123
|
||||
userId:item.senderId
|
||||
}
|
||||
})
|
||||
window.open(routeUrl.href,'_blank')
|
||||
}
|
||||
let openOtherWork = (item:any)=>{
|
||||
const routeUrl = router.resolve({
|
||||
path:'/home/works',
|
||||
query:{
|
||||
workId:item.portfolioId
|
||||
}
|
||||
})
|
||||
window.open(routeUrl.href,'_blank')
|
||||
}
|
||||
onMounted (()=>{
|
||||
accountMessage.isNoData = false
|
||||
accountMessage.page = 0
|
||||
let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
|
||||
new IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
// 如果不是相交,则直接返回
|
||||
// console.log(entries[0]);
|
||||
if (!entries[0].intersectionRatio) return;
|
||||
accountMessage.page+=1
|
||||
setmessageList()
|
||||
},
|
||||
// { root:worksPage }
|
||||
).observe(loadingDom.value);
|
||||
})
|
||||
return{
|
||||
...toRefs(accountMessage),
|
||||
setmessageList,
|
||||
setRead,
|
||||
allRead,
|
||||
openOtherUsers,
|
||||
openOtherWork,
|
||||
loadingDom,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div class="account_like">
|
||||
<div class="account_generalMessage_title modal_title_text">
|
||||
<span>点赞</span>
|
||||
<!-- <span>点赞</span> -->
|
||||
<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_center modal_title_text">
|
||||
<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
|
||||
<a-badge :dot="item.isRead == 0"></a-badge>
|
||||
<div class="account_generalMessage_item_right">
|
||||
<div class="account_generalMessage_item_right_img">
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
|
||||
<div class="account_generalMessage_item_right_img" @click="openOtherUsers(item)">
|
||||
<img :src="item.avatar" alt="">
|
||||
</div>
|
||||
<div class="account_generalMessage_item_right_title">
|
||||
<div class="account_generalMessage_item_right_title_name">{{ item.senderUserName }} <span>攒了你的作品</span></div>
|
||||
<div class="account_generalMessage_item_right_title_name">{{ item.userName }} <span>攒了你的作品</span></div>
|
||||
<div>{{ item.portfolioName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -23,6 +23,15 @@
|
||||
<div class="modal_title_text_intro">{{ item.createTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
|
||||
没有任何信息~
|
||||
</div>
|
||||
<div class="page_loading_box" v-show="!isNoData">
|
||||
<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
|
||||
<span v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -37,50 +46,83 @@ import { useI18n } from 'vue-i18n'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
emits:['setReadStatus','setAllmessage'],
|
||||
// emits:['setReadStatus','setAllmessage'],
|
||||
props:['setReadStatus','setAllmessage','getHistory'],
|
||||
setup(prop,{emit}) {
|
||||
const router = useRouter()
|
||||
const store = useStore();
|
||||
let accountMessage = reactive({
|
||||
activeKey: ref('1'),
|
||||
dataList:[
|
||||
]
|
||||
],
|
||||
page:1,
|
||||
size:10,
|
||||
isNoData: false,
|
||||
isShowMark: false,
|
||||
})
|
||||
let setmessageList = (data:any)=>{
|
||||
accountMessage.dataList = data.content
|
||||
let loadingDom:any = ref(null)
|
||||
let setmessageList = ()=>{
|
||||
accountMessage.isShowMark = true
|
||||
let data = {
|
||||
page: accountMessage.page,
|
||||
size: accountMessage.size,
|
||||
}
|
||||
prop.getHistory(data).then((rv:any)=>{
|
||||
accountMessage.isShowMark = false
|
||||
if(rv.content.length == 0) {
|
||||
accountMessage.isNoData = true
|
||||
return
|
||||
}
|
||||
accountMessage.dataList = rv.content
|
||||
}).catch(() => {
|
||||
accountMessage.isShowMark = false
|
||||
accountMessage.isNoData = true
|
||||
})
|
||||
}
|
||||
let setRead = (item:any)=>{
|
||||
emit('setReadStatus',item)
|
||||
item.isRead = 1
|
||||
prop.setReadStatus(item).then((rv:any)=>{
|
||||
item.isRead = 1
|
||||
}).catch((err:any)=>{
|
||||
})
|
||||
}
|
||||
let allRead = ()=>{
|
||||
emit('setAllmessage')
|
||||
// emit('setAllmessage')
|
||||
prop.setAllmessage().then(()=>{
|
||||
}).catch((err:any)=>{
|
||||
})
|
||||
}
|
||||
let openOtherUsers = (item:any)=>{
|
||||
const routeUrl = router.resolve({
|
||||
path:'/home/otherUsers',
|
||||
query:{
|
||||
userId:item.senderId
|
||||
}
|
||||
})
|
||||
window.open(routeUrl.href,'_blank')
|
||||
}
|
||||
// let ws = new WebSocket('ws://127.0.0.1:3000')
|
||||
// console.log(ws);
|
||||
|
||||
// ws.onopen = ()=>{
|
||||
// console.log(222);
|
||||
// let data = {
|
||||
// cmd:4,
|
||||
// data:{
|
||||
// msg:'222'
|
||||
// }
|
||||
// }
|
||||
// ws.send(JSON.stringify(data))
|
||||
// // ws.onmessage = (data)=>{
|
||||
// // console.log(data);
|
||||
// // }
|
||||
// }
|
||||
// provide('exhibitionList',exhibitionList)
|
||||
|
||||
onMounted (()=>{
|
||||
accountMessage.isNoData = false
|
||||
accountMessage.page = 0
|
||||
let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
|
||||
new IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
// 如果不是相交,则直接返回
|
||||
// console.log(entries[0]);
|
||||
if (!entries[0].intersectionRatio) return;
|
||||
accountMessage.page+=1
|
||||
setmessageList()
|
||||
},
|
||||
// { root:worksPage }
|
||||
).observe(loadingDom.value);
|
||||
})
|
||||
return{
|
||||
...toRefs(accountMessage),
|
||||
setmessageList,
|
||||
setRead,
|
||||
allRead
|
||||
allRead,
|
||||
openOtherUsers,
|
||||
loadingDom,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
|
||||
@@ -1,25 +1,35 @@
|
||||
<template>
|
||||
<div class="account_newFollow">
|
||||
<div class="account_generalMessage_title modal_title_text">
|
||||
<span>新增粉丝</span>
|
||||
<!-- <span>新增粉丝</span> -->
|
||||
<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_center modal_title_text">
|
||||
<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
|
||||
<a-badge :dot="item.isRead == 0"></a-badge>
|
||||
<div class="account_generalMessage_item_right">
|
||||
<div class="account_generalMessage_item_right_img">
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
|
||||
<div class="account_generalMessage_item_right_img" @click="openOtherUsers(item)">
|
||||
<img :src="item.avatar" alt="">
|
||||
</div>
|
||||
<div class="account_generalMessage_item_right_title">
|
||||
<div class="">{{ item.senderUserName }}</div>
|
||||
<div class="">{{ item.userName }}</div>
|
||||
<div class="modal_title_text_intro">{{ item.createTime }} 关注了你</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_item_left">
|
||||
<div>回关</div>
|
||||
<div v-if="item?.isFollow == 0" @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div>
|
||||
<div v-else @click.stop="setFollow(item)" >{{$t('newScaleImage.Unfollow')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
|
||||
没有任何信息~
|
||||
</div>
|
||||
<div class="page_loading_box" v-show="!isNoData">
|
||||
<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
|
||||
<span v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -34,33 +44,96 @@ import { useI18n } from 'vue-i18n'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
emits:['setReadStatus','setAllmessage'],
|
||||
// emits:['setReadStatus','setAllmessage'],
|
||||
props:['setReadStatus','setAllmessage','getHistory'],
|
||||
setup(prop,{emit}) {
|
||||
const router = useRouter()
|
||||
const store = useStore();
|
||||
let accountMessage = reactive({
|
||||
activeKey: ref('1'),
|
||||
dataList:ref([
|
||||
dataList:[
|
||||
|
||||
])
|
||||
],
|
||||
page:1,
|
||||
size:10,
|
||||
isNoData: false,
|
||||
isShowMark: false,
|
||||
})
|
||||
let setmessageList = (data:any)=>{
|
||||
accountMessage.dataList = data.content
|
||||
let loadingDom:any = ref(null)
|
||||
let setmessageList = ()=>{
|
||||
accountMessage.isShowMark = true
|
||||
let data = {
|
||||
page: accountMessage.page,
|
||||
size: accountMessage.size,
|
||||
}
|
||||
prop.getHistory(data).then((rv:any)=>{
|
||||
accountMessage.isShowMark = false
|
||||
if(rv.length == 0) {
|
||||
accountMessage.isNoData = true
|
||||
return
|
||||
}
|
||||
accountMessage.dataList = rv
|
||||
}).catch(() => {
|
||||
accountMessage.isShowMark = false
|
||||
accountMessage.isNoData = true
|
||||
})
|
||||
}
|
||||
let setRead = (item:any)=>{
|
||||
emit('setReadStatus',item)
|
||||
item.isRead = 1
|
||||
prop.setReadStatus(item).then((rv:any)=>{
|
||||
item.isRead = 1
|
||||
}).catch((err:any)=>{
|
||||
})
|
||||
}
|
||||
let allRead = ()=>{
|
||||
emit('setAllmessage')
|
||||
// emit('setAllmessage')
|
||||
prop.setAllmessage().then(()=>{
|
||||
}).catch((err:any)=>{
|
||||
})
|
||||
}
|
||||
let setFollow = (item:any) =>{
|
||||
let url = Https.httpUrls.porfolioFollow
|
||||
if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
|
||||
Https.axiosGet(url, {params:{followeeId:item.senderId}})
|
||||
.then((rv) => {
|
||||
if(item.isFollow == 1){
|
||||
item.isFollow = 0
|
||||
}else{
|
||||
item.isFollow = 1
|
||||
}
|
||||
})
|
||||
}
|
||||
let openOtherUsers = (item:any)=>{
|
||||
const routeUrl = router.resolve({
|
||||
path:'/home/otherUsers',
|
||||
query:{
|
||||
userId:item.senderId
|
||||
}
|
||||
})
|
||||
window.open(routeUrl.href,'_blank')
|
||||
}
|
||||
onMounted (()=>{
|
||||
accountMessage.isNoData = false
|
||||
accountMessage.page = 0
|
||||
let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
|
||||
new IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
// 如果不是相交,则直接返回
|
||||
// console.log(entries[0]);
|
||||
if (!entries[0].intersectionRatio) return;
|
||||
accountMessage.page+=1
|
||||
setmessageList()
|
||||
},
|
||||
// { root:worksPage }
|
||||
).observe(loadingDom.value);
|
||||
})
|
||||
return{
|
||||
...toRefs(accountMessage),
|
||||
setmessageList,
|
||||
setRead,
|
||||
allRead
|
||||
allRead,
|
||||
setFollow,
|
||||
openOtherUsers,
|
||||
loadingDom,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="account_privateChatMessage">
|
||||
<div class="account_generalMessage_title modal_title_text">
|
||||
<span>私信</span>
|
||||
<!-- <span>私信</span> -->
|
||||
<div class="account_generalMessage_title_setting">全部已读</div>
|
||||
</div>
|
||||
<div class="account_privateChatMessage_content">
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="account_systemMessage">
|
||||
<div class="account_generalMessage_title modal_title_text">
|
||||
<span>系统消息</span>
|
||||
<!-- <span>系统消息</span> -->
|
||||
<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_item modal_title_text" v-for="item in dataList" :key="item.id" @click="setRead(item)">
|
||||
<a-badge dot></a-badge>
|
||||
<a-badge :dot="item.isRead == 0"></a-badge>
|
||||
<div class="account_generalMessage_item_title">
|
||||
<div class="account_generalMessage_item_title_text" :title="item.content">{{ item.content.title }}</div>
|
||||
<div class="modal_title_text_intro">{{ item.createTime }}</div>
|
||||
@@ -15,6 +15,15 @@
|
||||
<span v-if="item.content.link" class="account_generalMessage_item_link">{{ item.content.link }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_item modal_title_text" style="display:flex;justify-content: center;" v-if="dataList.length == 0 && isNoData">
|
||||
没有任何信息~
|
||||
</div>
|
||||
<div class="page_loading_box" v-show="!isNoData">
|
||||
<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
|
||||
<span v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@@ -28,38 +37,74 @@ import { useI18n } from 'vue-i18n'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
emits:['setReadStatus','setAllmessage'],
|
||||
props:{
|
||||
},
|
||||
// emits:['putListData'],
|
||||
props:['setReadStatus','setAllmessage','getHistory'],
|
||||
setup(prop,{emit}) {
|
||||
const router = useRouter()
|
||||
const store = useStore();
|
||||
let accountMessage = reactive({
|
||||
dataList: [],
|
||||
page:1,
|
||||
size:10,
|
||||
isNoData: false,
|
||||
isShowMark: false,
|
||||
})
|
||||
let setmessageList = (data:any)=>{
|
||||
console.log(data);
|
||||
|
||||
data.content.forEach((item:any) => {
|
||||
item.content = JSON.parse(item.content)
|
||||
});
|
||||
accountMessage.dataList = data.content
|
||||
let loadingDom:any = ref(null)
|
||||
let setmessageList = ()=>{
|
||||
accountMessage.isShowMark = true
|
||||
let data = {
|
||||
page: accountMessage.page,
|
||||
size: accountMessage.size,
|
||||
}
|
||||
prop.getHistory(data).then((rv:any)=>{
|
||||
accountMessage.isShowMark = false
|
||||
if(rv.content.length == 0) {
|
||||
accountMessage.isNoData = true
|
||||
return
|
||||
}
|
||||
rv.content.forEach((item:any) => {
|
||||
item.content = JSON.parse(item.content)
|
||||
});
|
||||
accountMessage.dataList = rv.content
|
||||
}).catch(() => {
|
||||
accountMessage.isShowMark = false
|
||||
accountMessage.isNoData = true
|
||||
})
|
||||
}
|
||||
let setRead = (item:any)=>{
|
||||
emit('setReadStatus',item)
|
||||
prop.setReadStatus(item).then((rv:any)=>{
|
||||
item.isRead = 1
|
||||
}).catch((err:any)=>{
|
||||
})
|
||||
}
|
||||
let allRead = ()=>{
|
||||
emit('setAllmessage')
|
||||
// emit('setAllmessage')
|
||||
prop.setAllmessage().then(()=>{
|
||||
}).catch((err:any)=>{
|
||||
})
|
||||
}
|
||||
// provide('exhibitionList',exhibitionList)
|
||||
|
||||
onMounted (()=>{
|
||||
accountMessage.isNoData = false
|
||||
accountMessage.page = 0
|
||||
let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
|
||||
new IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
// 如果不是相交,则直接返回
|
||||
// console.log(entries[0]);
|
||||
if (!entries[0].intersectionRatio) return;
|
||||
accountMessage.page+=1
|
||||
setmessageList()
|
||||
},
|
||||
// { root:worksPage }
|
||||
).observe(loadingDom.value);
|
||||
})
|
||||
return{
|
||||
...toRefs(accountMessage),
|
||||
setmessageList,
|
||||
setRead,
|
||||
allRead
|
||||
allRead,
|
||||
loadingDom,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
|
||||
@@ -5,34 +5,34 @@
|
||||
</div>
|
||||
<div class="otherUsers_userDetail">
|
||||
<div class="otherUsers_userDetail_img">
|
||||
<img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
|
||||
<img :src="userContent.avatar" alt="">
|
||||
</div>
|
||||
<div class="otherUsers_userDetail_center">
|
||||
<div class="otherUsers_userDetail_center_name modal_title_text">
|
||||
<div>用户名</div>
|
||||
<div>{{ userContent.userName }}</div>
|
||||
<div class="userDetail_center_name_left">关注</div>
|
||||
</div>
|
||||
<div class="otherUsers_userDetail_center_data">
|
||||
<div class="userDetail_center_data_item modal_title_text">
|
||||
<div>99999</div>
|
||||
<div>{{ userContent.homepageViewCount }}</div>
|
||||
<span class="modal_title_text_intro">访问量</span>
|
||||
</div>
|
||||
<div class="userDetail_center_data_item modal_title_text">
|
||||
<div>123</div>
|
||||
<div>{{ userContent.portfolioCount }}</div>
|
||||
<span class="modal_title_text_intro">作品</span>
|
||||
</div>
|
||||
<div class="userDetail_center_data_item modal_title_text">
|
||||
<div>999</div>
|
||||
<div>{{ userContent.followerCount }}</div>
|
||||
<span class="modal_title_text_intro">粉丝</span>
|
||||
</div>
|
||||
<div class="userDetail_center_data_item modal_title_text">
|
||||
<div>22</div>
|
||||
<div>{{ userContent.followeeCount }}</div>
|
||||
<span class="modal_title_text_intro">关注</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="otherUsers_userDetail_center_signature">
|
||||
<div class="modal_title_text">
|
||||
<div class="modal_title_text_intro">个性签名个性签名个性签名</div>
|
||||
<!-- <div class="modal_title_text_intro">个性签名个性签名个性签名</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -62,28 +62,26 @@ export default defineComponent({
|
||||
const router:any = useRouter()
|
||||
const store = useStore();
|
||||
let otherUsers = reactive({
|
||||
userId:'0'
|
||||
userId:'0',
|
||||
userContent:{}
|
||||
})
|
||||
// let ws = new WebSocket('ws://127.0.0.1:3000')
|
||||
// console.log(ws);
|
||||
|
||||
// ws.onopen = ()=>{
|
||||
// console.log(222);
|
||||
// let data = {
|
||||
// cmd:4,
|
||||
// data:{
|
||||
// msg:'222'
|
||||
// }
|
||||
// }
|
||||
// ws.send(JSON.stringify(data))
|
||||
// // ws.onmessage = (data)=>{
|
||||
// // console.log(data);
|
||||
// // }
|
||||
// }
|
||||
// provide('exhibitionList',exhibitionList)
|
||||
let getUserDetail = (id:any)=>{
|
||||
let data = {
|
||||
id:id
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.personalHomepage,{params:data}).then((rv)=>{
|
||||
if(rv){
|
||||
otherUsers.userContent = rv
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
onMounted (()=>{
|
||||
otherUsers.userId = router.currentRoute.value.query?.id
|
||||
otherUsers.userId = router.currentRoute.value.query?.userId
|
||||
// alert()
|
||||
getUserDetail(otherUsers.userId)
|
||||
|
||||
})
|
||||
return{
|
||||
...toRefs(otherUsers),
|
||||
|
||||
Reference in New Issue
Block a user