123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186 |
- <template>
- <view clas="notice">
- <view class="notice-item" v-for="item in announceList" :key="item.id">
- <text class="time">{{ item.created_at | time }}</text>
- <view
- class="content"
- @tap="navTo(`/pages/index/notice/detail?id=${item.id}`)"
- >
- <text class="title">{{ item.title }}</text>
- <view class="img-wrapper" v-if="item.cover">
- <rf-image
- class="pic"
- :preview="false"
- :mode="'aspectFit'"
- :src="item.cover"
- ></rf-image>
- </view>
- <text class="introduce" v-if="item.synopsis">
- {{ item.synopsis }}
- </text>
- <view class="bot b-t">
- <text>查看详情</text>
- <i class="more-icon iconfont iconyou"></i>
- </view>
- </view>
- </view>
- <rf-load-more
- class="load-more"
- :status="loadingType"
- v-if="announceList.length > 0"
- ></rf-load-more>
-
- <!--加载动画-->
- <!-- <rfLoading isFullScreen :active="loading"></rfLoading> -->
- </view>
- </template>
- <script>
- import { notifyAnnounceIndex } from '@/api/basic';
- import rfLoadMore from '@/components/rf-load-more/rf-load-more.vue';
- import moment from '@/common/moment';
- export default {
- components: { rfLoadMore },
- data() {
- return {
- announceList: [], // 公告列表
- loadingType: 'more',
- loading: true,
- page: 1
- };
- },
- filters: {
- // 时间格式化
- time(val) {
- return moment(val * 1000).format('YYYY-MM-DD HH:mm');
- }
- },
- // 加载更多
- onReachBottom() {
- if (this.loadingType === 'nomore') return;
- this.page++;
- this.getNotifyAnnounceIndex();
- },
- onLoad() {
- this.initData();
- },
- methods: {
- // 数据初始化
- initData() {
- this.getNotifyAnnounceIndex();
- },
- // 获取通知列表
- async getNotifyAnnounceIndex(type) {
- await this.$http
- .get(`${notifyAnnounceIndex}`, { page: this.page })
- .then(r => {
- this.loading = false;
- if (type === 'refresh') {
- uni.stopPullDownRefresh();
- }
- this.loadingType = r.data.length === 10 ? 'more' : 'nomore';
- this.announceList = [...this.announceList, ...r.data];
- })
- .catch(() => {
- if (type === 'refresh') {
- uni.stopPullDownRefresh();
- }
- this.loading = false;
- });
- },
- navTo(route) {
- this.$mRouter.push({ route });
- }
- }
- };
- </script>
- <style lang="scss">
- page {
- background-color: $page-color-base;
- padding-bottom: 30upx;
- }
- .notice-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .time {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 80upx;
- padding-top: 10upx;
- font-size: 26upx;
- color: #7d7d7d;
- }
- .content {
- width: 710upx;
- padding: 0 24upx;
- background-color: #fff;
- border-radius: 4upx;
- }
- .title {
- display: flex;
- align-items: center;
- height: 90upx;
- font-size: 32upx;
- color: #303133;
- }
- .img-wrapper {
- width: 100%;
- height: 260upx;
- position: relative;
- }
- .pic {
- display: block;
- width: 100%;
- height: 100%;
- border-radius: 6upx;
- }
- .cover {
- display: flex;
- justify-content: center;
- align-items: center;
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.5);
- font-size: 36upx;
- color: #fff;
- }
- .introduce {
- display: inline-block;
- padding: 16upx 0;
- font-size: 28upx;
- color: #606266;
- line-height: 38upx;
- }
- .bot {
- display: flex;
- align-items: center;
- justify-content: space-between;
- height: 80upx;
- font-size: 24upx;
- color: #707070;
- position: relative;
- }
- .more-icon {
- font-size: 32upx;
- }
- </style>
|