institutionalStructure.vue组件的抽离
This commit is contained in:
minimaxagent1
parent
6404c39ec5
commit
36b676de50
|
|
@ -1 +1,93 @@
|
|||
|
||||
# BaseBackground 背景图片组件
|
||||
|
||||
一个可复用的背景图片组件，支持自定义背景图片源和样式。
|
||||
|
||||
## 功能特性
|
||||
|
||||
- 支持自定义背景图片源
|
||||
- 支持自定义图片裁剪模式
|
||||
- 支持自定义样式
|
||||
- 默认使用 CommonEnum.BACKGROUND 作为背景
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="page">
|
||||
<base-background />
|
||||
<!-- 其他内容 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseBackground from '@/components/base-background/base-background.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BaseBackground
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 自定义背景图片
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="page">
|
||||
<base-background :src="customBackground" />
|
||||
<!-- 其他内容 -->
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 自定义裁剪模式
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="page">
|
||||
<base-background mode="aspectFit" />
|
||||
<!-- 其他内容 -->
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 自定义样式
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="page">
|
||||
<base-background
|
||||
:custom-style="{
|
||||
borderRadius: '8rpx',
|
||||
opacity: 0.8
|
||||
}"
|
||||
/>
|
||||
<!-- 其他内容 -->
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| 参数 | 类型 | 默认值 | 说明 |
|
||||
|------|------|--------|------|
|
||||
| src | String | '' | 背景图片源，如果不传则使用默认背景 |
|
||||
| mode | String | 'aspectFill' | 图片裁剪模式 |
|
||||
| customStyle | Object | {} | 自定义样式对象 |
|
||||
|
||||
## 裁剪模式说明
|
||||
|
||||
- `aspectFill`: 保持纵横比缩放图片，只保证图片的短边能完全显示出来
|
||||
- `aspectFit`: 保持纵横比缩放图片，使图片的长边能完全显示出来
|
||||
- `scaleToFill`: 不保持纵横比缩放图片，使图片完全适应容器
|
||||
- `widthFix`: 宽度不变，高度自动变化，保持原图宽高比不变
|
||||
- `heightFix`: 高度不变，宽度自动变化，保持原图宽高比不变
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 组件会自动设置 `position: absolute` 和 `z-index: -1`，确保背景图片在内容下方
|
||||
2. 默认样式包含 `border-radius: 16rpx`，可以通过 `customStyle` 覆盖
|
||||
3. 组件会自动导入 `CommonEnum`，使用默认背景图片
|
||||
55
pages/institutionalStructure/components/status-display.vue
Normal file
55
pages/institutionalStructure/components/status-display.vue
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<view class="status-display">
|
||||
<!-- 加载状态 -->
|
||||
<view v-if="type === 'loading'" class="loading">
|
||||
<text>{{ loadingText }}</text>
|
||||
</view>
|
||||
<!-- 空数据提示 -->
|
||||
<view v-else-if="type === 'empty'" class="empty">
|
||||
<text>{{ emptyText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'StatusDisplay',
|
||||
props: {
|
||||
// 状态类型：loading, empty
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: value => ['loading', 'empty'].includes(value)
|
||||
},
|
||||
// 加载文本
|
||||
loadingText: {
|
||||
type: String,
|
||||
default: '加载中...'
|
||||
},
|
||||
// 空数据文本
|
||||
emptyText: {
|
||||
type: String,
|
||||
default: '暂无数据'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.status-display {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading, .empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
background-color: #FFFBF5;
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,14 +3,17 @@
|
|||
<custom-navbar title="建制" />
|
||||
<tile-grid :tile-image="tilesImageEnum.TILE" />
|
||||
<view class="header">
|
||||
<!-- 加载状态 -->
|
||||
<view v-if="loading" class="loading">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
<!-- 空数据提示 -->
|
||||
<view v-else-if="institutionalData.length === 0" class="empty">
|
||||
<text>暂无数据</text>
|
||||
</view>
|
||||
<!-- 状态展示 -->
|
||||
<status-display
|
||||
v-if="loading"
|
||||
type="loading"
|
||||
loading-text="加载中..."
|
||||
/>
|
||||
<status-display
|
||||
v-else-if="institutionalData.length === 0"
|
||||
type="empty"
|
||||
empty-text="暂无数据"
|
||||
/>
|
||||
<!-- 数据列表 -->
|
||||
<institutional-item
|
||||
v-else
|
||||
|
|
@ -31,13 +34,18 @@ 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 StatusDisplay from "./components/status-display.vue";
|
||||
import { InstitutionalDataFormatter } from "./utils/data-formatter.js";
|
||||
import { dataManagerMixin } from "./mixins/data-manager.js";
|
||||
import CommonEnum from "../../enum/common";
|
||||
|
||||
export default {
|
||||
mixins: [dataManagerMixin],
|
||||
components: {
|
||||
CustomNavbar,
|
||||
TileGrid,
|
||||
InstitutionalItem
|
||||
InstitutionalItem,
|
||||
StatusDisplay
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -47,12 +55,7 @@ export default {
|
|||
},
|
||||
tilesImageEnum,
|
||||
// 动态数据数组
|
||||
institutionalData: [],
|
||||
// 加载状态
|
||||
loading: false,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
hasMore: true // 是否还有更多数据
|
||||
institutionalData: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
|
@ -62,86 +65,13 @@ export default {
|
|||
methods: {
|
||||
// 获取建制数据
|
||||
async getInstitutionalData(isLoadMore = false) {
|
||||
this.loading = true
|
||||
try {
|
||||
if (isLoadMore) {
|
||||
this.pageNum++
|
||||
} else {
|
||||
this.pageNum = 1
|
||||
}
|
||||
|
||||
// 调用API
|
||||
const response = await getInstitutionalList({
|
||||
pageNum: this.pageNum,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
|
||||
if (response.code === 200) {
|
||||
// 将后端数据转换为前端需要的格式
|
||||
const newData = response.rows.map(item => ({
|
||||
topLeft: this.formatTopLeft(item.startYear, item.proName),
|
||||
topRight: this.getStatusText(item.state),
|
||||
bottomLeft: `建造金额：${this.formatAmount(item.totalAmount)}`,
|
||||
bottomRight: `捐赠人数：${item.donorCount}人`
|
||||
})) || []
|
||||
|
||||
if (isLoadMore) {
|
||||
this.institutionalData = [...this.institutionalData, ...newData]
|
||||
} else {
|
||||
this.institutionalData = newData
|
||||
}
|
||||
|
||||
// 判断是否还有更多数据
|
||||
this.hasMore = response.rows.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
|
||||
}
|
||||
},
|
||||
|
||||
// 格式化金额
|
||||
formatAmount(amount) {
|
||||
if (!amount) return '不详'
|
||||
if (amount >= 100000000) {
|
||||
return `${(amount / 100000000).toFixed(1)}亿`
|
||||
} else if (amount >= 10000) {
|
||||
return `${(amount / 10000).toFixed(1)}万`
|
||||
} else {
|
||||
return `${amount.toLocaleString()}`
|
||||
}
|
||||
},
|
||||
|
||||
// 格式化左上角内容
|
||||
formatTopLeft(year, projectName) {
|
||||
if (!year || !projectName) return '暂无数据'
|
||||
return `${year}年 ${projectName}`
|
||||
},
|
||||
|
||||
// 获取状态文本
|
||||
getStatusText(state) {
|
||||
switch (state) {
|
||||
case '1':
|
||||
return '规划'
|
||||
case '2':
|
||||
return '进行中'
|
||||
case '3':
|
||||
return '已完成'
|
||||
case '4':
|
||||
return '已取消'
|
||||
default:
|
||||
return '未知状态'
|
||||
}
|
||||
await this.fetchData(
|
||||
isLoadMore,
|
||||
getInstitutionalList,
|
||||
InstitutionalDataFormatter.transformData
|
||||
)
|
||||
// 将数据赋值给 institutionalData
|
||||
this.institutionalData = this.dataList
|
||||
},
|
||||
|
||||
// 刷新数据
|
||||
|
|
@ -178,12 +108,5 @@ page {
|
|||
}
|
||||
|
||||
|
||||
.loading, .empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
background-color: #FFFBF5;
|
||||
}
|
||||
|
||||
</style>
|
||||
90
pages/institutionalStructure/mixins/data-manager.js
Normal file
90
pages/institutionalStructure/mixins/data-manager.js
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
/**
|
||||
* 数据管理 Mixin
|
||||
* 提供通用的数据获取、分页加载功能
|
||||
*/
|
||||
export const dataManagerMixin = {
|
||||
data() {
|
||||
return {
|
||||
// 数据数组
|
||||
dataList: [],
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 分页参数
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
hasMore: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 获取数据
|
||||
* @param {boolean} isLoadMore 是否为加载更多
|
||||
* @param {Function} apiCall API调用函数
|
||||
* @param {Function} dataTransformer 数据转换函数
|
||||
*/
|
||||
async fetchData(isLoadMore = false, apiCall, dataTransformer) {
|
||||
this.loading = true
|
||||
try {
|
||||
if (isLoadMore) {
|
||||
this.pageNum++
|
||||
} else {
|
||||
this.pageNum = 1
|
||||
}
|
||||
|
||||
// 调用API
|
||||
const response = await apiCall({
|
||||
pageNum: this.pageNum,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
|
||||
if (response.code === 200) {
|
||||
// 转换数据
|
||||
const newData = dataTransformer ? dataTransformer(response.rows) : response.rows || []
|
||||
|
||||
if (isLoadMore) {
|
||||
this.dataList = [...this.dataList, ...newData]
|
||||
} else {
|
||||
this.dataList = newData
|
||||
}
|
||||
|
||||
// 判断是否还有更多数据
|
||||
this.hasMore = response.rows.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 {Function} apiCall API调用函数
|
||||
* @param {Function} dataTransformer 数据转换函数
|
||||
*/
|
||||
refreshData(apiCall, dataTransformer) {
|
||||
this.fetchData(false, apiCall, dataTransformer)
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载更多数据
|
||||
* @param {Function} apiCall API调用函数
|
||||
* @param {Function} dataTransformer 数据转换函数
|
||||
*/
|
||||
loadMoreData(apiCall, dataTransformer) {
|
||||
if (this.hasMore && !this.loading) {
|
||||
this.fetchData(true, apiCall, dataTransformer)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
65
pages/institutionalStructure/utils/data-formatter.js
Normal file
65
pages/institutionalStructure/utils/data-formatter.js
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
/**
|
||||
* 建制数据格式化工具类
|
||||
*/
|
||||
export class InstitutionalDataFormatter {
|
||||
/**
|
||||
* 格式化金额
|
||||
* @param {number} amount 金额
|
||||
* @returns {string} 格式化后的金额字符串
|
||||
*/
|
||||
static formatAmount(amount) {
|
||||
if (!amount) return '不详'
|
||||
if (amount >= 100000000) {
|
||||
return `${(amount / 100000000).toFixed(1)}亿`
|
||||
} else if (amount >= 10000) {
|
||||
return `${(amount / 10000).toFixed(1)}万`
|
||||
} else {
|
||||
return `${amount.toLocaleString()}`
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化左上角内容
|
||||
* @param {string} year 年份
|
||||
* @param {string} projectName 项目名称
|
||||
* @returns {string} 格式化后的内容
|
||||
*/
|
||||
static formatTopLeft(year, projectName) {
|
||||
if (!year || !projectName) return '暂无数据'
|
||||
return `${year}年 ${projectName}`
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取状态文本
|
||||
* @param {string} state 状态码
|
||||
* @returns {string} 状态文本
|
||||
*/
|
||||
static getStatusText(state) {
|
||||
switch (state) {
|
||||
case '1':
|
||||
return '规划'
|
||||
case '2':
|
||||
return '进行中'
|
||||
case '3':
|
||||
return '已完成'
|
||||
case '4':
|
||||
return '已取消'
|
||||
default:
|
||||
return '未知状态'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换后端数据为前端格式
|
||||
* @param {Array} rows 后端数据
|
||||
* @returns {Array} 转换后的数据
|
||||
*/
|
||||
static transformData(rows) {
|
||||
return rows.map(item => ({
|
||||
topLeft: InstitutionalDataFormatter.formatTopLeft(item.startYear, item.proName),
|
||||
topRight: InstitutionalDataFormatter.getStatusText(item.state),
|
||||
bottomLeft: `建造金额：${InstitutionalDataFormatter.formatAmount(item.totalAmount)}`,
|
||||
bottomRight: `捐赠人数：${item.donorCount}人`
|
||||
}))
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user