建制界面优化布局与样式
This commit is contained in:
minimaxagent1
parent
f8909e10a7
commit
6720f4358e
|
|
@ -1,16 +1,24 @@
|
|||
<template>
|
||||
<template>
|
||||
<view class="data">
|
||||
<view class="row">
|
||||
<view class="topLeft">{{ item.topLeft || '暂无数据' }}</view>
|
||||
<view>{{ item.topRight || '暂无数据' }}</view>
|
||||
<!-- 标题和状态行 -->
|
||||
<view class="header-row">
|
||||
<view class="project-title">{{ item.topLeft || '暂无数据' }}</view>
|
||||
<view class="status">{{ item.topRight || '暂无数据' }}</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="subRow">
|
||||
<view>{{ item.bottomLeft || '暂无数据' }}</view>
|
||||
<view>{{ item.bottomRight || '暂无数据' }}</view>
|
||||
|
||||
<!-- 详细信息表格 -->
|
||||
<view class="details-table">
|
||||
<view class="table-row">
|
||||
<text class="label year-col">年份</text>
|
||||
<text class="label amount-col">建造金额(约)</text>
|
||||
<text class="label donor-col">捐赠人数</text>
|
||||
<text class="label detail-col">捐赠名单</text>
|
||||
</view>
|
||||
<view>
|
||||
<view class="bottomRight" @click="onViewDetail">查看详细</view>
|
||||
<view class="table-row">
|
||||
<text class="value year-col">{{ item.year || '暂无数据' }}</text>
|
||||
<text class="value amount-col">{{ item.amount || '暂无数据' }}</text>
|
||||
<text class="value donor-col">{{ item.donorCount || '暂无数据' }}</text>
|
||||
<text class="view-details detail-col" @click="onViewDetail">查看详情</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -55,44 +63,107 @@ export default {
|
|||
background-color: #FFFBF5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 720rpx; /* 固定宽度，适配父容器的padding */
|
||||
width: 720rpx;
|
||||
box-sizing: border-box;
|
||||
height: 180rpx;
|
||||
min-height: 180rpx;
|
||||
border-radius: 11px;
|
||||
border: 1px solid #C7A26D;
|
||||
margin: 15rpx auto; /* 使用 auto 实现水平居中 */
|
||||
margin: 15rpx auto;
|
||||
padding: 12rpx;
|
||||
}
|
||||
|
||||
.row {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
margin-bottom: 15rpx;
|
||||
padding-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.subRow {
|
||||
.project-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #522510;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 28rpx;
|
||||
color: #7F7F7F;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.details-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.subRow view {
|
||||
padding-right: 20px;
|
||||
font-size: 16px;
|
||||
.table-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topLeft {
|
||||
font-size: 21px;
|
||||
font-weight: 1000;
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
color: #7C736E;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 26rpx;
|
||||
color: #695347;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.view-details {
|
||||
font-size: 28rpx;
|
||||
color: #522510;
|
||||
}
|
||||
font-weight: 500;
|
||||
|
||||
.bottomRight {
|
||||
font-size: 16px;
|
||||
font-weight: 1000;
|
||||
color: #522510;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
}
|
||||
|
||||
.view-details:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 不同列的弹性比例 */
|
||||
.year-col {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.amount-col {
|
||||
flex: 1.5;
|
||||
}
|
||||
|
||||
.donor-col {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.detail-col {
|
||||
flex: 0 0 auto;
|
||||
margin-left: auto;
|
||||
min-width: 80rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,33 +9,111 @@ export class InstitutionalDataFormatter {
|
|||
*/
|
||||
static formatAmount(amount) {
|
||||
if (!amount) return '不详'
|
||||
|
||||
// 超过一亿以亿为单位
|
||||
if (amount >= 100000000) {
|
||||
return `${(amount / 100000000).toFixed(1)}亿`
|
||||
return `约${(amount / 100000000).toFixed(1)}亿`
|
||||
} else if (amount >= 10000) {
|
||||
return `${(amount / 10000).toFixed(1)}万`
|
||||
return `约${(amount / 10000).toFixed(1)}万`
|
||||
} else {
|
||||
return `${amount.toLocaleString()}`
|
||||
return `约${amount.toLocaleString()}元`
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化历史金额（适用于古代项目）
|
||||
* @param {number} amount 金额
|
||||
* @param {string} currency 货币单位
|
||||
* @returns {string} 格式化后的金额字符串
|
||||
*/
|
||||
static formatHistoricalAmount(amount, currency = '银元') {
|
||||
if (!amount) return '不详'
|
||||
|
||||
// 超过一亿以亿为单位
|
||||
if (amount >= 100000000) {
|
||||
return `约${currency}${(amount / 100000000).toFixed(1)}亿`
|
||||
} else if (amount >= 10000) {
|
||||
return `约${currency}${(amount / 10000).toFixed(0)}万`
|
||||
} else {
|
||||
return `约${currency}${amount.toLocaleString()}`
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化左上角内容
|
||||
* @param {string} year 年份
|
||||
* @param {string} projectName 项目名称
|
||||
* @returns {string} 格式化后的内容
|
||||
*/
|
||||
static formatTopLeft(year, projectName) {
|
||||
static formatTopLeft(projectName) {
|
||||
// 如果年份和项目名称都为空，返回暂无数据
|
||||
if (!year && !projectName) return '暂无数据'
|
||||
if ( !projectName) return '暂无数据'
|
||||
return projectName
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化项目名称
|
||||
* @param {string} projectName 项目名称
|
||||
* @param {boolean} isHistorical 是否为历史项目
|
||||
* @returns {string} 格式化后的项目名称
|
||||
*/
|
||||
static formatProjectName(projectName, isHistorical = false) {
|
||||
if (!projectName) return '暂无数据'
|
||||
|
||||
// 如果只有年份，只显示年份
|
||||
if (year && !projectName) return `${year}年`
|
||||
// 如果是历史项目，可能需要特殊处理
|
||||
if (isHistorical && projectName.includes('寺')) {
|
||||
// 对于寺庙项目，保持原有格式
|
||||
return projectName
|
||||
}
|
||||
|
||||
// 如果只有项目名称，只显示项目名称
|
||||
if (!year && projectName) return projectName
|
||||
return projectName
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化年份显示
|
||||
* @param {string} year 年份
|
||||
* @returns {string} 格式化后的年份
|
||||
*/
|
||||
static formatYear(year) {
|
||||
if (!year) return '暂无数据'
|
||||
|
||||
// 如果都有，显示完整格式
|
||||
return `${year}年 ${projectName}`
|
||||
// 如果已经是格式化过的字符串（包含"年"字），直接返回
|
||||
if (typeof year === 'string' && year.includes('年')) {
|
||||
return year
|
||||
}
|
||||
|
||||
return `${year}年`
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化历史年份（适用于古代项目）
|
||||
* @param {string} year 年份
|
||||
* @returns {string} 格式化后的年份
|
||||
*/
|
||||
static formatHistoricalYear(year) {
|
||||
if (!year) return '暂无数据'
|
||||
|
||||
// 如果已经是格式化过的字符串，直接返回
|
||||
if (typeof year === 'string') {
|
||||
if (year.includes('年')) {
|
||||
return year
|
||||
}
|
||||
if (year.includes('时期') || year.includes('朝代')) {
|
||||
return year
|
||||
}
|
||||
}
|
||||
|
||||
// 如果是公元前的年份
|
||||
if (year < 0) {
|
||||
return `公元前${Math.abs(year)}年`
|
||||
}
|
||||
|
||||
// 如果是公元后的年份，但小于1000年
|
||||
if (year < 1000) {
|
||||
return `${year}年`
|
||||
}
|
||||
|
||||
// 正常年份
|
||||
return `${year}年`
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -58,6 +136,55 @@ export class InstitutionalDataFormatter {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否为历史项目
|
||||
* @param {string} year 年份
|
||||
* @returns {boolean} 是否为历史项目
|
||||
*/
|
||||
static isHistoricalProject(year) {
|
||||
if (!year) return false
|
||||
|
||||
// 处理字符串格式的年份（如"916年"、"明末时期"）
|
||||
if (typeof year === 'string') {
|
||||
// 如果包含"年"字，提取数字部分
|
||||
if (year.includes('年')) {
|
||||
const yearNum = parseInt(year.replace('年', ''))
|
||||
return yearNum < 1900
|
||||
}
|
||||
|
||||
// 如果包含历史时期描述，认为是历史项目
|
||||
if (year.includes('时期') || year.includes('朝代') || year.includes('古代')) {
|
||||
return true
|
||||
}
|
||||
|
||||
// 尝试解析纯数字
|
||||
const yearNum = parseInt(year)
|
||||
if (!isNaN(yearNum)) {
|
||||
return yearNum < 1900
|
||||
}
|
||||
}
|
||||
|
||||
// 处理数字格式的年份
|
||||
const yearNum = parseInt(year)
|
||||
return yearNum < 1900
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化捐赠人数
|
||||
* @param {number} count 人数
|
||||
* @param {boolean} isHistorical 是否为历史项目
|
||||
* @returns {string} 格式化后的人数
|
||||
*/
|
||||
static formatDonorCount(count, isHistorical = false) {
|
||||
if (!count || count === 0) return '暂无数据'
|
||||
|
||||
if (isHistorical) {
|
||||
return `约${count}人`
|
||||
} else {
|
||||
return `${count}人`
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换后端数据为前端格式
|
||||
* @param {Array} rows 后端数据
|
||||
|
|
@ -69,13 +196,25 @@ export class InstitutionalDataFormatter {
|
|||
return rows.map(item => {
|
||||
console.log('处理项目:', item) // 添加调试日志
|
||||
|
||||
const year = item.formedYear || item.startYear || item.start_year || item.year
|
||||
const isHistorical = InstitutionalDataFormatter.isHistoricalProject(year)
|
||||
|
||||
const projectName = item.proName || item.pro_name || item.projectName
|
||||
|
||||
return {
|
||||
topLeft: InstitutionalDataFormatter.formatTopLeft(item.startYear || item.start_year || item.year, item.proName || item.pro_name || item.projectName),
|
||||
topLeft: InstitutionalDataFormatter.formatTopLeft(InstitutionalDataFormatter.formatProjectName(projectName, isHistorical)),
|
||||
topRight: InstitutionalDataFormatter.getStatusText(item.state),
|
||||
bottomLeft: `建造金额：${InstitutionalDataFormatter.formatAmount(item.totalAmount || item.total_amount)}`,
|
||||
bottomRight: `捐赠人数：${item.donorCount || item.donor_count || 0}人`,
|
||||
year: isHistorical
|
||||
? InstitutionalDataFormatter.formatHistoricalYear(year)
|
||||
: InstitutionalDataFormatter.formatYear(year),
|
||||
amount: isHistorical
|
||||
? InstitutionalDataFormatter.formatHistoricalAmount(item.totalAmount || item.total_amount)
|
||||
: InstitutionalDataFormatter.formatAmount(item.totalAmount || item.total_amount),
|
||||
donorCount: InstitutionalDataFormatter.formatDonorCount(item.donorCount || item.donor_count || 0, isHistorical),
|
||||
// 保存原始数据，用于跳转
|
||||
formedId: item.id
|
||||
formedId: item.id,
|
||||
// 保存项目类型信息
|
||||
isHistorical: isHistorical
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user