123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312 |
- <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: '六牛云'
- };
- },
- 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/yxs.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;
- const codeY = 960 * obj.ratio;
- const codeBoxColor = '#FFFFFF';
- const codeBoxWidht = 0;
- const codeBoxSize = (codeBoxWidht / 2) * obj.ratio;
- const codeBoxX = codeX - codeBoxSize;
- const codeBoxY = codeY - codeBoxSize;
- 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(28);
- context.setFillStyle('#2C2E35');
-
- context.setFontSize(30 * obj.ratio);
- context.fillText('尊敬的 ' + obj.userName + '' + ' 先生(女士)', 95 * obj.ratio, 480 * obj.ratio);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- context.fillText('识别右边二维码', 108 * obj.ratio, 1090 * obj.ratio);
- context.fillText('关注咸宁市红十字会', 108 * obj.ratio, 1150 * obj.ratio);
-
-
- context.drawImage(src, 490 * obj.ratio, 1000 * 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);
-
- obj.showcanvas = false;
- obj.img = res.tempFilePath;
- }
- });
- });
- },
- onShow() {
-
-
-
-
-
-
-
-
-
-
-
-
-
- },
- onLoad(option) {
-
-
-
-
- },
- onHide() {
-
- if (this.timer) {
-
- clearInterval(this.timer);
- }
- },
- onUnload() {
-
-
-
-
-
- },
- methods: {
-
- IndexShare() {
- let obj = this;
-
- let item = {
- link: 'http://slj.igxys.com/index/#/pages/form/donaSuccess?money=' + obj.money,
- imgUrl: 'http://slj.igxys.com/index/#/static/img/thinks.png',
- desc: '感谢信',
- title: '咸宁市红十字会',
- success: console.log('分享加载成功')
- };
- console.log('分享加', item);
- weixindata(item);
- },
- musicClick() {
-
-
-
-
-
-
-
- },
- play() {
- this.playing = !this.playing;
- this.ScanAudio(this.playing);
- if (this.playing == true) {
- this.timer = setInterval(() => {
-
- this.scaleAndScale();
- console.log('每1秒执行一次');
- }, 1000);
- } else {
- clearInterval(this.timer);
- }
-
-
-
-
-
-
-
- },
-
- scaleAndScale() {
-
-
-
-
-
- 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();
- }
-
-
-
-
- }
- };
- </script>
- <style lang="scss">
- page {
- width: 100%;
- height: 100%;
- }
- .content {
-
- width: 100%;
- height: 100vh;
- position: relative;
- overflow: hidden;
- .image {
- width: 100%;
- height: 100%;
- }
- .bgimg {
- width: 100%;
- height: 100%;
-
- image {
- width: 100%;
- height: 100%;
- }
- }
- .tki-qrcode-canvas {
- width: 750rpx;
- height: 100vh;
- margin: 0 auto;
-
- }
- .box {
- color: #ffffff;
- width: 100%;
- height: 100vh;
-
-
-
-
-
-
-
-
-
-
-
- }
- .imgbox {
- height: 1204rpx;
- width: 750rpx;
- }
- }
- .image {
- width: 100%;
- height: 100%;
- }
- </style>
|