|
|
|
@ -1,22 +1,124 @@
|
|
|
|
|
<template>
|
|
|
|
|
<view class="container">
|
|
|
|
|
消息列表
|
|
|
|
|
<!-- 导航栏 -->
|
|
|
|
|
<u-navbar leftText="返回" title="系统消息" :placeholder="true" leftIconColor=" #409eff" @leftClick="backHomeClick" />
|
|
|
|
|
|
|
|
|
|
<!-- 条件检索 -->
|
|
|
|
|
<view class="condition">
|
|
|
|
|
<view class="date">
|
|
|
|
|
<uni-datetime-picker v-model="dateRange" type="daterange" @change="changeDataRange" />
|
|
|
|
|
</view>
|
|
|
|
|
<view class="unread">
|
|
|
|
|
<u-checkbox-group @change="changeStatus">
|
|
|
|
|
<u-checkbox activeColor="green" label="只看未读" :checked="onlyUnread" :name="name"></u-checkbox>
|
|
|
|
|
</u-checkbox-group>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 消息列表 -->
|
|
|
|
|
<view class="list">
|
|
|
|
|
<u-list @scrolltolower="scrolltolower" enableFlex>
|
|
|
|
|
<u-list-item v-for="(item, index) in indexList" :key="index">
|
|
|
|
|
<u-cell :title="`系统消息-${index + 1}`">
|
|
|
|
|
<u-avatar slot="icon" shape="square" size="35" :src="item.url"
|
|
|
|
|
customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
|
|
|
|
</u-cell>
|
|
|
|
|
</u-list-item>
|
|
|
|
|
</u-list>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 加载更多 -->
|
|
|
|
|
<u-loadmore :status="status" loadmoreText="上拉加载更多" loadingText="加载中" height="30" marginTop="10" line/>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
|
|
import indexList from '../../uni_modules/uview-ui/libs/config/props/indexList';
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
name: "unread",
|
|
|
|
|
status: 'loadmore',
|
|
|
|
|
dateRange: [],
|
|
|
|
|
onlyUnread: 0,
|
|
|
|
|
indexList: [],
|
|
|
|
|
urls: [
|
|
|
|
|
'https://cdn.uviewui.com/uview/album/1.jpg',
|
|
|
|
|
'https://cdn.uviewui.com/uview/album/2.jpg',
|
|
|
|
|
'https://cdn.uviewui.com/uview/album/3.jpg',
|
|
|
|
|
'https://cdn.uviewui.com/uview/album/4.jpg',
|
|
|
|
|
'https://cdn.uviewui.com/uview/album/5.jpg',
|
|
|
|
|
'https://cdn.uviewui.com/uview/album/6.jpg',
|
|
|
|
|
'https://cdn.uviewui.com/uview/album/7.jpg',
|
|
|
|
|
'https://cdn.uviewui.com/uview/album/8.jpg',
|
|
|
|
|
'https://cdn.uviewui.com/uview/album/9.jpg',
|
|
|
|
|
'https://cdn.uviewui.com/uview/album/10.jpg',
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onLoad() {
|
|
|
|
|
this.loadMore(false);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
backHomeClick() {
|
|
|
|
|
uni.switchTab({
|
|
|
|
|
url: '/pages/index/index'
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 切换时间
|
|
|
|
|
changeDataRange(range) {
|
|
|
|
|
this.dateRange = range;
|
|
|
|
|
},
|
|
|
|
|
// 切换状态
|
|
|
|
|
changeStatus(arr) {
|
|
|
|
|
// console.log(arr);
|
|
|
|
|
// this.dateRange = [];
|
|
|
|
|
this.onlyUnread = arr.includes(this.name) ? 1 : 0;
|
|
|
|
|
this.loadMore(true);
|
|
|
|
|
},
|
|
|
|
|
// 下拉加载更多
|
|
|
|
|
scrolltolower() {
|
|
|
|
|
if (this.status == "nomore") return;
|
|
|
|
|
this.status = 'loading';
|
|
|
|
|
this.loadMore(false);
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
if (this.indexList.length >= 100) {
|
|
|
|
|
this.status = 'nomore';
|
|
|
|
|
} else {
|
|
|
|
|
this.status = 'loadmore';
|
|
|
|
|
}
|
|
|
|
|
}, 1000);
|
|
|
|
|
},
|
|
|
|
|
// 加载数据
|
|
|
|
|
loadMore(init) {
|
|
|
|
|
if (init) { // 初始化
|
|
|
|
|
this.status = 'loadmore';
|
|
|
|
|
this.indexList = [];
|
|
|
|
|
}
|
|
|
|
|
// 模拟请求,新增10条
|
|
|
|
|
for (let i = 0; i < 20; i++) {
|
|
|
|
|
this.indexList.push({
|
|
|
|
|
url: this.urls[uni.$u.random(0, this.urls.length - 1)]
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.condition {
|
|
|
|
|
height: 40px;
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
@include flex-space-between;
|
|
|
|
|
|
|
|
|
|
.date {
|
|
|
|
|
width: 70%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.unread {
|
|
|
|
|
width: 25%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|