180 lines
4.6 KiB
Vue
180 lines
4.6 KiB
Vue
<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/imgs/news_1.png'" mode="aspectFill"></image>
|
|
<image class="img" v-if='item.type ==="OrderNotification"' :src="item.icon?item.icon:'/static/imgs/news_2.png'" mode="aspectFill"></image>
|
|
<image class="img" v-if='item.type ==="CouponNotification"' :src="item.icon?item.icon:'/static/imgs/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>
|