捐款记录的组件拆分

pages/institutionalStructure/components/donation-list.vue

@@ -0,0 +1,90 @@
+<template>
+  <view class="donation-list">
+    <view class="list-header">
+      <text class="header-item">编号</text>
+      <text class="header-item">姓名</text>
+      <text class="header-item">捐款金额(元)</text>
+      <text class="header-item">捐款时间</text>
+    </view>
+    <view class="list-item" v-for="(item, index) in donationList" :key="index">
+      <text class="item-id">{{ item.id }}</text>
+      <text class="item-name">{{ item.name }}</text>
+      <text class="item-amount">{{ item.amount.toLocaleString() }}</text>
+      <text class="item-time">{{ item.time }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'DonationList',
+  props: {
+    donationList: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.donation-list {
+  width: 100%;
+  border-radius: 16rpx;
+  overflow: hidden;
+  padding-bottom: 106rpx;
+}
+
+.list-header {
+  display: flex;
+  padding: 28rpx 15rpx;
+}
+
+.header-item {
+  flex: 1;
+  font-size: 30rpx;
+  color: #643B27;
+  font-weight: bold;
+  text-align: center;
+}
+
+.list-item {
+  display: flex;
+  padding: 28rpx 20rpx;
+}
+
+.list-item:hover {
+  background: #FAFAFA;
+}
+
+.list-item:last-child {
+  border-bottom: none;
+}
+
+.item-id, .item-name, .item-amount, .item-time {
+  flex: 1;
+  font-size: 28rpx;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.item-id {
+  color: #666;
+  font-weight: 500;
+}
+
+.item-name {
+  color: #333;
+  font-weight: 500;
+}
+
+.item-amount {
+  color: #E74C3C;
+  font-weight: bold;
+}
+
+.item-time {
+  color: #666;
+  font-size: 26rpx;
+}
+</style> 

pages/institutionalStructure/components/donation-summary.vue

@@ -0,0 +1,72 @@
+<template>
+  <view class="donation-summary">
+    <view class="summary-item">
+      <text class="summary-label">总造价(元)</text>
+      <text class="summary-value">{{ totalAmount.toLocaleString() }}</text>
+    </view>
+    <view class="summary-item">
+      <text class="summary-label">参与捐款人次</text>
+      <text class="summary-value">{{ participantCount.toLocaleString() }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'DonationSummary',
+  props: {
+    totalAmount: {
+      type: Number,
+      default: 0
+    },
+    participantCount: {
+      type: Number,
+      default: 0
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.donation-summary {
+  width: 100%;
+  padding: 40rpx 24rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+}
+
+.summary-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  position: relative;
+}
+
+.summary-item:first-child::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1rpx;
+  height: 100%;
+  background: #ffffff;
+}
+
+.summary-label {
+  font-size: 28rpx;
+  color: #C7A26D;
+  margin-bottom: 20rpx;
+  text-align: center;
+}
+
+.summary-value {
+  font-size: 48rpx;
+  font-weight: bold;
+  color: #C7A26D;
+  text-align: center;
+}
+</style> 

pages/institutionalStructure/components/project-info.vue

@@ -0,0 +1,55 @@
+<template>
+  <view class="project-info">
+    <text class="project-title">{{ projectName || '加载中...' }}</text>
+    <text class="project-desc">{{ projectDesc || '暂无描述' }}</text>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'ProjectInfo',
+  props: {
+    projectName: {
+      type: String,
+      default: ''
+    },
+    projectDesc: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.project-info {
+  width: 100%;
+  padding: 24rpx 20rpx;
+  background: #F3D2A3;
+  border-radius: 20rpx 20rpx 20rpx 20rpx;
+  border: 2rpx solid #F3D2A2;
+}
+
+.project-title {
+  display: block;
+  font-weight: 500;
+  font-size: 30rpx;
+  color: #522510;
+  line-height: 42rpx;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+
+.project-desc {
+  display: block;
+  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+  font-weight: 400;
+  font-size: 24rpx;
+  color: #522510;
+  line-height: 32rpx;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+</style> 

pages/institutionalStructure/donationRecord.vue

@@ -17,46 +17,20 @@
         </view>
       </view>
       
-      <!-- 项目描述 -->
+      <!-- 项目信息组件 -->
-      <view class="project-info">
+      <project-info 
-        <text class="project-title">{{ projectInfo.proName || '加载中...' }}</text>
+        :project-name="projectInfo.proName"
-        <text class="project-desc">{{ projectInfo.proProfile || '暂无描述' }}</text>
+        :project-desc="projectInfo.proProfile"
-      </view>
+      />
       
-      <!-- 捐款统计区域 -->
+      <!-- 捐款统计组件 -->
-      <view class="donation-summary">
+      <donation-summary 
-        <view class="summary-item">
+        :total-amount="totalAmount"
-          <text class="summary-label">总造价(元)</text>
+        :participant-count="participantCount"
-          <text class="summary-value">{{ totalAmount.toLocaleString() }}</text>
+      />
-        </view>
-        <view class="summary-item">
-          <text class="summary-label">参与捐款人次</text>
-          <text class="summary-value">{{ participantCount.toLocaleString() }}</text>
-        </view>
-      </view>
       
-<!--      &lt;!&ndash; 刷新提示 &ndash;&gt;-->
+      <!-- 捐款记录列表组件 -->
-<!--      <view class="refresh-tip" @click="refreshData">-->
+      <donation-list :donation-list="donationList" />
-<!--        <text class="tip-text">下列信息实时更新,可</text>-->
-<!--        <text class="refresh-text">点击刷新</text>-->
-<!--        <image class="refresh-icon" :src="CommonEnum.REFRESH" mode="aspectFit" />-->
-<!--      </view>-->
-      
-      <!-- 捐款记录列表 -->
-      <view class="donation-list">
-        <view class="list-header">
-          <text class="header-item">编号</text>
-          <text class="header-item">姓名</text>
-          <text class="header-item">捐款金额(元)</text>
-          <text class="header-item">捐款时间</text>
-        </view>
-        <view class="list-item" v-for="(item, index) in donationList" :key="index">
-          <text class="item-id">{{ item.id }}</text>
-          <text class="item-name">{{ item.name }}</text>
-          <text class="item-amount">{{ item.amount.toLocaleString() }}</text>
-          <text class="item-time">{{ item.time }}</text>
-        </view>
-      </view>
       
       <status-display
         v-if="loading"
@@ -73,157 +47,31 @@ import TileGrid from "../../components/tile-grid/tile-grid.vue";
 import CommonEnum from "../../enum/common";
 import StatusDisplay from "../../components/status-display/status-display.vue";
 import SearchBox from "../../components/search-box/search-box.vue";
-import { getDonorList } from '@/api/donor/donor.js';
+import ProjectInfo from "./components/project-info.vue";
-import { getInstitutionalDetail } from '@/api/institutionalStructure/institutionalStructureDetail.js';
+import DonationSummary from "./components/donation-summary.vue";
+import DonationList from "./components/donation-list.vue";
+import { donationMixin } from "./mixins/donation-mixin.js";
 
 export default {
+  mixins: [donationMixin],
   components: {
     CustomNavbar,
     TileGrid,
     StatusDisplay,
-    SearchBox
+    SearchBox,
+    ProjectInfo,
+    DonationSummary,
+    DonationList
   },
   data() {
     return {
-      CommonEnum,
+      CommonEnum
-      loading: false,
-      searchKeyword: '',
-      donationList: [],
-      formedId: '', // 建制ID
-      projectInfo: {}, // 项目信息
-      // 分页参数
-      pageNum: 1,
-      pageSize: 10,
-      hasMore: true
-    }
-  },
-  computed: {
-    // 计算总造价（从项目详情获取，如果没有则计算捐款总和）
-    totalAmount() {
-      return this.projectInfo.totalAmount || this.donationList.reduce((sum, item) => sum + item.amount, 0)
-    },
-    // 计算参与捐款人次（从项目详情获取，如果没有则计算捐款记录数量）
-    participantCount() {
-      return this.projectInfo.donorCount || this.donationList.length
     }
   },
   onLoad(options) {
     // 获取页面参数
     if (options.formedId) {
-      this.formedId = options.formedId
+      this.initData(options.formedId)
-    }
-    // 页面加载时获取数据
-    this.loadProjectInfo()
-    this.loadDonationRecords()
-  },
-  methods: {
-    onSearch(val) {
-      // 搜索逻辑
-      console.log('搜索内容：', val)
-      this.pageNum = 1 // 重置页码
-      this.loadDonationRecords(val)
-    },
-    onFilter() {
-      // 筛选逻辑
-      uni.showToast({ title: '筛选功能开发中', icon: 'none' })
-    },
-    
-    // 获取项目详情
-    async loadProjectInfo() {
-      if (!this.formedId) {
-        console.error('缺少项目ID')
-        return
-      }
-      
-      try {
-        const response = await getInstitutionalDetail(this.formedId)
-        
-        if (response.code === 200) {
-          this.projectInfo = response.data
-          console.log('项目信息:', this.projectInfo)
-        } else {
-          console.error('获取项目信息失败:', response.msg)
-          uni.showToast({
-            title: response.msg || '获取项目信息失败',
-            icon: 'none'
-          })
-        }
-      } catch (error) {
-        console.error('获取项目信息失败:', error)
-        uni.showToast({
-          title: '网络错误',
-          icon: 'none'
-        })
-      }
-    },
-    // 获取捐款记录API
-    async loadDonationRecords(keyword = '') {
-      this.loading = true
-      try {
-        const params = {
-          formedId: this.formedId,
-          pageNum: this.pageNum,
-          pageSize: this.pageSize,
-          minAmount: 1,
-          maxAmount: 10000,
-          sortAmount: 'amount',
-          orderAmount: 'asc',
-          sortTime: 'time',
-          orderTime: 'desc'
-        }
-        
-        // 如果有搜索关键词，添加姓名搜索
-        if (keyword) {
-          params.realName = keyword
-        }
-        
-        const response = await getDonorList(params)
-        
-        if (response.code === 200) {
-          // 转换数据格式
-          const newData = response.data.map(item => ({
-            id: item.id,
-            name: item.realName,
-            amount: item.amount,
-            time: this.formatDate(item.donationDate)
-          }))
-          
-          // 如果是第一页，直接替换数据
-          if (this.pageNum === 1) {
-            this.donationList = newData
-          } else {
-            // 如果是加载更多，追加数据
-            this.donationList = [...this.donationList, ...newData]
-          }
-          
-          // 判断是否还有更多数据
-          this.hasMore = newData.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
-      }
-    },
-    
-    // 格式化日期
-    formatDate(dateStr) {
-      if (!dateStr) return ''
-      const date = new Date(dateStr)
-      const year = date.getFullYear()
-      const month = String(date.getMonth() + 1).padStart(2, '0')
-      const day = String(date.getDate()).padStart(2, '0')
-      return `${year}/${month}/${day}`
     }
   }
 }
@@ -237,7 +85,7 @@ page {
   width: 100%;
   min-height: 100vh;
   display: flex;
-  align-items: flex-start;
+
   flex-direction: column;
   padding: 0 15rpx 0 15rpx;
 }
@@ -271,149 +119,5 @@ page {
   font-size: 28rpx;
 }
 
-// 项目信息
-.project-info {
-  width: 100%;
-  padding: 24rpx 20rpx;
-  background: #F3D2A3;
-  border-radius: 20rpx 20rpx 20rpx 20rpx;
-  border: 2rpx solid #F3D2A2;
-}
-.project-title {
-  display: block;
-  font-weight: 500;
-  font-size: 30rpx;
-  color: #522510;
-  line-height: 42rpx;
-  text-align: left;
-  font-style: normal;
-  text-transform: none;
-}
-.project-desc {
-  display: block;
-  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
-  font-weight: 400;
-  font-size: 24rpx;
-  color: #522510;
-  line-height: 32rpx;
-  text-align: left;
-  font-style: normal;
-  text-transform: none;
-}
 
-// 捐款统计区域
-.donation-summary {
-  width: 100%;
-  padding: 40rpx 24rpx;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-}
-.summary-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1;
-  position: relative;
-}
-.summary-item:first-child::after {
-  content: '';
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 1rpx;
-  height: 100%;
-  background: #ffffff;
-}
-.summary-label {
-  font-size: 28rpx;
-  color: #C7A26D;
-  margin-bottom: 20rpx;
-  text-align: center;
-}
-.summary-value {
-  font-size: 48rpx;
-  font-weight: bold;
-  color: #C7A26D;
-  text-align: center;
-}
-
-// 刷新提示
-.refresh-tip {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 20rpx;
-  cursor: pointer;
-  padding: 16rpx 0;
-}
-.tip-text {
-  font-size: 26rpx;
-  color: #999;
-  margin-right: 12rpx;
-}
-.refresh-text {
-  color: #E74C3C;
-  font-size: 26rpx;
-  margin-right: 8rpx;
-}
-.refresh-icon {
-  width: 26rpx;
-  height: 26rpx;
-  padding-bottom: 1rpx;
-}
-
-// 捐款记录列表
-.donation-list {
-  width: 100%;
-  border-radius: 16rpx;
-  overflow: hidden;
-  padding-bottom: 106rpx;
-}
-.list-header {
-  display: flex;
-  padding: 28rpx 15rpx;
-}
-.header-item {
-  flex: 1;
-  font-size: 30rpx;
-  color: #643B27;
-  font-weight: bold;
-  text-align: center;
-}
-.list-item {
-  display: flex;
-  padding: 28rpx 20rpx;
-}
-.list-item:hover {
-  background: #FAFAFA;
-}
-.list-item:last-child {
-  border-bottom: none;
-}
-.item-id, .item-name, .item-amount, .item-time {
-  flex: 1;
-  font-size: 28rpx;
-  text-align: center;
-  line-height: 1.5;
-}
-.item-id {
-  color: #666;
-  font-weight: 500;
-}
-.item-name {
-  color: #333;
-  font-weight: 500;
-}
-.item-amount {
-  color: #E74C3C;
-  font-weight: bold;
-}
-.item-time {
-  color: #666;
-  font-size: 26rpx;
-}
 </style>

pages/institutionalStructure/mixins/donation-mixin.js

@@ -0,0 +1,171 @@
+/**
+ * 捐款记录相关 Mixin
+ * 提供捐款记录的数据获取、搜索、分页等功能
+ */
+import { getDonorList } from '@/api/donor/donor.js'
+import { getInstitutionalDetail } from '@/api/institutionalStructure/institutionalStructureDetail.js'
+
+export const donationMixin = {
+  data() {
+    return {
+      // 捐款记录相关数据
+      donationList: [],
+      projectInfo: {},
+      loading: false,
+      searchKeyword: '',
+      formedId: '',
+      // 分页参数
+      pageNum: 1,
+      pageSize: 10,
+      hasMore: true
+    }
+  },
+
+  computed: {
+    // 计算总造价（从项目详情获取，如果没有则计算捐款总和）
+    totalAmount() {
+      return this.projectInfo.totalAmount || this.donationList.reduce((sum, item) => sum + item.amount, 0)
+    },
+    // 计算参与捐款人次（从项目详情获取，如果没有则计算捐款记录数量）
+    participantCount() {
+      return this.projectInfo.donorCount || this.donationList.length
+    }
+  },
+
+  methods: {
+    /**
+     * 获取项目详情
+     */
+    async loadProjectInfo() {
+      if (!this.formedId) {
+        console.error('缺少项目ID')
+        return
+      }
+      
+      try {
+        const response = await getInstitutionalDetail(this.formedId)
+        
+        if (response.code === 200) {
+          this.projectInfo = response.data
+          console.log('项目信息:', this.projectInfo)
+        } else {
+          console.error('获取项目信息失败:', response.msg)
+          uni.showToast({
+            title: response.msg || '获取项目信息失败',
+            icon: 'none'
+          })
+        }
+      } catch (error) {
+        console.error('获取项目信息失败:', error)
+        uni.showToast({
+          title: '网络错误',
+          icon: 'none'
+        })
+      }
+    },
+
+    /**
+     * 获取捐款记录
+     * @param {string} keyword 搜索关键词
+     */
+    async loadDonationRecords(keyword = '') {
+      this.loading = true
+      try {
+        const params = {
+          formedId: this.formedId,
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+          minAmount: 1,
+          maxAmount: 10000,
+          sortAmount: 'amount',
+          orderAmount: 'asc',
+          sortTime: 'time',
+          orderTime: 'desc'
+        }
+        
+        // 如果有搜索关键词，添加姓名搜索
+        if (keyword) {
+          params.realName = keyword
+        }
+        
+        const response = await getDonorList(params)
+        
+        if (response.code === 200) {
+          // 转换数据格式
+          const newData = response.data.map(item => ({
+            id: item.id,
+            name: item.realName,
+            amount: item.amount,
+            time: this.formatDate(item.donationDate)
+          }))
+          
+          // 如果是第一页，直接替换数据
+          if (this.pageNum === 1) {
+            this.donationList = newData
+          } else {
+            // 如果是加载更多，追加数据
+            this.donationList = [...this.donationList, ...newData]
+          }
+          
+          // 判断是否还有更多数据
+          this.hasMore = newData.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 {string} val 搜索关键词
+     */
+    onSearch(val) {
+      console.log('搜索内容：', val)
+      this.pageNum = 1 // 重置页码
+      this.loadDonationRecords(val)
+    },
+
+    /**
+     * 筛选功能
+     */
+    onFilter() {
+      uni.showToast({ title: '筛选功能开发中', icon: 'none' })
+    },
+
+    /**
+     * 格式化日期
+     * @param {string} dateStr 日期字符串
+     * @returns {string} 格式化后的日期
+     */
+    formatDate(dateStr) {
+      if (!dateStr) return ''
+      const date = new Date(dateStr)
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      return `${year}/${month}/${day}`
+    },
+
+    /**
+     * 初始化数据
+     * @param {string} formedId 建制ID
+     */
+    initData(formedId) {
+      this.formedId = formedId
+      this.loadProjectInfo()
+      this.loadDonationRecords()
+    }
+  }
+}