<template>
	<view v-if="loaded">
        <image class="codeBack" :src="inviteData.cover"></image>
        <view class="codDate">
            <view class="codDate-year" v-if="inviteData.date">
                {{inviteData.date.solar.month}}
            </view>
            <view class="codDate-day">
                {{inviteData.date.solar.day}}
            </view>
            <view class="codDate-lunar">
                农历{{inviteData.date.lunar}}
            </view>
        </view>
        <view class="codeCont">
            <image class="codeCont-avatar" v-if="inviteData.user_info" :src="inviteData.user_info.avatar ? inviteData.user_info.avatar : '/static/user/user-portrait.png'" mode="aspectFill"></image>
            <view class="codeCont-text">
                <view class="codeCont-name" v-if="inviteData.user_info">
                    {{inviteData.user_info.nickname}}
                </view>
                <view class="codeCont-number">
                    邀请码：
                    <view class="codeBack-number" @click="copyCenter(inviteData.invite)">
                        {{inviteData.invite}}
                    </view>
                </view>
            </view>
        </view>
        <view class="codeImg">
            <image class="codeImg-code" :src="inviteData.code" mode="widthFix"></image>
            <view class="codeImg-name">长按识别</view>
        </view>
	</view>
</template>

<script>
    import { userInvite } from '@/apis/interfaces/user'
	export default {
		data() {
			return {
				inviteData: {} ,//二维码信息
                loaded    : false
			};
		},
        onLoad() {
            // 获取二维码
            this.inviteInfo()
        },
        methods:{
            // 二维码
            inviteInfo(){
                userInvite().then(res => {
                    this.inviteData = res
                    this.loaded = true
                }).catch(err => {
                    uni.showToast({
                        icon: 'none',
                        title: err.message
                    })
                })
            },
            
            // 复制邀请码
            copyCenter(e) {
                let copyNo = e
                uni.vibrateShort({
                    success: () => {
                        uni.setClipboardData({
                            data    : copyNo,   
                            success : res=> {
                                uni.showToast({
                                    title   : '复制成功',
                                    icon    :'none',
                                    duration: 3000
                                });
                            }
                        })
                    }
                })
            }
        }
	}
</script>

<style lang="scss" scoped>
    .codeBack {
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        position: relative;
    }
    // 内容
    .codeCont {
        position: absolute;
        left: 0;
        bottom: 140rpx;
        width: 100%;
        bottom: 100rpx;
        left: 0;
        padding: 40rpx;
        box-sizing: border-box;
        z-index: 9;
        .codeCont-avatar {
           width: 100rpx;
           height: 100rpx;
           border-radius: 50%;
           border: 6rpx solid #FFFFFF;
        }
        .codeCont-text {
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            padding: 50rpx 40rpx 0 180rpx;
            box-sizing: border-box;
            .codeCont-name {
                color: #FFFFFF;
                font-size: 34rpx;
                margin-bottom: 10rpx;
            }
            .codeCont-number {
                font-size: 28rpx;
                display: flex;
                color: #c4a1cb;
            }
        }
    }
    
    .codeImg {
        position: absolute;
        bottom: 120rpx;
        right: 40rpx;
        z-index: 9;
        width: 160rpx;
        height: 160rpx;
        color: #FFFFFF;
        text-align: center;
        font-size: 24rpx;
        opacity: .9;
        .codeImg-code {
            width: 100%;
            margin-bottom: 10rpx;
        }
    }
    .codDate {
        position: absolute;
        top: 30rpx;
        right: 70rpx;
        z-index: 9;
        color: #FFFFFF;
        text-align: center;
        font-size: 24rpx;
        border: 2rpx solid #fffefc;
        .codDate-year {
            padding-top: 5rpx;
        }
        .codDate-day {
            padding: 5rpx 0;
            font-size: 32rpx;
            font-weight: 600;
            border-bottom: 2rpx solid #a980c6;
        }
        .codDate-lunar {
            font-size: 24rpx;
            transform: scale(.8);
            padding: 4rpx 0;
        }
    }
</style>
