ruoyi-miniapp/sub/owner/policy.vue

<template>
  <!-- 政策法规列表页面容器 -->
  <view class="policy-container">
    <!-- 搜索框区域 -->
    <view class="search-box">
      <van-search
        :value="abc"
        placeholder="输入关键字查询"
        id="sreach"
        @clear="handleClear"
        @change="handleSearch"
      />
    </view>

    <!-- 政策法规列表区域 -->
    <!-- 修改列表项部分 -->
    <view class="policy-list">
      <scroll-view
        class="policy-scroll"
        scroll-y
        @scrolltolower="loadNextPage"
        @refresherrefresh="onRefresh"
        refresher-enabled
        :refresher-triggered="isRefreshing"
      >
        <view
          class="policy-item"
          v-for="item in policyList"
          :key="item.id"
          @click="handlePolicyClick(item)"
        >
          <view class="item-left">
            <image
              src="@/static/images/owner/policy.png"
              class="policy-icon"
              mode="aspectFit"
            ></image>
          </view>
          <view class="item-right">
            <view class="policy-title">
              {{ item.title }}
            </view>
            <view class="policy-time">
              生效时间: {{ item.effectiveDate }}
            </view>
          </view>
        </view>
      </scroll-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 {
      isRefreshing: false, // 是否正在刷新
      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()
  },

  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()
      }
    },
    // 获取政策法规列表数据
    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]
          }
          console.log('列表信息', res)
          this.total = res.data.total
          // 更新加载状态
          this.loadMoreStatus =
            this.policyList.length >= this.total ? 'noMore' : 'more'
        }
      } catch (error) {
        console.error(error)
        this.loadMoreStatus = 'more'
        uni.showToast({
          title: '获取列表失败',
          icon: 'none'
        })
      } finally {
        this.loadMoreStatus =
          this.policyList.length >= this.total ? 'noMore' : 'more'
        // 无论成功失败都关闭刷新状态
        // 确保在数据加载完成后关闭刷新状态
        setTimeout(() => {
          this.isRefreshing = false
        }, 300) // 添加短暂延时，确保动画效果完整
      }
    },
    // 搜索事件处理
    handleSearch(e) {
      if (e.detail && e.detail.length > 1) {
        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;
  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;
      padding-top: 24rpx;
    }

    .policy-item {
      display: flex;
      padding: 24rpx;
      align-items: center;
      gap: 24rpx;
      background: #fff;
      margin: 24rpx;
      margin-bottom: 0;
      border-radius: 16rpx;
      border-bottom: 2rpx solid var(--LightMode-Grey-Grey-100, #f9f9f9);
      .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;
        }
      }

      .item-right {
        flex: 1;
        overflow: hidden;

        .policy-title {
          font-weight: bold;
          margin-bottom: 8rpx;
          font-size: 28rpx;
          color: #333;
          line-height: 1.4;
        }

        .policy-time {
          font-size: 24rpx;
          color: #999;
          line-height: 1.2;
        }
      }
    }
  }
}

// 加载更多组件样式
::v-deep .uni-load-more {
  padding: 24rpx 0;
}
</style>