9 changed files with 239 additions and 29 deletions
@ -0,0 +1,203 @@
|
||||
<template> |
||||
<!-- 政策法规列表页面容器 --> |
||||
<view class="policy-container"> |
||||
<!-- 搜索框区域 --> |
||||
<view class="search-box"> |
||||
<van-search |
||||
:value="abc" |
||||
placeholder="输入关键字查询" |
||||
@search="handleSearch" |
||||
id="sreach" |
||||
@clear="handleClear" |
||||
/> |
||||
</view> |
||||
|
||||
<!-- 政策法规列表区域 --> |
||||
<!-- 修改列表项部分 --> |
||||
<view class="policy-list"> |
||||
<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> |
||||
|
||||
|
||||
|
||||
<!-- 加载更多状态组件 --> |
||||
<uni-load-more :status="loadMoreStatus" /> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { PolicyApi, formatPolicyContext } from '@/api/policy/index.js' |
||||
import { formatDate } from '@/utils/ruoyi.js' |
||||
import config from '@/config' |
||||
|
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
searchValue: '', // 搜索关键字 |
||||
abc: '', |
||||
policyList: [], // 政策法规列表数据 |
||||
pageNum: 1, // 当前页码 |
||||
pageSize: 10, // 每页显示条数 |
||||
total: 0, // 总数据条数 |
||||
loadMoreStatus: 'more' ,// 加载更多状态：more-加载前 loading-加载中 noMore-没有更多 |
||||
itemImgUrl: config.imgUrl + '/miniohb/c103c92335bdd30d33ff8a062c219ead0626bf0a1898536bd7590285ca11c9db.png' |
||||
} |
||||
}, |
||||
// 页面加载时获取列表数据 |
||||
onShow() { |
||||
console.log(this.itemImgUrl) |
||||
this.getPolicyList() |
||||
}, |
||||
|
||||
|
||||
// 触底加载更多数据 |
||||
onReachBottom() { |
||||
if (this.policyList.length < this.total) { |
||||
this.pageNum++ |
||||
this.getPolicyList() |
||||
} |
||||
}, |
||||
methods: { |
||||
// 获取政策法规列表数据 |
||||
async getPolicyList() { |
||||
try { |
||||
console.log('PolicyApi',this.searchValue) |
||||
this.loadMoreStatus = 'loading' |
||||
const res = await PolicyApi.getPolicyPage({ |
||||
pageNum: this.pageNum, |
||||
pageSize: this.pageSize, |
||||
name: this.searchValue // 搜索关键字 |
||||
}) |
||||
|
||||
if (res.code === 0 && res.data.total > 0) { |
||||
// 限制标题长度，超出显示省略号 |
||||
const formattedData = res.data.list.map(item => ({ |
||||
...item, |
||||
title: item.name.length > 15 ? item.name.slice(0, 15) + '...' : item.name, |
||||
effectiveDate: formatDate(item.effectiveDate,'YYYY年MM月DD日') |
||||
})) |
||||
|
||||
// 判断是首次加载还是加载更多 |
||||
if (this.pageNum === 1) { |
||||
this.policyList = formattedData |
||||
} else { |
||||
this.policyList = [...this.policyList, ...formattedData] |
||||
} |
||||
|
||||
this.total = res.total |
||||
// 更新加载状态 |
||||
this.loadMoreStatus = this.policyList.length >= this.total ? 'noMore' : 'more' |
||||
} |
||||
} catch (error) { |
||||
console.error(error) |
||||
this.loadMoreStatus = 'more' |
||||
uni.showToast({ |
||||
title: '获取列表失败', |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
}, |
||||
// 搜索事件处理 |
||||
handleSearch(e) { |
||||
this.pageNum = 1 // 重置页码 |
||||
this.searchValue = e.detail // 更新搜索关键字 |
||||
this.getPolicyList() |
||||
}, |
||||
// 清除搜索事件处理 |
||||
handleClear() { |
||||
this.pageNum = 1 // 重置页码 |
||||
this.searchValue = '' // 清空搜索关键字 |
||||
this.getPolicyList() |
||||
}, |
||||
// 点击政策条目跳转详情 |
||||
handlePolicyClick(item) { |
||||
uni.navigateTo({ |
||||
url: `/sub/owner/policy-detail?id=${item.id}` |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
|
||||
|
||||
.policy-container { |
||||
background: var(--LightMode-Secondary-Secondary, #F9F9F9); |
||||
min-height: 100vh; |
||||
|
||||
.search-box { |
||||
padding: 20rpx; |
||||
background: #fff; |
||||
} |
||||
|
||||
.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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue