9 changed files with 502 additions and 18 deletions
@ -0,0 +1,96 @@ |
|||
<template> |
|||
<view class="contant" style="background-color: #fff;"> |
|||
|
|||
<view class="title">{{detail.templateNickname}}</view> |
|||
<view class="article">消息类型 : {{detail.templateCode}}</view> |
|||
<view class="article">消息内容 : {{detail.templateContent}}</view> |
|||
<view class="article">读取状态 : {{detail.readStatus==true?"已读":"未读"}}</view> |
|||
<view class="righttext">创建时间 : {{formatDate(detail.createTime)}}</view> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
goHome |
|||
} from '@/common/basic.js'; |
|||
import { |
|||
dateFormat |
|||
} from '@/common/basic.js'; |
|||
export default { |
|||
onNavigationBarButtonTap(e) { |
|||
if (e.index === 0) { |
|||
goHome(); |
|||
}else if(e.index === 1){ |
|||
window.location.reload(); |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
detail: {} |
|||
} |
|||
}, |
|||
// created() { |
|||
// this.getmessages() |
|||
// }, |
|||
|
|||
onLoad: function(param) { |
|||
this.detail = JSON.parse(decodeURIComponent(param.detail)); |
|||
}, |
|||
|
|||
methods: { |
|||
formatDate(date) { |
|||
return dateFormat(date) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.contant { |
|||
padding: 20upx; |
|||
} |
|||
|
|||
.authorbox { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
color: #808080; |
|||
align-items: center; |
|||
border-bottom: 1rpx solid #eeeeee; |
|||
font-size: 30upx; |
|||
padding-bottom: 30upx; |
|||
|
|||
} |
|||
|
|||
.author { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
color: #808080; |
|||
align-items: center; |
|||
} |
|||
|
|||
.picture { |
|||
width: 80upx; |
|||
height: 80upx; |
|||
border-radius: 50upx; |
|||
margin-right: 25upx; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 40upx; |
|||
padding: 30upx 0 20upx 0; |
|||
} |
|||
|
|||
.article { |
|||
font-size: 35upx; |
|||
color: #555555; |
|||
padding: 20upx 0 20upx 0; |
|||
} |
|||
|
|||
.righttext { |
|||
text-align: right; |
|||
font-size: 35upx; |
|||
color: #555555; |
|||
padding: 30upx 0 20upx 0; |
|||
} |
|||
</style> |
|||
@ -1,9 +1,325 @@ |
|||
<template> |
|||
消息 |
|||
|
|||
<view class="body-view msg_body"> |
|||
<!-- 头部 --> |
|||
<scroll-view class="top-menu-view" scroll-x="true" :scroll-left="scrollLeft"> |
|||
<block v-for="(menuTab,index) in menuTabs" :key="index"> |
|||
<view class="menu-topic-view" v-bind:id="'tabNum'+index" @click="swichMenu(index)" clickable> |
|||
<view :class="[currentTab==index ? 'menu-topic-act' : 'menu-topic']"> |
|||
<view class="menu-topic-txt">{{menuTab.name}} |
|||
<text v-if="menuTab.name == '全部'" |
|||
:class="[unreadCount>0?'tipred':'' ]">{{Math.abs(unreadCount)>99?'99+':unreadCount==0?'':unreadCount}}</text> |
|||
</view> |
|||
<view class="menu-topic-bottom"> |
|||
<view class="menu-topic-bottom-color"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
</scroll-view> |
|||
<view class="flex flex-column" style="display: flex;flex-direction: column; width: 100%;margin-bottom: 120rpx;"> |
|||
<view class=""> |
|||
<!-- :badge-text="item.readStatus == false?'dot':''" --> |
|||
<uni-list class="list msg_list"> |
|||
<uni-list :border="true" v-for="(item, index) in allMessageList " :key="item.id"> |
|||
<uni-list-chat :title="item.templateNickname" avatar="/static/images/message.svg" clickable |
|||
:note="item.templateContent" :time="formatDate(item.createTime)" badge-positon="left" |
|||
|
|||
@click="jumpdetails(item)" |
|||
:class="item.readStatus == false?'':'hasread'" is=""></uni-list-chat> |
|||
<u-line color="#909399" /> |
|||
</uni-list> |
|||
</uni-list> |
|||
</view> |
|||
<uni-load-more :status="loadingType" v-if="allMessageList.length>0" /> |
|||
</view> |
|||
<com-message ref="comMessage"></com-message> |
|||
|
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import comMessage from '@/mycomponents/common/comMessage.vue' |
|||
import { |
|||
getMessageList, |
|||
getMessageUnreadCount, |
|||
setMessageUpdateRead |
|||
} from '@/api/request2.js'; |
|||
import { |
|||
dateFormat |
|||
} from '@/common/basic.js'; |
|||
|
|||
export default { |
|||
name: '', |
|||
components: { |
|||
comMessage |
|||
|
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
messageList: [], |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
allMessageList: [], |
|||
loadingType: "nomore", |
|||
unreadCount: 0, |
|||
indicatorDots: true, |
|||
autoplay: true, |
|||
interval: 2000, |
|||
duration: 500, |
|||
scrollLeft: 0, |
|||
isClickChange: false, |
|||
currentTab: 0, |
|||
// Tab分类标题 |
|||
menuTabs: [{ |
|||
name: '全部' |
|||
}, |
|||
// { |
|||
// name: '系统' |
|||
// }, { |
|||
// name: '通知' |
|||
// }, { |
|||
// name: '私信' |
|||
// }, |
|||
], |
|||
}; |
|||
}, |
|||
|
|||
|
|||
onShow() { |
|||
this.getMessageList("refresh") |
|||
this.getMessageUnreadCount(); |
|||
}, |
|||
onPullDownRefresh() { |
|||
this.getMessageList('refresh'); |
|||
this.getMessageUnreadCount(); |
|||
}, |
|||
onReachBottom() { |
|||
//避免多次触发 |
|||
if (this.loadingType == 'loading' || this.loadingType == 'nomore') { |
|||
return; |
|||
} |
|||
this.getMessageList("more"); |
|||
}, |
|||
methods: { |
|||
getMessageList(type) { |
|||
uni.showLoading({ |
|||
title: "加载中....", |
|||
mask: true |
|||
}); |
|||
if (type == "refresh") { |
|||
this.pageNo = 1 |
|||
this.pageSize = 10 |
|||
this.allMessageList = [] |
|||
} |
|||
|
|||
getMessageList(this.pageNo, this.pageSize).then(res => { |
|||
uni.hideLoading(); |
|||
if (type === "refresh") { |
|||
uni.stopPullDownRefresh(); |
|||
} |
|||
var list = res.data.list; |
|||
this.loadingType = "loadmore"; |
|||
if (list == null || list.length == 0) { |
|||
this.loadingType = "nomore"; |
|||
return; |
|||
} |
|||
this.allMessageList = type === "refresh" ? list : this.allMessageList.concat(list); |
|||
this.pageNo++; |
|||
|
|||
}).catch(error => { |
|||
uni.hideLoading(); |
|||
this.showMessage(error); |
|||
}) |
|||
}, |
|||
showMessage(message) { |
|||
this.$refs.comMessage.showErrorMessage(message, res => { |
|||
if (res) { |
|||
|
|||
} |
|||
}); |
|||
}, |
|||
formatDate(date) { |
|||
return dateFormat(date) |
|||
}, |
|||
getMessageUnreadCount() { |
|||
getMessageUnreadCount().then(res => { |
|||
this.unreadCount = res.data |
|||
}) |
|||
}, |
|||
jumpdetails(detail) { |
|||
if (!detail.readStatus) { |
|||
setMessageUpdateRead(detail.id).then((res) => { |
|||
detail.readStatus = true |
|||
uni.navigateTo({ |
|||
url: './details?detail=' + encodeURIComponent(JSON.stringify(detail)) |
|||
}); |
|||
}) |
|||
} else { |
|||
uni.navigateTo({ |
|||
url: './details?detail=' + encodeURIComponent(JSON.stringify(detail)) |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
.body-view { |
|||
height: 100%; |
|||
width: 100%; |
|||
display: flex; |
|||
flex: 1; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
align-items: flex-start; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.body-view .right-arrow { |
|||
position: absolute; |
|||
top: 22upx; |
|||
right: 0upx; |
|||
padding-left: 60upx; |
|||
padding-right: 20upx; |
|||
line-height: 42upx; |
|||
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%); |
|||
} |
|||
|
|||
.body-view .right-arrow .iconfont { |
|||
font-size: 24upx; |
|||
font-family: iconfont; |
|||
color: #909399; |
|||
} |
|||
|
|||
.top-menu-view { |
|||
display: flex; |
|||
white-space: nowrap; |
|||
width: 100%; |
|||
background-color: #FFFFFF; |
|||
height: 86upx; |
|||
/* border-top: 1px solid #d8dbe6; |
|||
border-bottom: 1px solid #d8dbe6; */ |
|||
} |
|||
|
|||
.top-menu-view .menu-topic-view { |
|||
display: inline-block; |
|||
white-space: nowrap; |
|||
height: 86upx; |
|||
position: relative; |
|||
} |
|||
|
|||
.top-menu-view .menu-topic-view .menu-topic { |
|||
margin-left: 30upx; |
|||
margin-right: 10upx; |
|||
position: relative; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.uni-list--border:after { |
|||
height: 0; |
|||
} |
|||
|
|||
.top-menu-view .menu-topic-view .menu-topic:first-child { |
|||
margin-left: 30upx; |
|||
} |
|||
|
|||
.top-menu-view .menu-topic-view:last-child .menu-topic { |
|||
margin-right: 80upx; |
|||
} |
|||
|
|||
.top-menu-view .menu-topic-view .menu-topic .menu-topic-txt { |
|||
font-size: 30upx; |
|||
color: #303133; |
|||
} |
|||
|
|||
.top-menu-view .menu-topic-view .menu-topic .menu-topic-bottom { |
|||
position: absolute; |
|||
bottom: 0; |
|||
width: 100%; |
|||
} |
|||
|
|||
.top-menu-view .menu-topic-view .menu-topic .menu-topic-bottom .menu-topic-bottom-color { |
|||
width: 40upx; |
|||
height: 4upx; |
|||
} |
|||
|
|||
.top-menu-view .menu-topic-view .menu-topic-act { |
|||
margin-left: 30upx; |
|||
margin-right: 10upx; |
|||
position: relative; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.top-menu-view .menu-topic-view:last-child .menu-topic-act { |
|||
margin-right: 80upx; |
|||
} |
|||
|
|||
.top-menu-view .menu-topic-view .menu-topic-act .menu-topic-txt { |
|||
font-size: 1rem; |
|||
color: #3d7eff; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.top-menu-view .menu-topic-view .menu-topic-act .menu-topic-bottom { |
|||
position: absolute; |
|||
bottom: 0; |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.top-menu-view .menu-topic-view .menu-topic-act .menu-topic-bottom .menu-topic-bottom-color { |
|||
width: 40upx; |
|||
height: 6upx; |
|||
background: #3d7eff; |
|||
} |
|||
|
|||
.swiper-box-list { |
|||
flex: 1; |
|||
width: 100%; |
|||
height: auto; |
|||
height: 900upx; |
|||
background-color: #FFFFFF; |
|||
} |
|||
|
|||
.swiper-topic-list { |
|||
height: 100%; |
|||
width: 100%; |
|||
} |
|||
|
|||
.list { |
|||
width: 100%; |
|||
} |
|||
|
|||
.tipred { |
|||
position: absolute; |
|||
top: 0; |
|||
right: -40rpx; |
|||
background-color: red; |
|||
color: #FFFFFF; |
|||
font-size: .7rem; |
|||
display: inline-block; |
|||
width: 46rpx; |
|||
height: 46rpx; |
|||
margin-bottom: 10upx; |
|||
text-align: center; |
|||
line-height: 46rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
margin-left: 10upx; |
|||
font-size: 20upx; |
|||
} |
|||
</style> |
|||
|
|||
|
After Width: | Height: | Size: 803 B |
Loading…
Reference in new issue