Browse Source

添加消息列表

wms3.0_pda
lijuncheng 11 months ago
parent
commit
1313f08ea9
  1. 54
      api/request2.js
  2. 23
      pages.json
  3. 96
      pages/message/details.vue
  4. 320
      pages/message/index.vue
  5. 4
      static/images/message.svg

54
api/request2.js

@ -96,6 +96,60 @@ export function updateUserPwd(oldPassword, newPassword) {
}) })
} }
/**
* 获取消息列表
* @param {*}
*
*/
export function getMessageList(pageNo,pageSize) {
return request({
url: baseApi + "/system/notify-message/my-page?pageNo="+pageNo+"&pageSize="+pageSize,
method: "get",
data: {},
});
}
/**
* 标记站内信为已读
* @param {*}
*
*/
export function setMessageUpdateRead(ids) {
return request({
url: baseApi + "/system/notify-message/update-read?ids="+ids,
method: "put",
data: {},
});
}
/**
* 标记所有站内信为已读
* @param {*}
*
*/
export function setAllMessageUpdateRead() {
return request({
url: baseApi + "/system/notify-message/update-all-read",
method: "put",
data: {},
});
}
/**
* 获取当前用户的未读站内信数量
* @param {*}
*
*/
export function getMessageUnreadCount() {
return request({
url: baseApi + "/system/notify-message/get-unread-count",
method: "get",
data: {},
});
}
/** /**
* 获取配置字典 * 获取配置字典
* @param {*} * @param {*}

23
pages.json

@ -24,6 +24,28 @@
} }
} }
}, },
{
"path": "pages/message/details",
"style": {
"navigationBarTitleText": "消息详情",
"enablePullDownRefresh": false,
"titleNView": {
// "autoBackButton": "true",
"buttons": [
//
{
"float": "right",
"fontSize": "58rpx", //
"text": "\ue696",
"fontSrc": "/static/ali_icon/iconfont.ttf"
}
]
}
}
},
{ {
"path": "pages/common/webview/index", "path": "pages/common/webview/index",
@ -1801,6 +1823,7 @@
"pagePath": "pages/message/index", "pagePath": "pages/message/index",
"iconPath": "static/bar/xx.svg", "iconPath": "static/bar/xx.svg",
"selectedIconPath": "static/bar/xxa.svg", "selectedIconPath": "static/bar/xxa.svg",
"enablePullDownRefresh": true,
"text": "消息" "text": "消息"
}, { }, {
"pagePath": "pages/setter/index", "pagePath": "pages/setter/index",

96
pages/message/details.vue

@ -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>

320
pages/message/index.vue

@ -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.templateCode" 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>

4
static/images/message.svg

@ -0,0 +1,4 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.7208 12.1858C26.7208 9.87284 25.802 7.65464 24.1665 6.01914C22.531 4.38365 20.3128 3.46484 17.9999 3.46484C15.6869 3.46484 13.4687 4.38365 11.8332 6.01914C10.1977 7.65464 9.27892 9.87284 9.27892 12.1858C9.27892 22.3602 4.91846 25.2672 4.91846 25.2672H31.0812C31.0812 25.2672 26.7208 22.3602 26.7208 12.1858Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.5144 31.082C20.2589 31.5226 19.8921 31.8882 19.4508 32.1424C19.0095 32.3966 18.5092 32.5304 17.9999 32.5304C17.4906 32.5304 16.9903 32.3966 16.549 32.1424C16.1077 31.8882 15.7409 31.5226 15.4854 31.082" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 803 B

Loading…
Cancel
Save