Onlife/pages/smarttrading/recommend.vue

<template>
    <view class="box">
        <view class="box-list">
            <view class="uni-flex uni-row" style="border-bottom: 1rpx solid #E7E7E7; padding-bottom: 6px;">
                <view class="uni-flex-item">
                    <u-tabs :current="currentTab" inactiveStyle="{color: rgba(142, 142, 147, 1)}"
                        :list="[{name:'預計漲'},{name:'預計跌'}]" @click="switchTab"></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="coinTag" :class="{'checked':coinIndex === i}" 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 {
        _invest
    } from "@/request/aiInvestApi.js"
    export default {
         components:{item},
        data() {
            return {
                show: false,
                type: 'CALL',
                list: [],
                currentTab: 0,
                loading: true,
                coinIndex: 0,
                coins: ['BNB', 'ETH', 'BTC'],
                scrollHeight: 0,
                search: {
                    page_size: 10,
                    page_index: 1,
                    totalPage: 0,
                    invest_coin: 'BNB',
                    option_type: 'CALL'
                },
                optionsType: ['CALL', 'PUT'],
            }
        },
        onLoad(options) {
            this.calculateScrollHeight()
            this.loadData()
            uni.$on('updateView',()=>{
                 this.list = []
                 this.search.page_index = 1
                 this.loadData()
                 
            })
        },
        
        methods: {
            // 加載更多
            loadMore() {
                if (this.search.totalPage <= this.search.page_index) return;
                this.search.page_index++
                this.loadData();
            },
            // 計算滾動區域高度
            calculateScrollHeight() {
                const systemInfo = uni.getSystemInfoSync();
                this.scrollHeight = systemInfo.windowHeight; // 減去其他元素高度
            },
            switchTab(item) {
                this.currentTab = item.index
                this.type = this.search.option_type = this.optionsType[item.index]
                this.search.page_index = 1
                this.loadData()
            },
            changeCoin(index) {
                this.show = false
                this.search.invest_coin = this.coins[index]
                this.search.page_index = 1
                this.coinIndex = index
                this.loadData()
            },
            async loadData(type) {
                this.loading = true
                uni.showLoading({
                    mask: true,
                    title: '數據加載中...'
                })
                this.loading = true
                let search = {
                    ...this.search
                }
                delete search.totalPage
                if (this.type === 'PUT') {
                    search.exercised_coin = this.search.invest_coin
                    search.invest_coin = 'USDT'
                }
                let params = ''
                Object.keys(search).map(item => {
                    params += `${item}=${search[item]}&`
                })
                params = params.slice(0, -1)
                const res = await _invest(params)
                if (this.search.page_index === 1) {
                    this.list = res.data.list
                } else {
                    this.list = this.list.concat(res.data.list)
                }
                this.search.totalPage = Math.ceil(res.data.total / this.search.page_size)
                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 - 70px);
                overflow-y: scroll;
                overflow-x: 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>