WindowBird/buddhism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

捐款记录的组件拆分

Browse Source
This commit is contained in:
minimaxagent1 2025-08-01 16:01:58 +08:00
parent 8b31f835b1
commit 4bd881de4b
5 changed files with 412 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
pages/institutionalStructure/components/donation-list.vue Normal file
View File

@ -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>

72
pages/institutionalStructure/components/donation-summary.vue Normal file
View File

@ -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>

55
pages/institutionalStructure/components/project-info.vue Normal file
View File

@ -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>

344
pages/institutionalStructure/donationRecord.vue
View File

@ -17,46 +17,20 @@
</view>
</view>
<!-- 项目描述 -->
<view class="project-info">
<text class="project-title">{{ projectInfo.proName || '加载中...' }}</text>
<text class="project-desc">{{ projectInfo.proProfile || '暂无描述' }}</text>
</view>
<!-- 项目信息组件 -->
<project-info
:project-name="projectInfo.proName"
:project-desc="projectInfo.proProfile"
/>
<!-- 捐款统计区域 -->
<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>
<!-- 捐款统计组件 -->
<donation-summary
:total-amount="totalAmount"
:participant-count="participantCount"
/>
<!-- &lt;!&ndash; 刷新提示 &ndash;&gt;-->
<!-- <view class="refresh-tip" @click="refreshData">-->
<!-- <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>
<!-- 捐款记录列表组件 -->
<donation-list :donation-list="donationList" />
<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 { getInstitutionalDetail } from '@/api/institutionalStructure/institutionalStructureDetail.js';
import ProjectInfo from "./components/project-info.vue";
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,
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
CommonEnum
}
},
onLoad(options) {
// 获取页面参数
if (options.formedId) {
this.formedId = 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}`
this.initData(options.formedId)
}
}
}
@ -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>

171
pages/institutionalStructure/mixins/donation-mixin.js Normal file
View File

@ -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()
}
}
}