<template>
    <view class="content">
        <view class="codeTitle">
            <image src="https://card.ysd-bs.com/storage/materials/2021/09/01/code_title.png" mode="widthFix"></image>
        </view>
        <view class="codeCont">
            <view class="codeCont-tisp">
                <text>每邀请一位好友注册成功后</text>
                <text>您将获得30元消费红包奖励</text>
            </view>
            <view class="codeCont-text">
                <image class="codeCont-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
                <view class="codeCont-name">
                    {{ userInfo.nickname }}
                </view>
            </view>
            <view class="codeCont-code">
                <view class="codeCont-title">
                    <view class="codeCont-title-text">邀好友享福利</view>
                    <view class="codeCont-title-tips">邀请好友加入本时生活</view>
                </view>
                <image class="codeCont-img" :src="qrcode" mode="aspectFill"></image>
                <view class="codeShare-label" @tap="saveImg" hover-class="none">生成海报</view>
            </view>
        </view>
        
        <!-- 海报canvas -->
        <canvas class="canvasImg" canvas-id="qrcodeCard"></canvas>
        
        <!-- 图片弹出层 -->
        <view class="user-lay sign-img-lay" v-if="isImgLay">
            <view class="user-back">
                <image class="user-back-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/code_share.png" mode="widthFix"></image>
                <view class="user-back-cont">
                    <view class="codeBack-yard-name">
                        <view class="codeBack-yard-title">扫码享福利</view>
                        <view>邀请好友加入本时生活</view>
                    </view>
                    <image :src="qrcode" mode="aspectFill"></image>
                </view>
            </view>
            <view class="sign-img-btn" @tap="saveImg">长按图片保存二维码<image class="longpress" src="/static/img/long_press.png" mode="widthFix"></image></view>
            <button class="sign-img-btn remove-btn" size="mini" @tap="removeSaveImg">取消</button>
        </view>
    </view>
</template>

<script>
    import { myshare } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                qrcode  : '', //二维码
                userInfo: '', //我的信息
                isImgLay: false, //是否显示图片弹出层
                parentId: '' ,//是否分享进入
                qrcodeImg: '' //海报图片
    		}
    	},
        onLoad(options) {},
        onShow() {
            myshare({
                channel: "h5",
                parent_id: '',
                url: 'pages/index/index?type=shareLogin'
                
            }).then(res=>{
                this.qrcode   = res.qrcode
                this.userInfo = res.user
            }).catch(err=>{})
        },
        methods: {
            // 绘图
            dowImg(){
                uni.showLoading({
                    title: '加载中',
                })
                let avatarImg = new Promise(success=>{
                    uni.getImageInfo({
                        src     : this.userInfo.avatar,
                        success : res => {
                            success(res.path)
                        }
                    })
                })
                
                // 下载素材
                let codeImg = new Promise(success => {
                    uni.getImageInfo({
                        src     : this.qrcode,
                        success : res => {
                            success(res.path)
                        }
                    })
                })
                    
                Promise.all([codeImg, avatarImg]).then(res => {
                    // 绘制海报
                    const ctx = uni.createCanvasContext('qrcodeCard')
                    ctx.save()
                    
                    // 绘制背景
                    ctx.setFillStyle('#f7662d')
                    ctx.fillRect(0, 0, 375, 603)
                    
                    // 绘制背景
                    ctx.drawImage('/static/img/user-codeImg-down.png', 0, 0, 375, 650)
                    
                    // 绘制二维码
                    ctx.drawImage(res[0], 114, 390, 150, 150)
                    
                    // 文字
                    ctx.setFontSize(16)
                    ctx.setFillStyle("#2f3245")
                    ctx.setTextAlign('center')
                    ctx.fillText(this.userInfo.nickname, 194, 350 , 270)
                    
                    // 文字
                    ctx.setFontSize(14)
                    ctx.setFillStyle("#af7700")
                    ctx.setTextAlign('center')
                    ctx.fillText(this.userInfo.nickname + "  --  " + "邀请您进入本时生活", 188, 570 , 270)
                    
                    ctx.save();
                    ctx.beginPath(); //开始绘制
                    ctx.arc(70 / 2 + 156, 70 / 2 + 250, 70 / 2, 0, Math.PI * 2, false);
                    ctx.clip();
                    ctx.drawImage(res[1], 156, 250, 70, 70);
                    
                    // 保存图片
                    ctx.draw(true, () => {
                        uni.hideLoading()
                        uni.canvasToTempFilePath({
                            canvasId: 'qrcodeCard',
                            x: 0,
                            y: 0,
                            success: res => {
                                this.qrcodeImg = res.tempFilePath
                                this.removeSaveImg()
                            }
                        })
                    })
                    
                }).catch(err=>{
                    uni.showToast({
                        title: '海报下载，请检查网络',
                        icon : 'none'
                    })
                })
            },
                    
            // 图片弹出层
            removeSaveImg(){
                this.isImgLay = !this.isImgLay
            },
            
            // 绘制海报
            saveImg(){
                this.dowImg();
            },
        }
    }
