html部分
当点击他的时候触发弹窗
1. <div class="tuand_Text"> 2. <div class="text_OBJ"> 3. <div><img src="../assets/grzx.png" alt=""></div> 4. <div class="wode_Td">推广二维码</div> 5. </div> 6. 7. <div class="tupian_Img"> 8. <img src="../assets/yjt.png" alt="" @click="er_Wm()"> 9. </div> 10. </div>
触发代码如下 用于渲染二维码的html样式
1. <!-- 推广二维码 --> 2. <!-- style="display: none;" --> 3. <div class="xians" v-if="tg_erwm" @click="mmmm"> 4. <div class="cha_Hao" @click="ha_Cwu()"> <svg t="1679499524000" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15350" width="32" height="32"><path d="M874.020877 874.019125c-199.931835 199.974501-524.106414 199.974501-724.038249 0-199.974501-199.931835-199.974501-524.106414 0-724.03825 199.931835-199.974501 524.106414-199.974501 724.038249 0 199.974501 199.931835 199.974501 524.106414 0 724.03825zM813.691467 210.310285C647.081605 43.700423 376.9219 43.700423 210.312037 210.310285 43.702175 376.920147 43.702175 647.079853 210.312037 813.689715c166.609862 166.609862 436.769567 166.609862 603.37943 0 166.609862-166.609862 166.609862-436.769567 0-603.37943zM726.951941 719.398346l-7.551843 7.551843a37.28989 37.28989 0 0 1-52.777567 0l-154.620779-154.620779-150.86619 150.86619a42.665778 42.665778 0 0 1-60.32941-60.372075l150.86619-150.823525-154.620778-154.620779a37.28989 37.28989 0 0 1 0-52.777567l7.551842-7.551843a37.28989 37.28989 0 0 1 52.777567 0l154.620779 154.620779 150.866191-150.86619a42.665778 42.665778 0 0 1 60.329409 60.32941l-150.86619 150.86619 154.620779 154.620779a37.28989 37.28989 0 0 1 0 52.777567z" fill="#68A5F7" p-id="15351"></path></svg> </div> 5. <div class="img_Ages"> 6. <canvas id="canvas"></canvas> 7. <!-- <img src="../assets/tome.jpg" alt="" class="err" id="err" style="width: 80%;height: 80vh;"> --> 8. </div> 9. </div>
js部分
将二维码接口套入其中即可
1. 2. <script setup> 3. 4. // import { useRouter} from "vue-router"; 5. import axios from "axios"; 6. import { ref } from "vue"; 7. 8. 9. const tg_erwm = ref(false); 10. 11. const ha_Cwu = () =>{ 12. tg_erwm.value=false; 13. } 14. 15. const er_Wm = () =>{ 16. tg_erwm.value=true; 17. axios({ 18. url: "二维码接口", //接口 19. method: "get", 20. params: { 21. userid :36 ,// 用户ID 22. scienceid:1 //景区ID 23. 24. 25. }, //参数 26. }).then((res) => { 27. console.log(res); 28. 29. var canvas = document.querySelector("canvas"); 30. var ctx = canvas.getContext("2d"); 31. //创建图片 32. var image = new Image(); 33. //设置图片地址 34. image.src = res.data 35. image.onload = function() { 36. //2个参数 图片的xy坐标 37. // ctx.drawImage(image, 0, 0) 38. //4各参数 图片的起始坐标和宽高 39. ctx.drawImage(image, 70,70,200,60) 40. //参数 408, 81 切片的起始坐标， 147, 182 切片切掉原图的尺寸， 0, 0,切完之后切片的位置400, 400切完之后 切片的大小 41. // ctx.drawImage(image, 900, 100, 0, 0, 0, 0, 0, 0) 42. } 43. 44. 45. // console.log(er_w_ma.value); 46. }); 47. }//ketixianshoye 48. 49. 50. const mmmm =()=>{ 51. tg_erwm.value=false; 52. } 53. 54. </script>
css部分
1. 2. <style scoped> 3. .err{ 4. margin-left: auto; 5. margin-right:auto; 6. position: fixed; 7. top: 0; 8. display: flex; 9. justify-content: center; 10. align-items: center; 11. } 12. #canvas{ 13. z-index: 9; 14. top: 0%; 15. position: fixed; 16. width: 90%; 17. height: 700px; 18. /* height: 200px; */ 19. } 20. *{ 21. margin: 0; 22. padding: 0; 23. box-sizing: border-box; 24. } 25. /* auto_text */ 26. /* 图片 */ 27. .bjimg { 28. position: fixed; 29. top: 0; 30. left: 0; 31. width: 100%; 32. height: 25vh; 33. min-width: 1000px; 34. z-index: -10; 35. zoom: 1; 36. background-color: #fff; 37. background-image: url('../assets/yaoxi.jpg') ; 38. background-repeat: no-repeat; 39. background-size: cover; 40. -webkit-background-size: cover; 41. -o-background-size: cover; 42. background-position: center 0; 43. } 44. .tgxxi{ 45. width: 100%; 46. height: 50px; 47. 48. display: flex; 49. font-size: 20px; 50. } 51. .tgxxi div{ 52. width: 40%; 53. line-height: 46px; 54. } 55. .ku_Andu{ 56. /* text-align: center; */ 57. margin: auto; 58. width: 90%; 59. } 60. .imgs img{ 61. width: 70px; 62. height: 70px; 63. border-radius: 50%; 64. } 65. .zhen_text{ 66. /* margin:s 10px 0 0 10px; */ 67. display: flex; 68. } 69. .zhen_obj{ 70. margin: 10px 0 0 10px; 71. } 72. .hstx{ 73. font-size: 15px; 74. margin: 10px 0 0 0; 75. } 76. /* 拦截 */ 77. .lani_Jie{ 78. margin: 80px 0 0 0; 79. } 80. .lani_Jie_yi{ 81. margin: 10px 0 0 0; 82. } 83. /* 可体现收益 */ 84. .auto_text{ 85. text-align: center; 86. border-radius:5px ; 87. margin: auto; 88. background-color: #fff; 89. width: 90%; 90. height: 140px; 91. box-shadow: 0px 0px 0px 0.5px; 92. } 93. .ti_Xian{ 94. margin: 15px 0 0 0; 95. } 96. .ti_Xian div:nth-child(1){ 97. font-size: 17px; 98. } 99. .ti_Xian div:nth-child(2){ 100. font-size: 21px; 101. color: #089ADF; 102. } 103. .text_Tkai_Le{ 104. margin: 30px 0 20px 0; 105. display: flex; 106. justify-content: space-around; 107. } 108. .dai{ 109. font-size: 10px; 110. } 111. .qian{ 112. font-size: 21px; 113. color: #089ADF; 114. } 115. 116. 117. 118. .tuand_Text{ 119. border-radius: 5px; 120. padding: 6px 0 0 0; 121. margin-left: 5%; 122. margin-top: 20px; 123. text-align: center; 124. width: 90%; 125. height: 50px; 126. display: flex; 127. background-color: #fff; 128. box-shadow: 0px 0px 0px 0.5px; 129. } 130. .tupian_Img{ 131. margin: 0 0 0 80%; 132. position: absolute; 133. /* right: 0; */ 134. line-height: 60px; 135. /* width: 90%; */ 136. } 137. 138. .text_OBJ img{ 139. width: 40px; 140. height: 40px; 141. } 142. .text_OBJ { 143. /* line-height: 80px; */ 144. /* width: 90%; */ 145. display: flex; 146. /* color: #089ADF; */ 147. 148. } 149. .wode_Td{ 150. line-height: 40px; 151. } 152. 153. 154. /* 二维码 */ 155. .xians{ 156. justify-content: center; 157. /* display: none; */ 158. height: 100vh; 159. width: 100%; 160. top: 0; 161. position: fixed; 162. background-color: rgba(0, 0, 0, 0.5); 163. } 164. .img_Ages img{ 165. top: 50%; 166. /* left: 15%; */ 167. position: absolute; 168. display: flex; 169. width: 300px; 170. height: 300px; 171. } 172. #ccc{ 173. position: fixed; 174. width: 95%; 175. /* height: 700px; */ 176. /* border:1px solid red ; */ 177. /* background-image: url('../img/xiala.gif'); 178. background-size: cover; 179. -webkit-background-size: cover; 180. -o-background-size: cover; 181. background-position: center 10; */ 182. } 183. /* img{ 184. width: auto; 185. height: 100px; 186. } */ 187. .cha_Hao{ 188. /* right: 9%; 189. margin: 10%; */ 190. position: absolute; 191. } 192. </style>
