teambuy-front/pages_order/mine/assets.vue

<template>
    <view class="assets-page">
        <!-- 导航栏 -->
        <navbar title="资产明细" leftClick @leftClick="$utils.navigateBack" bgColor="#019245" color="#fff" />

        <!-- diy的tab栏 -->
        <uv-sticky>
            <view class="tab-container">
                <view class="tab-wrapper">
                    <view 
                        v-for="(item, index) in list" 
                        :key="index" 
                        class="tab-item"
                        :class="{ active: currentTab === index }"
                        @click="switchTab(index)"
                    >
                        {{ item.name }}
                    </view>
                    <!-- 滑块 -->
                    <view class="tab-slider" :style="{ left:  currentTab * 50 + '%' }" />
                </view>
            </view>
        </uv-sticky>

        <!-- 交易记录列表 -->
        <view class="transaction-list">
            <view class="transaction-item" v-for="item in incomeList" :key="item.id">
                <!-- 左侧图标和类型 -->
                <view class="item-left">
                    <view class="icon-container">
                        <uv-icon name="empty-coupon" color="#019245" size="44"></uv-icon>
                    </view>
                    <view class="item-info">
                        <view class="item-type">{{ item.type }}</view>
                        <view class="item-time">{{ item.time }}</view>
                    </view>
                </view>

                <!-- 右侧金额 -->
                <view class="item-amount income">¥{{ item.amount }}</view>
            </view>
        </view>
    </view>
</template>

<script>
import navbar from '@/components/base/navbar.vue'
import { assetsData, assetsDataForHead } from '@/static/js/mockAssets.js'

export default {
    components: {
        navbar
    },
    data() {
        return {
            currentTab: 0,  // 0-收入明细 1-支出明细
            incomeList: [],
            expenseList: [],
            list: [
                {
                    name: '收入明细',
                },
                {
                    name: '支出明细',
                }
            ],
            Data: []
        }
    },
    onLoad() {
        const identity = uni.getStorageSync('identity')
        if (identity) {
            // 从mock数据获取收入和支出明细
            this.Data = assetsDataForHead
        } else {
            // 从mock数据获取收入和支出明细
            this.Data = assetsData
        }
        this.switchTab(0)
    },
    methods: {
        // 切换标签
        switchTab(index) {
            this.currentTab = index
            // 切换显示的列表
            if (index === 0) {
                this.incomeList = this.Data.incomeList
            } else {
                this.incomeList = this.Data.expenseList
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.assets-page {
    // min-height: 100vh;
    // background-color: #f5f5f5;
}

.transaction-list {
    padding: 0 20rpx;
    // background-color: #fff;
}

.transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 10rpx;
    border-bottom: 1rpx solid #E0E0E0;

    &:last-child {
        border-bottom: none;
    }

    .item-left {
        display: flex;
        align-items: center;

        .icon-container {
            width: 70rpx;
            height: 70rpx;
            border-radius: 50%;
            // background-color: rgba(1, 146, 69, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20rpx;
            border: 4rpx solid $uni-color ;
        }

        .item-info {
            .item-type {
                font-size: 30rpx;
                color: #333;
                margin-bottom: 6rpx;
                font-weight: 600;
            }

            .item-time {
                font-size: 24rpx;
                color: #949494;
            }
        }
    }

    .item-amount {
        font-size: 32rpx;
        font-weight: 500;

        &.income {
            color: $uni-color-second;
        }

        &.expense {
            color: #333;
        }
    }
}

// 添加tab样式
.tab-container {
    width: 100%;
    // background-color: #fff;
    padding: 30rpx 0;
}

.tab-wrapper {
    display: flex;
    position: relative;
    width: 90%;
    height: 68rpx;
    margin: 0 auto;
    background-color: #cfcfcf;
    border-radius: 42rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
}

.tab-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 28rpx;
    color: #333;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
    
    &.active {
        color: #fff;
        font-weight: 500;
    }
}

.tab-slider {
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: $uni-color;
    border-radius: 42rpx;
    top: 0;
    transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
    z-index: 0;
}
</style>