110 lines
3.1 KiB
Vue
110 lines
3.1 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="box" v-if="listArr.length > 0">
|
|
<view class="list" v-for="(item, index) in listArr" @click="$Router.push({ name: 'noticeDetails', params: {id: item.notification_id }})">
|
|
<view class="title">
|
|
{{ item.title }}
|
|
</view>
|
|
<view class="text">
|
|
{{ item.content }}<view class="more">点我查看<u-icon name="arrow-right-double" color="#34CE98" bold size="14" style="display: inline-block;"></u-icon></view>
|
|
</view>
|
|
</view>
|
|
<block v-if="page.total_page > 1">
|
|
<u-loadmore :status="status" />
|
|
</block>
|
|
</view>
|
|
<view class="noMessage" v-else>
|
|
<u-empty
|
|
mode="message"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { lists } from '@/apis/interfaces/notice'
|
|
export default {
|
|
data() {
|
|
return {
|
|
listArr : [],
|
|
status : 'loadmore',
|
|
page : ''
|
|
};
|
|
},
|
|
mounted() {
|
|
// 获取列表
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
// 列表
|
|
getList(pages){
|
|
lists(this.$Route.query.type, {
|
|
page: pages
|
|
}).then(res => {
|
|
if(res.page.current == 1){
|
|
this.listArr = []
|
|
}
|
|
this.listArr = this.listArr.concat(res.data)
|
|
this.status = this.page.has_more ? 'loadmore': 'nomore'
|
|
this.page = res.page
|
|
})
|
|
}
|
|
},
|
|
// 下拉加载
|
|
onReachBottom() {
|
|
if(this.page.has_more){
|
|
this.status = 'loading'
|
|
let pages = this.page.current + 1
|
|
// 获取列表
|
|
this.getList(pages)
|
|
return
|
|
}
|
|
this.status = 'nomore'
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
background-color: $window-color;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.box {
|
|
padding: $padding;
|
|
box-sizing: border-box;
|
|
.list {
|
|
padding: $padding;
|
|
box-sizing: border-box;
|
|
border-radius: $radius;
|
|
background-color: white;
|
|
margin-bottom: $margin;
|
|
.title {
|
|
font-size: $title-size-lg;
|
|
margin-bottom: $margin - 10;
|
|
font-weight: bold;
|
|
}
|
|
.text {
|
|
font-size: $title-size-m;
|
|
color: $text-gray-m;
|
|
.more {
|
|
color: $main-color;
|
|
padding-left: $padding - 10;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.noMessage {
|
|
background-color: white;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-pack: center;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
</style>
|