<template>
    <view class="main">
        <view class="contentBody">
            <view class="userInfo">
                <u-image class="headImg" src="../../static/me/Ellipse 85.png" width="160rpx" height="160rpx"
                    radius="160rpx"></u-image>
                <view class="idAndAccount">
                    <view class="id">ID:984934</view>
                    <view class="account">{{i18n.account}}:348798457498579</view>
                </view>
            </view>
            <!-- 三个按钮 -->
            <view class="btnDiv">
                <view class="item">
                    <u--image class="img" :showLoading="true" src="../../static/home/img_recharge.png" width="144rpx"
                        height="144rpx"></u--image>
                    <view class="text">{{ i18n.Recharge }}</view>
                </view>
                <view class="item">
                    <u--image class="img" :showLoading="true" src="../../static/home/img_Mine.png" width="144rpx"
                        height="144rpx"></u--image>
                    <view class="text">{{ i18n.Withdrawal }}</view>
                </view>
                <view class="item">
                    <u--image class="img" :showLoading="true" src="../../static/home/img_Subcription.png" width="144rpx"
                        height="144rpx"></u--image>
                    <view class="text">{{ i18n.Subcription }}</view>
                </view>
            </view>
        </view>


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

<script>
export default {
    name: 'me',
    data() {
        return {

        }
    },
    onLoad() {

    },
    onShow() {

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

</script>

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

    .contentBody {

        box-sizing: border-box;
        width: 100%;
        background: #211F32;
        border-radius: 64rpx 64rpx 0 0;
        padding: 44rpx 48rpx;
        overflow: hidden;


        .userInfo {
            height: 168rpx;
            display: flex;
            flex-wrap: wrap;

            .headImg {
                height: 160rpx;
                width: 160rpx;
                border-radius: 160rpx;
                border: 4rpx solid #F6A609;
            }

            .idAndAccount {
                margin-left: 40rpx;

                .id {
                    height: 56rpx;
                    width: 378rpx;
                    font-weight: 600;
                    font-size: 40rpx;
                    margin: 16rpx 0;
                }

                .account {
                    position: relative;
                    height: 56rpx;
                    line-height: 56rpx;
                    width: 378rpx;
                    background: rgba(255, 188, 31, 0.1);
                    border-radius: 16rpx;
                    font-size: 24rpx;
                    color: #FFBC1F;
                    text-align: center;
                    padding-left: 20rpx;

                    &::before {
                        display: block;
                        position: absolute;
                        content: '';
                        background-image: url(../../static/me/ranking.png);
                        background-repeat: no-repeat;
                        background-size: 32rpx;
                        width: 32rpx;
                        height: 32rpx;
                        top: 12rpx;
                        left: 20rpx;
                    }
                }
            }


        }

        .btnDiv {
            margin: 32rpx 48rpx;

            .item {
                display: inline-block;
                width: 218rpx;
                text-align: center;

                .img {
                    margin: 0 36rpx 16rpx;
                }
            }
        }

    }





}
</style>
