parent
e45691ea2d
commit
f1e9b656aa
13 changed files with 377 additions and 34 deletions
@ -0,0 +1,187 @@ |
|||||||
|
<template> |
||||||
|
<view class="notice-list"> |
||||||
|
<view @click="markReadAll" class="mark-read-btn"> |
||||||
|
<image src="@/static/images/home/notice.svg" alt="" /> |
||||||
|
一键标记为已读 |
||||||
|
</view> |
||||||
|
<scroll-view scroll-y="true" style="height:calc(100vh - 140rpx);width: 100%;background: #F5F5F5;" |
||||||
|
:refresher-triggered="triggered" :refresher-enabled="true" @refresherrefresh="refresherrefresh" |
||||||
|
refresher-background="#f1f1f1" @scrolltolower="onListBottom"> |
||||||
|
<ul class="card"> |
||||||
|
<li v-for="(item, index) in dataList" :key="index" @click="jump(item)"> |
||||||
|
<view class="title"> |
||||||
|
<view class="text"> |
||||||
|
<view>{{ item.title }}</view> |
||||||
|
<view class="mark" v-if="!item.readStatus"></view> |
||||||
|
</view> |
||||||
|
<view style="flex-shrink: 0;color: #999999;">{{ item.createdAt }}</view> |
||||||
|
</view> |
||||||
|
<view> |
||||||
|
{{ item.content }} |
||||||
|
</view> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<view style=" line-height: 100rpx;"> |
||||||
|
<uni-load-more :status="scrollType"></uni-load-more> |
||||||
|
</view> |
||||||
|
</scroll-view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
// import requestName from '@/common/requestName' |
||||||
|
export default { |
||||||
|
name: 'NoticeList', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
dataList: [], |
||||||
|
current: 0, |
||||||
|
style: { |
||||||
|
borderRadius: '100px', |
||||||
|
background: '#fff', |
||||||
|
padding: '0 32rpx' |
||||||
|
}, |
||||||
|
search: { |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 20, |
||||||
|
readStatus: '' |
||||||
|
}, |
||||||
|
scrollType: '', |
||||||
|
triggered: false, |
||||||
|
refreshNeed: false |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad(data) { |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
console.log(this.refreshNeed); |
||||||
|
if (this.refreshNeed) { |
||||||
|
this.reSearch() |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
/** |
||||||
|
* @description 全部设为已读 |
||||||
|
*/ |
||||||
|
markReadAll() { |
||||||
|
// this.$wx_http.post(requestName['updateReadStatus'], [-1]).then(res => { |
||||||
|
// if (res.code == 0) { |
||||||
|
// this.reSearch() |
||||||
|
// } |
||||||
|
// }) |
||||||
|
}, |
||||||
|
|
||||||
|
getList() { |
||||||
|
// this.$wx_http.get(requestName['pageNotice'], this.search).then(res => { |
||||||
|
// let data = res.data.records |
||||||
|
// this.scrollType = '' |
||||||
|
// this.triggered = false |
||||||
|
// if (data.length >= this.search.pageSize) { |
||||||
|
// this.scrollType = 'more' |
||||||
|
// } |
||||||
|
// this.dataList = this.dataList.concat(data) |
||||||
|
// }) |
||||||
|
}, |
||||||
|
|
||||||
|
reSearch() { |
||||||
|
this.search.pageNo = 1 |
||||||
|
this.dataList = [] |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
|
||||||
|
onListBottom() { |
||||||
|
if (this.scrollType == 'more') { |
||||||
|
this.search.pageNo += 1 |
||||||
|
this.getList() |
||||||
|
} |
||||||
|
}, |
||||||
|
onreachBottom() { |
||||||
|
this.getDevicePage() |
||||||
|
}, |
||||||
|
refresherrefresh() { |
||||||
|
this.triggered = true |
||||||
|
this.reSearch() |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.notice-list { |
||||||
|
height: calc(100vh - 0px); |
||||||
|
background: #F5F5F5; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.mark-read-btn { |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 8rpx; |
||||||
|
border: 1px solid rgba(255, 255, 255, 0.43); |
||||||
|
padding: 0; |
||||||
|
margin: 24rpx 30rpx; |
||||||
|
text-align: center; |
||||||
|
height: 88rpx; |
||||||
|
line-height: 88rpx; |
||||||
|
font-size: 30rpx; |
||||||
|
color: #FF8800; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
image { |
||||||
|
width: 34rpx; |
||||||
|
height: 32rpx; |
||||||
|
display: block; |
||||||
|
margin-right: 20rpx; |
||||||
|
fill:#004BAA |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.card { |
||||||
|
margin: 0 16px; |
||||||
|
list-style: none; |
||||||
|
padding: 0; |
||||||
|
|
||||||
|
li { |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 4px; |
||||||
|
border: 1px solid rgba(255, 255, 255, 0.43); |
||||||
|
padding: 12px 14px; |
||||||
|
margin-bottom: 24rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
|
||||||
|
.title { |
||||||
|
border-bottom: 1px solid #F0F0F0; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
padding-bottom: 10rpx; |
||||||
|
margin-bottom: 15rpx; |
||||||
|
|
||||||
|
|
||||||
|
.text { |
||||||
|
font-size: 30rpx; |
||||||
|
flex-grow: 1; |
||||||
|
display: flex; |
||||||
|
margin-right: 20rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #333333; |
||||||
|
} |
||||||
|
|
||||||
|
.mark { |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
background: #D9362D; |
||||||
|
border-radius: 50%; |
||||||
|
margin-left: 12rpx; |
||||||
|
margin-top: 5rpx; |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
Loading…
Reference in new issue