|
@@ -0,0 +1,366 @@
|
|
|
|
+<template>
|
|
|
|
+ <view class="content">
|
|
|
|
+ <view class="box">
|
|
|
|
+ <!-- <view class="music">
|
|
|
|
+ <view class="player playing" :class="playing ? 'none' : 'keepgo'" @click.stop="play">
|
|
|
|
+ <image src="../../static/img/music.png" style="width: 68rpx;height: 68rpx;" :animation="animationData"></image>
|
|
|
|
+ </view>
|
|
|
|
+ </view> -->
|
|
|
|
+ <canvas v-if="showcanvas" id="qrShareBox" canvas-id="qrShareBox" class="tki-qrcode-canvas" />
|
|
|
|
+ <image class="imgbox" v-else :src="img"></image>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- <image class="image" src="../../static/img/thinks.png" mode=""></image> -->
|
|
|
|
+ </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,
|
|
|
|
+ name: '',
|
|
|
|
+ add_time: '',
|
|
|
|
+ title:'',
|
|
|
|
+ order_name:''
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ 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.canWeidth = e.width;
|
|
|
|
+ }
|
|
|
|
+ )
|
|
|
|
+ .exec();
|
|
|
|
+ let ctxBg = '/static/index/thanks2.png'; //画布背景
|
|
|
|
+ let src = '/static/icon/erweima.jpg'; // 二维码
|
|
|
|
+ let src1 = '/static/icon/gongzhang.png' //公章
|
|
|
|
+
|
|
|
|
+ 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; //文字左侧距离
|
|
|
|
+
|
|
|
|
+ const tl = 130 * obj.ratio;
|
|
|
|
+ const tlh = 60 * obj.ratio;
|
|
|
|
+ const tb = 400 * obj.ratio;
|
|
|
|
+ const tbw = 60 * obj.ratio;
|
|
|
|
+
|
|
|
|
+ // // 插入文字
|
|
|
|
+ context.setFontSize(28);
|
|
|
|
+ context.setFillStyle('#000000');
|
|
|
|
+ // context.fillText('捐赠证书', ((750 - obj.size) * obj.ratio) / 2, 260 * obj.ratio)
|
|
|
|
+ context.setFontSize(30 * obj.ratio);
|
|
|
|
+ context.fillText('尊敬的' + this.name + ':', tl, tb);
|
|
|
|
+ context.fillText('您好!', tl, tb + tlh);
|
|
|
|
+ //十字精
|
|
|
|
+ context.fillText('感谢您发扬“人道、博爱、奉献”', tl + tbw, tb + tlh * 2);
|
|
|
|
+ context.fillText('的红十字精神,捐赠人民币', tl, tb + tlh * 3);
|
|
|
|
+ let h1 = context.measureText('的红十字精,捐赠人民币').width;
|
|
|
|
+ let h2 = context.measureText('感谢您发扬“人道、博爱、奉献').width;
|
|
|
|
+ context.fillText('元', h2 + tl + tbw, tb + tlh * 3);
|
|
|
|
+ context.setTextAlign('center')
|
|
|
|
+ context.fillText((obj.money*1).toFixed(2), (tl * 2 + tbw + h1 + h2 + 10) / 2, tb + tlh * 3);
|
|
|
|
+ context.moveTo(tl + h1 + 20, tb + tlh * 3 + 8);
|
|
|
|
+ context.lineTo(tl + tbw + h2 - 10, tb + tlh * 3 + 8);
|
|
|
|
+ context.stroke();
|
|
|
|
+ context.setTextAlign('left')
|
|
|
|
+ let yyl = context.measureText('用于').width;
|
|
|
|
+ let storeName = obj.order_name;
|
|
|
|
+ let str = '用于“'+storeName+'”爱心月捐项目,我们将遵照您的意愿使用。';
|
|
|
|
+ let arr = obj.splitStringByCount(str, 17);
|
|
|
|
+ for(let i =0; i< arr.length;i++) {
|
|
|
|
+ context.fillText(arr[i], tl, tb + tlh * (4 + i));
|
|
|
|
+ }
|
|
|
|
+ let sl = context.measureText(arr[0]).width;
|
|
|
|
+ context.setTextAlign('right')
|
|
|
|
+ // context.drawImage(src1, sl + tl-codeSize, tb + tlh*(6 + arr.length)-codeSize/2, codeSize, codeSize);
|
|
|
|
+ context.fillText(obj.$store.state.baseName, sl + tl, tb + tlh*(5 + arr.length));
|
|
|
|
+ context.fillText(obj.add_time, sl + tl, tb + tlh*(6 + arr.length));
|
|
|
|
+ context.setTextAlign('left')
|
|
|
|
+ // context.fillText('此致敬礼', tl, tb + tlh*(6 + arr.length));
|
|
|
|
+ //感谢您发扬“人道、博爱、奉献”的红十字精
|
|
|
|
+ // context.fillText('衷心感谢您对咸宁市红十字事业的信任与支', 120 * obj.ratio, 410 * obj.ratio);
|
|
|
|
+ // context.fillText('持!我们已收到您的捐款', 60 * obj.ratio, 465 * obj.ratio);
|
|
|
|
+ // // 画横线
|
|
|
|
+ // context.moveTo(380 * obj.ratio, 470 * obj.ratio);
|
|
|
|
+ // context.lineTo(540 * obj.ratio, 470 * obj.ratio);
|
|
|
|
+ // context.stroke();
|
|
|
|
+ // context.setTextAlign('center')
|
|
|
|
+ // context.fillText('¥' + obj.money, 460 * obj.ratio, 465 * obj.ratio);
|
|
|
|
+ // context.setTextAlign('left')
|
|
|
|
+ // context.fillText('元。我们承', 540 * obj.ratio, 465 * obj.ratio);
|
|
|
|
+ // context.fillText('诺绝不辜负大家的信任,遵照您的意愿,将捐款', 60 * obj.ratio, 520 * obj.ratio);
|
|
|
|
+ // context.fillText('全部用于相关救助项目。您的善举将给受助人带', 60 * obj.ratio, 575 * obj.ratio);
|
|
|
|
+ // context.fillText('去温暖!', 60 * obj.ratio, 630 * obj.ratio);
|
|
|
|
+ // context.fillText('爱心无界,情义无价。授以此证书,我们因', 120 * obj.ratio, 680 * obj.ratio);
|
|
|
|
+
|
|
|
|
+ // context.fillText('您更有力量,因您倍感温暖!', 60 * obj.ratio, 735 * obj.ratio);
|
|
|
|
+ // // context.fillText('谨表谢意', (580 * obj.ratio), 680 * obj.ratio)
|
|
|
|
+
|
|
|
|
+ // 插入二维码
|
|
|
|
+ // context.drawImage(src, codeX, codeY, 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);
|
|
|
|
+ // try{
|
|
|
|
+ // this.title = decodeURI(option.title)||'';
|
|
|
|
+ // }catch(e){
|
|
|
|
+ // //TODO handle the exception
|
|
|
|
+ // }
|
|
|
|
+ if(option.order_name) {
|
|
|
|
+ this.order_name = decodeURI(option.order_name);
|
|
|
|
+ }
|
|
|
|
+ this.money = option.money;
|
|
|
|
+ this.name = decodeURI(option.name) || '佚名';
|
|
|
|
+ this.add_time = decodeURI(option.time);
|
|
|
|
+ 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: {
|
|
|
|
+ splitStringByCount(str, count) {
|
|
|
|
+ var result = [];
|
|
|
|
+ for (var i = 0; i < str.length; i += count) {
|
|
|
|
+ result.push(str.substring(i, i + count));
|
|
|
|
+ }
|
|
|
|
+ return result;
|
|
|
|
+ },
|
|
|
|
+ // 分享
|
|
|
|
+ IndexShare() {
|
|
|
|
+ let obj = this;
|
|
|
|
+ // let money = obj.money;
|
|
|
|
+ let item = {
|
|
|
|
+ link: this.$store.state.baseURL + '/index/#/pages/index/thank?money=' + obj.money + '&name=' +
|
|
|
|
+ encodeURI(obj.name) + '&time=' + encodeURI(obj.add_time) + '&order_name=' + encodeURI(obj.order_name), // 分享链接
|
|
|
|
+ imgUrl: this.$store.state.baseURL + '/index/static/img/002.png',
|
|
|
|
+ desc: '弘扬红十字精神,传播红十字观念,宣传红十字工作,这是一个汇聚爱心、救助之家力量的平台!',
|
|
|
|
+ title: '来自' + this.$store.state.baseName + '的感谢信',
|
|
|
|
+ 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: 100%;
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ .bgimg {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+
|
|
|
|
+ // background-color: pink;
|
|
|
|
+ image {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .tki-qrcode-canvas {
|
|
|
|
+ width: 750rpx;
|
|
|
|
+ height: 1469rpx;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ // background-color: pink;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .box {
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ width: 100%;
|
|
|
|
+
|
|
|
|
+ .music {
|
|
|
|
+ border-radius: 28rpx;
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 40rpx;
|
|
|
|
+ top: 100rpx;
|
|
|
|
+ z-index: 999;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .keepgo {
|
|
|
|
+ animation-play-state: paused;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .imgbox {
|
|
|
|
+ height: 1350rpx;
|
|
|
|
+ width: 750rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .image {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+</style>
|