7 changed files with 419 additions and 4 deletions
@ -0,0 +1,37 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
|
||||
// 处理富文本内容截取
|
||||
export const formatPolicyContext = (context, maxLength = 100) => { |
||||
if (!context) return '' |
||||
// 移除HTML标签
|
||||
const plainText = context.replace(/<[^>]+>/g, '') |
||||
return plainText.length > maxLength
|
||||
? plainText.substring(0, maxLength) + '...'
|
||||
: plainText |
||||
} |
||||
|
||||
// 政策法规 API
|
||||
export const PolicyApi = { |
||||
|
||||
|
||||
/** |
||||
* 查询政策法规分页 |
||||
* @param {Object} params |
||||
*/ |
||||
getPolicyPage: (params) => { |
||||
return request({ |
||||
url: `/system/policy/page`, |
||||
method: 'GET', |
||||
params |
||||
}) |
||||
}, |
||||
|
||||
|
||||
// 查询政策法规详情
|
||||
getPolicy: (id) => { |
||||
return request({ url: `/system/policy/get?id=` + id,method: 'GET' }) |
||||
}, |
||||
|
||||
} |
||||
|
||||
@ -0,0 +1,142 @@
|
||||
<template> |
||||
<view class="policy-detail"> |
||||
|
||||
|
||||
<!-- 详情内容区 --> |
||||
<view class="content-wrap"> |
||||
<view class="policy-title">{{ policyDetail.name }}</view> |
||||
<view class="policy-time">生效时间：{{ policyDetail.effectiveDate }}</view> |
||||
|
||||
<!-- 富文本内容 --> |
||||
<view class="policy-content"> |
||||
<rich-text :nodes="policyDetail.context"></rich-text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { PolicyApi } from '@/api/policy/index.js' |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
id: '', // 政策ID |
||||
policyDetail: { |
||||
name: '', |
||||
createTime: '', |
||||
context: '' |
||||
} |
||||
} |
||||
}, |
||||
onLoad(options) { |
||||
if (options.id) { |
||||
this.id = options.id |
||||
this.getPolicyDetail() |
||||
} |
||||
}, |
||||
methods: { |
||||
// 获取详情数据 |
||||
async getPolicyDetail() { |
||||
try { |
||||
const res = await PolicyApi.getPolicy(this.id) |
||||
if (res.code === 0) { |
||||
this.policyDetail = { |
||||
...res.data, |
||||
effectiveDate: this.formatTime(res.data.effectiveDate), |
||||
// 处理富文本内容，确保样式正确显示 |
||||
context: this.formatRichText(res.data.context) |
||||
} |
||||
} |
||||
} catch (error) { |
||||
uni.showToast({ |
||||
title: '获取详情失败', |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
}, |
||||
// 格式化时间 |
||||
formatTime(time) { |
||||
if (!time) return '' |
||||
const date = new Date(time) |
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}` |
||||
}, |
||||
// 处理富文本内容 |
||||
formatRichText(html) { |
||||
if (!html) return '' |
||||
// 添加样式以确保图片自适应 |
||||
return html.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block;"') |
||||
}, |
||||
// 返回上一页 |
||||
handleBack() { |
||||
uni.navigateBack() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.policy-detail { |
||||
min-height: 100vh; |
||||
background: #fff; |
||||
|
||||
.nav-bar { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
height: 88rpx; |
||||
background: #fff; |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 0 30rpx; |
||||
border-bottom: 1rpx solid #eee; |
||||
z-index: 100; |
||||
|
||||
.back-btn { |
||||
font-size: 28rpx; |
||||
color: #333; |
||||
} |
||||
|
||||
.title { |
||||
flex: 1; |
||||
text-align: center; |
||||
font-size: 32rpx; |
||||
font-weight: bold; |
||||
padding-right: 60rpx; |
||||
} |
||||
} |
||||
|
||||
.content-wrap { |
||||
padding: 30rpx 30rpx 30rpx; |
||||
|
||||
.policy-title { |
||||
font-size: 36rpx; |
||||
font-weight: bold; |
||||
color: #333; |
||||
margin-bottom: 20rpx; |
||||
} |
||||
|
||||
.policy-time { |
||||
font-size: 24rpx; |
||||
color: #999; |
||||
margin-bottom: 40rpx; |
||||
} |
||||
|
||||
.policy-content { |
||||
font-size: 28rpx; |
||||
line-height: 1.8; |
||||
color: #333; |
||||
|
||||
:deep(img) { |
||||
max-width: 100%; |
||||
height: auto; |
||||
} |
||||
|
||||
:deep(p) { |
||||
margin-bottom: 20rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -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