ysdH5/pages/userStored/storedCode.vue

<template>
    <view>
        <image class="codeTitle" src="/static/img/storedCode.png" mode="widthFix"></image>
        <view class="codeCont-code">
            <view class="codeCont-title">
                向重要的人分享生活的惊喜
            </view>
            <image class="codeCont-img" :src="qrcode" mode="aspectFill"></image>
        </view>
        <view class="codeShare">
            <view class="codeShare-label" @tap="removeSaveImg" hover-class="none">
                生成海报
            </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="/static/img/storedCode.png" mode="widthFix"></image>
                <view class="user-back-cont">
                    <view class="codeBack-yard-name">
                        向重要的人分享生活的惊喜
                    </view>
                    <image :src="qrcode" mode="aspectFill"></image>
                </view>
            </view>
            <view class="longPress">长按图片保存二维码</view>
            <button class="sign-img-btn remove-btn" size="mini" @tap="removeSaveImg">取消</button>
        </view>
    </view>
</template>

<script>
    import { publicCode } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                qrcode      : '',   //二维码
                userInfo    : '',   //我的信息
                isImgLay    : false,//是否显示图片弹出层
                parentId    : '',   //是否分享进入
                shareState  : false //显示分享朋友圈弹出层
    		}
    	},
        onLoad(options) {
            // 获取二维码
            publicCode({
                channel: 'h5',
                type: 'recharge',
                url: 'pages/userStored/index?type=shareStored'
            }).then(res=>{
                this.qrcode   = res.qrcode
                this.userInfo = res.user
            }).catch(err=>{})
        },
        methods: {
            // 绘图
            dowImg(){
                uni.showLoading({
                    title: '加载中',
                })
                
                // 下载素材
                let codeImg = new Promise(success => {
                    wx.getImageInfo({
                        src     : this.qrcode,
                        success : res => {
                            success(res.path)
                        }
                    })
                })
                
                Promise.all([codeImg]).then(res => {
                    // 绘制海报
                    const ctx = uni.createCanvasContext('qrcodeCard')
                    ctx.save()
                    
                    // 绘制背景
                    ctx.setFillStyle('#e2e2e2')
                    ctx.fillRect(0, 0, 375, 603)
        
                    // 绘制背景
                    ctx.drawImage('/static/img/user-storedCode-down.png', 0, 0, 375, 650)
        
                    // 绘制二维码
                    ctx.drawImage(res[0], 114, 400, 150, 150)

                    // 文字
                    ctx.setFontSize(26)
                    ctx.setFillStyle("#222222")
                    ctx.setTextAlign('center')
                    ctx.fillText("向重要的人分享生活的惊喜", 194, 350 , 350)
                                
                    ctx.save();
                    ctx.beginPath(); //开始绘制
                    ctx.arc(70 / 2 + 156, 70 / 2 + 250, 70 / 2, 0, Math.PI * 2, false);
                    ctx.clip();
                    
                    // 保存图片
                    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
            }
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background-color: #e2e2e2;
    }
    
    .codeTitle {
        width: 100%;
    }
    
    .codeTitle {
        text-align: center;
        width: 100%;
    }
    
    
    .codeCont {
        margin: 0 auto;
        width: 90%;
        padding: 40rpx 0;
    }
    
    
    .codeCont-code {
        text-align: center;
        margin-bottom: 80rpx;
    }
    
    .codeCont-img {
        width: 380rpx;
        height: 380rpx;
    }
    
    .codeCont-title {
        margin: 40rpx 0;
        font-size: 46rpx;
        font-weight: 600;
    }
    
    .codeShare {
        display: flex;
        padding: 20rpx 50rpx;
        box-sizing: border-box;
    }
    
    .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: 10rpx;
        font-size: 32rpx;
        color: #ffffff;
        background: #b37f49;
    }
    
    .codeShare-label image {
        width: 80rpx;
        height: 80rpx;
        display: block;
        margin: 0 auto 20rpx;
    }
    
    .codeShare-button {
        width: auto !important;
        border: none;
        background: transparent;
        font-size: 28rpx;
        margin: 0;
        padding: 0;
        font-weight: normal;
    }
    
    
    /* 弹窗背景图 */
    .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[size="mini"],
    .longPress{
        margin: 40rpx auto 0;
        background: #ffffff;
        font-weight: normal;
        color: #2f3245;
        height: 90rpx;
        line-height: 90rpx;
        padding: 0;
        width: 80%;
        border-radius: 10rpx;
        font-size: 30rpx;
    }
    
    .longPress{
        position: relative;
        &::after{
            position: absolute;
            content: '';
            left: calc(50% - 10rpx);
            top: -20rpx;
            width: 0;
            height: 0;
            border-left: 20rpx solid transparent;
            border-right: 20rpx solid transparent;
            border-bottom: 20rpx solid #ffffff;
        }
    }
    
    .remove-btn[size="mini"] {
        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;
        image {
            width: 300rpx;
            height: 300rpx;
        }
    }
    
    .codeBack-yard-name {
        margin-bottom: 30rpx;
        font-size: 36rpx;
        font-weight: 600;
    }

</style>