196 lines
6.0 KiB
Vue
196 lines
6.0 KiB
Vue
<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>
|