iot-ui-app/pages/tabbar/new.vue

314 lines
8.9 KiB
Vue

<template>
<view class="new-box">
<u-tabs class="tabs-box" :list="tabList" height="100" :is-scroll="false" bar-width="375" bar-height="4" :offset="[5, 106]" :bold="false" active-color="#1890ff" :current="tabIndex" @change="tabChange"></u-tabs>
<mescroll-body class="new-mescroll u-skeleton" ref="mescrollRef" top="100" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" >
<view class="new-list" v-if="newsList && newsList.length > 0">
<view class="new-list-item " v-for="(item,index) in newsList" :key="index" @tap="goDetail(index)">
<view class="item-icon-box u-skeleton-circle" :class="item.clicks===0 && tabIndex ==0 ?'unread':''">
<view v-if="item.level=='urgent'" class="item-icon">
<view class="iconfont icon-icon_notice"></view>
</view>
<view v-else-if="item.level=='warning'" class="item-icon">
<view class="iconfont icon-gaojing"></view>
</view>
<view v-else-if="item.level=='important'" class="item-icon">
<view class="iconfont icon-alert"></view>
</view>
<view v-else class="item-icon bg-info">
<view class="iconfont icon-xiaoxi"></view>
</view>
</view>
<view class="item-content">
<view class="item-time u-skeleton-fillet">{{item.createdAt||'-'}}</view>
<view class="item-title u-line-1 u-skeleton-fillet">{{item.title}}</view>
<view class="item-content-txt u-line-1 u-skeleton-fillet">{{item.remark||''}}</view>
</view>
</view>
</view>
</mescroll-body>
<!--引用组件-->
<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
</view>
</template>
<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
data() {
return {
newsList:[],
unreadNewIdList:[],
loading: true, // 是否显示骨架屏组件
upOption:{
page:{
num : 0 ,
size : 12 ,
time : null
},
noMoreSize: 4,
empty:{
icon:'https://hcwl-cdn.cdn.bcebos.com/hcapp/iotos/app/iconImg/new.png',
use : true ,
tip: '~ 消息列表为空 ~',
fixed: true,
top: "200rpx",
},
bgColor:"#fff"
},
isToken:false,
tabList:[{
name: '我的信息',
count: 0
}, {
name: '系统公告',
count: 0
}],
tabIndex: 0
}
},
mixins:[MescrollMixin],
onShow() {
console.log("消息页show")
this.isToken = uni.getStorageSync('token');
if(this.isToken){
this.mescroll.resetUpScroll();
}
},
methods:{
tabChange(index) {
this.tabIndex = index;
this.mescroll.resetUpScroll();
},
/*上拉加载的回调*/
upCallback(page) {
console.log("查询数据",page)
this.newsList = []; //追加新数据
this.mescroll.endBySize(0, 0); // 推荐
this.loading = false;
let pageNum = page.num; // 页码, 默认从1开始
let pageSize = page.size; // 页长, 默认每页10条
let obj = {
page:pageNum,
limit:pageSize,
}
if (this.isToken) {
if(this.tabIndex==0){
this.$api.newApi.getNewsList(obj).then((res)=>{
console.log("当前获取到消息",res)
if (res.data.list && res.data.list.length>0) {
// 接口返回的当前页数据列表 (数组)
let curPageData = res.data.list;
// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
let curPageLen = curPageData && curPageData.length;
//设置列表数据
console.log(curPageLen,res.data.total);
if(pageNum == 1){
this.newsList = []; //如果是第一页需手动置空列表
this.getUnreadNewNum();
}
this.newsList = this.newsList.concat(curPageData); //追加新数据
this.mescroll.endBySize(curPageLen, res.data.total); // 推荐
this.loading = false;
console.log("newsList",this.newsList)
} else{
this.newsList = [];
this.mescroll.endErr();
this.mescroll.showEmpty();
this.loading = false;
}
}).catch(()=>{
this.$u.toast('服务器开小差了呢,请您稍后再试')
this.newsList = [];
//联网失败, 结束加载
this.mescroll.endErr();
this.mescroll.showEmpty();
this.loading = false;
})
}else{
this.$api.newApi.getNoticeList(obj).then((res)=>{
console.log("当前获取到公告",res)
if (res.data.list && res.data.list.length>0) {
// 接口返回的当前页数据列表 (数组)
let curPageData = res.data.list;
// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
let curPageLen = curPageData && curPageData.length;
//设置列表数据
console.log(curPageLen,res.data.total);
if(pageNum == 1){
this.newsList = []; //如果是第一页需手动置空列表
this.getUnreadNewNum();
}
this.newsList = this.newsList.concat(curPageData); //追加新数据
this.mescroll.endBySize(curPageLen, res.data.total); // 推荐
this.loading = false;
console.log("newsList",this.newsList)
} else{
this.newsList = [];
this.mescroll.endErr();
this.mescroll.showEmpty();
this.loading = false;
}
}).catch(()=>{
this.$u.toast('服务器开小差了呢,请您稍后再试')
this.newsList = [];
//联网失败, 结束加载
this.mescroll.endErr();
this.mescroll.showEmpty();
this.loading = false;
})
}
}else{
this.newsList = [];
this.mescroll.endErr();
this.mescroll.showEmpty();
this.loading = false;
}
},
// 跳转消息详情
goDetail(index){
console.log("当前点击消息",this.newsList[index])
let obj = JSON.stringify(this.newsList[index]);
uni.navigateTo({
url: '../new/detail?obj=' + encodeURIComponent(obj)
})
},
getUnreadNewNum(){
this.$api.newApi.getNewsCount({}).then((res)=>{
console.log("当前获取未读消息数量",res)
if(res.code == 0){
if(res.data.letterCount){
uni.showTabBarRedDot({
index: 3
})
}else{
uni.hideTabBarRedDot({
index: 3
})
}
this.tabList[0].count = res.data.letterCount;
// this.tabList[1].count = res.data.publicCount;
}else{
uni.showToast({
title: res.msg,
icon:"none",
duration: 2000
});
}
}).catch(()=>{
this.$u.toast('服务器开小差了呢,请您稍后再试')
})
},
// getUnreadNewIdList(){
// this.$api.getUnreadNewIdList({}).then((res)=>{
// console.log("当前获取未读消息id列表",res)
// if (res.data.ids && res.data.ids.length>0) {
// this.unreadNewIdList = res.data.ids;
// } else{
// this.unreadNewIdList = [];
// }
// }).catch(()=>{
// })
// }
}
}
</script>
<style lang="scss" scoped>
.bg-error{
background-color: $u-type-error;
}
.bg-warning{
background-color: $u-type-warning;
}
.bg-info{
background-color: $u-type-info;
}
.tabs-box{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.new-box{
height: 100%;
.new-list{
.new-list-item{
display: flex;
align-items: center;
padding: 15rpx 30rpx;
border-bottom: 1px solid #f2f2f2;
.item-icon-box{
position: relative;
margin-right: 20rpx;
&.unread::after{
content: '';
position: absolute;
top: -15rpx;
left: -15rpx;
width: 16rpx;
height: 16rpx;
border-radius: 50%;
border: 1px solid #fff;
background-color: red;
}
.item-icon{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 2px 2px 2px -2px rgba(159,159,159,0.66);
-webkit-box-shadow: 2px 2px 2px -2px rgba(159,159,159,0.66);
-moz-box-shadow: 2px 2px 2px -2px rgba(159,159,159,0.66);
background: linear-gradient(0deg, #C0E8FF 0%, #FFFFFF 64%);
.iconfont{
// color: #fff;
font-size: 46rpx;
background-image: -webkit-linear-gradient(90deg, #3BBCFF, #006CFF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
.item-content{
flex: 1;
width: 0;
height: 100rpx;
display: flex;
flex-direction: column;
// justify-content: space-around;
.item-time{
display: flex;
justify-content: flex-end;
color: $u-tips-color;
font-size: 24rpx;
line-height: 24rpx;
}
.item-title{
display: flex;
align-items: center;
font-weight: bold;
font-size: 30rpx;
line-height: 36rpx;
width: 560rpx;
margin-bottom: 5rpx;
}
.item-content-txt{
width: 100%;
color: $u-tips-color;
font-size: 24rpx;
}
}
}
}
}
</style>