buddhism/pages/institutionalStructure/institutionalStructure.vue

<template>
  <view class="page">
    <custom-navbar title="建制" />
    <tile-grid/>
    <view class="header">
      <!-- 状态展示 -->
      <status-display 
        v-if="loading" 
        type="loading" 
        loading-text="加载中..."
      />
      <status-display 
        v-else-if="institutionalData.length === 0" 
        type="empty" 
        empty-text="暂无数据"
      />
      <!-- 数据列表 -->
      <institutional-item 
        v-else 
        v-for="(item, index) in institutionalData" 
        :key="index"
        :item="item"
        :index="index"
        @view-detail="handleViewDetail"
      />
    </view>
	
  </view>
</template>

<script>
import { getInstitutionalList } from '@/api/institutionalStructure/institutionalStructure.js';
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
import TileGrid from "../../components/tile-grid/tile-grid.vue";
import InstitutionalItem from "./components/institutional-item.vue";
import StatusDisplay from "../../components/status-display/status-display.vue";
import { InstitutionalDataFormatter } from "./utils/data-formatter.js";
import { dataManagerMixin } from "./mixins/data-manager.js";
import CommonEnum from "../../enum/common";
import { PageLoadingManager } from "../../utils/request.js";

export default {
  mixins: [dataManagerMixin],
  components: {
    CustomNavbar,
    TileGrid,
    InstitutionalItem,
    StatusDisplay
  },
  data() {
    return {
      CommonEnum,
      bgc: {
        backgroundColor: CommonEnum.BASE_COLOR,
      },
      // 动态数据数组
      institutionalData: []
    }
  },
  onLoad() {
    // 初始化页面loading管理器
    this.pageLoading = new PageLoadingManager()
    // 页面加载时获取数据
    this.getInstitutionalData()
  },
  onUnload() {
    // 页面卸载时清除loading
    if (this.pageLoading) {
      this.pageLoading.destroy()
    }
  },
  methods: {
    // 获取建制数据
    async getInstitutionalData(isLoadMore = false) {
      console.log('开始获取建制数据, isLoadMore:', isLoadMore)
      
      // 显示页面loading
      if (this.pageLoading && !isLoadMore) {
        this.pageLoading.show('努力加载中~')
      }
      
      try {
        const result = await this.fetchData(
          isLoadMore,
          getInstitutionalList,
          InstitutionalDataFormatter.transformData
        )
        console.log('建制数据获取成功:', result)
        // 将数据赋值给 institutionalData
        this.institutionalData = this.dataList
        console.log('建制数据已更新, 数量:', this.institutionalData.length)
      } catch (error) {
        console.error('获取建制数据失败:', error)
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        })
      } finally {
        // 隐藏页面loading
        if (this.pageLoading && !isLoadMore) {
          this.pageLoading.hide()
          console.log('页面loading已隐藏')
        }
      }
    },
    
    // 刷新数据
    refreshData() {
      this.getInstitutionalData()
    },
    
    // 处理查看详细
    handleViewDetail(data) {
      console.log('查看详细:', data.item)
      // 跳转到捐款记录页面，传递建制ID
      uni.navigateTo({
        url: `/pages/institutionalStructure/donationRecord?formedId=${data.item.formedId}`,
        fail: (err) => {
          console.error('跳转失败:', err);
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          });
        }
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background: #F5F0E7;
}
.header {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  background-color: #FFFBF5;
  padding: 0 15rpx;
  padding-bottom: 40rpx;
}
</style>