|
|
@@ -1,11 +1,9 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
- <view class="box">
|
|
|
+ <image class="image" src="../../static/img/jks.png" mode="widthFix" style="width: 750rpx;"></image>
|
|
|
+ <view class="btn" @click="navto('/pages/applic/contribution')">
|
|
|
|
|
|
- <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>
|
|
|
|
|
|
@@ -16,251 +14,27 @@
|
|
|
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: '',
|
|
|
|
|
|
};
|
|
|
- },
|
|
|
- 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/img/jk.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(24 * obj.ratio);
|
|
|
- context.setFillStyle('#000');
|
|
|
- // context.fillText('感谢信', ((750 - obj.size) * obj.ratio) / 2, 260 * obj.ratio)
|
|
|
- // context.setFontSize(30 * obj.ratio);
|
|
|
- // context.fillText('开户名:', 250 * obj.ratio, 500* obj.ratio);
|
|
|
- // context.fillText('上海市长宁区红十字会人道救助基金专户', 250 * obj.ratio, 500* obj.ratio);
|
|
|
-
|
|
|
- // context.fillText('0215014400000562', 250 * obj.ratio, 538* obj.ratio);
|
|
|
- // context.fillText('民生银行长宁支行', 250 * obj.ratio, 576* obj.ratio);
|
|
|
- // context.fillText('许 飚', 250 * obj.ratio, 768* obj.ratio);
|
|
|
-
|
|
|
- // context.fillText('021-52064116', 250 * obj.ratio, 806* obj.ratio);
|
|
|
-
|
|
|
- // context.fillText('上海市长宁路895号2楼210室', 250 * obj.ratio, 844* obj.ratio);
|
|
|
- // 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.setTextAlign('right')
|
|
|
- // context.fillText('上海市长宁区红十字会', 385* obj.ratio, 850 * obj.ratio);
|
|
|
- // context.fillText(obj.add_time, 455 * obj.ratio, 910 * obj.ratio);
|
|
|
- // 插入二维码
|
|
|
- // console.log(codeX, codeY, codeSize, 999)
|
|
|
- // 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);
|
|
|
- // 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: {
|
|
|
- // 分享
|
|
|
- IndexShare() {
|
|
|
- let obj = this;
|
|
|
- // let money = obj.money;
|
|
|
- // let item = {
|
|
|
- // link: obj.$store.state.baseURL + '/index/#/pages/form/donaSuccess?money=' + obj.money + '&name=' +
|
|
|
- // encodeURI(obj.name) + '&time=' + encodeURI(obj.add_time), // 分享链接
|
|
|
- // imgUrl: obj.$store.state.baseURL + '/index/static/img/002.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('执行播放')
|
|
|
- // }
|
|
|
+ navto(url) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
@@ -270,113 +44,20 @@
|
|
|
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: 1350rpx;
|
|
|
- margin: 0 auto;
|
|
|
- // background-color: pink;
|
|
|
- }
|
|
|
-
|
|
|
- .box {
|
|
|
- // position: absolute;
|
|
|
- // left: 0;
|
|
|
- // top: 0;
|
|
|
- // background-color: pink;
|
|
|
- // width: 100%;
|
|
|
- // height: 100%;
|
|
|
- // display: flex;
|
|
|
- // flex-direction: column;
|
|
|
- // align-items: center;
|
|
|
- // color: #FFFFFF;
|
|
|
- // padding: 0rpx 32rpx 0 32rpx;
|
|
|
- color: #ffffff;
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- // background-color: pink;
|
|
|
-
|
|
|
- .music {
|
|
|
- // width: 55rpx;
|
|
|
- // height: 55rpx;
|
|
|
- border-radius: 28rpx;
|
|
|
- // background-color: pink;
|
|
|
- position: absolute;
|
|
|
- left: 40rpx;
|
|
|
- top: 100rpx;
|
|
|
- z-index: 999;
|
|
|
- }
|
|
|
-
|
|
|
- // .title {
|
|
|
- // margin-top: 234rpx;
|
|
|
- // font-size: 54rpx;
|
|
|
- // }
|
|
|
-
|
|
|
- // .main {
|
|
|
- // margin-top: 20rpx;
|
|
|
- // font-size: 32rpx;
|
|
|
-
|
|
|
- // .box-2 {
|
|
|
- // text-indent: 68rpx;
|
|
|
- // margin-top: 12rpx;
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
- // .footer {
|
|
|
- // margin-top: 32rpx;
|
|
|
- // // background-color: pink;
|
|
|
- // width: 100%;
|
|
|
-
|
|
|
- // .box-1 {
|
|
|
- // display: flex;
|
|
|
- // justify-content: flex-end;
|
|
|
- // font-size: 28rpx;
|
|
|
- // // padding-right: 14rpx;
|
|
|
- // }
|
|
|
- // }
|
|
|
- }
|
|
|
-
|
|
|
- // .playing {
|
|
|
- // animation: run 10s linear 0s infinite;
|
|
|
- // }
|
|
|
-
|
|
|
- // .player {
|
|
|
-
|
|
|
- // width: 65rpx;
|
|
|
- // height: 65rpx;
|
|
|
- // border-radius: 50%;
|
|
|
- // background-color: rgba(0, 0, 0, 0.1);
|
|
|
- // z-index: 999999;
|
|
|
- // }
|
|
|
-
|
|
|
- .keepgo {
|
|
|
- animation-play-state: paused;
|
|
|
- }
|
|
|
-
|
|
|
- .imgbox {
|
|
|
- height: 1784rpx;
|
|
|
- width: 750rpx;
|
|
|
- }
|
|
|
+ // top: ;
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
- .image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ .btn {
|
|
|
+ position: absolute;
|
|
|
+ width: 156rpx;
|
|
|
+ height: 153rpx;
|
|
|
+ top: 766rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ border-radius: 50%;
|
|
|
}
|
|
|
+
|
|
|
</style>
|
