front-end/hdApp/src/admin/custom/balanceChange.vue

<template>
    <view class="app-content">
            <block v-if="!$util.isEmpty(list.data)">
                <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>
                    <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 class="table-row table-row-extra" v-if="Number(item.settleId)>0 || !$util.isEmpty(item.remark) || Number(item.refundOrderId)>0 || Number(item.shOrderId)>0">
                            <view class="table-cell cell-extra" :colspan="5">
                                <view v-if="Number(item.settleId)>0" @click.stop="goSettle(item)">结账单 {{item.settleNo}} {{item.settleAmount?parseFloat(item.settleAmount):0}}元</view>
                                
                                <view v-if="Number(item.settleAmount)>0 && Number(item.becomeBalance)>0">余额 {{item.becomeBalance}}元</view>
                                
                                <view v-if="Number(item.shOrderId)>0" @click.stop="goShPayOrder(item)">售后付款单{{ item.shOrderSn }}</view>

                                <view v-if="Number(item.refundOrderId)>0" @click.stop="goRefundOrder(item)">订单 {{ item.refundOrderSn }}</view>

                                <view v-if="!$util.isEmpty(item.remark)">{{ item.remark }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
            <block v-else>
                <AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
            </block>
        </view>
    </template>
    <script>
    import AppWrapperEmpty from "@/components/app-wrapper-empty";
    import { getBalanceChangeList } from '@/api/custom'
    import list from '@/mixins/list'
    export default {
        name: "balanceChange",
        components: {
            AppWrapperEmpty
        },
        mixins:[list],
        data() {
            return {
            };
        },
        methods: {
            goRefundOrder(item){
                this.$util.pageTo({ url: '/admin/order/detail?id='+item.refundOrderId})
            },
            goShPayOrder(item){
                this.$util.pageTo({ url: '/admin/order/detail?id='+item.shOrderId})
            },
            goSettle(item){
                this.$util.pageTo({url:'/admin/settle/detail?id='+item.settleId})
            },
            goDetail(item){
                if(item.capitalType == 0){
                    //订单详情
                    this.$util.pageTo({url: '/admin/order/detail?id='+item.relateId})
                }
                if(item.capitalType == 59){
                    //售后单
                    this.$util.pageTo({url: '/admin/order/refundDetail?id='+item.relateId})
                }
            },
            async init(){
                let id = this.option.id ? this.option.id : 0
                const res = await getBalanceChangeList({ page:this.list.page,customId:id })
                if (this.$util.isEmpty(res.data.list)){
                    this.completes(res)
                    return
                }
                let currentList = res.data.list

                currentList.forEach(function(item,index,array){
                    array[index].amount = item.io == 0 ? '-'+parseFloat(item.amount) : '+'+parseFloat(item.amount)
                });

                res.data.list = currentList
                this.completes(res)
            }
        },
        async onPullDownRefresh() {
            this.resetList();
            await this.init()
            uni.stopPullDownRefresh();
        },
        async onReachBottom() {
            if (!this.list.finished) {
                await this.init()
                uni.stopPullDownRefresh();;
            } else {
                uni.stopPullDownRefresh();
            }
        }
    };
    </script>
    <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: 30upx;
                color: #333;
            }
            &.table-row-data {
                font-size: 26upx;
                color: #222;
                transition: background 0.2s;
                cursor: pointer;
                &:hover {
                    background: #f0f9ff;
                }
            }
            &.table-row-remark {
                background: #fafbfc;
                color: #989494;
                font-size: 24upx;
                .cell-remark {
                    padding: 16upx 20upx;
                }
            }
            &.table-row-extra {
                background: #f8f8f8;
                color: #989494;
                font-size: 24upx;
                .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;
                flex: 1;
            }
            &.cell-balance {
                text-align: right;
                min-width: 100upx;
                padding-right: 32upx;
                flex: 1;
            }
        }
    }
    </style>