index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481
  1. <<<<<<< HEAD
  2. <template>
  3. <view class="content">
  4. <!-- <view class="qrimg">
  5. <tki-qrcode
  6. :cid="cid"
  7. ref="qrcode"
  8. :val="val"
  9. :size="size"
  10. :unit="unit"
  11. :background="background"
  12. :foreground="foreground"
  13. :pdground="pdground"
  14. :icon="icon"
  15. :iconSize="iconSize"
  16. :lv="lv"
  17. :onval="onval"
  18. :loadMake="loadMake"
  19. :usingComponents="usingComponents"
  20. @result="qrR"
  21. />
  22. </view> -->
  23. <!-- #ifndef MP-ALIPAY -->
  24. <!-- <canvas :class="{ qrimg: !loading }" @longtap="alertCanv" id="qrShareBox" canvas-id="qrShareBox" class="tki-qrcode-canvas" /> -->
  25. <!-- #endif -->
  26. <!-- #ifdef MP-ALIPAY -->
  27. <!-- <canvas :class="{ qrimg: !loading }" @longtap="alertCanv" id="qrShareBox" class="tki-qrcode-canvas" /> -->
  28. <!-- #endif -->
  29. <!-- <view :style="{ display: loading ? 'none' : 'block' }" class="tki-qrcode-canvas"><image :src="ctxSrc" mode="scaleToFill" class="tki-qrcode-canvas"></image></view> -->
  30. <!-- <view class="tki-qrcode-canvas"> -->
  31. <image :src="ctxSrc" mode="widthFix" class="tki-qrcode-canvas"></image>
  32. <!-- </view> -->
  33. <!-- <view class="share-bottom flex" :class="{ 'action-share-bottom': !loading }" @click="loading ? showImg() : ''">
  34. <text>{{ loading ? '点击生成图片' : '长按二维码下载' }}</text>
  35. </view> -->
  36. <!-- <view class="share-bottom flex">
  37. <text>长按二维码下载</text>
  38. </view> -->
  39. </view>
  40. </template>
  41. <script>
  42. import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
  43. import { spreadBanner } from '@/api/shareQrCode.js';
  44. import { getUserInfo } from '@/api/login.js';
  45. import { weixindata, shareData, loadShareData } from '@/utils/wxAuthorized.js';
  46. import { mapState } from 'vuex';
  47. import { share } from '@/api/wx';
  48. export default {
  49. computed: {
  50. ...mapState(['baseURL', 'urlFile']),
  51. ...mapState('user', ['userInfo'])
  52. },
  53. // components: { tkiQrcode },
  54. data() {
  55. return {
  56. cid: 'tki-qrcode-canvas', //canvasId,页面存在多个二维码组件时需设置不同的ID
  57. size: 180, //生成的二维码大小
  58. unit: 'upx', //大小单位尺寸
  59. // show: true,//默认使用组件中的image标签显示二维码
  60. val: '', //要生成的内容
  61. background: '#ffffff', //二维码背景色
  62. foreground: '#333333', //二维码前景色
  63. pdground: '#333333', //二维码角标色
  64. icon: '', //二维码图标URL(必须是本地图片,网络图需要先下载至本地)
  65. iconSize: 40, //二维码图标大小
  66. lv: 3, //容错级别
  67. onval: false, //监听val值变化自动重新生成二维码
  68. loadMake: false, //组件初始化完成后自动生成二维码,val需要有值
  69. usingComponents: false, //是否使用了自定义组件模式(主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题)
  70. showLoading: false, //是否显示loading
  71. loadingText: '二维码生成中', //loading文字
  72. src: '', // 二维码生成后的图片地址或base64
  73. ratio: 1, //页面比例用于计算
  74. ctxSrc: '', //要显示的图片
  75. loading: true, //是否载入图片中
  76. canHeight: '',
  77. canWeidth: '',
  78. login: false //判断是否登录
  79. };
  80. },
  81. onShow() {
  82. let obj = this;
  83. if (!obj.login) {
  84. // 判断是否已经登录
  85. getUserInfo()
  86. .then(e => {
  87. obj.login = true;
  88. uni.showLoading({
  89. title: '邀请图生成中',
  90. mask: true
  91. });
  92. obj.loadCodeList();
  93. })
  94. .catch(e => {
  95. console.log(e);
  96. });
  97. }
  98. },
  99. // onReady() {
  100. // let obj = this;
  101. // let query = uni.createSelectorQuery();
  102. // // 获取页面比例
  103. // query
  104. // .select('.content')
  105. // .fields(
  106. // {
  107. // size: true
  108. // },
  109. // e => {
  110. // // 保存比例
  111. // this.ratio = e.width / 750;
  112. // }
  113. // )
  114. // .exec();
  115. // // 获取画布宽高信息
  116. // query
  117. // .select('#qrShareBox')
  118. // .fields(
  119. // {
  120. // size: true
  121. // },
  122. // e => {
  123. // obj.canHeight = e.height;
  124. // obj.canWeidth = e.width;
  125. // }
  126. // )
  127. // .exec({});
  128. // },
  129. methods: {
  130. // 设置分享数据
  131. setShare() {
  132. let obj = this;
  133. // 加载分享数据
  134. // #ifdef H5
  135. obj.loadSareData().then(e => {
  136. weixindata({
  137. link: obj.ctxSrc, // 分享链接
  138. imgUrl:obj.baseURL+obj.urlFile+'/img/logo.jpg',
  139. desc:'欢迎加入满园春',
  140. title: '满园春线上商城',
  141. success: function() {},
  142. fail: function() {}
  143. });
  144. });
  145. // #endif
  146. },
  147. loadSareData() {
  148. if (!shareData) {
  149. return loadShareData();
  150. } else {
  151. return new Promise((resolve, reject) => {
  152. resolve(shareData);
  153. });
  154. }
  155. },
  156. loadCodeList() {
  157. let obj = this;
  158. // 加载二维码信息
  159. spreadBanner({
  160. // // #ifdef MP
  161. // type: 1
  162. // // #endif
  163. })
  164. .then(e => {
  165. console.log(e);
  166. // 保存二维码图片
  167. // this.src = e.data.real_url;
  168. obj.ctxSrc = e.data[0].wap_poster;
  169. // 生成画布
  170. // this.loadImg(e.data.real_url);
  171. uni.hideLoading();
  172. // 加载分享数据
  173. // obj.setShare()
  174. })
  175. .catch(e => {
  176. console.log(e)
  177. // uni.showModal({
  178. // title: '生成失败请刷新页面',
  179. // showCancel: false
  180. // });
  181. uni.hideLoading();
  182. });
  183. },
  184. // 长按画布事件
  185. alertCanv() {
  186. uni.showModal({
  187. title: '请先点击生成图片',
  188. showCancel: false
  189. });
  190. },
  191. // 生成图片
  192. showImg() {
  193. uni.showLoading({
  194. title: '图片生成中',
  195. mask: true
  196. });
  197. let obj = this;
  198. //因为和uni.showLoading载入效果冲突需要延迟执行生成图片方法
  199. setTimeout(function() {
  200. uni.canvasToTempFilePath({
  201. x: 0,
  202. y: 0,
  203. width: obj.canWeidth,
  204. height: obj.canHeight,
  205. destWidth: obj.canWeidth,
  206. destHeight: obj.canHeight,
  207. fileType: 'jpg',
  208. quality: 1,
  209. canvasId: 'qrShareBox',
  210. success: res => {
  211. uni.hideLoading();
  212. uni.showModal({
  213. title: '创建成功,长按二维码下载图片',
  214. showCancel: false
  215. });
  216. // 显示生成的图片
  217. obj.loading = false;
  218. obj.ctxSrc = res.tempFilePath;
  219. },
  220. fail(e) {
  221. console.log(e);
  222. }
  223. });
  224. }, 50);
  225. },
  226. // 开始渲染画布
  227. loadImg(src) {
  228. let obj = this;
  229. const ctxBg = '/static/img/img14.jpg'; //画布背景
  230. let context = uni.createCanvasContext('qrShareBox');
  231. const codeSize = this.size * this.ratio; //计算二维码大小
  232. const codeX = ((523 - this.size) * this.ratio) / 2; //二维码所在x轴位置
  233. const codeY = 700 * this.ratio; //二维码所在y轴位置
  234. const codeBoxColor = '#FFFFFF'; //包裹框颜色
  235. const codeBoxWidht = 0; //包裹边框宽度
  236. const codeBoxSize = (codeBoxWidht / 2) * this.ratio; //计算二维码白色包裹框大小
  237. const codeBoxX = codeX - codeBoxSize; //包裹框初始X轴
  238. const codeBoxY = codeY - codeBoxSize; //包裹框初始Y轴
  239. const codeBoxEnd = codeSize + codeBoxWidht * this.ratio; //计算包裹框大小
  240. // const fontLeft = (codeSize - fontSize * fontText.length) / 2 + codeX; //文字左侧距离
  241. const fontTop = codeY + codeBoxEnd + (codeBoxWidht + 30) * this.ratio; //文字距离上边距高度
  242. const fontLeft = codeX - 50 * this.ratio; //文字左侧距离
  243. const fontSize = 14; //文字大小
  244. const fontText = '邀请人:' + uni.getStorageSync('userInfo').nickname; //文字内容
  245. // 插入背景图片
  246. context.drawImage(ctxBg, 0, 0, obj.canWeidth, obj.canHeight);
  247. // // 插入文字
  248. context.setFontSize(fontSize);
  249. context.fillText(fontText, fontLeft, fontTop);
  250. // 插入边框
  251. context.beginPath();
  252. context.setLineJoin('round'); //边框类型
  253. context.setLineWidth(codeBoxWidht * this.ratio);
  254. context.setStrokeStyle(codeBoxColor); //设置包裹框颜色
  255. context.strokeRect(codeBoxX, codeBoxY, codeBoxEnd, codeBoxEnd);
  256. context.stroke();
  257. // 插入二维码
  258. context.drawImage(src, codeX, codeY, codeSize, codeSize);
  259. // 开始渲染
  260. context.draw();
  261. },
  262. // 創建二维码
  263. creatQrcode() {
  264. this.$refs.qrcode._makeCode();
  265. },
  266. // 保存二维码到图库
  267. saveQrcode() {
  268. this.$refs.qrcode._saveCode();
  269. },
  270. // 生成二维码后返回base64
  271. qrR(res) {
  272. this.src = res;
  273. },
  274. //清空二维码(清空二维码会触发result回调 返回值为空)
  275. clearQrcode(e) {
  276. this.$refs.qrcode._clearCode();
  277. this.val = '';
  278. }
  279. }
  280. };
  281. </script>
  282. <style lang="scss">
  283. .content {
  284. // padding-top: 30rpx;
  285. }
  286. // #qrShareBox {
  287. // position: absolute;
  288. // left: -9999rpx;
  289. // top: -9999rpx;
  290. // }
  291. .qrimg {
  292. position: absolute;
  293. left: -9999rpx;
  294. top: -9999rpx;
  295. }
  296. .tki-qrcode-canvas {
  297. width: 750rpx;
  298. margin: 0 auto;
  299. }
  300. .share-bottom {
  301. width: 560rpx;
  302. height: 80rpx;
  303. color: #ffffff;
  304. background-color: $base-color;
  305. margin: 0 auto;
  306. font-size: $font-lg - 2rpx;
  307. margin-top: 30rpx;
  308. border-radius: 99rpx;
  309. justify-content: center;
  310. &.action-share-bottom {
  311. background-color: $color-gray;
  312. }
  313. }
  314. </style>
  315. =======
  316. <template>
  317. <view class="container">
  318. <image @longtap="bc_code" class="backImg" :src="backImg"></image>
  319. <view class="tki-qrcode">
  320. <canvas @longtap="bc_code" canvas-id="qrcode" />
  321. </view>
  322. </view>
  323. </template>
  324. <script>
  325. // import uQRCode from '@/components/Sansnn-uQRCode/uqrcode.js'
  326. import { getUserInfo,spreadBanner } from '@/api/user.js';
  327. export default {
  328. props: {
  329. qrval: {
  330. // 要生成的二维码值
  331. type: String,
  332. }
  333. },
  334. data() {
  335. return {
  336. url: '',
  337. backImg:'',
  338. userInfo:''
  339. };
  340. },
  341. onLoad() {
  342. this.spread();
  343. this.getInfo();
  344. },
  345. computed: {
  346. cpSize() {
  347. if(this.unit == "upx"){
  348. return uni.upx2px(this.size)
  349. }else{
  350. return this.size
  351. }
  352. }
  353. },
  354. methods: {
  355. spread(){
  356. let obj = this;
  357. spreadBanner({
  358. type:2
  359. }).then(({ data }) => {
  360. obj.backImg = data[0].wap_poster;
  361. });
  362. },
  363. getInfo(){
  364. let obj = this;
  365. getUserInfo({}).then(({ data }) => {
  366. obj.userInfo = data;
  367. // obj.loadData()
  368. });
  369. },
  370. bc_code(){
  371. let that = this;
  372. console.log('保存二维码',this.backImg)
  373. uni.downloadFile({ //获得二维码的临时地址
  374. url:this.backImg,
  375. success:(res)=>{
  376. //console.log('获取url',res)
  377. if(res.statusCode == 200){
  378. uni.saveImageToPhotosAlbum({
  379. filePath:res.tempFilePath,//传入临时地址
  380. success() {
  381. that.$api.msg('保存成功')//封装的提示
  382. },
  383. fail() {
  384. that.$api.msg('保存失败')
  385. }
  386. })
  387. }
  388. }
  389. })
  390. },
  391. //生成二维码
  392. // make() {
  393. // let obj = this;
  394. // uQRCode.make({
  395. // canvasId: 'qrcode',
  396. // componentInstance: this,
  397. // text: obj.url,
  398. // size: 150,
  399. // margin: 10,
  400. // backgroundColor: '#ffffff',
  401. // foregroundColor: '#000000',
  402. // fileType: 'png',
  403. // correctLevel: uQRCode.defaults.correctLevel,
  404. // success: res => {
  405. // // console.log(res)
  406. // }
  407. // })
  408. // },
  409. // 请求载入数据
  410. // async loadData() {
  411. // let obj = this;
  412. // obj.url = 'http://btex.frp.liuniu946.com/?id='+ obj.userInfo.invite_code;
  413. // obj.make();
  414. // },
  415. },
  416. };
  417. </script>
  418. <style lang="scss">
  419. page{
  420. width: 100%;
  421. min-height: 100%;
  422. .container{
  423. width: 100%;
  424. height: 100%;
  425. }
  426. }
  427. .backImg{
  428. position: absolute;
  429. width: 100%;
  430. height: 100%;
  431. }
  432. .portrait{
  433. width: 100%;
  434. text-align: center;
  435. padding-top: 80rpx;
  436. padding-bottom: 30rpx;
  437. image{
  438. width: 250rpx;
  439. height: 250rpx;
  440. }
  441. }
  442. .text{
  443. text-align: center;
  444. width: 100%;
  445. color: #FFFFFF;
  446. font-size:55rpx;
  447. letter-spacing:15rpx;
  448. }
  449. .uid-name{
  450. padding: 50rpx 0rpx;
  451. text-align: center;
  452. width: 100%;
  453. color: #FFFFFF;
  454. }
  455. .copy-btn{
  456. color: #FFFFFF;
  457. background-color: #4BA6ED;
  458. border-radius: 50rpx;
  459. width: 170rpx;
  460. line-height: 70rpx;
  461. margin: 0rpx auto;
  462. text-align: center;
  463. }
  464. .tki-qrcode{
  465. position: fixed;
  466. bottom: 10%;
  467. left: 30%;
  468. }
  469. canvas{
  470. width:150px;
  471. height: 150px;
  472. margin: auto;
  473. }
  474. </style>
  475. >>>>>>> 4114c25969fb9b7b2c1d4af1f04837ed1c250f54