设置瓦片组件默认图标

components/tile-grid/README.md

@@ -1,59 +1,91 @@
-# TileGrid 组件
+# TileGrid 瓦片网格组件
 
-## 简介
+一个可复用的瓦片网格组件，默认使用 CommonEnum.TILE 作为瓦片图片，支持自定义图片和数量，适用于 Vue2/uni-app 项目。
-TileGrid 是一个通用的瓦片网格组件，用于显示一排均匀分布的瓦片图片。
 
-## 功能
+## 功能特性
-- 支持自定义瓦片数量
+- 默认使用 CommonEnum.TILE 作为瓦片图片
 - 支持自定义瓦片图片
+- 支持自定义瓦片数量
+- 响应式网格布局
 - 自动均匀分布瓦片
-- 响应式布局
 
-## 使用方法
+## 基本用法
 
-### 1. 导入组件
+### 使用默认瓦片图片和数量
-```javascript
+```vue
-import TileGrid from "../../components/tile-grid/tile-grid.vue";
+<template>
-```
+  <tile-grid />
+</template>
+
+<script>
+import TileGrid from '@/components/tile-grid/tile-grid.vue'
 
-### 2. 注册组件
-```javascript
 export default {
   components: {
     TileGrid
   }
 }
+</script>
 ```
 
-### 3. 在模板中使用
+### 使用自定义瓦片图片
 ```vue
 <template>
-  <view class="page">
+  <tile-grid :tile-image="customTileImage" />
-    <!-- 使用默认10个瓦片 -->
+</template>
-    <tile-grid :tile-image="tilesImageEnum.TILE" />
+
-    
+<script>
-    <!-- 自定义瓦片数量 -->
+import TileGrid from '@/components/tile-grid/tile-grid.vue'
-    <tile-grid :tile-count="5" :tile-image="tilesImageEnum.TILE" />
+
-    
+export default {
-    <!-- 使用自定义图片 -->
+  components: {
-    <tile-grid :tile-count="8" :tile-image="customTileImage" />
+    TileGrid
-  </view>
+  },
+  data() {
+    return {
+      customTileImage: 'https://example.com/custom-tile.png'
+    }
+  }
+}
+</script>
+```
+
+### 自定义瓦片数量
+```vue
+<template>
+  <tile-grid :tile-count="5" />
 </template>
 ```
 
-## Props 参数
+### 同时自定义图片和数量
+```vue
+<template>
+  <tile-grid :tile-count="8" :tile-image="customTileImage" />
+</template>
+```
 
-| 参数 | 类型 | 默认值 | 必填 | 说明 |
+## Props
-|------|------|--------|------|------|
+| 属性名    | 类型   | 默认值 | 说明                 |
-| tileCount | Number | 10 | 否 | 瓦片数量 |
+| --------- | ------ | ------ | -------------------- |
-| tileImage | String | - | 是 | 瓦片图片URL |
+| tileCount | Number | 10     | 瓦片数量             |
+| tileImage | String | ''     | 自定义瓦片图片地址   |
+
+## 默认行为
+- 如果不传递 `tileImage`，组件会自动使用 `CommonEnum.TILE` 作为默认瓦片图片
+- 如果传递了 `tileImage`，则使用自定义图片
+- 默认显示 10 个瓦片，可通过 `tileCount` 调整
 
 ## 样式说明
-- 瓦片网格使用 `flex` 布局，自动均匀分布
+- 使用 flex 布局，瓦片自动均匀分布
-- 每个瓦片图片尺寸为 `75rpx × 48rpx`
+- 每个瓦片图片尺寸为 75rpx × 48rpx
 - 瓦片间距通过 `justify-content: space-between` 自动计算
+- 支持响应式布局
 
 ## 注意事项
-- 确保传入的图片URL有效
+1. 组件会自动导入 CommonEnum，无需手动引入
-- 瓦片数量建议在 1-20 之间，避免过多影响性能
+2. 建议瓦片数量在 1-20 之间，避免过多影响性能
-- 组件会自动适应容器宽度 
+3. 确保传入的图片URL有效
+4. 组件会自动适应容器宽度
+
+---
+如有更多需求，欢迎扩展！ 

components/tile-grid/tile-grid.vue

@@ -1,24 +1,37 @@
 <template>
   <view class="tile-grid">
     <view class="tile-item" v-for="(item, index) in tileCount" :key="index">
-      <image :src="tileImage" mode="aspectFit" class="tile-image"></image>
+      <image :src="tileImageSrc" mode="aspectFit" class="tile-image"></image>
     </view>
   </view>
 </template>
 
 <script>
+import CommonEnum from '@/enum/common.js';
+
 export default {
   name: 'TileGrid',
+  data() {
+    return {
+      CommonEnum,
+    }
+  },
   props: {
     // 瓦片数量
     tileCount: {
       type: Number,
       default: 10
     },
-    // 瓦片图片URL
+    // 瓦片图片URL，如果不传则使用默认瓦片
     tileImage: {
       type: String,
-      required: true
+      default: ''
+    }
+  },
+  computed: {
+    // 瓦片图片源，优先使用传入的tileImage，否则使用默认瓦片
+    tileImageSrc() {
+      return this.tileImage || this.CommonEnum.TILE
     }
   }
 }

pages/basePage/basePage.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="page">
     <custom-navbar title="基础页面" />
-    <tile-grid :tile-image="CommonEnum.TILE" />
+    <tile-grid/>
     <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
       <!-- 状态展示 -->
       <status-display

pages/institutionalStructure/donationRecord.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="page">
     <custom-navbar title="捐款记录" />
-    <tile-grid :tile-image="CommonEnum.TILE" />
+    <tile-grid />
     <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
       <view class="search-filter-row">
         <search-box

pages/institutionalStructure/institutionalStructure.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="page">
     <custom-navbar title="建制" />
-    <tile-grid :tile-image="CommonEnum.TILE" />
+    <tile-grid/>
     <view class="header">
       <!-- 状态展示 -->
       <status-display 
@@ -29,8 +29,7 @@
 </template>
 
 <script>
-import { tilesImageEnum } from '@/enum/institutionalStructure.js';
+import { getInstitutionalList } from '@/api/institutionalStructure/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";
@@ -53,7 +52,6 @@ export default {
       bgc: {
         backgroundColor: CommonEnum.BASE_COLOR,
       },
-      tilesImageEnum,
       // 动态数据数组
       institutionalData: []
     }