TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

消息中心

Browse Source
This commit is contained in:
张冬雪
2021-09-25 10:53:25 +08:00
parent 220b7b3d3e
commit 2d0fbac73b
4 changed files with 496 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
apis/interfaces/news.js Normal file
View File

@@ -0,0 +1,53 @@
/**
* Web-zdx
* moduleName: 通知消息列表
*/
import {request} from '../index.js'
// 消息列表
const notificationsType = () => {
return request({
url: 'notifications',
method: 'GET'
})
}
// 根据type 获取具体消息列表
const notificationsList = (type,data) => {
return request({
url: 'notifications/'+type+'/list',
method: 'GET',
data:data
})
}
// 根据type 全部已读
const notificationsReaded = (type) => {
return request({
url: 'notifications/'+type,
method: 'PUT'
})
}
// 根据type 全部已读
const notificationsDelete= () => {
return request({
url: 'notifications',
method: 'DELETE'
})
}
// 根据消息id获取消息详情
const notificationsDetail= (id) => {
return request({
url: 'notifications/'+id,
method: 'get'
})
}
export {
notificationsType,
notificationsList,
notificationsDetail,
notificationsReaded,
notificationsDelete
}

17
pages.json
View File

@@ -129,7 +129,22 @@
"style": {
"navigationBarTitleText": "企业认证"
}
}],
},{
"path": "pages/news/index",
"name": "news",
"auth": true,
"style": {
"navigationBarTitleText": "消息中心"
}
},{
"path": "pages/news/detail",
"name": "newsDetail",
"auth": true,
"style": {
"navigationBarTitleText": "消息列表"
}
}
],
"globalStyle": {
"navigationStyle": "custom",
"backgroundColor": "#F5F5F5"

248
pages/news/detail.vue Normal file
View File

@@ -0,0 +1,248 @@
<template>
<view class="News-detail" v-if="loaded">
<view class="item" v-for="(item,index) in items" v-if="items.length>0"
@click="item.read_at === ''?read(index,item):noread(item)">
<view class="top">
<image src="/static/images/news_2_1.png" mode="widthFix"></image>
<!-- <image v-if="index===1" src="/static/img/news_1_1.png" mode="widthFix"></image>
<image v-if="index===2" src="/static/img/news_3_1.png" mode="widthFix"></image> -->
<view :style="item.read_at=== '' ?'flex:1;':'flex:1;color:#808080;'">{{item.title}}</view>
</view>
<view class="des">{{item.content}}</view>
<view class="time">{{item.created_at}}</view>
<view class="read_at" v-if="item.read_at === ''"></view>
</view>
<no-list v-if="items.length === 0" name='no-new1' txt="空空如也~" />
</view>
</template>
<script>
import {
notificationsList,
notificationsDetail,
notificationsReaded
} from '@/apis/interfaces/news.js'
export default {
data() {
return {
items: [],
page: 1,
has_more: true,
loaded: false
};
},
onLoad(e) {
this.type = e.type
this.notificationsList()
},
onReachBottom() {
this.notificationsList()
},
// 右侧全部已读
onNavigationBarButtonTap(e) {
// #ifdef APP-PLUS
var currentWebview = this.$mp.page.$getAppWebview()
var tn = currentWebview.getStyle().titleNView
var text = tn.buttons[0].text
if (text == '全部已读') {
notificationsReaded(this.type).then(res => {
this.items.find((item, index) => {
this.$set(item, 'read_at', 'zdx')
})
uni.showToast({
title: '全部已读',
icon: 'none'
})
uni.setStorageSync('refresh',true)
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'nonde'
})
})
}
// #endif
},
methods: {
// 点击每个消息，假装查看详情，触发已读效果$set
read(index, item) {
let notification_id = item.notification_id
notificationsDetail(notification_id).then(res => {
this.$set(this.items[index], 'read_at', '已读已读')
uni.setStorageSync('refresh',true)
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'nonde'
})
})
if (item.url) {
switch (item.url.openType) {
case 'web':
// #ifdef APP-PLUS
plus.runtime.openURL(item.url.url)
return
// #endif
window.location.href = item.url.url
break;
case 'navigateTo':
uni.navigateTo({
url: item.url.path
})
break;
case 'switchTab':
uni.switchTab({
url: item.url.path
})
break;
default:
uni.showToast({
title: '活动过期,请联系系统管理员',
icon: 'none'
})
break;
}
}
},
// 消息列表
notificationsList() {
if (this.has_more) {
notificationsList(this.type, {
page: this.page
}).then(res => {
this.items = this.items.concat(res.data)
if (res.page.has_more) {
this.page = this.page + 1
}
this.has_more = res.page.has_more
this.loaded = true
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'nonde'
})
})
} else {
uni.showToast({
title: '没有更多啦~',
icon: 'none'
})
}
},
noread(item) {
if(item.url){
switch (item.url.openType) {
case 'web':
// #ifdef APP-PLUS
plus.runtime.openURL(item.url.url)
return
// #endif
window.location.href = item.url.url
break;
case 'navigateTo':
uni.navigateTo({
url: item.url.path
})
break;
case 'switchTab':
uni.switchTab({
url: item.url.path
})
break;
default:
uni.showToast({
title: '活动过期,请联系系统管理员',
icon: 'none'
})
break;
}
}else{
uni.showToast({
title: '哎呦，已经读过了~',
icon: 'none'
})
}
}
}
}
</script>
<style lang="scss">
.News-detail {
min-height: 100vh;
width: 100%;
padding: 0 $padding*1.5 $padding*1.5 $padding*1.5;
box-sizing: border-box;
.item {
background-color: #fff;
padding: $padding*1.5;
box-shadow: 0 0 40rpx 2rpx rgba(0, 0, 0, 0.1);
border-radius: $radius-m;
margin-top: $padding*1.5;
position: relative;
.top {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
color: #353535;
font-weight: bold;
border-bottom: solid 1rpx #f8f8f8;
padding-bottom: $padding*1.3;
image {
width: 42rpx;
margin-right: $padding;
}
span {
font-size: $title-size;
}
}
.des {
font-size: $title-size-m;
padding-top: $padding;
color: #808080;
}
.time {
color: #999;
font-size: $title-size*0.9;
padding-top: $padding*0.9;
}
}
}
// 无消息
.no-news {
font-size: $title-size-m;
color: #666;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
image {
width: 70%;
margin: $padding*7 0 $margin*3 0;
opacity: 0.6;
}
}
.read_at {
background-color: red;
width: 14rpx;
height: 14rpx;
position: absolute;
top: 20rpx;
right: 20rpx;
border-radius: 50%;
}
</style>

