buddhism/pages/institutionalStructure/projectProgressList.vue

<template>
  <view class="page">
    <custom-navbar
      ref="customNavbar"
      :style="{ backgroundColor: '#f5f0e7' }"
      title="项目进展"
    />
    <tile-grid />
    <view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
      <template>
        <view class="construction-container">
          <!-- 施工情况列表 -->
          <view class="construction-list">
            <view
              v-for="(item, index) in winB_List"
              :key="index"
              class="construction-card"
              @click="goProjectDetail(item)"
            >
              <!-- 日期 -->
              <text class="date">{{ item.createTime }}</text>

              <!-- 标题 -->
              <text class="title">{{ item.title }}</text>

              <!-- 描述 -->
              <rich-text
                :nodes="removeBackgroundStyle(item.content)"
              ></rich-text>

              <!--              <text class="description">{{ item.content }}</text>-->

              <!-- 图片列表 -->
              <view class="images-container">
                <image
                  v-for="(imgUrl, imgIndex) in item.coverUrl
                    ? item.coverUrl.split(',')
                    : []"
                  :key="imgIndex"
                  :src="imgUrl"
                  class="image-placeholder"
                  mode="aspectFill"
                />
              </view>

              <!--              &lt;!&ndash; 分割线（最后一个不显示） &ndash;&gt;-->
              <!--              <view-->
              <!--                v-if="index < constructionData.length - 1"-->
              <!--                class="divider"-->
              <!--              ></view>-->
            </view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
import CommonEnum from "../../enum/common";
import { createPagination } from "../../composables/winB_Pagination";
import { getProjectSchedule } from "../../api/institutionalStructure/institutionalStructureDetail";

export default {
  components: {},
  mixins: [
    createPagination({
      fetchData: getProjectSchedule,
      mode: "loadMore",
      pageSize: 3,
      autoLoad: false, // 设置为 false，不自动加载
    }),
  ],

  onLoad(options) {
    if (options) {
      console.log("接收到的参数:", options.formedId);
      this.formedId = options.formedId;
      // 更新参数并首次执行数据加载
      this.winB_UpdateParams({ formedId: this.formedId });
    }
  },

  data() {
    return {
      CommonEnum,
      constructionData: [
        {
          date: "2025/06/23",
          title: "施工情况",
          description: "施工情况",
          images: [
            { url: "/static/placeholder.png" },
            { url: "/static/placeholder.png" },
            { url: "/static/placeholder.png" },
          ],
        },
        {
          date: "2025/06/23",
          title: "施工情况",
          description: "施工情况",
          images: [{ url: "/static/placeholder.png" }],
        },
        {
          date: "2025/06/23",
          title: "施工情况",
          description: "施工情况",
          images: [
            { url: "/static/placeholder.png" },
            { url: "/static/placeholder.png" },
          ],
        },
      ],
    };
  },

  methods: {
    removeBackgroundStyle(html) {
      if (!html) return [];

      // 1. 移除背景色样式
      return html.replace(/background-color:[^;"]*;?/g, "");
    },

    goProjectDetail(item) {
      uni.navigateTo({
        url: `/pages/institutionalStructure/projectDetail?title=${encodeURIComponent(item.title)}&content=${encodeURIComponent(item.content)}&createTime=${encodeURIComponent(item.createTime)}&coverUrl=${encodeURIComponent(item.coverUrl)}`,
      });
    },
  },

  onReachBottom() {
    this.winB_LoadMore();
    console.log("加载更多");
  },
};
</script>

<style lang="scss" scoped>
.page {
}

.header {
  width: 100%;

  display: flex;

  flex-direction: column;
}

.construction-container {
  background-color: #f5f5f5;

  .header {
    text-align: center;
    margin-bottom: 40rpx;

    .title {
      display: block;
      font-size: 36rpx;
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: 10rpx;
    }

    .subtitle {
      display: block;
      font-size: 28rpx;
      color: #666;
    }
  }

  .construction-list {
    .construction-card {
      background-color: #fff;
      border-radius: 24rpx;
      padding: 30rpx;
      margin-bottom: 30rpx;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

      .date {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 20rpx;
        display: block;
      }

      .title {
        font-size: 32rpx;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 20rpx;
        display: block;
      }

      .description {
        color: #666;
        font-size: 28rpx;
        margin-bottom: 20rpx;
        display: block;
      }

      .images-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
        margin-top: 20rpx;

        .image-placeholder {
          width: 200rpx;
          height: 200rpx;
          background-color: #eaeaea;
          border-radius: 16rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #999;
          font-size: 24rpx;
        }
      }

      .divider {
        height: 2rpx;
        background-color: #eee;
        margin: 30rpx 0;
      }
    }
  }
}
</style>