institutionalStructure.vue组件的抽离

components/base-background/README.md

@@ -1 +1,93 @@
- 
+ # BaseBackground 背景图片组件
+
+一个可复用的背景图片组件，支持自定义背景图片源和样式。
+
+## 功能特性
+
+- 支持自定义背景图片源
+- 支持自定义图片裁剪模式
+- 支持自定义样式
+- 默认使用 CommonEnum.BACKGROUND 作为背景
+
+## 使用方法
+
+### 基础用法
+
+```vue
+<template>
+  <view class="page">
+    <base-background />
+    <!-- 其他内容 -->
+  </view>
+</template>
+
+<script>
+import BaseBackground from '@/components/base-background/base-background.vue'
+
+export default {
+  components: {
+    BaseBackground
+  }
+}
+</script>
+```
+
+### 自定义背景图片
+
+```vue
+<template>
+  <view class="page">
+    <base-background :src="customBackground" />
+    <!-- 其他内容 -->
+  </view>
+</template>
+```
+
+### 自定义裁剪模式
+
+```vue
+<template>
+  <view class="page">
+    <base-background mode="aspectFit" />
+    <!-- 其他内容 -->
+  </view>
+</template>
+```
+
+### 自定义样式
+
+```vue
+<template>
+  <view class="page">
+    <base-background 
+      :custom-style="{ 
+        borderRadius: '8rpx',
+        opacity: 0.8 
+      }" 
+    />
+    <!-- 其他内容 -->
+  </view>
+</template>
+```
+
+## Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| src | String | '' | 背景图片源，如果不传则使用默认背景 |
+| mode | String | 'aspectFill' | 图片裁剪模式 |
+| customStyle | Object | {} | 自定义样式对象 |
+
+## 裁剪模式说明
+
+- `aspectFill`: 保持纵横比缩放图片，只保证图片的短边能完全显示出来
+- `aspectFit`: 保持纵横比缩放图片，使图片的长边能完全显示出来
+- `scaleToFill`: 不保持纵横比缩放图片，使图片完全适应容器
+- `widthFix`: 宽度不变，高度自动变化，保持原图宽高比不变
+- `heightFix`: 高度不变，宽度自动变化，保持原图宽高比不变
+
+## 注意事项
+
+1. 组件会自动设置 `position: absolute` 和 `z-index: -1`，确保背景图片在内容下方
+2. 默认样式包含 `border-radius: 16rpx`，可以通过 `customStyle` 覆盖
+3. 组件会自动导入 `CommonEnum`，使用默认背景图片

pages/institutionalStructure/components/status-display.vue

