123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378 |
- <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.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;
- 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(38* obj.ratio);
- context.setFillStyle('#000');
-
- 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);
-
- 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) {
-
- 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() {
-
-
-
-
-
-
-
- },
- 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%;
-
- position: relative;
-
- .image {
- width: 100%;
- height: 100vh;
- }
- .bgimg {
- width: 100%;
- height: 100%;
-
- image {
- width: 100%;
- height: 100%;
- }
- }
-
-
-
-
-
-
- .box {
- color: #ffffff;
- width: 100%;
- height: 100vh;
- .tki-qrcode-canvas {
-
-
- width: 750rpx;
-
- height: 1350rpx;
- margin: 0 auto;
- }
-
-
-
-
-
-
-
-
-
-
-
- }
- .imgbox {
- height: 1334rpx;
- width: 750rpx;
- }
- }
- .image {
- width: 100%;
- height: 100%;
- }
- </style>
|