<template>
    <view class="main">
        <!-- nav -->
        <navigation>{{ i18n.InviteFriends }}</navigation>
        <view class="body">
            <view class="shareText">{{ i18n.ShareWithFriends }}</view>
            <view class="scanText">{{ i18n.ScanTheCode }}</view>
            <!-- 二维码 -->
            <view class="QRCode">
                <u-image class="QRCodeImg" src="../../static/me/QR-code.png" width="400rpx" height="400rpx"></u-image>
            </view>
            <view class="myIdText">{{ i18n.MyReferralID }}{{referralID}}</view>
            <!-- 按钮 -->
            <u-button class="button" color="#00E8A2" throttleTime="500" @click="copyId(referralID)">{{
                    i18n.CopyID
            }}
            </u-button>


        </view>
    </view>
</template>

<script>
import uniCopy from '@/utils/uni-copy'
export default {
    name: "inviteFriends",
    data() {
        return {
            referralID: 857222,
        };
    },
    computed: {
        i18n() {
            return this.$t("me");
        },
    },
    onLoad() {
    },
    onShow() { },
    methods: {
        copyId(value = "") {
            // console.log(value)
            uniCopy({
                content: value,
                success: (res) => {
                    uni.showToast({
                        title: "复制成功",
                        duration: 3000,
                    })
                },
                error: (e) => {
                    uni.showToast({
                        title: e,
                        icon: 'none',
                        duration: 2000,
                    })
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.main {

    .body {
        overflow: hidden;
        margin-top: 200rpx;
        padding: 0 48rpx;

        .shareText {
            margin-top: 104rpx;
            font-size: 60rpx;
            font-weight: 800;
            text-align: center;
        }

        .scanText {
            font-size: 32rpx;
            text-align: center;
            color: #A2A0A8;
        }

        .QRCode {
            box-sizing: border-box;
            margin: 66rpx auto;
            width: 520rpx;
            height: 520rpx;
            background-image: url(../../static/me/bg_QR_code.png);
            background-repeat: no-repeat;
            background-size: 520rpx;
            padding: 52rpx;

            .QRCodeImg {
                margin-left: 8rpx;
            }
        }

        .myIdText {
            font-size: 48rpx;
            font-weight: 800;
            text-align: center;
        }

        .button {
            height: 112rpx;
            margin: 72rpx 0;
            border-radius: 32rpx;
            color: #15141F !important;
            font-weight: 700;
            font-size: 32rpx;
        }



    }

}
</style>
