<template>
	<view class="background">
        <view class="codeContent">
            <!-- 邀请码图 -->
            <view class="codeBack">
                <image class="codeBack-img" src="/static/user/user-codeIcon.png" mode="widthFix"></image>
                <view class="codeBack-avatar" v-if="inviteData.user_info">
                    <image :src="inviteData.user_info.avatar ? inviteData.user_info.avatar : '/static/user/user-portrait.png'" mode="aspectFill"></image>
                    <view class="">
                        {{inviteData.user_info.nickname}}
                    </view>
                </view>
                <view class="codeBack-top">
                    <view class="codeBack-title">
                        您的邀请码
                    </view>
                    <view class="codeBack-number">
                        {{inviteData.invite}}
                    </view>
                    <view class="codeBack-copy" @click="copyCenter(inviteData.invite)">
                        复制
                    </view>
                </view>
                <view class="codeBack-yard">
                    <image class="codeBack-yard-img" :src="inviteData.code" mode="widthFix"></image>
                    <view class="codeBack-yard-name">
                        扫码识别链商星球
                    </view>
                    <view class="codeBack-yard-tips">
                        加入链商星球享受能量球权益
                    </view>
                </view>
            </view>
        </view>
	</view>
</template>

<script>
    import { userInvite } from '@/apis/interfaces/user'
	export default {
		data() {
			return {
				inviteData: {} //二维码信息
			};
		},
        onLoad() {
            // 获取二维码
            this.inviteInfo()
        },
        methods:{
            // 二维码
            inviteInfo(){
                userInvite().then(res => {
                    this.inviteData = res
                }).catch(err => {
                    uni.showToast({
                        icon: 'none',
                        title: err.message
                    })
                })
            },
            
            // 复制邀请码
            copyCenter(e) {
                console.log('ddd')
                let copyNo = e
                uni.vibrateShort({
                    success: () => {
                        uni.setClipboardData({
                            data    : copyNo,   
                            success : res=> {
                                uni.showToast({
                                    title   : '复制成功',
                                    icon    :'none',
                                    duration: 3000
                                });
                            }
                        })
                    }
                })
            },
            
            // 分享微信好友
            friend(scene) {
                uni.share({
					provider: 'weixin',
					title: '我正在使用ocChain',
					scene: scene,
					href: 'https://live.funnyzhibo.com/blockdownload',
					imageUrl: 'https://live.funnyzhibo.com/oc-chain.png',
					summary: '邀请您一起加入，邀请码' + this.inviteData.invite,
					complete: res=> {
						console.log(res)
					}
				})
            }
        }
	}
</script>

<style lang="scss">
	
	// 背景色
	.background{
		min-height: 100vh;
		background: linear-gradient(to top, #7c52fc, #976dff);
	}
	
    // 背景
    .codeImg {
        width: 100%;
        height: 100%;
    }
    
    // 内容
    .codeContent {
        // position: absolute;
        // left: 0;
        // top: 0;
        width: 100%;
        padding: 120rpx 80rpx 40rpx;
        box-sizing: border-box;
        text-align: center;
        .titleImg {
            max-width: 100%;
        }
        .codeBack {
            background-color: $uni-bg-color;
            border-radius: $uni-border-radius-lg;
            position: relative;
            margin: $margin * 2 0 $margin * 2.5;
            overflow: hidden;
            &::after, &::before {
                position: absolute;
                background-color: #8c62fe;
                content: '';
                top: 278px;
                width: 40rpx;
                height: 40rpx;
                border-radius: $uni-border-radius-circle;
            }
            &::after {
                left: -20rpx;
            }
            &::before {
                right: -20rpx;
            }
            .codeBack-img {
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
            }
            .codeBack-top {
                width: 100%;
                padding: $padding;
                height: 150px;
                box-sizing: border-box;
                position: relative;
                .codeBack-title {
                    color: #7c52fc
                }
                .codeBack-number {
                    font-size: 40rpx;
                    color: #7c52fc;
                    text-transform:uppercase;
                    font-weight: 700;
                    margin: $margin - 10 0 $margin;
                }
                .codeBack-copy {
                    font-size: $title-size-lg;
                    display: inline-block;
                    background: linear-gradient(to right, #f9c869, #eca824);
                    color: #fff;
                    padding: 15rpx $padding * 2;
                    border-radius: $uni-border-radius-lg;
                    margin-bottom: $margin * 2;
                }
                .codeBack-tips {
                    .codeBack-tips-text {
                        color: #7c52fc;
                        font-weight: 700;
                    }
                    .codeBack-tips-label {
                        margin-top: $margin;
                        border-radius: $uni-border-radius-lg;
                        display: inline-block;
                        background-color: #fbeec9;
                        font-size: $title-size-sm;
                        padding: 0 $padding + 12;
                        height: 56rpx;
                        line-height: 56rpx;
                        color: #9f7d42;
                    }
                }
            }
            .codeBack-avatar {
                margin-top: $margin * 2;
                font-size: 32rpx;
                font-weight: 600;
                image {
                    width: 140rpx;
                    height: 140rpx;
                    border-radius: 50%;
                    margin-bottom: $margin;
                }
            }
            .codeBack-yard {
                padding: $padding $padding * 2 $padding * 2;
                text-align: center;
                position: relative;
                font-size: $title-size-lg;
                &::after {
                    position: absolute;
                    content: '';
                    left: 50rpx;
                    top: 0;
                    width: calc(100% - 100rpx);
                    border-top: #cccbd0 2rpx dashed;
                }
                .codeBack-yard-img {
                    max-width: 75%;
                    border: 4rpx solid #f3f3f3;
                    margin: 20rpx 0 40rpx;
                }
                .codeBack-yard-name {
                    color: #a0a1a3;
                    margin-bottom: $margin - 10;
                }
                .codeBack-yard-tips {
                    color: #7c52fc
                }
            }
        }
        
        .codeRule {
            background-color: $uni-bg-color;
            border-radius: $radius;
            padding: $padding + 10;
            .codeRule-title {
                font-size: $uni-font-size-lg + 4;
                color: #7c52fc;
                font-weight: 700;
                margin-bottom: $margin + 10;
            }
            .codeRule-list {
                text-align: left;
                font-size: $title-size-m;
                line-height: 38rpx;
                text {
                    display: block;
                    margin-bottom: $margin - 5;
                    color: #7c52fc;
                }
            }
        }
    }
    
    // 分享途径
    .codeShare {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 9;
        background-color: $uni-bg-color;
        box-sizing: border-box;
		height: 200rpx;
        width: 100%;
        display: flex;
		justify-items: center;
		align-items:center;
        .codeShare-label {
            width: 50%;
            text-align: center;
            font-size: $uni-font-size-sm;
            color: $text-gray;
            image {
                width: $uni-img-size-lg - 10;
                height: $uni-img-size-lg - 10;
                display: flex;
                margin: 0 auto $margin - 10;
            }
        }
    }
</style>