</script>

<style>
    page {
        background-color: #e2e2e2;
    }
    
    /* 按钮 */
    .codeShare {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #333333;
        display: flex;
        padding: 30rpx 20rpx 40rpx;
        box-sizing: border-box;
        z-index: 9;
    }
    
    .codeShare-label {
        width: calc(100% - 80rpx) !important;
        margin: 30rpx 40rpx;
        font-weight: normal;
        text-align: center;
        height: 86rpx;
        line-height: 86rpx;
        padding: 0;
        border-radius: 60rpx;
        font-size: 32rpx;
        color: #ffffff;
        background: #000000;
    }
    
    .codeShare-button {
        color: #ffd887;
        background: transparent;
    }
    
    page {
        background-color: #e2e2e2;
    }
    
    .content {
        overflow: hidden;
    }
    
    .codeTitle {
        width: 100%;
        background-color: #000000;
        border-radius: 0 0 200rpx 200rpx;
        padding: 40rpx 20rpx 160rpx;
        box-sizing: border-box;
    }
    
    .codeTitle {
        text-align: center;
        width: 100%;
    }
    
    .codeCont {
        background-color: #ffffff;
        margin: -120rpx auto 0;
        width: 84%;
        border-radius: 20rpx;
        box-shadow: 0 0 20rpx rgba(0, 0, 0, .2);
        padding: 40rpx 0;
    }
    
    .codeCont-tisp {
        text-align: center;
        color: #fff;
        background-color: #797979;
        padding: 10rpx 0;
    }
    
    .codeCont-tisp text {
        display: block;
    }
    
    .codeCont-text {
        text-align: center;
        margin: 40rpx 0;
    }
    
    .codeCont-avatar {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        margin-bottom: 20rpx;
    }
    
    .codeCont-code {
        text-align: center;
    }
    
    .codeCont-img {
        width: 300rpx;
        height: 300rpx;
    }
    
    .codeCont-title {
        margin-bottom: 20rpx;
    }
    
    .codeCont-title-text {
        font-size: 46rpx;
        font-weight: 700;
        margin-bottom: 10rpx;
        letter-spacing: 4rpx;
    }
    
    .codeCont-title-tips {
        font-size: 28rpx;
    }
    
    /* 弹窗背景图 */
    .user-lay {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-pack: center;
        position: fixed;
        background: rgba(0, 0, 0, .6);
        height: 100vh;
        width: 100vw;
        top: 0;
        left: 0;
        z-index: 99;
        box-sizing: border-box;
    }
    
    /* canvas */
    .canvasImg {
        position: absolute;
        left: -1000%;
        bottom: 0;
        height: 650px;
        width: 375px;
        background: #fbf6f0;
    }
    
    
    /* 图片弹出层 */
    .sign-img-lay {
        text-align: center;
    }
    
    .sign-img-src {
        width: 70vw;
        vertical-align: top;
    }
    
    .sign-img-btn {
        margin: 0 auto 40rpx;
        background: #ffffff;
        font-weight: normal;
        color: #2f3245;
        height: 90rpx;
        line-height: 90rpx;
        padding: 0;
        width: 80%;
    }
    
    .longpress {
        width: 40rpx;
        height: 40rpx;
        vertical-align: middle;
        margin-left: 10rpx;
    }
    
    .remove-btn {
        margin-top: 20rpx;
        background: #101010;
        color: #e5c175;
        font-weight: normal;
    }
    
    /* 背景 */
    .user-back-img {
        width: 100%;
        display: block;
    }
    
    .user-back {
        position: relative;
        width: 80%;
        text-align: center;
        margin: 0 auto;
    }
    
    .user-back-cont {
        text-align: center;
        background-color: #e2e2e2;
        padding: 40rpx 0;
    }
    
    .user-back-cont image {
        width: 300rpx;
        height: 300rpx;
    }
    
    .codeBack-yard-name {
        margin-bottom: 30rpx;
    }
    
    .codeBack-yard-title {
        font-size: 50rpx;
        font-weight: 600;
        letter-spacing: 4rpx;
        margin-bottom: 20rpx;
    }
</style>
