初始化项目

pages/user/code.vue

@@ -0,0 +1,195 @@
+<template>
+    <view class="content">
+        <view class="While">
+            <view class="codeUser" v-if="inviteData.user_info">
+                <image class="codeUser-img" :src="inviteData.user_info.avatar || '/static/imgs/default_myHead.png'" mode="aspectFill"></image>
+                <view  class="codeUser-name">{{ inviteData.user_info.nickname }}</view>
+            </view>
+            <view class="codeImg">
+                <image class="codeUser-img" :src="inviteData.code" mode="aspectFill"></image>
+                <view class="codeUser-text">
+                    扫描二维码,注册成功后,即可绑定关系
+                </view>
+            </view>
+        </view>
+        <view class="While down">
+            长按保存我的推广码
+        </view>
+        <!-- 海报canvas -->
+        <canvas class="canvasImg" canvas-id="qrcodeCard"></canvas>
+    </view>
+</template>
+
+<script>
+    import { invite } from '@/apis/interfaces/user'
+    export default {
+    	data() {
+    		return {
+    			inviteData: ''
+    		};
+    	},
+        onShow() {
+            // 获取推广码
+            this.inviteInfo();
+        },
+        methods: {
+            // 推广码
+            inviteInfo() {
+            	invite().then(res => {
+                    this.inviteData = res
+            	}).catch(err => {
+            		uni.showToast({
+            			title: err.message,
+            			icon: "none"
+            		})
+            	})
+            },
+            
+            // 查看图片
+            openImg(img) {
+                uni.previewImage({
+                    current: img,
+                    urls:[img]
+                })
+            },
+            
+            // 绘图
+            dowCode(){
+                uni.showLoading({
+                    title: '加载中',
+                })
+                
+                // 头像
+                let avatarImg = new Promise(success=>{
+                    uni.getImageInfo({
+                        src     : this.inviteData.user_info.avatar,
+                        success : res => {
+                            success(res.path)
+                        }
+                    })
+                })
+                
+                // 下载素材
+                let codeImg = new Promise(success => {
+                    uni.getImageInfo({
+                        src     : this.inviteData.code,
+                        success : res => {
+                            success(res.path)
+                        }
+                    })
+                })
+                
+                Promise.all([avatarImg, codeImg]).then(res => {
+                    // 绘制海报
+                    const ctx = uni.createCanvasContext('qrcodeCard')
+                    ctx.save()
+                    
+                    // 绘制背景
+                    ctx.drawImage('/static/imgs/codeBack.png', 0, 0, 375, 452)
+                    
+                    // 绘制头像
+                    ctx.drawImage(res[0], 155, 35, 70, 70)
+                    // 绘制二维码
+                    ctx.drawImage(res[1], 110, 200, 160, 160)
+                    // 文字
+                    ctx.setFontSize(16)
+                    ctx.setFillStyle("#FFFFFF")
+                    ctx.setTextAlign('center')
+                    ctx.fillText(this.inviteData.user_info.nickname, 190, 135 , 270)
+                    
+                    // 文字
+                    ctx.setFontSize(15)
+                    ctx.setFillStyle("#919191")
+                    ctx.setTextAlign('center')
+                    ctx.fillText("扫描二维码,注册成功后,即可绑定关系",190, 400)
+                    
+                    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.removeSaveImg()
+                            }
+                        })
+                    })
+                    
+                }).catch(err=>{
+                    uni.showToast({
+                        title: '海报下载，请检查网络',
+                        icon : 'none'
+                    })
+                })
+            },
+        }
+    }
+</script>
+
+<style lang="scss">
+    .content{
+    	overflow: hidden;
+    	background: #f3f4f6;
+        padding: 140rpx 80rpx;
+        box-sizing: border-box;
+    }
+    
+    .While {
+        border-radius: 10rpx;
+        margin-bottom: 30rpx;
+        background-color: #FFFFFF;
+        box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
+        border-radius: 10rpx;
+        overflow: hidden;
+    }
+    
+    .codeUser {
+        background-color: #6e79ec;
+        color: #FFFFFF;
+        text-align: center;
+        padding: 50rpx 0;
+        .codeUser-img {
+            background-color: #FFFFFF;
+            width: 140rpx;
+            height: 140rpx;
+            border-radius: 50%;
+            margin-bottom: 10rpx;
+        }
+    }
+    .codeImg {
+        padding: 60rpx 0;
+        text-align: center;
+        .codeUser-img {
+            width: 360rpx;
+            height: 360rpx;
+        }
+        .codeUser-text {
+            padding: 0 100rpx;
+            color: #919191;
+            line-height: 48rpx;
+            box-sizing: border-box;
+        }
+    }
+    
+    .down {
+        line-height: 90rpx;
+        text-align: center;
+        color: #54975e;
+    }
+    
+    /* canvas */
+    .canvasImg {
+        position: absolute;
+        left: -1000%;
+        bottom: 0;
+        height: 452px;
+        width: 375px;
+        background: #fbf6f0;
+    }
+</style>