ruoyi-miniapp/sub/owner/policy.vue

<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>