institutional-item组件的抽离
This commit is contained in:
minimaxagent1
parent
05e0b00031
commit
6404c39ec5
82
pages/institutionalStructure/components/README.md
Normal file
82
pages/institutionalStructure/components/README.md
Normal file
|
|
@ -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. 样式与建制页面保持一致
|
||||
|
|
@ -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>
|
||||
|
|
@ -12,22 +12,14 @@
|
|||
<text>暂无数据</text>
|
||||
</view>
|
||||
<!-- 数据列表 -->
|
||||
<view v-else class="data" v-for="(item, index) in institutionalData" :key="index">
|
||||
<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">查看详细</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<institutional-item
|
||||
v-else
|
||||
v-for="(item, index) in institutionalData"
|
||||
:key="index"
|
||||
:item="item"
|
||||
:index="index"
|
||||
@view-detail="handleViewDetail"
|
||||
/>
|
||||
</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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user