tki-qrcode.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. <template xlang="wxml" minapp="mpvue">
  2. <view class="tki-qrcode">
  3. <!-- #ifndef MP-ALIPAY -->
  4. <canvas class="tki-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
  5. <!-- #endif -->
  6. <!-- #ifdef MP-ALIPAY -->
  7. <canvas :id="cid" :width="cpSize" :height="cpSize" class="tki-qrcode-canvas" />
  8. <!-- #endif -->
  9. <image @click="openIMG" v-show="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" />
  10. </view>
  11. </template>
  12. <script>
  13. import QRCode from "./qrcode.js"
  14. let qrcode
  15. export default {
  16. name: "tki-qrcode",
  17. props: {
  18. cid: {
  19. type: String,
  20. default: 'tki-qrcode-canvas'
  21. },
  22. size: {
  23. type: Number,
  24. default: 200
  25. },
  26. unit: {
  27. type: String,
  28. default: 'upx'
  29. },
  30. show: {
  31. type: Boolean,
  32. default: true
  33. },
  34. val: {
  35. type: String,
  36. default: ''
  37. },
  38. background: {
  39. type: String,
  40. default: '#ffffff'
  41. },
  42. foreground: {
  43. type: String,
  44. default: '#000000'
  45. },
  46. pdground: {
  47. type: String,
  48. default: '#000000'
  49. },
  50. icon: {
  51. type: String,
  52. default: ''
  53. },
  54. iconSize: {
  55. type: Number,
  56. default: 40
  57. },
  58. lv: {
  59. type: Number,
  60. default: 1
  61. },
  62. onval: {
  63. type: Boolean,
  64. default: false
  65. },
  66. loadMake: {
  67. type: Boolean,
  68. default: false
  69. },
  70. usingComponents: {
  71. type: Boolean,
  72. default: true
  73. },
  74. showLoading: {
  75. type: Boolean,
  76. default: true
  77. },
  78. loadingText: {
  79. type: String,
  80. default: '二维码生成中'
  81. },
  82. },
  83. data() {
  84. return {
  85. result: '',
  86. }
  87. },
  88. methods: {
  89. openIMG(){
  90. uni.previewImage({
  91. urls:[this.result]
  92. })
  93. },
  94. _makeCode() {
  95. console.log(this.cpSize,this.val,"that.cpSize");
  96. let that = this
  97. if (!this._empty(this.val)) {
  98. qrcode = new QRCode({
  99. context: that, // 上下文环境
  100. canvasId:that.cid, // canvas-id
  101. usingComponents: that.usingComponents, // 是否是自定义组件
  102. showLoading: that.showLoading, // 是否显示loading
  103. loadingText: that.loadingText, // loading文字
  104. text: that.val, // 生成内容
  105. size: that.cpSize, // 二维码大小
  106. background: that.background, // 背景色
  107. foreground: that.foreground, // 前景色
  108. pdground: that.pdground, // 定位角点颜色
  109. correctLevel: that.lv, // 容错级别
  110. image: that.icon, // 二维码图标
  111. imageSize: that.iconSize,// 二维码图标大小
  112. cbResult: function (res) { // 生成二维码的回调
  113. that._result(res)
  114. },
  115. });
  116. } else {
  117. // uni.showToast({
  118. // title: '二维码内容不能为空',
  119. // icon: 'none',
  120. // duration: 2000
  121. // });
  122. }
  123. },
  124. _clearCode() {
  125. this._result('')
  126. qrcode.clear()
  127. },
  128. _saveCode() {
  129. // this.$emit('')
  130. let that = this;
  131. if (this.result != "") {
  132. // this.$emit('saveCode', that.result)
  133. uni.saveImageToPhotosAlbum({
  134. filePath: that.result,
  135. success: function () {
  136. uni.showToast({
  137. title: '二维码保存成功',
  138. icon: 'success',
  139. duration: 2000
  140. });
  141. },
  142. fail:(err)=>{
  143. console.log(err,"err")
  144. if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" ||
  145. err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
  146. "saveImageToPhotosAlbum:fail authorize no response") {
  147. // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
  148. uni.showModal({
  149. title: '提示',
  150. content: '需要您设置授权保存相册',
  151. showCancel: false,
  152. success: modalSuccess => {
  153. uni.openSetting({
  154. success(settingdata) {
  155. console.log("settingdata", settingdata)
  156. if (settingdata.authSetting[
  157. 'scope.writePhotosAlbum']) {
  158. uni.showModal({
  159. title: '提示',
  160. content: '获取权限成功,再次点击图片即可保存',
  161. showCancel: false,
  162. })
  163. } else {
  164. uni.showModal({
  165. title: '提示',
  166. content: '获取权限失败,将无法保存到相册哦~',
  167. showCancel: false,
  168. })
  169. }
  170. },
  171. fail(failData) {
  172. console.log("failData", failData)
  173. },
  174. complete(finishData) {
  175. console.log("finishData", finishData)
  176. }
  177. })
  178. }
  179. })
  180. }
  181. }
  182. });
  183. }
  184. },
  185. _result(res) {
  186. this.result = res;
  187. this.$emit('result', res)
  188. },
  189. _empty(v) {
  190. let tp = typeof v,
  191. rt = false;
  192. if (tp == "number" && String(v) == "") {
  193. rt = true
  194. } else if (tp == "undefined") {
  195. rt = true
  196. } else if (tp == "object") {
  197. if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
  198. } else if (tp == "string") {
  199. if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
  200. } else if (tp == "function") {
  201. rt = false
  202. }
  203. return rt
  204. }
  205. },
  206. watch: {
  207. size: function (n, o) {
  208. if (n != o && !this._empty(n)) {
  209. this.cSize = n
  210. if (!this._empty(this.val)) {
  211. setTimeout(() => {
  212. this._makeCode()
  213. }, 100);
  214. }
  215. }
  216. },
  217. val: function (n, o) {
  218. if (this.onval) {
  219. if (n != o && !this._empty(n)) {
  220. setTimeout(() => {
  221. this._makeCode()
  222. }, 0);
  223. }
  224. }
  225. }
  226. },
  227. computed: {
  228. cpSize() {
  229. if(this.unit == "upx"){
  230. return uni.upx2px(this.size)
  231. }else{
  232. return this.size
  233. }
  234. }
  235. },
  236. mounted: function () {
  237. if (this.loadMake) {
  238. if (!this._empty(this.val)) {
  239. setTimeout(() => {
  240. this._makeCode()
  241. }, 0);
  242. }
  243. }
  244. },
  245. }
  246. </script>
  247. <style>
  248. .tki-qrcode {
  249. position: relative;
  250. }
  251. .tki-qrcode-canvas {
  252. position: fixed;
  253. top: -99999upx;
  254. left: -99999upx;
  255. z-index: -99999;
  256. }
  257. </style>