|
|
@@ -1,39 +1,46 @@
|
|
|
<template>
|
|
|
<view class="app-content">
|
|
|
<block v-if="!$util.isEmpty(list.data)">
|
|
|
- <t-table :headerBackgroundColor="'#F0F2F6'">
|
|
|
- <t-tr header>
|
|
|
- <t-th>日期</t-th>
|
|
|
- <t-th><view style="width:180upx;">事项</view></t-th>
|
|
|
- <t-th>人员</t-th>
|
|
|
- <t-th>变动</t-th>
|
|
|
- <t-th>余额</t-th>
|
|
|
- </t-tr>
|
|
|
- <view v-for="(item, index) in list.data" :key="index">
|
|
|
- <t-tr>
|
|
|
- <t-td align="center" color="info"><view @click="goDetail(item)">{{ item.addTime.substr(5,11) }}</view></t-td>
|
|
|
- <t-td align="center" color="info"><view style="width:180upx;" @click="goDetail(item)">{{ item.event }}</view></t-td>
|
|
|
- <t-td align="center" color="info"><view @click="goDetail(item)">{{ item.staffName }}</view></t-td>
|
|
|
- <t-td align="center" color="info"><view @click="goDetail(item)">{{ item.amount }}</view></t-td>
|
|
|
- <t-td align="center" color="info"><view @click="goDetail(item)">{{ parseFloat(item.balance) }}</view></t-td>
|
|
|
- </t-tr>
|
|
|
- <block v-if="!$util.isEmpty(item.remark)">
|
|
|
- <t-tr>
|
|
|
- <t-td align="left" color="info">
|
|
|
- <view @click="goDetail(item)">备注：<text style="color:#989494;">{{ item.remark }}</text></view>
|
|
|
- </t-td>
|
|
|
- </t-tr>
|
|
|
- </block>
|
|
|
- <t-tr>
|
|
|
- <t-td align="left" color="info" colspan="5">
|
|
|
- <view style="color:#989494;">
|
|
|
- <view style="text-align: left;">结清账单（编号 CL531578） 380元</view>
|
|
|
- <view style="text-align: left;">消除订单（编号 XSD534789）的欠款35元</view>
|
|
|
- </view>
|
|
|
- </t-td>
|
|
|
- </t-tr>
|
|
|
+ <!-- 表头 -->
|
|
|
+ <view class="balance-table">
|
|
|
+ <view class="table-header table-row">
|
|
|
+ <view class="table-cell cell-date">日期</view>
|
|
|
+ <view class="table-cell cell-event">事项</view>
|
|
|
+ <view class="table-cell cell-staff">人员</view>
|
|
|
+ <view class="table-cell cell-amount">变动</view>
|
|
|
+ <view class="table-cell cell-balance">余额</view>
|
|
|
</view>
|
|
|
- </t-table>
|
|
|
+ <!-- 表体 -->
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in list.data"
|
|
|
+ :key="index"
|
|
|
+ class="table-body"
|
|
|
+ >
|
|
|
+ <view class="table-row table-row-data" @click="goDetail(item)">
|
|
|
+ <view class="table-cell cell-date">{{ item.addTime.substr(5,11) }}</view>
|
|
|
+ <view class="table-cell cell-event">{{ item.event }}</view>
|
|
|
+ <view class="table-cell cell-staff">{{ item.staffName }}</view>
|
|
|
+ <view class="table-cell cell-amount">{{ item.amount }}</view>
|
|
|
+ <view class="table-cell cell-balance">{{ parseFloat(item.balance) }}</view>
|
|
|
+ </view>
|
|
|
+ <!-- 备注 -->
|
|
|
+ <view
|
|
|
+ v-if="!$util.isEmpty(item.remark)"
|
|
|
+ class="table-row table-row-remark"
|
|
|
+ >
|
|
|
+ <view class="table-cell cell-remark" :colspan="5">
|
|
|
+ 备注：<text>{{ item.remark }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 结清账单等信息 -->
|
|
|
+ <view class="table-row table-row-extra">
|
|
|
+ <view class="table-cell cell-extra" :colspan="5">
|
|
|
+ <view>结清账单（编号 CL531578） 380元</view>
|
|
|
+ <view>消除订单（编号 XSD534789）的欠款35元</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</block>
|
|
|
<block v-else>
|
|
|
<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
|
|
|
@@ -93,4 +100,87 @@
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
- <style lang="scss" scoped></style>
|
|
|
+ <style lang="scss" scoped>
|
|
|
+ .balance-table {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 16upx;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 4upx 24upx rgba(0,0,0,0.06);
|
|
|
+ margin: 20upx 0;
|
|
|
+ .table-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 72upx;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ &.table-header {
|
|
|
+ background: #f5f7fa;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ &.table-row-data {
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #222;
|
|
|
+ transition: background 0.2s;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ background: #f0f9ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.table-row-remark {
|
|
|
+ background: #fafbfc;
|
|
|
+ color: #989494;
|
|
|
+ font-size: 22upx;
|
|
|
+ .cell-remark {
|
|
|
+ padding: 16upx 20upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.table-row-extra {
|
|
|
+ background: #f8f8f8;
|
|
|
+ color: #989494;
|
|
|
+ font-size: 22upx;
|
|
|
+ .cell-extra {
|
|
|
+ padding: 16upx 20upx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 2upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-cell {
|
|
|
+ flex: 1;
|
|
|
+ padding: 18upx 8upx 18upx 8upx;
|
|
|
+ &.cell-date {
|
|
|
+ text-align: center;
|
|
|
+ min-width: 100upx;
|
|
|
+ flex: 1.2;
|
|
|
+ }
|
|
|
+ &.cell-staff {
|
|
|
+ text-align: center;
|
|
|
+ min-width: 60upx;
|
|
|
+ flex: 0.8;
|
|
|
+ }
|
|
|
+ &.cell-event {
|
|
|
+ text-align: left;
|
|
|
+ min-width: 200upx;
|
|
|
+ flex: 2.2;
|
|
|
+ }
|
|
|
+ &.cell-amount {
|
|
|
+ text-align: right;
|
|
|
+ min-width: 100upx;
|
|
|
+ color: #2d8cf0;
|
|
|
+ font-weight: 500;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ &.cell-balance {
|
|
|
+ text-align: right;
|
|
|
+ min-width: 100upx;
|
|
|
+ color: #2d8cf0;
|
|
|
+ font-weight: 500;
|
|
|
+ padding-right: 32upx;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