179
pages/news/index.vue Normal file
View File

@@ -0,0 +1,179 @@
<template>
<view class="News">
<view class="list" v-for="(item,index) in items" :key="index" v-if="items.length>0">
<navigator class="item" open-type="navigate" hover-class="none" :url="'/pages/news/detail?type='+item.type">
<view class="left">
<image class="img" v-if='item.type ==="SystemNotification"' :src="item.icon?item.icon:'/static/images/news_1.png'" mode="aspectFill"></image>
<image class="img" v-if='item.type ==="OrderNotification"' :src="item.icon?item.icon:'/static/images/news_2.png'" mode="aspectFill"></image>
<image class="img" v-if='item.type ==="CouponNotification"' :src="item.icon?item.icon:'/static/images/news_3.png'" mode="aspectFill"></image>
<view class="content">
<view class="title">{{item.name}}</view>
<view class="des">{{item.title || '暂无任何未读消息'}}</view>
</view>
</view>
<view class="num" v-if="item.count>0">{{item.count}}</view>
</navigator>
</view>
<view class="no-news" v-else>
<image src="/static/img/no-news.png" mode="widthFix"></image>
暂时没有收到任何消息~
</view>
</view>
</template>
<script>
import {
notificationsType,
notificationsDelete
} from '@/apis/interfaces/news.js'
export default {
data() {
return {
items: [],
editShow: false
};
},
onShow() {
this.notificationsType()
},
// 右侧编辑按钮触发事件
onNavigationBarButtonTap(e) {
let that = this
let index = e.index
// 按钮文字的改变所需
// #ifdef APP-PLUS
let currentWebview = that.$mp.page.$getAppWebview()
let tn = currentWebview.getStyle().titleNView
let text = tn.buttons[0].text
if (text == '全部清空') {
uni.showModal({
title: '是否确认清空全部消息',
content: '确认清空',
success(res) {
if (res.confirm) {
notificationsDelete().then(res => {
that.notificationsType()
uni.showToast({
title: '全部清除啦~',
icon: 'none'
})
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'none'
})
})
}
}
})
}
// #endif
},
methods: {
notificationsType() {
notificationsType().then(res => {
this.items = res
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'nonde'
})
})
}
}
}
</script>
<style lang="scss">
.News {
height: 100vh;
// #ifdef APP-PLUS
min-height: calc(100vh - 20rpx);
// #endif
width: 100%;
// background-color: pink;
// 无消息
.no-news {
font-size: $title-size-m;
color: #666;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
image {
width: 70%;
margin-top: $padding*7;
}
}
// 消息列表
.list {
width: 94%;
margin-left: 3%;
.item {
margin-top: 20rpx;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
padding: $padding*1.5;
background-color: #fff;
border-radius: $radius*0.6;
box-sizing: 0 0 20rpx 40rpx rgba(0, 0, 0, 0.3);
.left {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
flex: 1;
.content {
flex: 1;
padding: 0 $padding*0.5;
box-sizing: border-box;
}
.img {
width: 80rpx;
height: 80rpx;
margin-right: $padding*1.2;
border-radius: 50%;
}
.title {
font-size: $title-size-m*1.1;
margin-bottom: $padding*0.5;
font-weight: bold;
}
.des {
font-size: $title-size-m*0.9;
color: #999;
}
}
.num {
background-color: $mian-color;
color: #fff;
border-radius: 50%;
width: 40rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: $title-size*.8;
padding: $padding*0.3;
text-align: center;
}
}
}
}
</style>