<template>
<view class="content">
<view class="box">
<canvas v-if="showcanvas" id="qrShareBox" canvas-id="qrShareBox" class="tki-qrcode-canvas" />
<image class="imgbox" v-else :src="img"></image>
</view>
</view>
</template>
<script>
import { weixindata } from '@/utils/wxAuthorized.js';
export default {
data() {
return {
money: '',
url: '',
img: '',
showcanvas: true,
loading: true, //是否载入图片中
size: 180,
ratio: 1, //页面比例用于计算
canHeight: '',
canWeidth: '',
playing: true,
current: {
src: '../../static/audio/xx.mp3'
},
rotateIndex: '',
animation: {},
animationData: {},
audioAction: {
method: 'pause'
},
ran: -1,
isStop: true,
demo: 0,
userName: '荆州XXX公司',
time: 0,
itemName: '',
pid: 0
};
},
computed: {
showtime() {
let date = new Date(this.time * 1000);
let Y = date.getFullYear();
let M = date.getMonth()+1
let D = date.getDate()
return Y + '年' + M + '月' + D + '日';
}
},
onReady() {
let query = uni.createSelectorQuery();
let obj = this;
console.log(999, obj.money);
// 获取页面比例
query
.select('.box')
.fields(
{
size: true
},
e => {
console.log('获取页面比例', e);
// 保存比例
this.ratio = e.width / 750;
}
)
.exec();
// 获取画布宽高信息
query
.select('#qrShareBox')
.fields(
{
size: true
},
e => {
console.log('获取画布宽高信息', e);
obj.canHeight = e.height;
// obj.canHeight = 650
obj.canWeidth = e.width;
}
)
.exec();
let ctxBg = '/static/img/zszs.png'; //画布背景
let src = '/static/icon/erweima.jpg'; // 二维码
let context = uni.createCanvasContext('qrShareBox');
// 插入背景图片
console.log('插入背景图片', ctxBg, 0, 0, obj.canWeidth, obj.canHeight);
context.drawImage(ctxBg, 0, 0, obj.canWeidth, obj.canHeight);
const codeSize = obj.size * obj.ratio; //计算二维码大小
const codeX = ((750 - obj.size) * obj.ratio) / 2; //二维码所在x轴位置
const codeY = 960 * obj.ratio; //二维码所在y轴位置
const codeBoxColor = '#FFFFFF'; //包裹框颜色
const codeBoxWidht = 0; //包裹边框宽度
const codeBoxSize = (codeBoxWidht / 2) * obj.ratio; //计算二维码白色包裹框大小
const codeBoxX = codeX - codeBoxSize; //包裹框初始X轴
const codeBoxY = codeY - codeBoxSize; //包裹框初始Y轴
const codeBoxEnd = codeSize + codeBoxWidht * obj.ratio; //计算包裹框大小
const fontTop = codeY + codeBoxEnd + (codeBoxWidht + 20) * obj.ratio; //文字距离上边距高度
const fontSize = 24 * obj.ratio; //文字大小
const fontText = ''; //文字内容
const fontLeft = (codeSize - fontSize * fontText.length) / 2 + codeX; //文字左侧距离
// // 插入文字
context.setFontSize(38* obj.ratio);
context.setFillStyle('#000');
// context.fillText('感谢信', ((750 - obj.size) * obj.ratio) / 2, 260 * obj.ratio)
context.setFontSize(40 * obj.ratio);
context.fillText('感谢 ' , 100 * obj.ratio, 460* obj.ratio)
let name = obj.userName
if(name.length <= 12) {
context.fillText(name, 200* obj.ratio, 460* obj.ratio)
}else if(name.length <= 18) {
let name1 = name.slice(0,9)
let name2 = name.slice(9,)
context.fillText(name1, 200* obj.ratio, 434* obj.ratio)
context.setTextAlign('center')
context.fillText(name2, 380* obj.ratio, 483* obj.ratio)
context.setTextAlign('left')
}else if(name.length <= 24) {
let name1 = name.slice(0,12)
let name2 = name.slice(12,)
context.fillText(name1, 200* obj.ratio, 434* obj.ratio)
context.setTextAlign('center')
context.fillText(name2, 438* obj.ratio, 483* obj.ratio)
context.setTextAlign('left')
}else if(name.length <= 30) {
let name1 = name.slice(0,12)
let name2 = name.slice(12,22)
let name3 = name.slice(22,)
context.fillText(name1, 200* obj.ratio, 400* obj.ratio)
context.setTextAlign('center')
context.fillText(name2, 438* obj.ratio, 450* obj.ratio)
context.fillText(name3, 438* obj.ratio, 500* obj.ratio)
context.setTextAlign('left')
}else if(name.length <= 36) {
let name1 = name.slice(0,12)
let name2 = name.slice(12,24)
let name3 = name.slice(24,)
context.fillText(name1, 200* obj.ratio, 400* obj.ratio)
context.setTextAlign('center')
context.fillText(name2, 438* obj.ratio, 450* obj.ratio)
context.fillText(name3, 438* obj.ratio, 500* obj.ratio)
context.setTextAlign('left')
}
context.setFontSize(38 * obj.ratio);
context.fillText("感谢您于" + obj.showtime + "对", 180* obj.ratio, 560* obj.ratio)
let str = '“' + obj.itemName + "”" + '的爱心捐赠。'
if(str.length < 15) {
context.fillText(str ,90* obj.ratio, 615* obj.ratio )
context.setTextAlign('center')
context.fillText('特发此证书，以示感谢！',(750/2)* obj.ratio,695 * obj.ratio)
context.setTextAlign('left')
}else if(str.length < 30) {
if(str.length == 17) {
context.fillText(str ,85* obj.ratio, 615* obj.ratio )
context.setTextAlign('center')
context.fillText('特发此证书，以示感谢！',(750/2)* obj.ratio,695 * obj.ratio)
context.setTextAlign('left')
}else {
let str1 = str.slice(0,16)
let str2 = str.slice(16,)
context.fillText(str1 ,85* obj.ratio, 615* obj.ratio )
context.fillText(str2 ,100* obj.ratio, 670* obj.ratio )
context.setTextAlign('center')
context.fillText('特发此证书，以示感谢！',(750/2)* obj.ratio,750 * obj.ratio)
context.setTextAlign('left')
}
}else if(str.length < 48) {
let str1 = str.slice(0,16)
let str2 = str.slice(16,31)
let str3 = str.slice(31,)
context.fillText(str1 ,85* obj.ratio, 615* obj.ratio )
context.fillText(str2 ,100* obj.ratio, 670* obj.ratio )
context.fillText(str3 ,100* obj.ratio, 725* obj.ratio )
context.setTextAlign('center')
context.fillText('特发此证书，以示感谢！',(750/2)* obj.ratio,805 * obj.ratio)
context.setTextAlign('left')
}else if(str.length < 63) {
let str1 = str.slice(0,16)
let str2 = str.slice(16,31)
let str3 = str.slice(31,46)
let str4 = str.slice(46,)
context.fillText(str1 ,85* obj.ratio, 615* obj.ratio )
context.fillText(str2 ,100* obj.ratio, 670* obj.ratio )
context.fillText(str3 ,100* obj.ratio, 725* obj.ratio )
context.fillText(str4 ,100* obj.ratio, 780* obj.ratio )
context.setTextAlign('center')
context.fillText('特发此证书，以示感谢！',(750/2)* obj.ratio,860 * obj.ratio)
context.setTextAlign('left')
}
context.drawImage(src, 490 * obj.ratio, 1140 * obj.ratio, codeSize, codeSize);
// 生成
context.draw(false, e => {
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: obj.canWeidth,
height: obj.canHeight,
destWidth: obj.canWeidth,
destHeight: obj.canHeight,
canvasId: 'qrShareBox',
success: function(res) {
console.log(333, res);
// 在H5平台下，tempFilePath 为 base64
obj.showcanvas = false;
obj.img = res.tempFilePath;
}
});
});
},
onShow() {
},
onLoad(option) {
this.pid = option.project_id
this.userName = option.name
this.time = option.time
this.itemName = option.title
this.IndexShare()
},
onHide() {
//在页面隐藏时也要清除定时器
if (this.timer) {
// console.log('清除定时器-' + this.timer)
clearInterval(this.timer);
}
},
onUnload() {
},
methods: {
// 分享
IndexShare() {
let obj = this;
let item = {
link: obj.$store.state.baseURL + '/index/#/pages/user/thank?project_id=' + obj.pid + '&name=' + obj.userName + '&time=' + obj.time + '&title=' + obj.itemName, // 分享链接
imgUrl: obj.$store.state.baseURL + '/index/static/img/22.jpg',
desc: '感谢信',
title: '赤壁市红十字会',
success: console.log('分享加载成功')
};
console.log('分享加', item);
weixindata(item);
},
musicClick() {
// if (this.isRoate) {
// this.isRoate = false
// this.stopScanAudio()
// } else {
// this.isRoate = true
// this.ScanAudio()
// }
},
play() {
this.playing = !this.playing;
this.ScanAudio(this.playing);
if (this.playing == true) {
this.timer = setInterval(() => {
//创建定时器,3秒执行异一次
this.scaleAndScale();
console.log('每1秒执行一次');
}, 1000);
} else {
clearInterval(this.timer);
}
// var music = uni.createInnerAudioContext();
// music.src= "../../static/audio/xx.mp3"; //选择播放的音频
// music.onPause(); //暂停播放
// console.log('暂停播放')
// console.log('dianjizanting')
// this.stopAudio()
// this.playing = !this.playing; //背景音乐点击，暂停或继续
},
// 定义动画内容
scaleAndScale() {
// 定义动画内容
// this.animation.scale(1.2, 1.2).step() //先放大1,2倍
// this.animation.scale(1, 1).step() //缩小至原来的大小
// 导出动画数据传递给data层
// this.animationData = this.animation.export(); //每次执行导出动画时 会覆盖之前的动画
this.animation.rotate(this.demo).step({
duration: 1000
});
this.animationData = this.animation.export();
this.demo += 360;
},
noscaleAndScale() {
this.animation.rotate(0).step({
duration: 1000
});
this.animationData = this.animation.export();
}
// ScanAudio(){
// this.$api.music.play(); //执行播放
// console.log('执行播放')
// }
}
};
</script>
<style lang="scss">
page {
width: 100%;
height: 100%;
}
.content {
// background-color: pink;
width: 100%;
// height: 100vh;
position: relative;
// overflow: hidden;
.image {
width: 100%;
height: 100vh;
}
.bgimg {
width: 100%;
height: 100%;
// background-color: pink;
image {
width: 100%;
height: 100%;
}
}
// .tki-qrcode-canvas {
// width: 750rpx;
// height: 100vh;
// margin: 0 auto;
// // background-color: pink;
// }
.box {
color: #ffffff;
width: 100%;
height: 100vh;
.tki-qrcode-canvas {
// width: 700rpx;
// height: 1245rpx;
width: 750rpx;
// padding: 32rpx;
height: 1350rpx;
margin: 0 auto;
}
// background-color: pink;
// .music {
// // width: 55rpx;
// // height: 55rpx;
// border-radius: 28rpx;
// // background-color: pink;
// position: absolute;
// left: 12rpx;
// top: 250rpx;
// z-index: 999;
// }
}
.imgbox {
height: 1334rpx;
width: 750rpx;
}
}
.image {
width: 100%;
height: 100%;
}
</style>