建制界面优化布局与样式

pages/institutionalStructure/components/institutional-item.vue

@@ -1,16 +1,24 @@
- <template>
+<template>
   <view class="data">
-    <view class="row">
+    <!-- 标题和状态行 -->
-      <view class="topLeft">{{ item.topLeft || '暂无数据' }}</view>
+    <view class="header-row">
-      <view>{{ item.topRight || '暂无数据' }}</view>
+      <view class="project-title">{{ item.topLeft || '暂无数据' }}</view>
+      <view class="status">{{ item.topRight || '暂无数据' }}</view>
     </view>
-    <view class="row">
+    
-      <view class="subRow">
+    <!-- 详细信息表格 -->
-        <view>{{ item.bottomLeft || '暂无数据' }}</view>
+    <view class="details-table">
-        <view>{{ item.bottomRight || '暂无数据' }}</view>
+      <view class="table-row">
+        <text class="label year-col">年份</text>
+        <text class="label amount-col">建造金额(约)</text>
+        <text class="label donor-col">捐赠人数</text>
+        <text class="label detail-col">捐赠名单</text>
       </view>
-      <view>
+      <view class="table-row">
-        <view class="bottomRight" @click="onViewDetail">查看详细</view>
+        <text class="value year-col">{{ item.year || '暂无数据' }}</text>
+        <text class="value amount-col">{{ item.amount || '暂无数据' }}</text>
+        <text class="value donor-col">{{ item.donorCount || '暂无数据' }}</text>
+        <text class="view-details detail-col" @click="onViewDetail">查看详情</text>
       </view>
     </view>
   </view>
@@ -55,44 +63,107 @@ export default {
   background-color: #FFFBF5;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  width: 720rpx;
-  align-items: center;
-  width: 720rpx; /* 固定宽度，适配父容器的padding */
   box-sizing: border-box;
-  height: 180rpx;
+  min-height: 180rpx;
   border-radius: 11px;
   border: 1px solid #C7A26D;
-  margin: 15rpx auto; /* 使用 auto 实现水平居中 */
+  margin: 15rpx auto;
+  padding: 12rpx;
 }
 
