You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
324 lines
7.0 KiB
324 lines
7.0 KiB
<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>
|
|
.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: 36rpx;
|
|
height: 36rpx;
|
|
margin-bottom: 10upx;
|
|
text-align: center;
|
|
line-height: 36rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
margin-left: 10upx;
|
|
font-size: 20upx;
|
|
}
|
|
</style>
|
|
|