Skip to content

B
beyond-clouds-front
Commit 31470d55 by yanju
Options

获取消息列表

parent 9449ed17
Showing with 557 additions and 113 deletions
components/pc/alertsMessage/alertsCard.vue
......@@ -17,7 +17,7 @@
</div>
<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>
......
components/pc/alertsMessage/alertsContent.vue
<template>
<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"
:style="{color: fontColor}"
></nuxt-link>
......
components/pc/noticeCard.vue
<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__top">
<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="info1">
<p class="name">{{name}}</p>
<p class="thing">{{thing}}</p>
<p class="date">{{date}}</p>
<p class="name">{{fromName}}</p>
<!-- <p class="thing">{{thing}}</p>-->
<p class="date">{{dataConvert(createTime)}}</p>
</div>
<p class="info2">{{content}}</p>
<div class="info2" v-html="msgContent"></div>
</div>
</div>
<div class="card-top_r">
<div></div>
<p v-if="!befollow&&!following">查看详情</p>
<p v-if="befollow">关注</p>
<h6 v-if="following">互相关注</h6>
</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 v-if="status===1" class="card-top_r">
<p class="read">消息已读</p>
<p class="delete" @click="showAlert">
<yun-icon class="close" name="delete"></yun-icon>
</p>
</div>
<div v-if="status===0" class="card-top_r">
<p class="unread" @click="dataPutRead">R</p>
<p class="delete" @click="showAlert">
<yun-icon class="close" name="delete" ></yun-icon>
</p>
</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>
</transition>
</template>
<script>
import {dateConvert} from "../../action/utils/dataConvert";
import config from "../../action/config";
export default {
name:'noticeCard',
data(){
return{
src:'https://s2.ax1x.com/2020/01/15/lO2kIf.png',
name:'man',
sex:'man',
thing:'manmanmanmanmanmanmanmanman',
date:'2020-1-1',
content:'manmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanman',
projectNum:6,
blogNum:6,
answerNum:6,
popularity:6,
follow:7,
fans:7,
following:false,
befollow:true,
commentName:'lilili',
commentContent:'lilili',
commentDate:'lilili',
createTime:'',
msgContent:'',
fromId:'',
fromName:'',
fromAvatar:'',
toId :'',
status :'',
messageId :'',
showCard:true,
}
},
props:{
info:{
type:Object,
default:()=>({})
}
},
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>
......@@ -118,15 +199,44 @@
.card-top_r{
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;*/
p{
.unread{
@extend %cursorPointer;
@extend %animate-transition;
@include fontStyle(12,36,500,#fff,center);
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;
width:100*$length;
width:90*$length;
&:hover{
filter:brightness(130%);
......
components/pc/pagination.vue
......@@ -71,8 +71,12 @@
this.scrollToGetNext();
}
},
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
},
watch:{
currentPage(pre,now){
this.clickToTop();
this.$emit(config.event.listenPageChange,pre)
}
},
......@@ -96,6 +100,33 @@
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){
this.currentPage = 1;
this.$emit(config.event.listenPageChange,1)
......
pages/personal-center/message.vue
......@@ -9,46 +9,42 @@
<div class="message-container__r">
<div class="container__tab">
<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="word">全部</p>
<p class="line" v-if="selected==='全部'"></p>
</div>
<!-- <div class="left__item">-->
<!-- <p class="abs"></p>-->
<!-- <p class="word">评论</p>-->
<!-- <p class="line" v-if="selected==='评论'"></p>-->
<!-- </div>-->
<!-- <div class="left__item">-->
<!-- <p class="abs"></p>-->
<!-- <p class="word">喜欢</p>-->
<!-- <p class="line" v-if="selected==='评论'"></p>-->
<!-- </div>-->
<!-- <div class="left__item">-->
<!-- <p class="abs"></p>-->
<!-- <p class="word">粉丝</p>-->
<!-- <p class="line" v-if="selected==='评论'"></p>-->
<!-- </div>-->
<!-- <div class="left__item">-->
<!-- <p class="abs"></p>-->
<!-- <p class="word">公告</p>-->
<!-- <p class="line" v-if="selected==='评论'"></p>-->
<!-- </div>-->
<p class="line" v-if="selected==='personal-center-message-all'"></p>
</nuxt-link>
<nuxt-link tag="div" class="left__item" to="/personal-center/message/comment">
<p class="abs"></p>
<p class="word">评论</p>
<p class="line" v-if="selected==='personal-center-message-comment'"></p>
</nuxt-link>
<nuxt-link tag="div" class="left__item" to="/personal-center/message/praise">
<p class="abs"></p>
<p class="word">喜欢</p>
<p class="line" v-if="selected==='personal-center-message-praise'"></p>
</nuxt-link>
<nuxt-link tag="div" class="left__item" to="/personal-center/message/follow">
<p class="abs"></p>
<p class="word">粉丝</p>
<p class="line" v-if="selected==='personal-center-message-follow'"></p>
</nuxt-link>
<nuxt-link tag="div" class="left__item" to="/personal-center/message/notice">
<p class="abs"></p>
<p class="word">公告</p>
<p class="line" v-if="selected==='personal-center-message-notice'"></p>
</nuxt-link>
</div>
<p class="tab__right" @click="dataPutReadAll">
全部标记为已读
</p>
</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>
<nuxt-child></nuxt-child>
</div>
</div>
</template>
......@@ -56,11 +52,8 @@
<script>
import NoticeCard from '../../components/pc/noticeCard2';
import NavWrap from "../../components/pc/nav/navWrap";
import config from "../../action/config";
import EmptyCard from "../../components/pc/emptyCard";
import Pagination from '../../components/pc/pagination';
export default {
......@@ -73,43 +66,25 @@
id: '我的消息'
}
],
selected: '全部',
message:[],
pages:1
}
},
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: {
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() {
this.$axios.$put(config.api.put.Message.readAll).then((response) => {
......@@ -129,12 +104,6 @@
})
},
changePage(currentPage){
//返回页数 请求新的数据
this.dataGetMessages(currentPage)
}
}
}
</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