samehome/pages/subscription/index.vue

<template>
    <view class="main">
        <!-- nav -->
        <view class="nav-head">
            <view class="navItem" @click="pageState = 'product'" :class="{ select: pageState === 'product' }">
                {{ i18n.Product }}
            </view>
            <view class="navItem" @click="pageState = 'pending'" :class="{ select: pageState === 'pending' }">
                {{ i18n.Pending }}
            </view>
            <view class="navItem" @click="pageState = 'complete'" :class="{ select: pageState === 'complete' }">
                {{ i18n.Complete }}
            </view>
        </view>
        <!-- Product 产品列表 -->
        <view class="cardList">
            <view class="card" v-for="(item, index) in 10" :key="index" @click="gotoDetails(index)">
                <!-- 卡片条件渲染 -->
                <!-- product -->
                <card-header v-if="pageState === 'product'" :iconName="'../../static/maskets/bye.png'"
                    :title="'BTC(Bitcoin)'" :rightName="i18n.Subscribe" :hasBtn="true" :btnColor="'#00E8A2'">
                </card-header>
                <view class="dataBody" v-if="pageState === 'product'">
                    <key-value-row :keyName="i18n.STLTotalCirculation" :value="'23989'"></key-value-row>
                    <key-value-row :keyName="i18n.PrivateSalePrice" :value="'284145.61'"></key-value-row>
                    <key-value-row :keyName="i18n.ICOTime" :value="'2022/08/06-2022/08/31'"></key-value-row>
                </view>


                <!-- pending -->
                <card-header v-if="pageState === 'pending'" :iconName="'../../static/maskets/bye.png'"
                    :title="'973430980989323445'" :rightName="'Pending'" fontColor="#00E8A2">
                </card-header>
                <view class="dataBody" v-if="pageState === 'pending'">
                    <key-value-row :keyName="i18n.Price" :value="'284145.61'"></key-value-row>
                    <key-value-row :keyName="i18n.Quantity" :value="'1000'"></key-value-row>
                    <key-value-row :keyName="i18n.USDT" :value="'3166.61'"></key-value-row>
                    <key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:51'"></key-value-row>
                </view>


                <!-- complete -->
                <card-header v-if="pageState === 'complete'" :iconName="'../../static/maskets/bye.png'"
                    :title="'973430980989323445'" :rightName="'complete'" fontColor="#00E8A2">
                </card-header>
                <view class="dataBody" v-if="pageState === 'complete'">
                    <key-value-row :keyName="i18n.Price" :value="'284145.61'"></key-value-row>
                    <key-value-row :keyName="i18n.Quantity" :value="'1000'"></key-value-row>
                    <key-value-row :keyName="i18n.ConfirmAmount" :value="'999'" :leftColor="'#F2FE8D'"
                        :rightColor="'#F2FE8D'"></key-value-row>
                    <key-value-row :keyName="i18n.USDT" :value="'3166.61'"></key-value-row>
                    <key-value-row :keyName="i18n.CheckTheNumberoOfUSDT" :value="'2000'" :leftColor="'#F2FE8D'"
                        :rightColor="'#F2FE8D'">
                    </key-value-row>
                    <key-value-row :keyName="i18n.Time" :value="'2022/08/06 14:51'"></key-value-row>

                </view>

            </view>
        </view>



        <!-- tabBar -->
        <tab-bar :selectActive="4"></tab-bar>
    </view>
</template>

<script>
import CardHeader from '../../components/cardHeader/cardHeader.vue';
import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue';
export default {
    components: { KeyValueRow, CardHeader },
    name: 'subscription',
    data() {
        return {
            pageState: 'product', // 当前页签状态
        }
    },
    onLoad() {

    },
    onShow() {

    },
    onHide() {
    },
    computed: {
        i18n() {
            return this.$t('subscription')
        }
    },
    methods: {
        gotoDetails(index) {
            if (this.pageState !== 'product') return
            uni.navigateTo({
                url: `/pages/subscription/details?id=${index}`
            });
        }
    }
}

</script>

<style lang="scss" scoped>
.main {
    padding-bottom: 198rpx; // 避免底部TabBar盖住内容

    .nav-head {
        overflow: hidden;
        position: fixed;
        top: 0rpx;
        height: 80rpx;
        font-size: 24rpx;
        color: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 8;
        background-color: #15141F;
        padding: 94rpx 48rpx 0;


        .navItem {
            width: 218rpx;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            color: #0b7e60;
            font-size: 28rpx;
            border-bottom: 10rpx solid #0b7e60;
        }

        .select {
            color: #00E8A2;
            border-bottom: 10rpx solid #00E8A2;
        }

    }


    .cardList {
        margin-top: 212rpx;

        .card {
            background: #211F32;
            border-radius: 32rpx;
            margin: 32rpx;



            .dataBody {
                box-sizing: border-box;
                padding: 32rpx;
            }
        }
    }





}
</style>