182 lines
4.4 KiB
Vue
182 lines
4.4 KiB
Vue
<template>
|
|
<view class="notice-page">
|
|
<NavCom title="我的公告"></NavCom>
|
|
<image src="@/static/mine/lb.png" mode="" class="bg"></image>
|
|
<view v-if="list.length === 0" style="padding-top: 200rpx;">
|
|
<empty></empty>
|
|
</view>
|
|
<scroll-view @scrolltolower="lowerBottom" scroll-y="true" class="main" v-if="list.length > 0">
|
|
<!-- <view class="main" v-if="list.length > 0"> -->
|
|
<view class="notice" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
|
|
<view class="notice-info">
|
|
<view class="info">{{item.title}}</view>
|
|
<view class="notice-detail">发布时间：{{formatDateTime(item.createdAt)}}</view>
|
|
</view>
|
|
<view class="detail">{{item.summary}}</view>
|
|
<view class="footer-detail">
|
|
<view class="look">查看详情</view>
|
|
<image src="@/static/mine/n-d.png" mode="" class="look-img"></image>
|
|
</view>
|
|
</view>
|
|
<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
|
|
</scroll-view>
|
|
<!-- 所有页面的弹框 -->
|
|
<page-popup page="/pages/mine/notice"></page-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { myMixins } from "@/mixins/mixins.js";
|
|
import { notice } from '@/API/user.js'
|
|
import emptyCom from '@/pages/components/empyt.vue'
|
|
import NavCom from '@/pages/components/nav.vue'
|
|
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
|
export default{
|
|
mixins: [myMixins],
|
|
data(){
|
|
return {
|
|
statusBarHeight,
|
|
list:[],
|
|
page:1,
|
|
total:0
|
|
}
|
|
},
|
|
components:{NavCom},
|
|
mounted() {
|
|
this.getNotice()
|
|
},
|
|
methods:{
|
|
formatDateTime(value) {
|
|
if (!value) return '';
|
|
const date = new Date(value);
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
},
|
|
getNotice(){
|
|
uni.showLoading()
|
|
notice({page:this.page,size:15,status:1}).then(res => {
|
|
console.log(res)
|
|
uni.hideLoading()
|
|
if(res.code === 200){
|
|
this.total = res.data.total
|
|
if(this.page > 1){
|
|
this.list = [...this.list,...res.data.content]
|
|
}else{
|
|
this.list = res.data.content
|
|
}
|
|
}else{
|
|
this.$api.msg(res.message)
|
|
}
|
|
}).catch(err => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
goDetail(item){
|
|
uni.navigateTo({
|
|
url:`/pages/mine/noticeDetail?id=${item.id}`
|
|
})
|
|
},
|
|
lowerBottom(){
|
|
if(this.total === this.list.length){
|
|
return
|
|
}
|
|
this.page = this.page + 1
|
|
this.getNotice()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
page{
|
|
background-image: url('@/static/index/bg.png');
|
|
background-size: 100%;
|
|
}
|
|
.notice-page{
|
|
.bg{
|
|
position: fixed;top: 0;
|
|
right: 0;
|
|
width: 174rpx;
|
|
height: 167rpx;
|
|
z-index: 1;
|
|
}
|
|
.empty-btn{
|
|
margin-top: 60rpx;
|
|
width: 324rpx;
|
|
height: 100rpx;
|
|
background: #70E3DE;
|
|
border-radius: 50rpx;
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.main{
|
|
padding-top: 130rpx;
|
|
height: 100vh;
|
|
z-index: 99;
|
|
.notice{
|
|
padding: 32rpx 22rpx 32rpx 35rpx;
|
|
width: 706rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 23rpx;
|
|
margin-left: 23rpx;
|
|
.notice-info{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.info{
|
|
width: 500rpx;
|
|
font-weight: bold;
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.notice-detail{
|
|
font-size: 20rpx;
|
|
color: #888888;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
.detail{
|
|
margin-top: 30rpx;
|
|
font-size: 20rpx;
|
|
color: #888888;
|
|
width: 607rpx;
|
|
}
|
|
.notice-arr{
|
|
width: 12rpx;
|
|
height: 20rpx;
|
|
}
|
|
.footer-detail{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 28rpx;
|
|
padding-top: 19rpx;
|
|
border-top: 1px solid #DEDEDE;
|
|
.look{
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
}
|
|
.look-img{
|
|
width: 11rpx;
|
|
height: 19rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |