<template>
<view class="content">
<view class="navbar">
<view v-for="(item, index) in navList" :key="index" class="nav-item"
:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
<text>{{ item.text }}</text>
<text class="margin-l-10" v-if="item.count>0">({{item.count}})</text>
</view>
</view>
<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
<!-- 空白页 -->
<!-- #ifdef H5 -->
<empty src="../../static/error/emptyNotice.png"
v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
<!-- #endif -->
<!-- #ifndef H5 -->
<empty src="../static/error/emptyNotice.png"
v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
<!-- #endif -->
<!-- 订单列表 -->
<view class="itemBox" v-for="(item,index) in tabItem.orderList">
<view class="time">
{{item.add_time}}
</view>
<view @click="
tabItem.state==1
?
navTo('/pages/index/noticeDetail?id='+item.id+'&type=1',item)
:
navTo('/pages/index/noticeDetail?id='+item.id+'&type=2',item)
" class="itemDetail" :class="{wargin:tabItem.state==2,base:tabItem.state==1}">
<view class="typeName" :class="{gray:item.is_read==1}">
{{item.title}}
</view>
<view class="detail" :class="{gray:item.is_read==1}">
{{item.synopsis}}
</view>
</view>
</view>
<uni-load-more :status="tabItem.loadingType"></uni-load-more>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import {
articleList,
notify,
notify_read
} from '@/api/index.js';
export default {
data() {
return {
tabCurrentIndex: 0,
navList: [{
state: 1,
text: '通知',
loadingType: 'more',
orderList: [],
page: 1, //当前页数
limit: 10, //每次信息条数
count: 0, //总消息条数
},
{
state: 2,
text: '警报',
loadingType: 'more',
orderList: [],
page: 1, //当前页数
limit: 10, //每次信息条数
count: 0, //总消息条数
}
]
};
},
onLoad(options) {
this.initNum();
this.loadData();
},
methods: {
// 初始化查询数量
initNum() {
notify().then((e) => {
this.navList[1].count = e.data.not_read_count;
})
},
navTo(url, item) {
let data = {
url: url,
}
// 判断是否为报警信息
if (item.type==2) {
// 判断是否已读
notify_read({
id: item.id
})
data.success = function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('addPushData', item)
}
}
if (item.is_read != 1) {
this.navList[item.type-1].count--
}
console.log(this.navList[item.type-1]);
// 设置为已读
item.is_read = 1
uni.navigateTo(data)
},
// 转换金额为数字
moneyNum(value) {
return +value;
},
// 确认收货
//获取订单列表
loadData(source) {
const that = this;
//这里是将订单挂载到tab列表下
let index = this.tabCurrentIndex;
let navItem = this.navList[index];
let state = navItem.state;
console.log(navItem, '数据');
if (source === 'tabChange' && navItem.loaded === true) {
//tab切换只有第一次需要加载数据
return;
}
if (navItem.loadingType === 'loading') {
//防止重复加载
return;
}
if (navItem.loadingType === 'noMore') {
//防止重复加载
return;
}
// 修改当前对象状态为加载中
navItem.loadingType = 'loading';
// 判断是否为消息通知
if (state == 1) {
articleList({
page: navItem.page,
limit: navItem.limit
}, 1)
.then(({
data
}) => {
data.data = data.data.map((e) => {
e.is_read = +e.is_read;
e.type=1
return e
})
that.callback(data, navItem)
})
.catch(e => {
console.log(e);
});
}
// 判断是否为警报
if (state == 2) {
notify({
page: navItem.page,
limit: navItem.limit
})
.then(({
data
}) => {
data.data = data.data.map((e) => {
const detail = {
title: e.content,
synopsis: e.address,
longitude: e.longitude,
latitude: e.latitude,
address: e.address,
is_read: +e.is_read,
id: e.id,
add_time: e.add_time,
type:2
}
return detail
})
that.callback(data, navItem)
})
.catch(e => {
console.log(e);
});
}
},
// 回调数据处理
callback(data, navItem) {
navItem.count = data.not_read_count;
let arr = data.data
navItem.orderList = navItem.orderList.concat(arr);
// console.log(navItem.orderList);
navItem.page++;
if (navItem.limit == arr.length) {
//判断是否还有数据， 有改为 more， 没有改为noMore
navItem.loadingType = 'more';
return;
} else {
//判断是否还有数据， 有改为 more， 没有改为noMore
navItem.loadingType = 'noMore';
}
uni.hideLoading();
this.$set(navItem, 'loaded', true);
},
//swiper 切换
changeTab(e) {
this.tabCurrentIndex = e.target.current;
this.loadData('tabChange');
},
//顶部tab点击
tabClick(index) {
this.tabCurrentIndex = index;
},
}
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
height: 100%;
}
.swiper-box {
height: calc(100% - 40px);
}
.tab-content {
height: 100%;
}
.list-scroll-content {
height: 100%;
}
.itemBox {
padding: 50rpx 30rpx 0;
.time {
margin: 0 auto;
width: 360rpx;
background-color: $font-color-disabled;
height: 48rpx;
color: #FFFFFF;
text-align: center;
line-height: 48rpx;
margin-bottom: 30rpx;
border-radius: 10rpx;
font-size: 24rpx;
}
.itemDetail {
padding: 50rpx;
background-color: #FFFFFF;
border-radius: 20rpx;
&.base {
color: $font-color-base;
}
&.wargin {
color: $color-red;
}
.typeName {
font-size: 28rpx;
&.gray {
color: $color-gray !important;
}
}
.detail {
font-size: 24rpx;
&.gray {
color: $color-gray !important;
}
}
}
}
.navbar {
display: flex;
height: 40px;
padding: 0 5px;
background: #fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
position: relative;
z-index: 10;
.nav-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 15px;
color: $font-color-dark;
position: relative;
&.current {
color: $base-color;
&:after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 44px;
height: 0;
border-bottom: 2px solid $base-color;
}
}
}
}
</style>