|
|
@@ -1,26 +1,329 @@
|
|
|
<template>
|
|
|
- <view class="thank">
|
|
|
- <!-- <image src="../../static/images/thank.png" mode=""></image> -->
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- page {
|
|
|
- // width: 100%;
|
|
|
- width: 750rpx;
|
|
|
+ <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: '2021-05-08',
|
|
|
+ itemName: '关心关爱留守儿童'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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 = '/index/static/img/zs.png'; //画布背景
|
|
|
+ let src = '/index/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('#F5D0A2');
|
|
|
+ // context.fillText('感谢信', ((750 - obj.size) * obj.ratio) / 2, 260 * obj.ratio)
|
|
|
+ context.setFontSize(30 * obj.ratio);
|
|
|
+ context.fillText('感谢 ' + obj.userName , 273 * obj.ratio, 500 * obj.ratio);
|
|
|
+ context.setTextAlign('center')
|
|
|
+ context.setFontSize(40* obj.ratio);
|
|
|
+ context.setFillStyle('#321C0A');
|
|
|
+ context.fillText(obj.userName , (750/2)* obj.ratio, 700 * obj.ratio);
|
|
|
+
|
|
|
+ //感谢您于2021年1月1日对于“关爱关心留守儿童”的爱心捐赠。特发此证书，以示感谢！
|
|
|
+ context.setTextAlign('left')
|
|
|
+ context.setFillStyle('#533113');
|
|
|
+ context.setFontSize(30* obj.ratio);
|
|
|
+ context.fillText('感谢您于 ' + obj.time +' 对于', 198* obj.ratio, 940 * obj.ratio);
|
|
|
+ context.setTextAlign('center')
|
|
|
+ context.fillText('"'+obj.itemName+'"'+ '的爱心捐赠。',(750/2+20)* obj.ratio,980 * obj.ratio)
|
|
|
+
|
|
|
+ context.fillText('特发此证书，以示感谢！',(750/2)* obj.ratio,1020 * obj.ratio)
|
|
|
+ // context.fillText('衷心感谢您对荆州市红十字事业的信任与支持', 155 * obj.ratio, 460 * obj.ratio);
|
|
|
+ // context.fillText('！我们已收到您的捐款', 40 * obj.ratio, 515 * obj.ratio);
|
|
|
+ // // 画横线
|
|
|
+ // context.moveTo(340 * obj.ratio, 520 * obj.ratio);
|
|
|
+ // context.lineTo(500 * obj.ratio, 520 * obj.ratio);
|
|
|
+ // context.stroke();
|
|
|
+ // context.fillText('￥' + obj.money, 355 * obj.ratio, 512 * obj.ratio);
|
|
|
+ // context.fillText('元。我们承诺，', 500 * obj.ratio, 515 * obj.ratio);
|
|
|
+ // context.fillText('绝不辜负大家的信任，遵照您的意愿，将捐款全部', 40 * obj.ratio, 570 * obj.ratio);
|
|
|
+ // context.fillText('用于相关救助项目。您的善举将给受助人带去温暖', 40 * obj.ratio, 625 * obj.ratio);
|
|
|
+ // context.fillText('！', 40 * obj.ratio, 680 * obj.ratio);
|
|
|
+ // context.fillText('爱心无界，情义无价。谨以此信表达谢意，我', 100 * obj.ratio, 730 * obj.ratio);
|
|
|
+
|
|
|
+ // context.fillText('们因您更有力量，因您倍感温暖！', 40 * obj.ratio, 785 * obj.ratio);
|
|
|
+ // // context.fillText('谨表谢意', (580 * obj.ratio), 680 * obj.ratio)
|
|
|
+ // context.fillText('荆州市红十字会', 450 * obj.ratio, 900 * obj.ratio);
|
|
|
+ // context.fillText('识别右边二维码', 108 * obj.ratio, 1090 * obj.ratio);
|
|
|
+ // context.fillText('关注荆州市红十字会', 108 * obj.ratio, 1150 * obj.ratio);
|
|
|
+
|
|
|
+ // 插入二维码
|
|
|
+ // console.log(codeX, codeY, codeSize, 999)
|
|
|
+ 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() {
|
|
|
+ // var animation = uni.createAnimation();
|
|
|
+ // this.animation = animation;
|
|
|
+ // if (this.isStop) {
|
|
|
+ // // 使用动画
|
|
|
+ // this.scaleAndScale();
|
|
|
+ // this.timer = setInterval(() => {
|
|
|
+ // //创建定时器,3秒执行异一次
|
|
|
+ // this.scaleAndScale();
|
|
|
+ // // console.log('每三秒执行一次 , 达到往复运动的效果')
|
|
|
+ // }, 1000);
|
|
|
+ // } else {
|
|
|
+ // this.noscaleAndScale();
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ // console.log(333, option);
|
|
|
+ // this.money = option.money;
|
|
|
+ // this.IndexShare();
|
|
|
+ // this.ScanAudio(true);
|
|
|
+ },
|
|
|
+ onHide() {
|
|
|
+ //在页面隐藏时也要清除定时器
|
|
|
+ if (this.timer) {
|
|
|
+ // console.log('清除定时器-' + this.timer)
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ //在页面卸载时清除定时器 避免出现多个定时器连续创建动画
|
|
|
+ // if (this.timer) {
|
|
|
+ // console.log('清除定时器-' + this.timer);
|
|
|
+ // clearInterval(this.timer);
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 分享
|
|
|
+ IndexShare() {
|
|
|
+ let obj = this;
|
|
|
+ // let money = obj.money;
|
|
|
+ let item = {
|
|
|
+ link: 'http://http://jz.red.igxys.com/index/#/pages/form/donaSuccess?money=' + obj.money, // 分享链接
|
|
|
+ imgUrl: 'http://http://jz.red.igxys.com/index/#/static/img/thinks.png',
|
|
|
+ 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: 100%;
|
|
|
- // background-image: url(../../static/images/thank.png);
|
|
|
- background-size: 100% 100%;
|
|
|
}
|
|
|
- // .thank {
|
|
|
- // width: 100%;
|
|
|
- // height: 100%;
|
|
|
- // image {
|
|
|
- // width: 100%;
|
|
|
- // height: 100%;
|
|
|
- // }
|
|
|
- // }
|
|
|
+ .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;
|
|
|
+ // 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>
|
2312970463@qq.com
