Onlife/pages/smarttrading/incomes.vue

<template>
    <view class="box">
        <view class="box-list">
            <view class="uni-flex uni-row" style="border-bottom: 1rpx solid #E7E7E7;">
                <view class="uni-flex-item">
                    <u-tabs :current="currentTab" inactiveStyle="{color: rgba(142, 142, 147, 1)}"
                        :list="[{name:'我的收益'}]"></u-tabs>
                </view>
                <view class="coinItem" @click="show=true">
                    <u--text suffixIcon="arrow-down" customStyle="color:#4F5AD7;" iconStyle="font-size: 16px; padding-left:8px;" :text="coins[coinIndex]"></u--text>
                </view>
            </view>
            <view class="box-main">
                <scroll-view scroll-y :style="{ height: scrollHeight + 'px' }" @scrolltolower="loadMore">
                    <view v-for="item in list" :key="item.id">
                        <item :detail="item" />
                    </view>
                    <view v-if="list.length === 0 || search.page_index === search.totalPage" class="nodata">
                        {{loading?'數據加載中':'暫無更多數據'}}</view>
                </scroll-view>
            </view>
            <u-popup :show="show" mode="bottom" @close="show = false" round="10" :closeable="false">
                <view style=" width: 100%; padding: 32px 0;">
                    <view class="uni-flex uni-row" style="justify-content: space-around;">
                        <view @click="changeCoin(i)" :class="{'checked':coinIndex === i}"  class="coinTag" v-for="(coin , i) in coins" :key="coin">{{coin}}
                        </view>
                    </view>
                </view>
            </u-popup>
        </view>
    </view>
</template>

<script>
    import item from '@/components/smarttrading/item.vue';
    import {
        _myIncome
    } from "@/request/api.js"
    export default {
        components: {
            item
        },
        data() {
            return {
                show: false,
                type: 'CALL',
                list: [],
                incomes: [], // 收益列表
                convert:[], //转换列表
                currentTab: 0,
                loading: true,
                coinIndex: 0,
                coins: ['USDT','BNB', 'ETH', 'BTC'],
                scrollHeight: 0,
                search: {
                    page: 1,
                    listrow: 10,
                    totalPage: 0,
                },
                optionsType: ['CALL', 'PUT'],
            }
        },
        onLoad(options) {
			console.log(options,'sssss')
            // this.currentTab = Number(options.type)
            this.calculateScrollHeight()
            this.currentTab === 0 && this.loadData()
        },
        methods: {
            switchTab(item) {
                this.currentTab = item.index
                this.list = this.currentTab == 0 ? this.convert: this.incomes
            },
            // 加載更多
            loadMore() {
                if (this.search.totalPage <= this.search.page) return;
                this.search.page++
                this.loadData();
            },
            // 計算滾動區域高度
            calculateScrollHeight() {
                const systemInfo = uni.getSystemInfoSync();
                this.scrollHeight = systemInfo.windowHeight; // 減去其他元素高度
            },
            changeCoin(index) {
                this.show = false
                this.search.invest_coin = this.coins[index]
                this.search.page = 1
                this.coinIndex = index
                this.loadData()
            },
            async loadData(type) {
                this.loading = true
                uni.showLoading({
                    mask: true,
                    title: '數據加載中...'
                })
                this.loading = true
                let search = {
                    'type':this.coins[this.coinIndex],
                    ...this.search
                }
                delete search.totalPage
                let params = ''
                Object.keys(search).map(item => {
                    params += `${item}=${search[item]}&`
                })
                params = params.slice(0, -1)
                const res = await _myIncome(params)

                if (this.search.page === 1) {
                    this.incomes = res.data.data
                } else {
                    this.incomes = this.incomes.concat(res.data.data)
                }
                this.list = this.incomes.map(item => {
                    return {...item.info,'money':item.money}
                })
                this.search.totalPage = Math.ceil(res.data.total / this.search.page)
                uni.hideLoading()
                this.loading = false
            },
        }
    }
</script>

<style lang="scss" scoped>
    .nodata {
        height: 64px;
        line-height: 64px;
        text-align: center;
        color: #A4A4A4;
    }

    .box {
        background-color: #000033;
        height: 100vh;
        padding: 32rpx 32rpx 0;
        box-sizing: border-box;
        width: 100%;

        .box-list {
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            border-radius: 18px 18px 0 0;
            background-color: #fff;

            .title {
                border-bottom: 1px silver solid;
                padding: 12px 18px;
            }

            .box-main {
                height: calc(100vh - 56px);
                overflow: hidden;
                padding: 0 12px;
            }
        }

        .coinItem {
            flex-basis: 52px;
            height: 44px;
            line-height: 52px;
            text-align: end;
            padding-right: 24px;
            color: #4F5AD7;
        }

        .coinTag {
            padding: 4px 12px;
            border-radius: 2px;
            border: 1rpx solid #4F5AD7;
            transform: skewX(-10deg);
            font-size: 28rpx;
            color: #4F5AD7;
        
        }
        .checked{
            background-color: #4F5AD7;
            color: #fff;
        }
    }
</style>