|
|
|
@ -1,21 +1,29 @@ |
|
|
|
<template> |
|
|
|
<view class="promotion"> |
|
|
|
<uni-nav-bar dark :fixed="true" background-color="#00aaff" :border="false" status-bar title="推广" /> |
|
|
|
<uni-nav-bar dark :fixed="true" background-color="#00aaff" :border="false" status-bar title="推广" |
|
|
|
@clickLeft="back" left-icon="left" /> |
|
|
|
<view class="promotion-card"> |
|
|
|
<view class="user-info"> |
|
|
|
<!-- <image :src="userInfo.headImage" mode=""></image> --> |
|
|
|
<image class="image" src="../../static/logo.png" mode="widthFix"></image> |
|
|
|
<!-- <view class="user-name">{{ userInfo.nickName }}</view> --> |
|
|
|
<view class="user-name">湖南第一深情</view> |
|
|
|
</view> |
|
|
|
<view class="invitation-code-img"> |
|
|
|
<image class="image" src="../../static/logo.png" mode="widthFix"></image> |
|
|
|
</view> |
|
|
|
<view class="invitation-code">邀请码: sjflshf</view> |
|
|
|
<!-- <view class="user-info"> --> |
|
|
|
<!-- <image class="image" :src="userInfo.headImage" mode="widthFix"></image> --> |
|
|
|
<!-- <image class="image" src="../../static/logo.png" mode="widthFix"></image> --> |
|
|
|
<!-- <view class="user-name">{{ userInfo.nickName }}</view> --> |
|
|
|
<!-- <view class="user-name">湖南第一深情</view> --> |
|
|
|
<!-- </view> --> |
|
|
|
<!-- <view class="invitation-code-img"> |
|
|
|
<image |
|
|
|
style="width: 400rpx;" |
|
|
|
:src="imagePath" mode="widthFix"></image> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
<image style="width: 100%;" :src="imagePath" mode="widthFix"></image> |
|
|
|
|
|
|
|
<!-- <view class="invitation-code">加油站: {{ title }}</view> --> |
|
|
|
<canvas id="myCanvas" type="2d" canvas-id="firstCanvas1"></canvas> |
|
|
|
</view> |
|
|
|
<view class="btns"> |
|
|
|
<view class="btn">保存海报</view> |
|
|
|
<view class="btn">立即邀请</view> |
|
|
|
<view class="btn" |
|
|
|
@click="preservationImg(imagePath)">保存海报</view> |
|
|
|
<!-- <view class="btn">立即邀请</view> --> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
@ -31,11 +39,155 @@ |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
|
|
|
|
url: '', |
|
|
|
title: '123123', |
|
|
|
baseUrl: 'https://dianpin-img.xzaiyp.top/', |
|
|
|
canvas: {}, |
|
|
|
imagePath: '', |
|
|
|
} |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
this.getQrCode() |
|
|
|
this.$store.commit('getUserInfo') |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getQrCode() { |
|
|
|
this.$api('getQrCode', res => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.url = res.result.url |
|
|
|
this.title = res.result.name |
|
|
|
this.draw() |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
draw() { |
|
|
|
|
|
|
|
uni.showLoading({ |
|
|
|
title: "拼命绘画中..." |
|
|
|
}) |
|
|
|
|
|
|
|
wx.createSelectorQuery() |
|
|
|
.select('#myCanvas') // 绘制的canvas的id |
|
|
|
.fields({ |
|
|
|
node: true, |
|
|
|
size: true |
|
|
|
}) |
|
|
|
.exec((res) => { |
|
|
|
const canvas = res[0].node |
|
|
|
// 渲染上下文 |
|
|
|
const ctx = canvas.getContext('2d') |
|
|
|
// Canvas 画布的实际绘制宽高 |
|
|
|
const width = res[0].width |
|
|
|
const height = res[0].height |
|
|
|
// 初始化画布大小 |
|
|
|
const dpr = wx.getWindowInfo().pixelRatio |
|
|
|
|
|
|
|
//根据dpr调整 |
|
|
|
// dpr 2 4 |
|
|
|
// 3 6 |
|
|
|
let Ratio = dpr * 2 |
|
|
|
console.log("bug", dpr) |
|
|
|
canvas.width = width * dpr |
|
|
|
canvas.height = height * dpr |
|
|
|
|
|
|
|
this.canvas = canvas |
|
|
|
ctx.scale(dpr, dpr) |
|
|
|
ctx.clearRect(0, 0, width, height) |
|
|
|
|
|
|
|
ctx.fillStyle = '#fff' |
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height) |
|
|
|
|
|
|
|
//用户图片 |
|
|
|
// const image = canvas.createImage() |
|
|
|
// image.onload = () => { |
|
|
|
// ctx.drawImage(image, 30, 18, 40, 40) |
|
|
|
// } |
|
|
|
// image.src = '/public/img/wechar_1.png' |
|
|
|
// image.src = this.userInfo.headImage |
|
|
|
ctx.fillStyle = 'black' |
|
|
|
ctx.font = '22px PingFangSC-regular'; |
|
|
|
|
|
|
|
let s = this.title || '加油站' |
|
|
|
|
|
|
|
ctx.fillText(s, canvas.width / Ratio - s.length * 11, 50); |
|
|
|
|
|
|
|
//二维码图片 |
|
|
|
const coderImage = canvas.createImage() |
|
|
|
coderImage.src = this.baseUrl + this.url |
|
|
|
coderImage.onload = () => { |
|
|
|
ctx.drawImage(coderImage, |
|
|
|
canvas.width / Ratio - 240 / 2, 100, 240, 240) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 绘制完成后存储路径 |
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
wx.canvasToTempFilePath({ |
|
|
|
x: 0, |
|
|
|
y: 0, |
|
|
|
width: this.canvas.width, |
|
|
|
height: this.canvas.height, |
|
|
|
canvas, |
|
|
|
success: (res) => { |
|
|
|
var tempFilePath = res.tempFilePath; |
|
|
|
this.imagePath = tempFilePath |
|
|
|
uni.hideLoading() |
|
|
|
} |
|
|
|
}); |
|
|
|
}, 600); |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
back() { |
|
|
|
uni.navigateBack(-1) |
|
|
|
}, |
|
|
|
preservationImg(img) { |
|
|
|
let that = this |
|
|
|
uni.authorize({ |
|
|
|
/* scope.writePhotosAlbum 类型是保存到相册 */ |
|
|
|
scope: 'scope.writePhotosAlbum', |
|
|
|
success() { |
|
|
|
/* 已授权进入 */ |
|
|
|
/* 保存图片到相册方法方法 */ |
|
|
|
that.imgApi(img); |
|
|
|
}, |
|
|
|
complete(res) { |
|
|
|
/* 判断如果没有授权就打开设置选项让用户重新授权 */ |
|
|
|
uni.getSetting({ |
|
|
|
success(res) { |
|
|
|
if (!res.authSetting['scope.writePhotosAlbum']) { |
|
|
|
/* 打开设置的方法 */ |
|
|
|
that.openInstall(); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
imgApi(image) { |
|
|
|
/* 获取图片的信息 */ |
|
|
|
uni.getImageInfo({ |
|
|
|
src: image, |
|
|
|
success: function(image) { |
|
|
|
/* 保存图片到手机相册 */ |
|
|
|
uni.saveImageToPhotosAlbum({ |
|
|
|
filePath: image.path, |
|
|
|
success: function() { |
|
|
|
uni.showModal({ |
|
|
|
title: '保存成功', |
|
|
|
content: '图片已成功保存到相册', |
|
|
|
showCancel: false |
|
|
|
}); |
|
|
|
}, |
|
|
|
complete(res) { |
|
|
|
console.log(res); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -90,14 +242,14 @@ |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
height: 90rpx; |
|
|
|
height: 120rpx; |
|
|
|
display: flex; |
|
|
|
background: #00aaff; |
|
|
|
color: white; |
|
|
|
font-size: 28rpx; |
|
|
|
|
|
|
|
.btn { |
|
|
|
width: 50%; |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
@ -108,4 +260,18 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
#myCanvas { |
|
|
|
position: fixed; |
|
|
|
left: 100%; |
|
|
|
/* visibility: hidden */ |
|
|
|
/* visibility: hidden; */ |
|
|
|
/* margin-top: 100rpx; */ |
|
|
|
margin: 68rpx auto; |
|
|
|
width: 750rpx; |
|
|
|
height: 750rpx; |
|
|
|
/* line-height: 20px; */ |
|
|
|
background-color: rgba(255, 255, 255, 1); |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
</style> |
