收支明细界面，card的组件抽离
This commit is contained in:
WindowBird
parent
e47b0eeb37
commit
b3ce16a6cb
209
components/cashFlowCard/cashFlowCard.vue
Normal file
209
components/cashFlowCard/cashFlowCard.vue
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
<template>
|
||||
<view class="card">
|
||||
<view class="card-head">
|
||||
<view class="card-date">{{ cardData.date }}</view>
|
||||
<view class="card-flow">
|
||||
<view class="card-out">¥{{ cardData.outflow.toFixed(2) }}</view>
|
||||
<view class="card-in">¥{{ cardData.inflow.toFixed(2) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-item" v-for="(item, index) in cardData.items" :key="index">
|
||||
<view class="card-item-cash-info">
|
||||
<view class="card-icon">
|
||||
<image :src="getIconByTitle(item.title)" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="card-item-detail">
|
||||
<view class="card-item-title">
|
||||
<view class="left">{{ item.title }}</view>
|
||||
<view class="right" v-if="item.status">{{ item.status }}</view>
|
||||
</view>
|
||||
<view class="card-item-body">
|
||||
<view class="card-time">{{ item.time }}</view>
|
||||
<view class="divider"></view>
|
||||
<view class="order-number">{{ item.orderNumber }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="number" :class="item.amount >= 0 ? 'positive' : 'negative'">
|
||||
{{ item.amount >= 0 ? '+' : '' }}¥{{ Math.abs(item.amount).toFixed(2) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import commonEnum from '../../enum/commonEnum'
|
||||
|
||||
export default {
|
||||
name: 'CashFlowCard',
|
||||
props: {
|
||||
cardData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getIconByTitle(title) {
|
||||
// 根据标题自动选择对应的图标
|
||||
const iconMap = {
|
||||
'提现': commonEnum.WITHDRAW,
|
||||
'订单': commonEnum.ORDER_NUMBER,
|
||||
// 可以根据需要添加更多映射
|
||||
}
|
||||
return iconMap[title] || ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
margin: 12rpx 22rpx 12rpx 22rpx;
|
||||
padding: 40rpx;
|
||||
|
||||
.card-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
.card-date {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-flow {
|
||||
display: flex;
|
||||
gap: 30rpx;
|
||||
|
||||
.card-out {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
|
||||
&::before {
|
||||
content: '出 ';
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.card-in {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
|
||||
&::before {
|
||||
content: '入 ';
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.card-item-cash-info {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
|
||||
.card-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
border: 2rpx dashed #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-item-detail {
|
||||
flex: 1;
|
||||
|
||||
.card-item-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
gap: 10rpx;
|
||||
|
||||
.left {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 24rpx;
|
||||
color: #ff803a;
|
||||
background-color: rgba(255, 128, 58, 0.1);
|
||||
padding: 4rpx 8rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-item-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
|
||||
.card-time {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 1rpx;
|
||||
height: 20rpx;
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.order-number {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
text-align: right;
|
||||
|
||||
&.positive {
|
||||
color: #ff803a;
|
||||
}
|
||||
|
||||
&.negative {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -15,8 +15,7 @@
|
|||
</image>
|
||||
</view>
|
||||
<view class="cash-flow">
|
||||
<view class="date">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-db">
|
||||
<picker
|
||||
:end="endDate"
|
||||
|
|
@ -36,32 +35,7 @@
|
|||
</view>
|
||||
|
||||
<!-- 卡片区域 -->
|
||||
<view v-for="(item, index) in billList" :key="index" class="card">
|
||||
<view class="card-head">
|
||||
<view class="card-date">428</view>
|
||||
<view class="card-flow">
|
||||
<view class="card-out">200</view>
|
||||
<view class="card-in">201</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-item">
|
||||
<view class="card-item-cash-info">
|
||||
<view class="card-icon"></view>
|
||||
<view class="card-item-detail">
|
||||
<view class="card-item-title">
|
||||
<text class="left">1</text>
|
||||
<text class="right">2</text>
|
||||
</view>
|
||||
<view class="card-item-body">
|
||||
<text class="card-time">3</text>
|
||||
<text class="order-number">4</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="number">2222</view>
|
||||
</view>
|
||||
{{ item.date }}
|
||||
</view>
|
||||
<cash-flow-card v-for="(item, index) in cardList" :key="index" :cardData="item" />
|
||||
</view>
|
||||
<!-- 底部弹窗 -->
|
||||
<uni-popup ref="popup" :mask-click="true" type="bottom">
|
||||
|
|
@ -94,10 +68,11 @@
|
|||
import commonEnum from '../../enum/commonEnum'
|
||||
import { getNavBarHeight } from '../../utils/system'
|
||||
import uniPopup from '../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
|
||||
import CashFlowCard from '../../components/cashFlowCard/cashFlowCard.vue'
|
||||
|
||||
export default {
|
||||
name: 'CashFlowPage',
|
||||
components: { uniPopup },
|
||||
components: { uniPopup, CashFlowCard },
|
||||
data() {
|
||||
const currentDate = this.getDate()
|
||||
return {
|
||||
|
|
@ -125,30 +100,46 @@ export default {
|
|||
'公益',
|
||||
'发红包',
|
||||
],
|
||||
billList: [
|
||||
cardList: [
|
||||
{
|
||||
date: '5月31日 星期六',
|
||||
type: '支出',
|
||||
category: '购物',
|
||||
time: '22:08',
|
||||
merchant: '京东商城平台商户',
|
||||
amount: '-11.40',
|
||||
date: '4月28日',
|
||||
outflow: 200.0,
|
||||
inflow: 200.0,
|
||||
items: [
|
||||
{
|
||||
title: '提现',
|
||||
status: '审核中',
|
||||
time: '15:22',
|
||||
orderNumber: '213646848744124758',
|
||||
amount: -200.0,
|
||||
},
|
||||
{
|
||||
title: '订单',
|
||||
time: '15:22',
|
||||
orderNumber: '213646848744124758',
|
||||
amount: 200.0,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '5月31日 星期六',
|
||||
type: '支出',
|
||||
category: '购物',
|
||||
time: '22:08',
|
||||
merchant: '京东商城平台商户',
|
||||
amount: '-11.40',
|
||||
},
|
||||
{
|
||||
date: '5月31日 星期六',
|
||||
type: '支出',
|
||||
category: '购物',
|
||||
time: '22:08',
|
||||
merchant: '京东商城平台商户',
|
||||
amount: '-11.40',
|
||||
date: '4月28日',
|
||||
outflow: 200.0,
|
||||
inflow: 200.0,
|
||||
items: [
|
||||
{
|
||||
title: '提现',
|
||||
status: '审核中',
|
||||
time: '15:22',
|
||||
orderNumber: '213646848744124758',
|
||||
amount: -200.0,
|
||||
},
|
||||
{
|
||||
title: '订单',
|
||||
time: '15:22',
|
||||
orderNumber: '213646848744124758',
|
||||
amount: 200.0,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
@ -260,19 +251,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 主要内容区域
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
margin: 12rpx 22rpx 12rpx 22rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
// border: #16ff00 1px solid;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user