Skip to content

B
beyond-clouds-front
Commit a964eb62 by yanju
Options

Merge branch 'new-func#1' into 'master' 

获取消息列表

See merge request pigbigbig/beyond-clouds-front!108
parents 8a93db70 31470d55
Showing with 557 additions and 113 deletions
components/pc/alertsMessage/alertsCard.vue
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</div> </div>
<div class="alerts-card__footer"> <div class="alerts-card__footer">
<nuxt-link to="/personal-center/message">查看全部 （ {{ totalRecords }} ） </nuxt-link> <nuxt-link to="/personal-center/message/all">查看全部 （ {{ totalRecords }} ） </nuxt-link>
</div> </div>
</div> </div>
</div> </div>
......
components/pc/alertsMessage/alertsContent.vue
<template> <template>
<div class="wrap"> <div class="wrap">
<nuxt-link to="/personal-center/message" tag="p" v-html="info.mscContent" <nuxt-link to="/personal-center/message/all" tag="p" v-html="info.msgContent"
@click="handleRead" @click="handleRead"
:style="{color: fontColor}" :style="{color: fontColor}"
></nuxt-link> ></nuxt-link>
......
components/pc/noticeCard.vue
<template> <template>
<div class="notice-card__wrap"> <transition name="fade-transform" mode="out-in">
<div class="notice-card__wrap" v-if="showCard">
<div class="notice-card"> <div class="notice-card">
<div class="notice-card__top"> <div class="notice-card__top">
<div class="card-top_l"> <div class="card-top_l">
<yun-avatar :src="src" size="42px" :name="name"></yun-avatar> <yun-avatar :userId="fromId!=='SYS'?fromId:''" :src="fromAvatar" size="42px" :name="fromName"></yun-avatar>
<div class="info-box"> <div class="info-box">
<div class="info1"> <div class="info1">
<p class="name">{{name}}</p> <p class="name">{{fromName}}</p>
<p class="thing">{{thing}}</p> <!-- <p class="thing">{{thing}}</p>-->
<p class="date">{{date}}</p> <p class="date">{{dataConvert(createTime)}}</p>
</div> </div>
<p class="info2">{{content}}</p> <div class="info2" v-html="msgContent"></div>
</div> </div>
</div> </div>
<div class="card-top_r"> <div v-if="status===1" class="card-top_r">
<div></div> <p class="read">消息已读</p>
<p v-if="!befollow&&!following">查看详情</p> <p class="delete" @click="showAlert">
<p v-if="befollow">关注</p> <yun-icon class="close" name="delete"></yun-icon>
<h6 v-if="following">互相关注</h6> </p>
</div> </div>
</div> <div v-if="status===0" class="card-top_r">
<div class="notice-card__bottom"> <p class="unread" @click="dataPutRead">R</p>
<div class="comment-card"> <p class="delete" @click="showAlert">
<div class="info1"> <yun-icon class="close" name="delete" ></yun-icon>
<span class="name">{{commentName}}:</span> </p>
<span class="comment">{{commentContent}}</span>
</div>
<p class="info2">{{commentDate}}</p>
</div> </div>
</div> </div>
<!-- <div class="notice-card__bottom">-->
<!-- <div class="comment-card">-->
<!-- <div class="info1">-->
<!-- <span class="name">{{commentName}}:</span>-->
<!-- <span class="comment">{{commentContent}}</span>-->
<!-- </div>-->
<!-- <p class="info2">{{commentDate}}</p>-->
<!-- </div>-->
<!-- </div>-->
</div> </div>
</div> </div>
</transition>
</template> </template>
<script> <script>
import {dateConvert} from "../../action/utils/dataConvert";
import config from "../../action/config";
export default { export default {
name:'noticeCard', name:'noticeCard',
data(){ data(){
return{ return{
src:'https://s2.ax1x.com/2020/01/15/lO2kIf.png', createTime:'',
name:'man', msgContent:'',
sex:'man', fromId:'',
thing:'manmanmanmanmanmanmanmanman', fromName:'',
date:'2020-1-1', fromAvatar:'',
content:'manmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanman', toId :'',
projectNum:6, status :'',
blogNum:6, messageId :'',
answerNum:6, showCard:true,
popularity:6,
follow:7, }
fans:7, },
props:{
following:false, info:{
befollow:true, type:Object,
default:()=>({})
commentName:'lilili',
commentContent:'lilili',
commentDate:'lilili',
} }
},
created() {
this.dataGet2Info()
},
methods:{
dataConvert(date){
return dateConvert(date)
},
dataGet2Info(){
let info = this.info;
this.createTime = info.createTime;
this.msgContent = info.msgContent;
this.fromId = info.fromId;
this.fromName = info.fromName;
this.fromAvatar = info.fromAvatar;
this.toId = info.toId;
this.status = info.status;
this.messageId = info.messageId;
},
dataPutRead() {
this.$axios.$put(config.api.put.Message.read+this.messageId+'/read').then((response) => {
if (response.code=== 0) {
this.$message({
type: 'success',
message: '已标记已读'
});
this.status =1
} else {
this.$message({
type: 'warning',
message: '操作失败'
});
}
})
},
showAlert(){
this.$alert('确认删除？', '', {
confirmButtonText: '确定',
callback: action => {
this.dataDeleteMessage()
}
});
},
dataDeleteMessage() {
this.$axios.$delete(config.api.delete.Message.delete+this.messageId).then((response) => {
if(response.code===0){
this.$message({
type: 'success',
message: '已删除消息！'
});
this.showCard = false;
}else{
this.$message({
type: 'warning',
message: '删除消息失败！'
});
}
})
},
} }
} }
</script> </script>
...@@ -118,15 +199,44 @@ ...@@ -118,15 +199,44 @@
.card-top_r{ .card-top_r{
height:100%; height:100%;
@extend %flex-column-spb; @extend %flex-row-spb;
.delete{
margin-left: 10*$length;
@extend %cursorPointer;
@extend %animate-transition;
@include fontStyle(12,36,500,#fff,center);
background-color: #FF7474;
border-radius: 18*$length;
width:36*$length;
@extend %flex-row-center;
.close{
font-size:12*$font-size; ;
}
&:hover{
filter:brightness(130%);
}
}
/*justify-content: flex-end;*/ /*justify-content: flex-end;*/
p{ .unread{
@extend %cursorPointer; @extend %cursorPointer;
@extend %animate-transition; @extend %animate-transition;
@include fontStyle(12,36,500,#fff,center); @include fontStyle(12,36,500,#fff,center);
background-color: #00AAE6; background-color: #00AAE6;
border-radius: 18*$length;
width:36*$length;
&:hover{
filter:brightness(130%);
}
}
.read{
@extend %cursorPointer;
@extend %animate-transition;
@include fontStyle(12,36,500,#999,center);
background-color: #fff;
border-radius: 4*$length; border-radius: 4*$length;
width:100*$length; width:90*$length;
&:hover{ &:hover{
filter:brightness(130%); filter:brightness(130%);
......
components/pc/pagination.vue
...@@ -71,8 +71,12 @@ ...@@ -71,8 +71,12 @@
this.scrollToGetNext(); this.scrollToGetNext();
} }
}, },
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
},
watch:{ watch:{
currentPage(pre,now){ currentPage(pre,now){
this.clickToTop();
this.$emit(config.event.listenPageChange,pre) this.$emit(config.event.listenPageChange,pre)
} }
}, },
...@@ -96,6 +100,33 @@ ...@@ -96,6 +100,33 @@
methods:{ methods:{
clickToTop(){
clearInterval(this.timer)
this.changeStyleToTop(30);
},
changeStyleToTop(time){
if(process.browser){
let top = document.documentElement.scrollTop;
let scrollNum = top/100;
let time2 =time/scrollNum/1000;
let that = this;
if(top<5000){
this.timer = setInterval(function () {
if(document.documentElement.scrollTop>0){
document.documentElement.scrollTop-=100
}else{
clearInterval(that.timer)
}
},time2)
}else{
document.documentElement.scrollTop=0;
}
}
},
setCurrentPage(n){ setCurrentPage(n){
this.currentPage = 1; this.currentPage = 1;
this.$emit(config.event.listenPageChange,1) this.$emit(config.event.listenPageChange,1)
......
pages/personal-center/message.vue
...@@ -9,46 +9,42 @@ ...@@ -9,46 +9,42 @@
<div class="message-container__r"> <div class="message-container__r">
<div class="container__tab"> <div class="container__tab">
<div class="tab__left"> <div class="tab__left">
<div class="left__item"> <nuxt-link tag="div" class="left__item" to="/personal-center/message/all">
<p class="abs"></p> <p class="abs"></p>
<p class="word">全部</p> <p class="word">全部</p>
<p class="line" v-if="selected==='全部'"></p> <p class="line" v-if="selected==='personal-center-message-all'"></p>
</div> </nuxt-link>
<!-- <div class="left__item">--> <nuxt-link tag="div" class="left__item" to="/personal-center/message/comment">
<!-- <p class="abs"></p>--> <p class="abs"></p>
<!-- <p class="word">评论</p>--> <p class="word">评论</p>
<!-- <p class="line" v-if="selected==='评论'"></p>--> <p class="line" v-if="selected==='personal-center-message-comment'"></p>
<!-- </div>--> </nuxt-link>
<!-- <div class="left__item">--> <nuxt-link tag="div" class="left__item" to="/personal-center/message/praise">
<!-- <p class="abs"></p>--> <p class="abs"></p>
<!-- <p class="word">喜欢</p>--> <p class="word">喜欢</p>
<!-- <p class="line" v-if="selected==='评论'"></p>--> <p class="line" v-if="selected==='personal-center-message-praise'"></p>
<!-- </div>--> </nuxt-link>
<!-- <div class="left__item">--> <nuxt-link tag="div" class="left__item" to="/personal-center/message/follow">
<!-- <p class="abs"></p>--> <p class="abs"></p>
<!-- <p class="word">粉丝</p>--> <p class="word">粉丝</p>
<!-- <p class="line" v-if="selected==='评论'"></p>--> <p class="line" v-if="selected==='personal-center-message-follow'"></p>
<!-- </div>--> </nuxt-link>
<!-- <div class="left__item">--> <nuxt-link tag="div" class="left__item" to="/personal-center/message/notice">
<!-- <p class="abs"></p>--> <p class="abs"></p>
<!-- <p class="word">公告</p>--> <p class="word">公告</p>
<!-- <p class="line" v-if="selected==='评论'"></p>--> <p class="line" v-if="selected==='personal-center-message-notice'"></p>
<!-- </div>--> </nuxt-link>
</div> </div>
<p class="tab__right" @click="dataPutReadAll"> <p class="tab__right" @click="dataPutReadAll">
全部标记为已读 全部标记为已读
</p> </p>
</div> </div>
<notice-card v-for="(val,index) in message" :key="val.messageId" :info="val"></notice-card> <nuxt-child></nuxt-child>
<empty-card v-if="message.length===0" height="556px"></empty-card>
<pagination ref="pagination" style="margin: 0 auto;padding:20px 0;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
</div> </div>
</div> </div>
</template> </template>
...@@ -56,11 +52,8 @@ ...@@ -56,11 +52,8 @@
<script> <script>
import NoticeCard from '../../components/pc/noticeCard2';
import NavWrap from "../../components/pc/nav/navWrap"; import NavWrap from "../../components/pc/nav/navWrap";
import config from "../../action/config"; import config from "../../action/config";
import EmptyCard from "../../components/pc/emptyCard";
import Pagination from '../../components/pc/pagination';
export default { export default {
...@@ -73,43 +66,25 @@ ...@@ -73,43 +66,25 @@
id: '我的消息' id: '我的消息'
} }
], ],
selected: '全部',
message:[],
pages:1
} }
}, },
components: { components: {
NavWrap
},
NoticeCard, NavWrap,EmptyCard,Pagination watch:{
$route(to,from){
if(this.$route.name){
this.selected = this.$route.name;
}
}
}, },
created() {
created() {
this.selected = this.$route.name;
}, },
methods: { methods: {
dataGetMessages(currentPage) {
this.$axios.$get(config.api.get.Message.list, {
params: {
page: currentPage,
size: 10
}
}).then((response) => {
this.message = response.data.dataList;
this.pages = response.data.totalPage;
});
},
restartPagination(){
if(process.browser){
this.$refs.pagination.setCurrentPage(1)
}
},
dataPutReadAll() { dataPutReadAll() {
this.$axios.$put(config.api.put.Message.readAll).then((response) => { this.$axios.$put(config.api.put.Message.readAll).then((response) => {
...@@ -129,12 +104,6 @@ ...@@ -129,12 +104,6 @@
}) })
}, },
changePage(currentPage){
//返回页数 请求新的数据
this.dataGetMessages(currentPage)
}
} }
} }
</script> </script>
......
pages/personal-center/message/all.vue 0 → 100644
<template>
<div>
<notice-card v-for="(val,index) in message" :key="val.messageId" :info="val"></notice-card>
<empty-card v-if="message.length===0" height="556px"></empty-card>
<pagination ref="pagination" style="margin: 0 auto;padding:20px 0;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
</div>
</template>
<script>
import NoticeCard from '../../../components/pc/noticeCard';
import config from '../../../action/config';
import Pagination from "../../../components/pc/pagination";
import EmptyCard from "../../../components/pc/emptyCard";
export default {
name:'comment',
data(){
return{
message:[],
pages:1
}
},
components:{
NoticeCard,Pagination,EmptyCard
},
methods:{
dataGetMessages(currentPage) {
this.$axios.$get(config.api.get.Message.list, {
params: {
page: currentPage,
size: 10,
}
}).then((response) => {
this.message = response.data.dataList;
this.pages = response.data.totalPage;
});
},
dataPutReadAll() {
this.$axios.$put(config.api.put.Message.readAll).then((response) => {
if(response.code===0){
this.$message({
type: 'success',
message: '已全部标记已读'
});
this.message = [];
this.restartPagination();
} else {
this.$message({
type: 'warning',
message: '没有未读信息'
});
}
})
},
changePage(currentPage){
//返回页数 请求新的数据
this.dataGetMessages(currentPage)
}
},
}
</script>
pages/personal-center/message/comment.vue 0 → 100644
<template>
<div>
<notice-card v-for="(val,index) in message" :key="val.messageId" :info="val"></notice-card>
<empty-card v-if="message.length===0" height="556px"></empty-card>
<pagination ref="pagination" style="margin: 0 auto;padding:20px 0;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
</div>
</template>
<script>
import NoticeCard from '../../../components/pc/noticeCard';
import config from '../../../action/config';
import Pagination from "../../../components/pc/pagination";
import EmptyCard from "../../../components/pc/emptyCard";
export default {
name:'comment',
data(){
return{
message:[],
pages:1
}
},
components:{
NoticeCard,Pagination,EmptyCard
},
methods:{
dataGetMessages(currentPage) {
this.$axios.$get(config.api.get.Message.list, {
params: {
page: currentPage,
size: 10,
type:'COMMENT'
}
}).then((response) => {
this.message = response.data.dataList;
this.pages = response.data.totalPage;
});
},
dataPutReadAll() {
this.$axios.$put(config.api.put.Message.readAll).then((response) => {
if(response.code===0){
this.$message({
type: 'success',
message: '已全部标记已读'
});
this.message = [];
this.restartPagination();
} else {
this.$message({
type: 'warning',
message: '没有未读信息'
});
}
})
},
changePage(currentPage){
//返回页数 请求新的数据
this.dataGetMessages(currentPage)
}
},
}
</script>
pages/personal-center/message/follow.vue 0 → 100644
<template>
<div>
<notice-card v-for="(val,index) in message" :key="val.messageId" :info="val"></notice-card>
<empty-card v-if="message.length===0" height="556px"></empty-card>
<pagination ref="pagination" style="margin: 0 auto;padding:20px 0;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
</div>
</template>
<script>
import NoticeCard from '../../../components/pc/noticeCard';
import config from '../../../action/config';
import Pagination from "../../../components/pc/pagination";
import EmptyCard from "../../../components/pc/emptyCard";
export default {
name:'comment',
data(){
return{
message:[],
pages:1
}
},
components:{
NoticeCard,Pagination,EmptyCard
},
methods:{
dataGetMessages(currentPage) {
this.$axios.$get(config.api.get.Message.list, {
params: {
page: currentPage,
size: 10,
type:'FOLLOW'
}
}).then((response) => {
this.message = response.data.dataList;
this.pages = response.data.totalPage;
});
},
dataPutReadAll() {
this.$axios.$put(config.api.put.Message.readAll).then((response) => {
if(response.code===0){
this.$message({
type: 'success',
message: '已全部标记已读'
});
this.message = [];
this.restartPagination();
} else {
this.$message({
type: 'warning',
message: '没有未读信息'
});
}
})
},
changePage(currentPage){
//返回页数 请求新的数据
this.dataGetMessages(currentPage)
}
},
}
</script>
pages/personal-center/message/notice.vue 0 → 100644
<template>
<div>
<notice-card v-for="(val,index) in message" :key="val.messageId" :info="val"></notice-card>
<empty-card v-if="message.length===0" height="556px"></empty-card>
<pagination ref="pagination" style="margin: 0 auto;padding:20px 0;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
</div>
</template>
<script>
import NoticeCard from '../../../components/pc/noticeCard';
import config from '../../../action/config';
import Pagination from "../../../components/pc/pagination";
import EmptyCard from "../../../components/pc/emptyCard";
export default {
name:'comment',
data(){
return{
message:[],
pages:1
}
},
components:{
NoticeCard,Pagination,EmptyCard
},
methods:{
dataGetMessages(currentPage) {
this.$axios.$get(config.api.get.Message.list, {
params: {
page: currentPage,
size: 10,
type:'NOTICE'
}
}).then((response) => {
this.message = response.data.dataList;
this.pages = response.data.totalPage;
});
},
dataPutReadAll() {
this.$axios.$put(config.api.put.Message.readAll).then((response) => {
if(response.code===0){
this.$message({
type: 'success',
message: '已全部标记已读'
});
this.message = [];
this.restartPagination();
} else {
this.$message({
type: 'warning',
message: '没有未读信息'
});
}
})
},
changePage(currentPage){
//返回页数 请求新的数据
this.dataGetMessages(currentPage)
}
},
}
</script>
pages/personal-center/message/praise.vue 0 → 100644
<template>
<div>
<notice-card v-for="(val,index) in message" :key="val.messageId" :info="val"></notice-card>
<empty-card v-if="message.length===0" height="556px"></empty-card>
<pagination ref="pagination" style="margin: 0 auto;padding:20px 0;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
</div>
</template>
<script>
import NoticeCard from '../../../components/pc/noticeCard';
import config from '../../../action/config';
import Pagination from "../../../components/pc/pagination";
import EmptyCard from "../../../components/pc/emptyCard";
export default {
name:'comment',
data(){
return{
message:[],
pages:1
}
},
components:{
NoticeCard,Pagination,EmptyCard
},
methods:{
dataGetMessages(currentPage) {
this.$axios.$get(config.api.get.Message.list, {
params: {
page: currentPage,
size: 10,
type:'PRAISE'
}
}).then((response) => {
this.message = response.data.dataList;
this.pages = response.data.totalPage;
});
},
dataPutReadAll() {
this.$axios.$put(config.api.put.Message.readAll).then((response) => {
if(response.code===0){
this.$message({
type: 'success',
message: '已全部标记已读'
});
this.message = [];
this.restartPagination();
} else {
this.$message({
type: 'warning',
message: '没有未读信息'
});
}
})
},
changePage(currentPage){
//返回页数 请求新的数据
this.dataGetMessages(currentPage)
}
},
}
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment