消息中心
This commit is contained in:
248
pages/news/detail.vue
Normal file
248
pages/news/detail.vue
Normal 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>
|
||||
Reference in New Issue
Block a user