收支明细界面，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,7 +15,6 @@
|
||||||
</image>
|
</image>
|
||||||
</view>
|
</view>
|
||||||
<view class="cash-flow">
|
<view class="cash-flow">
|
||||||
<view class="date">
|
|
||||||
<view class="uni-list-cell">
|
<view class="uni-list-cell">
|
||||||
<view class="uni-list-cell-db">
|
<view class="uni-list-cell-db">
|
||||||
<picker
|
<picker
|
||||||
|
|
@ -36,32 +35,7 @@
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 卡片区域 -->
|
<!-- 卡片区域 -->
|
||||||
<view v-for="(item, index) in billList" :key="index" class="card">
|
<cash-flow-card v-for="(item, index) in cardList" :key="index" :cardData="item" />
|
||||||
<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>
|
|
||||||
</view>
|
</view>
|
||||||
<!-- 底部弹窗 -->
|
<!-- 底部弹窗 -->
|
||||||
<uni-popup ref="popup" :mask-click="true" type="bottom">
|
<uni-popup ref="popup" :mask-click="true" type="bottom">
|
||||||
|
|
@ -94,10 +68,11 @@
|
||||||
import commonEnum from '../../enum/commonEnum'
|
import commonEnum from '../../enum/commonEnum'
|
||||||
import { getNavBarHeight } from '../../utils/system'
|
import { getNavBarHeight } from '../../utils/system'
|
||||||
import uniPopup from '../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
|
import uniPopup from '../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
|
||||||
|
import CashFlowCard from '../../components/cashFlowCard/cashFlowCard.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CashFlowPage',
|
name: 'CashFlowPage',
|
||||||
components: { uniPopup },
|
components: { uniPopup, CashFlowCard },
|
||||||
data() {
|
data() {
|
||||||
const currentDate = this.getDate()
|
const currentDate = this.getDate()
|
||||||
return {
|
return {
|
||||||
|
|
@ -125,30 +100,46 @@ export default {
|
||||||
'公益',
|
'公益',
|
||||||
'发红包',
|
'发红包',
|
||||||
],
|
],
|
||||||
billList: [
|
cardList: [
|
||||||
{
|
{
|
||||||
date: '5月31日 星期六',
|
date: '4月28日',
|
||||||
type: '支出',
|
outflow: 200.0,
|
||||||
category: '购物',
|
inflow: 200.0,
|
||||||
time: '22:08',
|
items: [
|
||||||
merchant: '京东商城平台商户',
|
{
|
||||||
amount: '-11.40',
|
title: '提现',
|
||||||
|
status: '审核中',
|
||||||
|
time: '15:22',
|
||||||
|
orderNumber: '213646848744124758',
|
||||||
|
amount: -200.0,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
date: '5月31日 星期六',
|
title: '订单',
|
||||||
type: '支出',
|
time: '15:22',
|
||||||
category: '购物',
|
orderNumber: '213646848744124758',
|
||||||
time: '22:08',
|
amount: 200.0,
|
||||||
merchant: '京东商城平台商户',
|
},
|
||||||
amount: '-11.40',
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
date: '5月31日 星期六',
|
date: '4月28日',
|
||||||
type: '支出',
|
outflow: 200.0,
|
||||||
category: '购物',
|
inflow: 200.0,
|
||||||
time: '22:08',
|
items: [
|
||||||
merchant: '京东商城平台商户',
|
{
|
||||||
amount: '-11.40',
|
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 {
|
view {
|
||||||
// border: #16ff00 1px solid;
|
// border: #16ff00 1px solid;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user