Files
RentWeAppFront/pages-biz/notice/notice.vue
2026-01-15 17:18:24 +08:00

162 lines
3.3 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view>
<u-navbar :is-back="true" title="招商公告" :border-bottom="false"></u-navbar>
<view class="wrap">
<scroll-view scroll-y style="height: 100%;width: 100%;">
<view class="page-box">
<view class="tabSwiper" v-for="(item, index) in flowList" :key="item.noticeId" @click="clickContent(item)">
<u-icon name="bell" :size="35" color="#FF2F31" class="bell-icon"></u-icon>
<view class="content-wrapper">
<view class="top">
<view class="title">{{ item.noticeTitle }}</view>
<view class="date">{{ item.createTime }}</view>
</view>
<view class="item">
<view class="content u-line-2">{{ item.noticeContent }}</view>
</view>
</view>
<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26" class="arrow-icon"></u-icon>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
// 静态公告数据
const staticNoticeList = [];
return {
pageNo: 1,
pageSize: 20,
flowList: [],
loadStatus: 'loadmore',
isRefreshing: false
};
},
onLoad() {
// 静态数据已在data中初始化无需调用接口
this.getNoticecList();
},
methods: {
clickContent(item) {
if (item.noticeId) {
this.$u.route({
url: '/pages-biz/notice/noticeDetail',
params: {
id: item.noticeId
}
});
}
},
getNoticecList() {
if (this.loadStatus !== 'loadmore') return;
this.loadStatus = 'loading';
let url = "/notice/pageQuery";
this.$u.post(url, {
pageNo: this.pageNo,
pageSize: this.pageSize
}).then(res => {
const rows = res.data.result || [];
console.log(rows)
if (this.pageNo === 1) this.flowList = [];
this.flowList = this.flowList.concat(rows)
if (rows.length < this.pageSize) {
this.loadStatus = 'nomore';
} else {
this.pageNo++;
this.loadStatus = 'loadmore';
}
}).catch(err => {
console.log("获取招商公告失败:", err)
});
}
}
};
</script>
<style lang="scss" scoped>
.tabSwiper {
width: 95%;
background-color: #ffffff;
margin: 16rpx auto;
border-radius: 12rpx;
box-sizing: border-box;
padding: 32rpx;
box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.04);
transition: all 0.2s ease;
border: 1rpx solid #f0f0f0;
display: flex;
align-items: center;
position: relative;
&:hover {
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}
.bell-icon {
margin-right: 32rpx;
flex-shrink: 0;
margin-top: 4rpx;
}
.content-wrapper {
flex: 1;
min-width: 0;
}
.arrow-icon {
margin-left: 24rpx;
flex-shrink: 0;
margin-top: 16rpx;
}
.top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 20rpx;
.title {
font-size: 28rpx;
font-weight: 600;
color: #1a1a1a;
line-height: 38rpx;
flex: 1;
}
.date {
color: #999999;
font-size: 26rpx;
flex-shrink: 0;
position: absolute;
right: 30rpx;
top: 15rpx;
}
}
.item {
.content {
font-size: 26rpx;
line-height: 36rpx;
color: #666666;
letter-spacing: 0.5rpx;
margin-top: 10rpx;
}
}
}
.wrap {
display: flex;
flex-direction: column;
height: calc(100vh - var(--window-top));
width: 100%;
background-color: #fafafa;
}
.page-box {
padding: 16rpx 0 40rpx 0;
}
</style>