niexiting
10 months ago
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> |
<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> |
</template> |
||||
|
|
||||
<script> |
<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> |
</script> |
||||
|
|
||||
<style> |
<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