institutional-item组件的抽离

pages/institutionalStructure/components/README.md

@@ -0,0 +1,82 @@
+# InstitutionalItem 建制数据项组件
+
+一个用于展示建制数据的可复用组件。
+
+## 功能特性
+
+- 展示建制项目的详细信息
+- 支持查看详细功能
+- 响应式布局
+- 统一的样式风格
+
+## 使用方法
+
+### 基础用法
+
+```vue
+<template>
+  <view>
+    <institutional-item 
+      v-for="(item, index) in institutionalData" 
+      :key="index"
+      :item="item"
+      :index="index"
+      @view-detail="handleViewDetail"
+    />
+  </view>
+</template>
+
+<script>
+import InstitutionalItem from './components/institutional-item.vue'
+
+export default {
+  components: {
+    InstitutionalItem
+  },
+  methods: {
+    handleViewDetail(data) {
+      console.log('查看详细:', data.item)
+      // 处理查看详细逻辑
+    }
+  }
+}
+</script>
+```
+
+## Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| item | Object | {} | 数据项对象 |
+| index | Number | 0 | 数据索引 |
+
+### item 对象结构
+
+```javascript
+{
+  topLeft: '2023年 项目名称',      // 左上角显示内容
+  topRight: '进行中',              // 右上角显示内容
+  bottomLeft: '建造金额：100万',    // 左下角显示内容
+  bottomRight: '捐赠人数：50人'     // 右下角显示内容
+}
+```
+
+## Events
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| view-detail | { item, index } | 点击查看详细时触发 |
+
+## 样式说明
+
+- 组件使用统一的建制风格
+- 背景色：`#FFFBF5`
+- 边框：`1px solid #C7A26D`
+- 圆角：`11px`
+- 高度：`180rpx`
+
+## 注意事项
+
+1. 组件会自动处理空值，显示"暂无数据"
+2. 点击"查看详细"会触发 `view-detail` 事件
+3. 样式与建制页面保持一致 

pages/institutionalStructure/components/institutional-item.vue

@@ -0,0 +1,98 @@
+ <template>
+  <view class="data">
+    <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" @click="onViewDetail">查看详细</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'InstitutionalItem',
+  props: {
+    // 数据项
+    item: {
+      type: Object,
+      required: true,
+      default: () => ({
+        topLeft: '',
+        topRight: '',
+        bottomLeft: '',
+        bottomRight: ''
+      })
+    },
+    // 数据索引
+    index: {
+      type: Number,
+      default: 0
+    }
+  },
+  methods: {
+    // 查看详细
+    onViewDetail() {
+      // 触发父组件的事件
+      this.$emit('view-detail', {
+        item: this.item,
+        index: this.index
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.data {
+  background-color: #FFFBF5;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  width: 720rpx; /* 固定宽度，适配父容器的padding */
+  box-sizing: border-box;
+  height: 180rpx;
+  border-radius: 11px;
+  border: 1px solid #C7A26D;
+  margin: 15rpx auto; /* 使用 auto 实现水平居中 */
+}
+
+.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: 16px;
+}
+
+.topLeft {
+  font-size: 21px;
+  font-weight: 1000;
+  color: #522510;
+}
+
+.bottomRight {
+  font-size: 16px;
+  font-weight: 1000;
+  color: #522510;
+  cursor: pointer;
+}
+</style>

pages/institutionalStructure/institutionalStructure.vue

@@ -12,22 +12,14 @@
         <text>暂无数据</text>
       </view>
       <!-- 数据列表 -->
-      <view v-else class="data" v-for="(item, index) in institutionalData" :key="index">
+      <institutional-item 
-        <view class="row">
+        v-else 
-          <view class="topLeft">{{ item.topLeft || '暂无数据' }}</view>
+        v-for="(item, index) in institutionalData" 
-          <view>{{ item.topRight || '暂无数据' }}</view>
+        :key="index"
-        </view>
+        :item="item"
-        <view class="row">
+        :index="index"
-          <view class="subRow">
+        @view-detail="handleViewDetail"
-            <view>{{ item.bottomLeft || '暂无数据' }}</view>
+      />
-            <view >{{ item.bottomRight || '暂无数据' }}</view>
-          </view>
-          <view>
-            <view class="bottomRight">查看详细</view>
-          </view>
-
-        </view>
-      </view>
     </view>
 	
   </view>
@@ -38,12 +30,14 @@ 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 CommonEnum from "../../enum/common";
 
 export default {
   components: {
     CustomNavbar,
-    TileGrid
+    TileGrid,
+    InstitutionalItem
   },
   data() {
     return {
@@ -153,6 +147,16 @@ export default {
     // 刷新数据
     refreshData() {
       this.getInstitutionalData()
+    },
+    
+    // 处理查看详细
+    handleViewDetail(data) {
+      console.log('查看详细:', data.item)
+      // 这里可以添加跳转到详情页面的逻辑
+      uni.showToast({
+        title: '查看详细功能开发中',
+        icon: 'none'
+      })
     }
   }
 }
@@ -169,48 +173,11 @@ page {
   align-items: flex-start;
   flex-direction: column;
   background-color: #FFFBF5;
-  padding: 0 11rpx;
+  padding: 0 15rpx;
   padding-bottom: 40rpx;
 }
 
-.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: 16px;
-}
-.topLeft{
-  font-size: 21px;
-  font-weight: 1000;
-  color: #522510;
-}
-.bottomRight{
-  font-size: 16px;
-  font-weight: 1000;
-  color: #522510;
-}
 .loading, .empty {
   display: flex;
   justify-content: center;