|
|
|
@ -15,20 +15,29 @@
|
|
|
|
|
<!-- 政策法规列表区域 --> |
|
|
|
|
<!-- 修改列表项部分 --> |
|
|
|
|
<view class="policy-list"> |
|
|
|
|
<view |
|
|
|
|
class="policy-item" |
|
|
|
|
v-for="item in policyList" |
|
|
|
|
:key="item.id" |
|
|
|
|
@click="handlePolicyClick(item)" |
|
|
|
|
<scroll-view |
|
|
|
|
class="policy-scroll" |
|
|
|
|
scroll-y |
|
|
|
|
@scrolltolower="loadNextPage" |
|
|
|
|
@refresherrefresh="onRefresh" |
|
|
|
|
refresher-enabled |
|
|
|
|
:refresher-triggered="isRefreshing" |
|
|
|
|
> |
|
|
|
|
<view class="item-left"> |
|
|
|
|
<image :src="itemImgUrl" class="policy-icon"></image> |
|
|
|
|
<view |
|
|
|
|
class="policy-item" |
|
|
|
|
v-for="item in policyList" |
|
|
|
|
:key="item.id" |
|
|
|
|
@click="handlePolicyClick(item)" |
|
|
|
|
> |
|
|
|
|
<view class="item-left"> |
|
|
|
|
<image :src="itemImgUrl" class="policy-icon"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="item-right"> |
|
|
|
|
<view class="policy-title">{{ item.title }}</view> |
|
|
|
|
<view class="policy-time">生效时间: {{ item.effectiveDate }}</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="item-right"> |
|
|
|
|
<view class="policy-title">{{ item.title }}</view> |
|
|
|
|
<view class="policy-time">生效时间: {{ item.effectiveDate }}</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -47,8 +56,9 @@ import config from '@/config'
|
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
isRefreshing: false, // 是否正在刷新 |
|
|
|
|
searchValue: '', // 搜索关键字 |
|
|
|
|
abc: '', |
|
|
|
|
abc: '', |
|
|
|
|
policyList: [], // 政策法规列表数据 |
|
|
|
|
pageNum: 1, // 当前页码 |
|
|
|
|
pageSize: 10, // 每页显示条数 |
|
|
|
@ -64,14 +74,22 @@ export default {
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 触底加载更多数据 |
|
|
|
|
onReachBottom() { |
|
|
|
|
methods: { |
|
|
|
|
|
|
|
|
|
// 下拉刷新 |
|
|
|
|
onRefresh() { |
|
|
|
|
this.isRefreshing = true |
|
|
|
|
this.pageNum = 1 |
|
|
|
|
this.getPolicyList() |
|
|
|
|
}, |
|
|
|
|
loadNextPage() { |
|
|
|
|
console.log('列表值',this.policyList.length) |
|
|
|
|
if (this.policyList.length < this.total) { |
|
|
|
|
this.pageNum++ |
|
|
|
|
this.getPolicyList() |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 获取政策法规列表数据 |
|
|
|
|
async getPolicyList() { |
|
|
|
|
try { |
|
|
|
@ -97,8 +115,8 @@ export default {
|
|
|
|
|
} else { |
|
|
|
|
this.policyList = [...this.policyList, ...formattedData] |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
this.total = res.total |
|
|
|
|
console.log('列表信息',res) |
|
|
|
|
this.total = res.data.total |
|
|
|
|
// 更新加载状态 |
|
|
|
|
this.loadMoreStatus = this.policyList.length >= this.total ? 'noMore' : 'more' |
|
|
|
|
} |
|
|
|
@ -110,6 +128,11 @@ export default {
|
|
|
|
|
icon: 'none' |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
finally { |
|
|
|
|
this.loadMoreStatus = this.policyList.length >= this.total? 'noMore' :'more' |
|
|
|
|
// 无论成功失败都关闭刷新状态 |
|
|
|
|
this.isRefreshing = false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 搜索事件处理 |
|
|
|
|
handleSearch(e) { |
|
|
|
@ -134,70 +157,79 @@ export default {
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.policy-container { |
|
|
|
|
background: var(--LightMode-Secondary-Secondary, #F9F9F9); |
|
|
|
|
min-height: 100vh; |
|
|
|
|
.policy-container { |
|
|
|
|
background: var(--LightMode-Secondary-Secondary, #F9F9F9); |
|
|
|
|
min-height: 100vh; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
|
|
.search-box { |
|
|
|
|
padding: 20rpx; |
|
|
|
|
background: #fff; |
|
|
|
|
position: fixed; |
|
|
|
|
top: 0; |
|
|
|
|
left: 0; |
|
|
|
|
right: 0; |
|
|
|
|
z-index: 1; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.policy-list { |
|
|
|
|
margin-top: 120rpx; // 为搜索框留出空间 |
|
|
|
|
flex: 1; |
|
|
|
|
|
|
|
|
|
.policy-scroll { |
|
|
|
|
height: calc(100vh - 120rpx); |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.policy-item { |
|
|
|
|
display: flex; |
|
|
|
|
padding: 24rpx; |
|
|
|
|
align-items: center; |
|
|
|
|
gap: 24rpx; |
|
|
|
|
background: #fff; |
|
|
|
|
margin: 24rpx; |
|
|
|
|
margin-bottom: 0; |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
|
|
|
|
|
.search-box { |
|
|
|
|
padding: 20rpx; |
|
|
|
|
background: #fff; |
|
|
|
|
.item-left { |
|
|
|
|
border-radius: 100rpx; |
|
|
|
|
background: var(--LightMode-Grey-Grey-100, #F9F9F9); |
|
|
|
|
padding: 16rpx; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.policy-icon { |
|
|
|
|
width: 40rpx; |
|
|
|
|
height: 40rpx; |
|
|
|
|
flex-shrink: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.policy-list { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
align-items: flex-start; |
|
|
|
|
background: var(--LightMode-Secondary-Secondary, #F9F9F9); |
|
|
|
|
|
|
|
|
|
.policy-item { |
|
|
|
|
display: flex; |
|
|
|
|
padding: var(--Number-12px, 12px); |
|
|
|
|
align-items: center; |
|
|
|
|
gap: var(--Number-12px, 12px); |
|
|
|
|
align-self: stretch; |
|
|
|
|
border-radius: var(--Number-8px, 8px); |
|
|
|
|
border-bottom: 1px solid var(--LightMode-Grey-Grey-100, #F9F9F9); |
|
|
|
|
background: var(--LightMode-Light-Light, #FFF); |
|
|
|
|
margin-top: 12px; |
|
|
|
|
margin-left: 12px; |
|
|
|
|
margin-right: 12px; |
|
|
|
|
margin-bottom: 0px; |
|
|
|
|
.item-left { |
|
|
|
|
margin-right: 20rpx; |
|
|
|
|
border-radius: 100px; |
|
|
|
|
background: var(--LightMode-Grey-Grey-100, #F9F9F9); |
|
|
|
|
display: flex; |
|
|
|
|
padding: 8px; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
gap: 8px; |
|
|
|
|
.policy-icon { |
|
|
|
|
display: flex; |
|
|
|
|
width: 20px; |
|
|
|
|
height: 20px; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
aspect-ratio: 1/1; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.item-right { |
|
|
|
|
flex: 1; |
|
|
|
|
|
|
|
|
|
.policy-title { |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
color: #333; |
|
|
|
|
margin-bottom: 10rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.policy-time { |
|
|
|
|
font-size: 24rpx; |
|
|
|
|
color: #999; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.item-right { |
|
|
|
|
flex: 1; |
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
.policy-title { |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
color: #333; |
|
|
|
|
margin-bottom: 12rpx; |
|
|
|
|
line-height: 1.4; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.policy-time { |
|
|
|
|
font-size: 24rpx; |
|
|
|
|
color: #999; |
|
|
|
|
line-height: 1.2; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 加载更多组件样式 |
|
|
|
|
::v-deep .uni-load-more { |
|
|
|
|
padding: 24rpx 0; |
|
|
|
|
} |
|
|
|
|
</style> |