|
|
|
@ -2,35 +2,53 @@ |
|
|
|
<view class="promotion"> |
|
|
|
|
|
|
|
|
|
|
|
<navbar title="二维码" |
|
|
|
<navbar title="推荐有礼" |
|
|
|
bgColor="#A3D250" |
|
|
|
color="#fff" |
|
|
|
leftClick @leftClick="$utils.navigateBack" /> |
|
|
|
|
|
|
|
<view class="promotion-card"> |
|
|
|
<!-- <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> --> |
|
|
|
<view class="" |
|
|
|
style="position: relative;" |
|
|
|
v-if="!show"> |
|
|
|
<image :src="configList.tui_image" mode="widthFix" |
|
|
|
style="width: 100%;"></image> |
|
|
|
|
|
|
|
<view class="uni-color-btn" |
|
|
|
style="position: absolute;bottom: 150rpx; |
|
|
|
height: 40rpx; |
|
|
|
background-color: #f40; |
|
|
|
box-shadow: 0 0 10rpx 10rpx #ff440066; |
|
|
|
width: 80%;" |
|
|
|
@click="show = true"> |
|
|
|
推荐二维码海报生成 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<view |
|
|
|
v-if="show"> |
|
|
|
|
|
|
|
<image style="width: 100%;" :src="imagePath" mode="widthFix"></image> |
|
|
|
|
|
|
|
|
|
|
|
<!-- <view class="uni-color-btn" |
|
|
|
@click="preservationImg(imagePath)">保存二维码</view> --> |
|
|
|
</view> |
|
|
|
<canvas id="myCanvas" type="2d" canvas-id="firstCanvas1"></canvas> |
|
|
|
<!-- <view class="promotion-card" |
|
|
|
v-if="show"> |
|
|
|
|
|
|
|
<image :src="userInfo.headImage" mode="aspectFill" |
|
|
|
class="headImage"></image> |
|
|
|
|
|
|
|
<image style="width: 100%;" :src="imagePath" mode="widthFix"></image> |
|
|
|
<image style="width: 100%;" :src="imagePath" mode="widthFix"></image> |
|
|
|
|
|
|
|
<!-- <view class="invitation-code">加油站: {{ title }}</view> --> |
|
|
|
<view class="invitation-code">加油站: {{ title }}</view> |
|
|
|
<canvas id="myCanvas" type="2d" canvas-id="firstCanvas1"></canvas> |
|
|
|
|
|
|
|
<view class="uni-color-btn" |
|
|
|
@click="preservationImg(imagePath)">保存二维码</view> |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -48,6 +66,7 @@ |
|
|
|
baseUrl: 'https://image.hhlm1688.com/', |
|
|
|
canvas: {}, |
|
|
|
imagePath: '', |
|
|
|
show : false, |
|
|
|
} |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
@ -56,6 +75,7 @@ |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getQrCode() { |
|
|
|
// this.show = true |
|
|
|
this.$api('getInviteCode', res => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.url = res.result.url |
|
|
|
@ -66,9 +86,9 @@ |
|
|
|
}, |
|
|
|
draw() { |
|
|
|
|
|
|
|
uni.showLoading({ |
|
|
|
title: "拼命绘画中..." |
|
|
|
}) |
|
|
|
// uni.showLoading({ |
|
|
|
// title: "拼命绘画中..." |
|
|
|
// }) |
|
|
|
|
|
|
|
wx.createSelectorQuery() |
|
|
|
.select('#myCanvas') // 绘制的canvas的id |
|
|
|
@ -83,6 +103,8 @@ |
|
|
|
// Canvas 画布的实际绘制宽高 |
|
|
|
const width = res[0].width |
|
|
|
const height = res[0].height |
|
|
|
|
|
|
|
console.log(width, height); |
|
|
|
// 初始化画布大小 |
|
|
|
const dpr = wx.getWindowInfo().pixelRatio |
|
|
|
|
|
|
|
@ -98,8 +120,20 @@ |
|
|
|
ctx.scale(dpr, dpr) |
|
|
|
ctx.clearRect(0, 0, width, height) |
|
|
|
|
|
|
|
ctx.fillStyle = '#fff' |
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height) |
|
|
|
// ctx.fillStyle = '#fff' |
|
|
|
// ctx.fillRect(0, 0, canvas.width, canvas.height) |
|
|
|
|
|
|
|
const bgImage = canvas.createImage() |
|
|
|
bgImage.src = this.configList.qr_image |
|
|
|
|
|
|
|
bgImage.onload = () => { |
|
|
|
|
|
|
|
canvas.width = bgImage.width |
|
|
|
canvas.height = bgImage.height |
|
|
|
|
|
|
|
ctx.drawImage(bgImage, |
|
|
|
0, 0, bgImage.width, bgImage.height) |
|
|
|
} |
|
|
|
|
|
|
|
//用户图片 |
|
|
|
// const image = canvas.createImage() |
|
|
|
@ -119,14 +153,14 @@ |
|
|
|
|
|
|
|
// 绘制欢迎语 |
|
|
|
let s = this.title || '' |
|
|
|
ctx.fillText(s, canvas.width / Ratio - s.length * 11, 50); |
|
|
|
// 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) |
|
|
|
canvas.width / 2 - 175, canvas.height / 2 - 100, 350, 350) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -206,7 +240,7 @@ |
|
|
|
.promotion { |
|
|
|
width: 100%; |
|
|
|
height: 100vh; |
|
|
|
background-color: $uni-color; |
|
|
|
// background-color: $uni-color; |
|
|
|
.promotion-card { |
|
|
|
width: 90%; |
|
|
|
margin: 140rpx auto 0rpx auto; |
|
|
|
@ -237,9 +271,8 @@ |
|
|
|
/* visibility: hidden */ |
|
|
|
/* visibility: hidden; */ |
|
|
|
/* margin-top: 100rpx; */ |
|
|
|
margin: 68rpx auto; |
|
|
|
width: 750rpx; |
|
|
|
height: 750rpx; |
|
|
|
height: calc(100vh - 120rpx); |
|
|
|
/* line-height: 20px; */ |
|
|
|
background-color: rgba(255, 255, 255, 1); |
|
|
|
text-align: center; |
|
|
|
|
