用uniapp写一个账单明细页面组件
时间: 2024-02-03 12:14:23 浏览: 29
好的,以下是一个简单的账单明细页面组件的代码示例:
```html
<template>
<view class="bill">
<view class="header">
<text>{{title}}</text>
</view>
<view class="list">
<view class="item" v-for="(item, index) in items" :key="index">
<view class="info">
<text>{{item.date}}</text>
<text>{{item.description}}</text>
</view>
<view class="amount">
<text :class="item.type">{{item.amount}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'BillDetail',
props: {
title: {
type: String,
default: '账单明细'
},
items: {
type: Array,
default: () => []
}
}
}
</script>
<style>
.bill {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.list {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: scroll;
}
.item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eaeaea;
}
.info {
display: flex;
flex-direction: column;
}
.amount {
display: flex;
align-items: center;
}
.income {
color: green;
}
.expense {
color: red;
}
</style>
```
这个组件分为三部分,分别是头部、列表和单项。头部包含了标题,列表中包含了多个单项,单项中展示了账单的日期、描述和金额等信息。
使用方式:
```html
<bill-detail :items="billItems" />
```
其中 `billItems` 是一个数组,包含了多个账单项的数据。每个账单项的数据结构如下:
```js
{
date: '2021-01-01',
description: '购买商品',
amount: '-100',
type: 'expense'
}
```
这个例子中,我们使用了 `uniapp` 框架的语法,但实际上这个组件的实现思路和其他框架的实现方式都是类似的。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)