donaSuccess.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408
  1. <template>
  2. <view class="content">
  3. <view class="box">
  4. <view class="music" :style="{'z-index': -1}">
  5. <view class="player playing" :class="playing ? 'none' : 'keepgo'" @click.stop="play">
  6. <image src="../../static/img/music.png" style="width: 68rpx;height: 68rpx;" :animation="animationData"></image>
  7. </view>
  8. </view>
  9. <canvas v-if="showcanvas" id="qrShareBox" canvas-id="qrShareBox" class="tki-qrcode-canvas" />
  10. <image class="imgbox" v-else :src="img"></image>
  11. </view>
  12. <!-- <image class="image" src="../../static/img/thinks.png" mode=""></image> -->
  13. </view>
  14. </template>
  15. <script>
  16. import { weixindata } from '@/utils/wxAuthorized.js';
  17. export default {
  18. data() {
  19. return {
  20. money: '',
  21. url: '',
  22. img: '',
  23. showcanvas: true,
  24. loading: true, //是否载入图片中
  25. size: 115,
  26. ratio: 1, //页面比例用于计算
  27. canHeight: '',
  28. canWeidth: '',
  29. playing: true,
  30. current: {
  31. src: '../../static/audio/xx.mp3'
  32. },
  33. rotateIndex: '',
  34. animation: {},
  35. animationData: {},
  36. audioAction: {
  37. method: 'pause'
  38. },
  39. ran: -1,
  40. isStop: true,
  41. demo: 0,
  42. name: '',
  43. add_time: '',
  44. };
  45. },
  46. onReady() {
  47. let query = uni.createSelectorQuery();
  48. let obj = this;
  49. console.log(999, obj.money);
  50. // 获取页面比例
  51. query
  52. .select('.box')
  53. .fields(
  54. {
  55. size: true
  56. },
  57. e => {
  58. console.log('获取页面比例', e);
  59. // 保存比例
  60. this.ratio = e.width / 750;
  61. }
  62. )
  63. .exec();
  64. // 获取画布宽高信息
  65. query
  66. .select('#qrShareBox')
  67. .fields(
  68. {
  69. size: true
  70. },
  71. e => {
  72. console.log('获取画布宽高信息', e);
  73. obj.canHeight = e.height;
  74. obj.canWeidth = e.width;
  75. }
  76. )
  77. .exec();
  78. let ctxBg = '/static/img/think3.png'; //画布背景
  79. let src = '/static/icon/erweima1.jpg'; // 二维码
  80. let context = uni.createCanvasContext('qrShareBox');
  81. // 插入背景图片
  82. console.log('插入背景图片', ctxBg, 0, 0, obj.canWeidth, obj.canHeight);
  83. context.drawImage(ctxBg, 0, 0, obj.canWeidth, obj.canHeight);
  84. const codeSize = obj.size * obj.ratio; //计算二维码大小
  85. const codeX = ((750 - obj.size) * obj.ratio) / 2; //二维码所在x轴位置
  86. const codeY = 960 * obj.ratio; //二维码所在y轴位置
  87. const codeBoxColor = '#FFFFFF'; //包裹框颜色
  88. const codeBoxWidht = 0; //包裹边框宽度
  89. const codeBoxSize = (codeBoxWidht / 2) * obj.ratio; //计算二维码白色包裹框大小
  90. const codeBoxX = codeX - codeBoxSize; //包裹框初始X轴
  91. const codeBoxY = codeY - codeBoxSize; //包裹框初始Y轴
  92. const codeBoxEnd = codeSize + codeBoxWidht * obj.ratio; //计算包裹框大小
  93. const fontTop = codeY + codeBoxEnd + (codeBoxWidht + 20) * obj.ratio; //文字距离上边距高度
  94. const fontSize = 24 * obj.ratio; //文字大小
  95. const fontText = ''; //文字内容
  96. const fontLeft = (codeSize - fontSize * fontText.length) / 2 + codeX; //文字左侧距离
  97. // // 插入文字
  98. let binHeight = 370
  99. let lineHeigt = 55
  100. context.setFontSize(12);
  101. context.setFillStyle('#000');
  102. // context.font = 'normal 14px 微软雅黑'
  103. // context.fillText('感谢信', ((750 - obj.size) * obj.ratio) / 2, 260 * obj.ratio)
  104. // context.setFontSize(30 * obj.ratio);
  105. // context.moveTo(80 * obj.ratio, binHeight * obj.ratio);
  106. // context.lineTo(450 * obj.ratio, binHeight * obj.ratio);
  107. // context.stroke();
  108. context.setTextAlign('center')
  109. context.fillText( this.name.length <=10 ?this.name: this.name.substring(0,10) + '...', 265 * obj.ratio, (binHeight - 20) * obj.ratio);
  110. // context.fillText( ':', 450 * obj.ratio, (binHeight - 20) * obj.ratio);
  111. context.fillText( this.money +' 元', ((350 + 630)/2)* obj.ratio, (binHeight + lineHeigt * 2 - 10) * obj.ratio);
  112. //intention
  113. context.fillText( this.intention , ((180 + 630)/2)* obj.ratio, (binHeight + lineHeigt * 3 -5) * obj.ratio);
  114. //感谢您发扬“人道、博爱、奉献”的
  115. context.setTextAlign('left')
  116. // context.fillText( '感谢您发扬“人道、博爱、奉献”的', 160 * obj.ratio, (binHeight + lineHeigt) * obj.ratio);
  117. // context.fillText( '红十字精神,捐赠', 95* obj.ratio, (binHeight + lineHeigt * 2) * obj.ratio);
  118. // context.moveTo(350 * obj.ratio, (binHeight + lineHeigt *2 + 10) * obj.ratio);
  119. // context.lineTo(630* obj.ratio, (binHeight + lineHeigt *2 + 10) * obj.ratio);
  120. // context.stroke();
  121. context.fillText( ',', 635 * obj.ratio, (binHeight + lineHeigt * 2) * obj.ratio);
  122. // context.fillText( '用于', 95 * obj.ratio, (binHeight + lineHeigt * 3) * obj.ratio);
  123. // context.moveTo(180 * obj.ratio, (binHeight + lineHeigt * 3 + 10) * obj.ratio);
  124. // context.lineTo(630* obj.ratio, (binHeight + lineHeigt * 3 + 10 ) * obj.ratio);
  125. // context.stroke();
  126. // context.fillText( ',', 635 * obj.ratio, (binHeight + lineHeigt * 3) * obj.ratio);
  127. // context.fillText( '我们将遵照您的意愿使用。', 95 * obj.ratio, (binHeight + lineHeigt * 4) * obj.ratio);
  128. // context.fillText( '对您崇高的人道主义精神谨表诚挚的', 160 * obj.ratio, (binHeight + lineHeigt * 5) * obj.ratio);
  129. // context.fillText( '敬意!', 95 * obj.ratio, (binHeight + lineHeigt * 6) * obj.ratio);
  130. context.setTextAlign('right')
  131. // context.fillText('黄石市红十字会', 645 * obj.ratio, 800 * obj.ratio);
  132. context.fillText(obj.add_time, 645 * obj.ratio, (800 + lineHeigt - 10) * obj.ratio);
  133. context.drawImage(src, 108* obj.ratio , 715* obj.ratio, codeSize, codeSize);
  134. // context.fillText('衷心感谢您对孝感市红十字事业的信任与支', 120 * obj.ratio, 410 * obj.ratio);
  135. // context.fillText('持!我们已收到您的捐款', 60 * obj.ratio, 465 * obj.ratio);
  136. // // 画横线
  137. // context.moveTo(380 * obj.ratio, 470 * obj.ratio);
  138. // context.lineTo(540 * obj.ratio, 470 * obj.ratio);
  139. // context.stroke();
  140. // context.setTextAlign('center')
  141. // context.fillText('¥' + obj.money, 460 * obj.ratio, 465 * obj.ratio);
  142. // context.setTextAlign('left')
  143. // context.fillText('元。我们承', 540 * obj.ratio, 465 * obj.ratio);
  144. // context.fillText('诺绝不辜负大家的信任,遵照您的意愿,将捐款', 60 * obj.ratio, 520 * obj.ratio);
  145. // context.fillText('全部用于相关救助项目。您的善举将给受助人带', 60 * obj.ratio, 575 * obj.ratio);
  146. // context.fillText('去温暖!', 60 * obj.ratio, 630 * obj.ratio);
  147. // context.fillText('爱心无界,情义无价。谨以此信表达谢意,', 120 * obj.ratio, 680 * obj.ratio);
  148. // context.fillText('我们因您更有力量,因您倍感温暖!', 60 * obj.ratio, 735 * obj.ratio);
  149. // context.fillText('谨表谢意', (580 * obj.ratio), 680 * obj.ratio)
  150. // context.setTextAlign('right')
  151. // context.fillText('孝感市红十字会', 450 * obj.ratio, 850 * obj.ratio);
  152. // context.fillText(obj.add_time, 450 * obj.ratio, 910 * obj.ratio);
  153. // 插入二维码
  154. // console.log(codeX, codeY, codeSize, 999)
  155. // 生成
  156. context.draw(false, e => {
  157. uni.canvasToTempFilePath({
  158. x: 0,
  159. y: 0,
  160. width: obj.canWeidth,
  161. height: obj.canHeight,
  162. destWidth: obj.canWeidth,
  163. destHeight: obj.canHeight,
  164. canvasId: 'qrShareBox',
  165. success: function(res) {
  166. console.log(333, res);
  167. // 在H5平台下,tempFilePath 为 base64
  168. obj.showcanvas = false;
  169. obj.img = res.tempFilePath;
  170. }
  171. });
  172. });
  173. },
  174. onShow() {
  175. var animation = uni.createAnimation();
  176. this.animation = animation;
  177. if (this.isStop) {
  178. // 使用动画
  179. this.scaleAndScale();
  180. this.timer = setInterval(() => {
  181. //创建定时器,3秒执行异一次
  182. this.scaleAndScale();
  183. // console.log('每三秒执行一次 , 达到往复运动的效果')
  184. }, 1000);
  185. } else {
  186. this.noscaleAndScale();
  187. }
  188. },
  189. onLoad(option) {
  190. console.log(333, option);
  191. this.money = option.money || 0;
  192. this.name = decodeURI(option.name) || '佚名'
  193. this.add_time =decodeURI(option.time)
  194. this.intention =decodeURI(option.intention)
  195. this.IndexShare();
  196. this.ScanAudio(true);
  197. },
  198. onHide() {
  199. //在页面隐藏时也要清除定时器
  200. if (this.timer) {
  201. // console.log('清除定时器-' + this.timer)
  202. clearInterval(this.timer);
  203. }
  204. },
  205. onUnload() {
  206. //在页面卸载时清除定时器 避免出现多个定时器连续创建动画
  207. if (this.timer) {
  208. console.log('清除定时器-' + this.timer);
  209. clearInterval(this.timer);
  210. }
  211. },
  212. methods: {
  213. // 分享
  214. IndexShare() {
  215. let obj = this;
  216. // let money = obj.money;
  217. let item = {
  218. link: 'http://hss.igxys.com/index/pages/form/donaSuccess?money=' + obj.money + '&name=' + encodeURI(obj.name) + '&time=' + encodeURI(obj.add_time) + '&intention=' + encodeURI(obj.intention),
  219. imgUrl: 'http://hss.igxys.com/index/static/img/002.png',
  220. desc: '弘扬红十字精神,传播红十字观念,宣传红十字工作,这是一个汇聚爱心、救助之家力量的平台!',
  221. title: '来自黄石市红十字会的感谢信',
  222. };
  223. console.log('分享加', item);
  224. weixindata(item);
  225. },
  226. musicClick() {
  227. // if (this.isRoate) {
  228. // this.isRoate = false
  229. // this.stopScanAudio()
  230. // } else {
  231. // this.isRoate = true
  232. // this.ScanAudio()
  233. // }
  234. },
  235. play() {
  236. this.playing = !this.playing;
  237. this.ScanAudio(this.playing);
  238. if (this.playing == true) {
  239. this.timer = setInterval(() => {
  240. //创建定时器,3秒执行异一次
  241. this.scaleAndScale();
  242. console.log('每1秒执行一次');
  243. }, 1000);
  244. } else {
  245. clearInterval(this.timer);
  246. }
  247. // var music = uni.createInnerAudioContext();
  248. // music.src= "../../static/audio/xx.mp3"; //选择播放的音频
  249. // music.onPause(); //暂停播放
  250. // console.log('暂停播放')
  251. // console.log('dianjizanting')
  252. // this.stopAudio()
  253. // this.playing = !this.playing; //背景音乐点击,暂停或继续
  254. },
  255. // 定义动画内容
  256. scaleAndScale() {
  257. // 定义动画内容
  258. // this.animation.scale(1.2, 1.2).step() //先放大1,2倍
  259. // this.animation.scale(1, 1).step() //缩小至原来的大小
  260. // 导出动画数据传递给data层
  261. // this.animationData = this.animation.export(); //每次执行导出动画时 会覆盖之前的动画
  262. this.animation.rotate(this.demo).step({
  263. duration: 1000
  264. });
  265. this.animationData = this.animation.export();
  266. this.demo += 360;
  267. },
  268. noscaleAndScale() {
  269. this.animation.rotate(0).step({
  270. duration: 1000
  271. });
  272. this.animationData = this.animation.export();
  273. }
  274. // ScanAudio(){
  275. // this.$api.music.play(); //执行播放
  276. // console.log('执行播放')
  277. // }
  278. }
  279. };
  280. </script>
  281. <style lang="scss">
  282. page {
  283. width: 100%;
  284. height: 100%;
  285. }
  286. .content {
  287. // background-color: pink;
  288. width: 100%;
  289. height: 100%;
  290. position: relative;
  291. .bgimg {
  292. width: 100%;
  293. height: 100%;
  294. // background-color: pink;
  295. image {
  296. width: 100%;
  297. height: 100%;
  298. }
  299. }
  300. .tki-qrcode-canvas {
  301. width: 750rpx;
  302. height: 954rpx;
  303. margin: 0 auto;
  304. // background-color: pink;
  305. }
  306. .box {
  307. // position: absolute;
  308. // left: 0;
  309. // top: 0;
  310. // background-color: pink;
  311. // width: 100%;
  312. // height: 100%;
  313. // display: flex;
  314. // flex-direction: column;
  315. // align-items: center;
  316. // color: #FFFFFF;
  317. // padding: 0rpx 32rpx 0 32rpx;
  318. color: #ffffff;
  319. width: 100%;
  320. height: 100vh;
  321. // background-color: pink;
  322. .music {
  323. // width: 55rpx;
  324. // height: 55rpx;
  325. border-radius: 28rpx;
  326. // background-color: pink;
  327. position: absolute;
  328. left: 40rpx;
  329. top: 100rpx;
  330. z-index: 999;
  331. }
  332. // .title {
  333. // margin-top: 234rpx;
  334. // font-size: 54rpx;
  335. // }
  336. // .main {
  337. // margin-top: 20rpx;
  338. // font-size: 32rpx;
  339. // .box-2 {
  340. // text-indent: 68rpx;
  341. // margin-top: 12rpx;
  342. // }
  343. // }
  344. // .footer {
  345. // margin-top: 32rpx;
  346. // // background-color: pink;
  347. // width: 100%;
  348. // .box-1 {
  349. // display: flex;
  350. // justify-content: flex-end;
  351. // font-size: 28rpx;
  352. // // padding-right: 14rpx;
  353. // }
  354. // }
  355. }
  356. // .playing {
  357. // animation: run 10s linear 0s infinite;
  358. // }
  359. // .player {
  360. // width: 65rpx;
  361. // height: 65rpx;
  362. // border-radius: 50%;
  363. // background-color: rgba(0, 0, 0, 0.1);
  364. // z-index: 999999;
  365. // }
  366. .keepgo {
  367. animation-play-state: paused;
  368. }
  369. .imgbox {
  370. height: 1067rpx;
  371. width: 750rpx;
  372. }
  373. }
  374. .image {
  375. width: 100%;
  376. height: 100%;
  377. }
  378. canvas {
  379. letter-spacing: 2px;
  380. }
  381. </style>