buddhism/pages/institutionalStructure/institutionalStructure.vue

<template>
  <view class="page">
    <u-navbar title="建制" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#695347'
              title-size='36' height='50' :title-style="{ fontWeight: 2000 }" id="navbar">
    </u-navbar>
    <view class="tile">
      <view class="tile-item" v-for="(item, index) in 10" :key="index">
        <image :src="tilesImageEnum.TILE" mode="aspectFit" class="tile-image"></image>
      </view>
    </view>
    <view class="container">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading">
        <text>加载中...</text>
      </view>
      
      <!-- 空数据提示 -->
      <view v-else-if="institutionalData.length === 0" class="empty">
        <text>暂无数据</text>
      </view>
      
      <!-- 数据列表 -->
      <view v-else class="data" v-for="(item, index) in institutionalData" :key="index">
        <view class="row">
          <view class="topLeft">{{ item.topLeft || '暂无数据' }}</view>
          <view>{{ item.topRight || '暂无数据' }}</view>
        </view>
        <view class="row">
          <view class="subRow">
            <view>{{ item.bottomLeft || '暂无数据' }}</view>
            <view >{{ item.bottomRight || '暂无数据' }}</view>
          </view>
          <view>
            <view class="bottomRight">查看详细</view>
          </view>

        </view>
      </view>
    </view>
	
  </view>
</template>

<script>
import { tilesImageEnum } from '@/enum/institutionalStructure.js';
import { getInstitutionalList } from '@/api/institutionalStructure.js';

export default {
  data() {
    return {
      bgc: {
        backgroundColor: "#F5F0E7",
      },
      tilesImageEnum,
      // 动态数据数组
      institutionalData: [],
      // 加载状态
      loading: false,
      pageNum: 1,
      pageSize: 10,
      hasMore: true // 是否还有更多数据
    }
  },
  onLoad() {
    // 页面加载时获取数据
    this.getInstitutionalData()
  },
  methods: {
    // 获取建制数据
    async getInstitutionalData(isLoadMore = false) {
      this.loading = true
      try {
        if (isLoadMore) {
          this.pageNum++
        } else {
          this.pageNum = 1
        }
        
        // 调用API
        const response = await getInstitutionalList({
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        
        if (response.code === 200) {
          // 将后端数据转换为前端需要的格式
          const newData = response.rows.map(item => ({
            topLeft: this.formatTopLeft(item.startYear, item.proName),
            topRight: this.getStatusText(item.state),
            bottomLeft: `建造金额：${this.formatAmount(item.totalAmount)}`,
            bottomRight: `捐赠人数：${item.donorCount}人`
          })) || []
          
          if (isLoadMore) {
            this.institutionalData = [...this.institutionalData, ...newData]
          } else {
            this.institutionalData = newData
          }
          
          // 判断是否还有更多数据
          this.hasMore = response.rows.length === this.pageSize
        } else {
          uni.showToast({
            title: response.msg || '获取数据失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取建制数据失败:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 格式化金额
    formatAmount(amount) {
      if (!amount) return '不详'
      if (amount >= 100000000) {
        return `${(amount / 100000000).toFixed(1)}亿`
      } else if (amount >= 10000) {
        return `${(amount / 10000).toFixed(1)}万`
      } else {
        return `${amount.toLocaleString()}`
      }
    },
    
    // 格式化左上角内容
    formatTopLeft(year, projectName) {
      if (!year || !projectName) return '暂无数据'
      return `${year}年 ${projectName}`
    },
    
    // 获取状态文本
    getStatusText(state) {
      switch (state) {
        case '1':
          return '规划'
        case '2':
          return '进行中'
        case '3':
          return '已完成'
        case '4':
          return '已取消'
        default:
          return '未知状态'
      }
    },
    
    // 刷新数据
    refreshData() {
      this.getInstitutionalData()
    }
  }
}
</script>

<style lang="scss">
page {
  background: #F5F0E7;
}
.container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  background-color: #FFFBF5;
  padding: 0 11rpx;
  padding-bottom: 40rpx;
}
.tile {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.tile-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tile-image {
  width: 75rpx;
  height: 48rpx;
}
.data{
  background-color: #FFFBF5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  height: 180rpx;
  border-radius: 11px;
  border: 1px solid #C7A26D;
  margin: 8rpx 0;
}
.row{
	flex: 1;
  width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20rpx;
}
.subRow{
  display: flex;
}
.subRow view{
  padding-right: 20px;
  font-size: 18px;
}
.topLeft{
  font-size: 21px;
  font-weight: 1000;
  color: #522510;
}
.bottomRight{
  font-size: 18px;
  font-weight: 1000;
  color: #522510;
}
.loading, .empty {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 28rpx;
  background-color: #FFFBF5;
}
</style>