@@ -0,0 +1,55 @@
+<template>
+  <view class="status-display">
+    <!-- 加载状态 -->
+    <view v-if="type === 'loading'" class="loading">
+      <text>{{ loadingText }}</text>
+    </view>
+    <!-- 空数据提示 -->
+    <view v-else-if="type === 'empty'" class="empty">
+      <text>{{ emptyText }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'StatusDisplay',
+  props: {
+    // 状态类型：loading, empty
+    type: {
+      type: String,
+      required: true,
+      validator: value => ['loading', 'empty'].includes(value)
+    },
+    // 加载文本
+    loadingText: {
+      type: String,
+      default: '加载中...'
+    },
+    // 空数据文本
+    emptyText: {
+      type: String,
+      default: '暂无数据'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.status-display {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loading, .empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #999;
+  font-size: 28rpx;
+  background-color: #FFFBF5;
+  padding: 40rpx 0;
+}
+</style> 

pages/institutionalStructure/institutionalStructure.vue

@@ -3,14 +3,17 @@
     <custom-navbar title="建制" />
     <tile-grid :tile-image="tilesImageEnum.TILE" />
     <view class="header">
-      <!-- 加载状态 -->
+      <!-- 状态展示 -->
-      <view v-if="loading" class="loading">
+      <status-display 
-        <text>加载中...</text>
+        v-if="loading" 
-      </view>
+        type="loading" 
-      <!-- 空数据提示 -->
+        loading-text="加载中..."
-      <view v-else-if="institutionalData.length === 0" class="empty">
+      />
-        <text>暂无数据</text>
+      <status-display 
-      </view>
+        v-else-if="institutionalData.length === 0" 
+        type="empty" 
+        empty-text="暂无数据"
+      />
       <!-- 数据列表 -->
       <institutional-item 
         v-else 
@@ -31,13 +34,18 @@ 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.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
+    InstitutionalItem,
+    StatusDisplay
   },
   data() {
     return {
@@ -47,12 +55,7 @@ export default {
       },
       tilesImageEnum,
       // 动态数据数组
-      institutionalData: [],
+      institutionalData: []
-      // 加载状态
-      loading: false,
-      pageNum: 1,
-      pageSize: 10,
-      hasMore: true // 是否还有更多数据
     }
   },
   onLoad() {
@@ -62,86 +65,13 @@ export default {
   methods: {
     // 获取建制数据
     async getInstitutionalData(isLoadMore = false) {
-      this.loading = true
+      await this.fetchData(
-      try {
+        isLoadMore,
-        if (isLoadMore) {
+        getInstitutionalList,
-          this.pageNum++
+        InstitutionalDataFormatter.transformData
-        } else {
+      )
-          this.pageNum = 1
+      // 将数据赋值给 institutionalData
-        }
+      this.institutionalData = this.dataList
-        
-        // 调用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 '未知状态'
-      }
     },
     
     // 刷新数据
@@ -178,12 +108,5 @@ page {
 }
 
 
-.loading, .empty {
+
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #999;
-  font-size: 28rpx;
-  background-color: #FFFBF5;
-}
 </style>

pages/institutionalStructure/mixins/data-manager.js

@@ -0,0 +1,90 @@
+/**
+ * 数据管理 Mixin
+ * 提供通用的数据获取、分页加载功能
+ */
+export const dataManagerMixin = {
+  data() {
+    return {
+      // 数据数组
+      dataList: [],
+      // 加载状态
+      loading: false,
+      // 分页参数
+      pageNum: 1,
+      pageSize: 10,
+      hasMore: true
+    }
+  },
+
+  methods: {
+    /**
+     * 获取数据
+     * @param {boolean} isLoadMore 是否为加载更多
+     * @param {Function} apiCall API调用函数
+     * @param {Function} dataTransformer 数据转换函数
+     */
+    async fetchData(isLoadMore = false, apiCall, dataTransformer) {
+      this.loading = true
+      try {
+        if (isLoadMore) {
+          this.pageNum++
+        } else {
+          this.pageNum = 1
+        }
+        
+        // 调用API
+        const response = await apiCall({
+          pageNum: this.pageNum,
+          pageSize: this.pageSize
+        })
+        
+        if (response.code === 200) {
+          // 转换数据
+          const newData = dataTransformer ? dataTransformer(response.rows) : response.rows || []
+          
+          if (isLoadMore) {
+            this.dataList = [...this.dataList, ...newData]
+          } else {
+            this.dataList = 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
+      }
+    },
+
+    /**
+     * 刷新数据
+     * @param {Function} apiCall API调用函数
+     * @param {Function} dataTransformer 数据转换函数
+     */
+    refreshData(apiCall, dataTransformer) {
+      this.fetchData(false, apiCall, dataTransformer)
+    },
+
+    /**
+     * 加载更多数据
+     * @param {Function} apiCall API调用函数
+     * @param {Function} dataTransformer 数据转换函数
+     */
+    loadMoreData(apiCall, dataTransformer) {
+      if (this.hasMore && !this.loading) {
+        this.fetchData(true, apiCall, dataTransformer)
+      }
+    }
+  }
+} 

pages/institutionalStructure/utils/data-formatter.js

@@ -0,0 +1,65 @@
+/**
+ * 建制数据格式化工具类
+ */
+export class InstitutionalDataFormatter {
+  /**
+   * 格式化金额
+   * @param {number} amount 金额
+   * @returns {string} 格式化后的金额字符串
+   */
+  static 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()}`
+    }
+  }
+
+  /**
+   * 格式化左上角内容
+   * @param {string} year 年份
+   * @param {string} projectName 项目名称
+   * @returns {string} 格式化后的内容
+   */
+  static formatTopLeft(year, projectName) {
+    if (!year || !projectName) return '暂无数据'
+    return `${year}年 ${projectName}`
+  }
+
+  /**
+   * 获取状态文本
+   * @param {string} state 状态码
+   * @returns {string} 状态文本
+   */
+  static getStatusText(state) {
+    switch (state) {
+      case '1':
+        return '规划'
+      case '2':
+        return '进行中'
+      case '3':
+        return '已完成'
+      case '4':
+        return '已取消'
+      default:
+        return '未知状态'
+    }
+  }
+
+  /**
+   * 转换后端数据为前端格式
+   * @param {Array} rows 后端数据
+   * @returns {Array} 转换后的数据
+   */
+  static transformData(rows) {
+    return rows.map(item => ({
+      topLeft: InstitutionalDataFormatter.formatTopLeft(item.startYear, item.proName),
+      topRight: InstitutionalDataFormatter.getStatusText(item.state),
+      bottomLeft: `建造金额：${InstitutionalDataFormatter.formatAmount(item.totalAmount)}`,
+      bottomRight: `捐赠人数：${item.donorCount}人`
+    }))
+  }
+}