-.row {
+.header-row {
-  flex: 1;
-  width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 20rpx;
+  margin-bottom: 15rpx;
+  padding-bottom: 12rpx;
 }
 
-.subRow {
+.project-title {
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #522510;
+  flex: 1;
+}
+
+.status {
+  font-size: 28rpx;
+  color: #7F7F7F;
+  padding: 8rpx 16rpx;
+  border-radius: 20rpx;
+}
+
+.details-table {
   display: flex;
+  flex-direction: column;
+  gap: 10rpx;
 }
 
-.subRow view {
+.table-row {
-  padding-right: 20px;
+  display: flex;
-  font-size: 16px;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10rpx;
+  width: 100%;
 }
 
-.topLeft {
+.label {
-  font-size: 21px;
+  font-size: 26rpx;
-  font-weight: 1000;
+  color: #7C736E;
+  font-weight: 500;
+  flex: 1;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.value {
+  font-size: 26rpx;
+  color: #695347;
+  font-weight: 600;
+  flex: 1;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.view-details {
+  font-size: 28rpx;
   color: #522510;
-}
+  font-weight: 500;
 
-.bottomRight {
-  font-size: 16px;
-  font-weight: 1000;
-  color: #522510;
   cursor: pointer;
+  flex: 1;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+}
+
+.view-details:active {
+  opacity: 0.7;
+}
+
+/* 不同列的弹性比例 */
+.year-col {
+  flex: 1;
+}
+
+.amount-col {
+  flex: 1.5;
+}
+
+.donor-col {
+  flex: 1;
+}
+
+.detail-col {
+  flex: 0 0 auto;
+  margin-left: auto;
+  min-width: 80rpx;
 }
 </style>

pages/institutionalStructure/utils/data-formatter.js

@@ -9,33 +9,111 @@ export class InstitutionalDataFormatter {
    */
   static formatAmount(amount) {
     if (!amount) return '不详'
+    
+    // 超过一亿以亿为单位
     if (amount >= 100000000) {
-      return `${(amount / 100000000).toFixed(1)}亿`
+      return `约${(amount / 100000000).toFixed(1)}亿`
     } else if (amount >= 10000) {
-      return `${(amount / 10000).toFixed(1)}万`
+      return `约${(amount / 10000).toFixed(1)}万`
     } else {
-      return `${amount.toLocaleString()}`
+      return `约${amount.toLocaleString()}元`
+    }
+  }
+
+  /**
+   * 格式化历史金额（适用于古代项目）
+   * @param {number} amount 金额
+   * @param {string} currency 货币单位
+   * @returns {string} 格式化后的金额字符串
+   */
+  static formatHistoricalAmount(amount, currency = '银元') {
+    if (!amount) return '不详'
+    
+    // 超过一亿以亿为单位
+    if (amount >= 100000000) {
+      return `约${currency}${(amount / 100000000).toFixed(1)}亿`
+    } else if (amount >= 10000) {
+      return `约${currency}${(amount / 10000).toFixed(0)}万`
+    } else {
+      return `约${currency}${amount.toLocaleString()}`
     }
   }
 
   /**
    * 格式化左上角内容
-   * @param {string} year 年份
    * @param {string} projectName 项目名称
    * @returns {string} 格式化后的内容
    */
-  static formatTopLeft(year, projectName) {
+  static formatTopLeft(projectName) {
     // 如果年份和项目名称都为空，返回暂无数据
-    if (!year && !projectName) return '暂无数据'
+    if ( !projectName) return '暂无数据'
+    return projectName
+  }
+
+  /**
+   * 格式化项目名称
+   * @param {string} projectName 项目名称
+   * @param {boolean} isHistorical 是否为历史项目
+   * @returns {string} 格式化后的项目名称
+   */
+  static formatProjectName(projectName, isHistorical = false) {
+    if (!projectName) return '暂无数据'
     
-    // 如果只有年份，只显示年份
+    // 如果是历史项目，可能需要特殊处理
-    if (year && !projectName) return `${year}年`
+    if (isHistorical && projectName.includes('寺')) {
+      // 对于寺庙项目，保持原有格式
+      return projectName
+    }
     
-    // 如果只有项目名称，只显示项目名称
+    return projectName
-    if (!year && projectName) return projectName
+  }
+
+  /**
+   * 格式化年份显示
+   * @param {string} year 年份
+   * @returns {string} 格式化后的年份
+   */
+  static formatYear(year) {
+    if (!year) return '暂无数据'
     
-    // 如果都有，显示完整格式
+    // 如果已经是格式化过的字符串（包含"年"字），直接返回
-    return `${year}年 ${projectName}`
+    if (typeof year === 'string' && year.includes('年')) {
+      return year
+    }
+    
+    return `${year}年`
+  }
+
+  /**
+   * 格式化历史年份（适用于古代项目）
+   * @param {string} year 年份
+   * @returns {string} 格式化后的年份
+   */
+  static formatHistoricalYear(year) {
+    if (!year) return '暂无数据'
+    
+    // 如果已经是格式化过的字符串，直接返回
+    if (typeof year === 'string') {
+      if (year.includes('年')) {
+        return year
+      }
+      if (year.includes('时期') || year.includes('朝代')) {
+        return year
+      }
+    }
+    
+    // 如果是公元前的年份
+    if (year < 0) {
+      return `公元前${Math.abs(year)}年`
+    }
+    
+    // 如果是公元后的年份，但小于1000年
+    if (year < 1000) {
+      return `${year}年`
+    }
+    
+    // 正常年份
+    return `${year}年`
   }
 
   /**
@@ -58,6 +136,55 @@ export class InstitutionalDataFormatter {
     }
   }
 
+  /**
+   * 判断是否为历史项目
+   * @param {string} year 年份
+   * @returns {boolean} 是否为历史项目
+   */
+  static isHistoricalProject(year) {
+    if (!year) return false
+    
+    // 处理字符串格式的年份（如"916年"、"明末时期"）
+    if (typeof year === 'string') {
+      // 如果包含"年"字，提取数字部分
+      if (year.includes('年')) {
+        const yearNum = parseInt(year.replace('年', ''))
+        return yearNum < 1900
+      }
+      
+      // 如果包含历史时期描述，认为是历史项目
+      if (year.includes('时期') || year.includes('朝代') || year.includes('古代')) {
+        return true
+      }
+      
+      // 尝试解析纯数字
+      const yearNum = parseInt(year)
+      if (!isNaN(yearNum)) {
+        return yearNum < 1900
+      }
+    }
+    
+    // 处理数字格式的年份
+    const yearNum = parseInt(year)
+    return yearNum < 1900
+  }
+
+  /**
+   * 格式化捐赠人数
+   * @param {number} count 人数
+   * @param {boolean} isHistorical 是否为历史项目
+   * @returns {string} 格式化后的人数
+   */
+  static formatDonorCount(count, isHistorical = false) {
+    if (!count || count === 0) return '暂无数据'
+    
+    if (isHistorical) {
+      return `约${count}人`
+    } else {
+      return `${count}人`
+    }
+  }
+
   /**
    * 转换后端数据为前端格式
    * @param {Array} rows 后端数据
@@ -69,13 +196,25 @@ export class InstitutionalDataFormatter {
     return rows.map(item => {
       console.log('处理项目:', item) // 添加调试日志
       
+      const year = item.formedYear || item.startYear || item.start_year || item.year
+      const isHistorical = InstitutionalDataFormatter.isHistoricalProject(year)
+      
+      const projectName = item.proName || item.pro_name || item.projectName
+      
       return {
-        topLeft: InstitutionalDataFormatter.formatTopLeft(item.startYear || item.start_year || item.year, item.proName || item.pro_name || item.projectName),
+        topLeft: InstitutionalDataFormatter.formatTopLeft(InstitutionalDataFormatter.formatProjectName(projectName, isHistorical)),
         topRight: InstitutionalDataFormatter.getStatusText(item.state),
-        bottomLeft: `建造金额：${InstitutionalDataFormatter.formatAmount(item.totalAmount || item.total_amount)}`,
+        year: isHistorical 
-        bottomRight: `捐赠人数：${item.donorCount || item.donor_count || 0}人`,
+          ? InstitutionalDataFormatter.formatHistoricalYear(year)
+          : InstitutionalDataFormatter.formatYear(year),
+        amount: isHistorical 
+          ? InstitutionalDataFormatter.formatHistoricalAmount(item.totalAmount || item.total_amount)
+          : InstitutionalDataFormatter.formatAmount(item.totalAmount || item.total_amount),
+        donorCount: InstitutionalDataFormatter.formatDonorCount(item.donorCount || item.donor_count || 0, isHistorical),
         // 保存原始数据，用于跳转
-        formedId: item.id
+        formedId: item.id,
+        // 保存项目类型信息
+        isHistorical: isHistorical
       }
     })
   }