buddhism/pages/institutionalStructure/institutionalStructure.vue

<template>
  <view class="page">
    <custom-navbar title="建制" />
    <tile-grid :tile-image="CommonEnum.TILE" />
    <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 { tilesImageEnum } from '@/enum/institutionalStructure.js';
import { getInstitutionalList } from '@/api/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";

export default {
  mixins: [dataManagerMixin],
  components: {
    CustomNavbar,
    TileGrid,
    InstitutionalItem,
    StatusDisplay
  },
  data() {
    return {
      CommonEnum,
      bgc: {
        backgroundColor: CommonEnum.BASE_COLOR,
      },
      tilesImageEnum,
      // 动态数据数组
      institutionalData: []
    }
  },
  onLoad() {
    // 页面加载时获取数据
    this.getInstitutionalData()
  },
  methods: {
    // 获取建制数据
    async getInstitutionalData(isLoadMore = false) {
      await this.fetchData(
        isLoadMore,
        getInstitutionalList,
        InstitutionalDataFormatter.transformData
      )
      // 将数据赋值给 institutionalData
      this.institutionalData = this.dataList
    },
    
    // 刷新数据
    refreshData() {
      this.getInstitutionalData()
    },
    
    // 处理查看详细
    handleViewDetail(data) {
      console.log('查看详细:', data.item)
      // 这里可以添加跳转到详情页面的逻辑
      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>