poster_special.html 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <!-- +---------------------------------------------------------------------- -->
  2. <!-- | CRMEB [ CRMEB赋能开发者,助力企业发展 ] -->
  3. <!-- +---------------------------------------------------------------------- -->
  4. <!-- | Copyright (c) 2016~2022 https://www.crmeb.com All rights reserved. -->
  5. <!-- +---------------------------------------------------------------------- -->
  6. <!-- | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权 -->
  7. <!-- +---------------------------------------------------------------------- -->
  8. <!-- | Author: CRMEB Team <admin@crmeb.com> -->
  9. <!-- +---------------------------------------------------------------------- -->
  10. {extend name="public/container"}
  11. {block name="title"}推广海报{/block}
  12. {block name="head"}
  13. <style>
  14. body {
  15. background-color: rgba(0, 0, 0, .6);
  16. font-size: .24rem;
  17. text-align: center;
  18. color: #cecece;
  19. }
  20. .poster {
  21. width: 6rem;
  22. margin-top: .76rem;
  23. margin-bottom: .5rem;
  24. vertical-align: middle;
  25. }
  26. </style>
  27. {/block}
  28. {block name="content"}
  29. <div v-cloak id="app">
  30. <img :src="imgSrc" class="poster">
  31. <div v-show="imgSrc">长按图片,保存至手机</div>
  32. <quick-menu></quick-menu>
  33. </div>
  34. <script>
  35. require([
  36. 'vue',
  37. 'helper',
  38. 'quick',
  39. 'qrcode'
  40. ], function (Vue, $h) {
  41. var url = "{$url}",
  42. poster = "{$poster_image}",
  43. site_name = '{$Auth_site_name}',
  44. vm = new Vue({
  45. el: '#app',
  46. data: {
  47. loading: false,
  48. imgSrc: ''
  49. },
  50. watch: {
  51. loading: function (loading) {
  52. loading ? $h.loadFFF() : $h.loadClear();
  53. }
  54. },
  55. created: function () {
  56. this.createPoster();
  57. },
  58. methods: {
  59. createPoster: function () {
  60. this.loading = true;
  61. var imagePromise = new Promise(function (resolve, reject) {
  62. var image = new Image();
  63. image.crossOrigin = 'anonymous';
  64. image.src = poster + '?' + new Date().getTime();
  65. image.onload = function () {
  66. resolve(image);
  67. },
  68. image.onerror = function () {
  69. reject('error-image');
  70. };
  71. }),
  72. qrcodePromise = new Promise(function (resolve, reject) {
  73. resolve(new QRCode(document.createElement('canvas'), url));
  74. });
  75. Promise.all([
  76. imagePromise,
  77. qrcodePromise
  78. ]).then(function (sources) {
  79. var canvas = document.createElement('canvas'),
  80. context = canvas.getContext('2d');
  81. canvas.width = 600;
  82. canvas.height = 960;
  83. context.fillStyle = '#FFFFFF';
  84. context.fillRect(0, 0, 600, 960);
  85. context.drawImage(sources[0], 0, 0, 600, 740);
  86. context.drawImage(sources[1]._el.firstElementChild, 108, 775, 150, 150);
  87. context.font = '22px sans-serif';
  88. context.fillStyle = '#999999';
  89. context.textBaseline = 'top';
  90. var text = '邀您加入' + site_name;
  91. var list = [];
  92. var start = 0;
  93. for (var i = 0; i <= text.length; i++) {
  94. if (context.measureText(text.slice(start, i)).width > 198) {
  95. list.push(text.slice(start, i - 1));
  96. start = i - 1;
  97. }
  98. }
  99. if (start !== text.length) {
  100. list.push(text.slice(start));
  101. }
  102. if (list.length > 3) {
  103. list.length = 3;
  104. for (var j = 0; j <= list[2].length; j++) {
  105. if (context.measureText(list[2].slice(0, j) + '……').width > 198) {
  106. list[2] = list[2].slice(0, j - 1) + '……';
  107. break;
  108. }
  109. }
  110. }
  111. list.push('长按识别或扫码进入');
  112. for (var k = 0; k < list.length; k++) {
  113. context.fillText(list[k], 294, 775 + (150 / list.length) * k);
  114. }
  115. vm.imgSrc = canvas.toDataURL('image/jpeg');
  116. vm.loading = false;
  117. canvas = null;
  118. }).catch(function (err) {
  119. vm.loading = false;
  120. $h.pushMsg(err);
  121. });
  122. }
  123. }
  124. });
  125. });
  126. </script>
  127. {/block}