index.vue 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
  1. <template>
  2. <view class="content">
  3. <!-- <view class="qrimg">
  4. <tki-qrcode
  5. :cid="cid"
  6. ref="qrcode"
  7. :val="val"
  8. :size="size"
  9. :unit="unit"
  10. :background="background"
  11. :foreground="foreground"
  12. :pdground="pdground"
  13. :icon="icon"
  14. :iconSize="iconSize"
  15. :lv="lv"
  16. :onval="onval"
  17. :loadMake="loadMake"
  18. :usingComponents="usingComponents"
  19. @result="qrR"
  20. />
  21. </view> -->
  22. <!-- #ifndef MP-ALIPAY -->
  23. <!-- <canvas :class="{ qrimg: !loading }" @longtap="alertCanv" id="qrShareBox" canvas-id="qrShareBox" class="tki-qrcode-canvas" /> -->
  24. <!-- #endif -->
  25. <!-- #ifdef MP-ALIPAY -->
  26. <!-- <canvas :class="{ qrimg: !loading }" @longtap="alertCanv" id="qrShareBox" class="tki-qrcode-canvas" /> -->
  27. <!-- #endif -->
  28. <!-- <view :style="{ display: loading ? 'none' : 'block' }" class="tki-qrcode-canvas"><image :src="ctxSrc" mode="scaleToFill" class="tki-qrcode-canvas"></image></view> -->
  29. <!-- <view class="tki-qrcode-canvas"> -->
  30. <image :src="ctxSrc" mode="widthFix" class="tki-qrcode-canvas"></image>
  31. <!-- </view> -->
  32. <!-- <view class="share-bottom flex" :class="{ 'action-share-bottom': !loading }" @click="loading ? showImg() : ''">
  33. <text>{{ loading ? '点击生成图片' : '长按二维码下载' }}</text>
  34. </view> -->
  35. <!-- <view class="share-bottom flex">
  36. <text>长按二维码下载</text>
  37. </view> -->
  38. </view>
  39. </template>
  40. <script>
  41. import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
  42. import { spreadBanner } from '@/api/shareQrCode.js';
  43. import { getUserInfo } from '@/api/login.js';
  44. import { weixindata, shareData, loadShareData } from '@/utils/wxAuthorized.js';
  45. import { mapState } from 'vuex';
  46. import { share } from '@/api/wx';
  47. export default {
  48. computed: {
  49. ...mapState(['baseURL', 'urlFile']),
  50. ...mapState('user', ['userInfo'])
  51. },
  52. // components: { tkiQrcode },
  53. data() {
  54. return {
  55. cid: 'tki-qrcode-canvas', //canvasId,页面存在多个二维码组件时需设置不同的ID
  56. size: 180, //生成的二维码大小
  57. unit: 'upx', //大小单位尺寸
  58. // show: true,//默认使用组件中的image标签显示二维码
  59. val: '', //要生成的内容
  60. background: '#ffffff', //二维码背景色
  61. foreground: '#333333', //二维码前景色
  62. pdground: '#333333', //二维码角标色
  63. icon: '', //二维码图标URL(必须是本地图片,网络图需要先下载至本地)
  64. iconSize: 40, //二维码图标大小
  65. lv: 3, //容错级别
  66. onval: false, //监听val值变化自动重新生成二维码
  67. loadMake: false, //组件初始化完成后自动生成二维码,val需要有值
  68. usingComponents: false, //是否使用了自定义组件模式(主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题)
  69. showLoading: false, //是否显示loading
  70. loadingText: '二维码生成中', //loading文字
  71. src: '', // 二维码生成后的图片地址或base64
  72. ratio: 1, //页面比例用于计算
  73. ctxSrc: '', //要显示的图片
  74. loading: true, //是否载入图片中
  75. canHeight: '',
  76. canWeidth: '',
  77. login: false //判断是否登录
  78. };
  79. },
  80. onShow() {
  81. let obj = this;
  82. if (!obj.login) {
  83. // 判断是否已经登录
  84. getUserInfo()
  85. .then(e => {
  86. obj.login = true;
  87. uni.showLoading({
  88. title: '邀请图生成中',
  89. mask: true
  90. });
  91. obj.loadCodeList();
  92. })
  93. .catch(e => {
  94. console.log(e);
  95. });
  96. }
  97. },
  98. // onReady() {
  99. // let obj = this;
  100. // let query = uni.createSelectorQuery();
  101. // // 获取页面比例
  102. // query
  103. // .select('.content')
  104. // .fields(
  105. // {
  106. // size: true
  107. // },
  108. // e => {
  109. // // 保存比例
  110. // this.ratio = e.width / 750;
  111. // }
  112. // )
  113. // .exec();
  114. // // 获取画布宽高信息
  115. // query
  116. // .select('#qrShareBox')
  117. // .fields(
  118. // {
  119. // size: true
  120. // },
  121. // e => {
  122. // obj.canHeight = e.height;
  123. // obj.canWeidth = e.width;
  124. // }
  125. // )
  126. // .exec({});
  127. // },
  128. methods: {
  129. // 设置分享数据
  130. setShare() {
  131. let obj = this;
  132. // 加载分享数据
  133. // #ifdef H5
  134. obj.loadSareData().then(e => {
  135. weixindata({
  136. link: obj.ctxSrc, // 分享链接
  137. imgUrl:obj.baseURL+obj.urlFile+'/img/logo.jpg',
  138. desc:'欢迎加入满园春',
  139. title: '满园春线上商城',
  140. success: function() {},
  141. fail: function() {}
  142. });
  143. });
  144. // #endif
  145. },
  146. loadSareData() {
  147. if (!shareData) {
  148. return loadShareData();
  149. } else {
  150. return new Promise((resolve, reject) => {
  151. resolve(shareData);
  152. });
  153. }
  154. },
  155. loadCodeList() {
  156. let obj = this;
  157. // 加载二维码信息
  158. spreadBanner({
  159. // // #ifdef MP
  160. // type: 1
  161. // // #endif
  162. })
  163. .then(e => {
  164. console.log(e);
  165. // 保存二维码图片
  166. // this.src = e.data.real_url;
  167. obj.ctxSrc = e.data[0].wap_poster;
  168. // 生成画布
  169. // this.loadImg(e.data.real_url);
  170. uni.hideLoading();
  171. // 加载分享数据
  172. // obj.setShare()
  173. })
  174. .catch(e => {
  175. console.log(e)
  176. // uni.showModal({
  177. // title: '生成失败请刷新页面',
  178. // showCancel: false
  179. // });
  180. uni.hideLoading();
  181. });
  182. },
  183. // 长按画布事件
  184. alertCanv() {
  185. uni.showModal({
  186. title: '请先点击生成图片',
  187. showCancel: false
  188. });
  189. },
  190. // 生成图片
  191. showImg() {
  192. uni.showLoading({
  193. title: '图片生成中',
  194. mask: true
  195. });
  196. let obj = this;
  197. //因为和uni.showLoading载入效果冲突需要延迟执行生成图片方法
  198. setTimeout(function() {
  199. uni.canvasToTempFilePath({
  200. x: 0,
  201. y: 0,
  202. width: obj.canWeidth,
  203. height: obj.canHeight,
  204. destWidth: obj.canWeidth,
  205. destHeight: obj.canHeight,
  206. fileType: 'jpg',
  207. quality: 1,
  208. canvasId: 'qrShareBox',
  209. success: res => {
  210. uni.hideLoading();
  211. uni.showModal({
  212. title: '创建成功,长按二维码下载图片',
  213. showCancel: false
  214. });
  215. // 显示生成的图片
  216. obj.loading = false;
  217. obj.ctxSrc = res.tempFilePath;
  218. },
  219. fail(e) {
  220. console.log(e);
  221. }
  222. });
  223. }, 50);
  224. },
  225. // 开始渲染画布
  226. loadImg(src) {
  227. let obj = this;
  228. const ctxBg = '/static/img/img14.jpg'; //画布背景
  229. let context = uni.createCanvasContext('qrShareBox');
  230. const codeSize = this.size * this.ratio; //计算二维码大小
  231. const codeX = ((523 - this.size) * this.ratio) / 2; //二维码所在x轴位置
  232. const codeY = 700 * this.ratio; //二维码所在y轴位置
  233. const codeBoxColor = '#FFFFFF'; //包裹框颜色
  234. const codeBoxWidht = 0; //包裹边框宽度
  235. const codeBoxSize = (codeBoxWidht / 2) * this.ratio; //计算二维码白色包裹框大小
  236. const codeBoxX = codeX - codeBoxSize; //包裹框初始X轴
  237. const codeBoxY = codeY - codeBoxSize; //包裹框初始Y轴
  238. const codeBoxEnd = codeSize + codeBoxWidht * this.ratio; //计算包裹框大小
  239. // const fontLeft = (codeSize - fontSize * fontText.length) / 2 + codeX; //文字左侧距离
  240. const fontTop = codeY + codeBoxEnd + (codeBoxWidht + 30) * this.ratio; //文字距离上边距高度
  241. const fontLeft = codeX - 50 * this.ratio; //文字左侧距离
  242. const fontSize = 14; //文字大小
  243. const fontText = '邀请人:' + uni.getStorageSync('userInfo').nickname; //文字内容
  244. // 插入背景图片
  245. context.drawImage(ctxBg, 0, 0, obj.canWeidth, obj.canHeight);
  246. // // 插入文字
  247. context.setFontSize(fontSize);
  248. context.fillText(fontText, fontLeft, fontTop);
  249. // 插入边框
  250. context.beginPath();
  251. context.setLineJoin('round'); //边框类型
  252. context.setLineWidth(codeBoxWidht * this.ratio);
  253. context.setStrokeStyle(codeBoxColor); //设置包裹框颜色
  254. context.strokeRect(codeBoxX, codeBoxY, codeBoxEnd, codeBoxEnd);
  255. context.stroke();
  256. // 插入二维码
  257. context.drawImage(src, codeX, codeY, codeSize, codeSize);
  258. // 开始渲染
  259. context.draw();
  260. },
  261. // 創建二维码
  262. creatQrcode() {
  263. this.$refs.qrcode._makeCode();
  264. },
  265. // 保存二维码到图库
  266. saveQrcode() {
  267. this.$refs.qrcode._saveCode();
  268. },
  269. // 生成二维码后返回base64
  270. qrR(res) {
  271. this.src = res;
  272. },
  273. //清空二维码(清空二维码会触发result回调 返回值为空)
  274. clearQrcode(e) {
  275. this.$refs.qrcode._clearCode();
  276. this.val = '';
  277. }
  278. }
  279. };
  280. </script>
  281. <style lang="scss">
  282. .content {
  283. // padding-top: 30rpx;
  284. }
  285. // #qrShareBox {
  286. // position: absolute;
  287. // left: -9999rpx;
  288. // top: -9999rpx;
  289. // }
  290. .qrimg {
  291. position: absolute;
  292. left: -9999rpx;
  293. top: -9999rpx;
  294. }
  295. .tki-qrcode-canvas {
  296. width: 750rpx;
  297. margin: 0 auto;
  298. }
  299. .share-bottom {
  300. width: 560rpx;
  301. height: 80rpx;
  302. color: #ffffff;
  303. background-color: $base-color;
  304. margin: 0 auto;
  305. font-size: $font-lg - 2rpx;
  306. margin-top: 30rpx;
  307. border-radius: 99rpx;
  308. justify-content: center;
  309. &.action-share-bottom {
  310. background-color: $color-gray;
  311. }
  312. }
  313. </style>