pay_code.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <template>
  2. <view class="container">
  3. <canvas canvas-id='myCanvas' class="myCanvas"
  4. :style="'height:'+windowHeight+'px'+';'+'width:'+windowWidth+'px'">
  5. </canvas>
  6. <image class="container_img" :src="imagePath" mode="aspectFit"></image>
  7. </view>
  8. </template>
  9. <script>
  10. // #ifdef H5
  11. import getWXSign from "@/static/js/config.js";
  12. // #endif
  13. export default {
  14. data() {
  15. return {
  16. pixelRatio: 0,
  17. windowWidth: 0,
  18. windowHeight: 0,
  19. paycode_img: "",
  20. showBgImagePath2: '../../static/images/wx_bg.png',
  21. showBgImagePath1: '../../static/images/pay_wx.png',
  22. URL: getApp().globalData.URL,
  23. imagePath: "",
  24. tempFilePath: ""
  25. }
  26. },
  27. onLoad(e) {
  28. this.paycode_img = decodeURI(e.paycode_img);
  29. uni.getSystemInfo({
  30. success: (res) => {
  31. console.log(res)
  32. this.pixelRatio = res.pixelRatio;
  33. this.windowWidth = res.windowWidth;
  34. this.windowHeight = res.windowHeight;
  35. }
  36. })
  37. },
  38. onReady(e) {
  39. uni.downloadFile({
  40. url: this.paycode_img, //仅为示例,并非真实的资源
  41. success: (res) => {
  42. if (res.statusCode === 200) {
  43. this.tempFilePath = res.tempFilePath;
  44. this.drawCanvas();
  45. }
  46. }
  47. });
  48. },
  49. onReachBottom(e) {
  50. },
  51. methods: {
  52. drawCanvas() {
  53. console.log("eeeeee")
  54. var that = this;
  55. let ctx = wx.createCanvasContext('myCanvas');
  56. // 画布宽高
  57. let ctxW = this.windowWidth;
  58. let ctxH = this.windowHeight;
  59. ctx.drawImage(this.showBgImagePath2, 0, 0, ctxW, ctxH);
  60. ctx.fillStyle = '#ffffff';
  61. ctx.fillRect(ctxW / 2 - 200 / 2, ctxH / 2 - 120, 200, 240);
  62. ctx.drawImage(this.tempFilePath, ctxW / 2 - 180 / 2, ctxH / 2 - 110, 180, 180);
  63. ctx.font = 'bold 20px Arial';
  64. ctx.textAlign = 'center';
  65. ctx.fillStyle = '#000000';
  66. var texTwidth = ctx.measureText('长按识别付款').width;
  67. ctx.fillText("长按识别付款", ctxW / 2, ctxH / 2 + 100);
  68. ctx.stroke();
  69. // ctx.draw();
  70. ctx.draw(false, () => {
  71. uni.canvasToTempFilePath({
  72. canvasId: 'myCanvas',
  73. success: (res) => {
  74. console.log(res, "myCanvas");
  75. that.imagePath = res.tempFilePath;
  76. // this.$wx.previewImage({
  77. // urls:['https://www.zchys.net/uploads/images/20220223/32dc33e3a4245788f1d6b9440d15a061.jpg'],
  78. // success: (res) => {
  79. // // 设置成功
  80. // console.log("设置成功", res)
  81. // }
  82. // })
  83. this.request({
  84. url: "funeng/addpicturce",
  85. data: {
  86. image: res.tempFilePath,
  87. },
  88. }).then(res => {
  89. console.log(res, "图片")
  90. var img = res.data;
  91. this.$wx.previewImage({
  92. urls: [URL + img],
  93. success: (res) => {
  94. // 设置成功
  95. console.log("设置成功", res)
  96. }
  97. })
  98. })
  99. }
  100. })
  101. })
  102. }
  103. },
  104. }
  105. </script>
  106. <style>
  107. page {
  108. width: 100%;
  109. height: 100%;
  110. }
  111. .container {
  112. width: 100%;
  113. height: 100%;
  114. }
  115. .container_img {
  116. width: 100%;
  117. height: 100%;
  118. }
  119. .myCanvas {
  120. position: fixed;
  121. bottom: 999px;
  122. }
  123. </style>