wp.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533
  1. <template>
  2. <view class="box">
  3. <view style="padding-top: 100rpx;padding-left: 73rpx;padding-right: 75rpx;">
  4. <view style="border-radius: 20rpx;">
  5. <canvas canvas-id="mini_poster" style="width: 600rpx;" :style="{ height: canvasH + 'px' }"></canvas><!-- :style="{ width: canvasW + 'px', height: canvasH + 'px' }" -->
  6. </view>
  7. </view>
  8. <view style="height: 106rpx;"></view>
  9. <!-- <view class="footer">
  10. <view style="height: 106rpx; align-items: center; background-color: #333333;">
  11. <button style="background: transparent; height: 106rpx; line-height: 106rpx;" @tap="toSaveImage">保存名片</button>
  12. </view>
  13. </view> -->
  14. <view class="downloadBtn" @click="toSaveImage">保存图片</view>
  15. <!-- <img :src="mpWxQr2" alt="" ref="image" class="wcl"> -->
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. data() {
  21. return {
  22. mpWxQr: "https://apidms.66km.com/static/third/jialian.ico",
  23. canvasW: 0,
  24. canvasH: 0,
  25. invest_areas: [{id: 1, name: "儿童教育"}, {id: 1, name: "大数据"}],
  26. nickname: "",
  27. avatar: "",
  28. company: "",
  29. phone: "17610998099",
  30. email: "redoume@163.com",
  31. time: "2022.01.21~2022.01.2",
  32. finished: false,
  33. sellingPoint:'',
  34. userInfo:'',
  35. ext:'',
  36. mpWxQr2:'',
  37. mpWxQr3:'',
  38. mpWxQr4:'',
  39. //ptImg:'http://dmsphoto.66km.com.cn/thFiles/18415D1D-563A-4488-9163-0A7D59A99961.png',
  40. ptImg:'https://dmsimg.66km.com/marketing//accompany/4E6F0009-EC54-4387-8DDC-2B7389065B49.png',
  41. ptImg2:'',
  42. groupType:'',
  43. }
  44. },
  45. computed: {
  46. showInvestAreas() {
  47. if (this.invest_areas) {
  48. const names = []
  49. this.invest_areas.forEach(item => {
  50. names.push(item.name)
  51. })
  52. return names.join(" ")
  53. }
  54. return '未设置'
  55. }
  56. },
  57. onLoad(opt) {
  58. //this.canvasW = uni.getSystemInfoSync().windowWidth
  59. //this.canvasH = this.calculateCanvasHeight()
  60. this.avatar=opt.img;
  61. console.log(this.avatar.slice(0,5))
  62. /* if(this.avatar.slice(0,5)=='https'){
  63. }else{
  64. this.avatar=this.avatar.replace('http','https');
  65. } */
  66. this.time=opt.time
  67. console.log(this.avatar)
  68. this.nickname=opt.name;
  69. if(opt.sellingPoint&&opt.sellingPoint!='undefined'){
  70. this.sellingPoint=opt.sellingPoint;
  71. }
  72. console.log('this.sellingPoint==='+this.sellingPoint)
  73. //console.log(this.nickname+this.nickname.length)
  74. if(this.nickname.length>16){
  75. this.nickname=this.nickname.substring(0,16)+'...'
  76. }
  77. if(opt.groupType!=0){
  78. console.log(opt.groupType)
  79. this.groupType=opt.groupType;
  80. if(this.nickname.length>12){
  81. this.nickname=this.nickname.substring(0,12)+'...'
  82. }
  83. }
  84. //console.log(this.nickname+this.nickname.length)
  85. this.userInfo=this.$store.state.userInfo;
  86. this.ext=this.$common.getExtStoreId();
  87. this.canvasW =uni.upx2px(600)
  88. if(this.sellingPoint){
  89. this.canvasH = uni.upx2px(840)
  90. }else{
  91. this.canvasH = uni.upx2px(740)
  92. }
  93. var that=this;
  94. var type=opt.type
  95. if(type==2){
  96. var bizType=2;
  97. var path='pages/activity/jkDetail'
  98. }else{
  99. var bizType=1;
  100. var path='pages/shop/goodsDetail'
  101. }
  102. uni.showLoading({
  103. title: '加载中'
  104. })
  105. this.$request.httpBinary('openMall/shareQrCode', {
  106. bizType:bizType,
  107. path:path,//?id+this.id+'&shareId='+this.userInfo.openId,
  108. goodsId:opt.id,
  109. openId:this.userInfo.openId,
  110. unionId:this.ext.unionId
  111. },'GET').then(res => {
  112. //console.log(res)
  113. this.mpWxQr3=res;
  114. uni.hideLoading();
  115. //this.mpWxQr2= 'data:image/png;base64,'+uni.arrayBufferToBase64(res)
  116. // this.mpWxQr4= uni.arrayBufferToBase64(res)
  117. this.toDrawCanvas()
  118. })
  119. // this.$request.httpBinary('openMall/shareQrCode', {
  120. // bizType:1,
  121. // path:'pages/shop/goodsDetail',//?id+this.id+'&shareId='+this.userInfo.openId,
  122. // goodsId:opt.id,
  123. // openId:this.userInfo.openId,
  124. // unionId:this.ext.unionId
  125. // },'GET').then(res => {
  126. // //console.log(res)
  127. // this.mpWxQr2= 'data:image/png;base64,'+uni.arrayBufferToBase64(res)
  128. // // let theNode=uni.createSelectorQuery().select(".wcl")
  129. // // theNode.boundingClientRect((data)=>{
  130. // // console.log(data)
  131. // // // that.mpWxQr=data
  132. // // }).exec()
  133. // // this.mpWxQr = uni.createSelectorQuery().select('wcl')
  134. // this.toDrawCanvas()
  135. // })
  136. //return false;
  137. },
  138. methods: {
  139. toSaveImage() {
  140. if (!this.finished) {
  141. uni.showToast({
  142. title: '正在生成图片,稍后再试',
  143. icon: 'none'
  144. })
  145. return
  146. }
  147. const that = this
  148. uni.canvasToTempFilePath({
  149. canvasId: 'mini_poster',
  150. success: (res) => {
  151. uni.saveImageToPhotosAlbum({
  152. filePath: res.tempFilePath,
  153. success: () => {
  154. uni.showToast({
  155. title: '保存成功'
  156. })
  157. },
  158. fail() {
  159. uni.showToast({
  160. icon: 'none',
  161. title: '保存名片码失败'
  162. })
  163. }
  164. })
  165. },
  166. fail() {
  167. uni.showToast({
  168. icon: 'none',
  169. title: '保存名片码失败'
  170. })
  171. }
  172. })
  173. },
  174. async toDrawCanvas() {
  175. const padding = uni.upx2px(34)
  176. const cardHeight = uni.upx2px(380)
  177. const cw = this.canvasW - 2 * padding
  178. const r = uni.upx2px(12)
  179. let ctx = uni.createCanvasContext('mini_poster', this)
  180. // 左上角
  181. var cx = uni.upx2px(30)
  182. var cy = uni.upx2px(30)
  183. //this._drawRoundRect(ctx, 30, 30, this.canvasW, this.canvasH, r)
  184. // ctx.arc(this.canvasW, 0, this.canvasW,this.canvasH, cx)
  185. // 透明背景
  186. ctx.setFillStyle('rgba(255, 255, 255, 0)')
  187. //ctx.setFillStyle('#FFFFFF')
  188. //ctx.setFillStyle('#D53533')
  189. ctx.fillRect(0, 0, this.canvasW, this.canvasH)
  190. // draw card round rect
  191. this.drawback(ctx)
  192. this.drawRoundRect(ctx, padding, padding, cw, cardHeight, r, 2)
  193. // draw card content
  194. this.drawCard(ctx, padding, padding, cw, cardHeight)
  195. // draw avatar
  196. const av = uni.upx2px(540)
  197. const topimgh = uni.upx2px(317)
  198. //console.log(av)
  199. //console.log(topimgh)
  200. const hi = await this.downloadImage(this.avatar)
  201. if (hi.tempFilePath) {
  202. const x = uni.upx2px(30)
  203. const y = uni.upx2px(30)
  204. this.drawRoundRectAvatar(ctx, x, y, av, topimgh, r, hi.tempFilePath)
  205. }
  206. if(this.groupType){
  207. var ptw=uni.upx2px(60)
  208. var pth=uni.upx2px(32)
  209. var ptIcon=await this.downloadImage(this.ptImg);
  210. if (ptIcon.tempFilePath) {
  211. const x = uni.upx2px(30)
  212. const y = uni.upx2px(370)
  213. this.drawRoundRectAvatar(ctx, x, y, ptw, pth, r, ptIcon.tempFilePath)
  214. }
  215. }
  216. // draw hello info
  217. //this.drawHelloInfo(ctx, padding, padding + cardHeight + padding, cw)
  218. // draw qr code
  219. if (this.mpWxQr) {
  220. var fsm = uni.getFileSystemManager();
  221. //var filePath='../../static/timg/CS.png'
  222. var times = new Date().getTime();
  223. var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';
  224. var that=this;
  225. fsm.writeFile({
  226. filePath: codeimg, // 要写入的文件路径 (本地路径)
  227. data: this.mpWxQr3, // 要写入的文本或二进制数据
  228. encoding:"base64", // 指定写入文件的字符编码
  229. success(e) {
  230. console.log(e)
  231. console.log(codeimg)
  232. var wxsx=uni.upx2px(48)
  233. if(that.sellingPoint){
  234. var wxsy=uni.upx2px(649)
  235. }else{
  236. var wxsy=uni.upx2px(549)
  237. }
  238. var wxwidth=uni.upx2px(158)
  239. ctx.drawImage(codeimg, wxsx, wxsy, wxwidth,wxwidth)
  240. },
  241. fail(err) {
  242. console.log(err)
  243. }
  244. });
  245. const hello = await this.downloadImage(this.mpWxQr)
  246. //const padding = uni.upx2px(34)
  247. //const av = uni.upx2px(180)
  248. //const totalH = this.calculateCanvasHeight()
  249. //console.log("totalH=="+totalH)
  250. //console.log(hello.tempFilePath)
  251. // var wxsx=uni.upx2px(68)
  252. // var wxsy=uni.upx2px(649)
  253. // var wxwidth=uni.upx2px(148)
  254. // ctx.drawImage(codeimg, wxsx, wxsy, wxwidth,wxwidth)
  255. if (hello.tempFilePath) {
  256. //ctx.drawImage(hello.tempFilePath, wxsx, wxsy, wxwidth,wxwidth)
  257. }
  258. }
  259. ctx.draw()
  260. this.finished = true
  261. },
  262. async drawCard(ctx, x, y, w, h) {
  263. // draw company
  264. //let vp = y + uni.upx2px(45)
  265. //const hp = x + uni.upx2px(52)
  266. let vp = uni.upx2px(400)
  267. var hp = uni.upx2px(36)
  268. ctx.setTextBaseline('center')
  269. const fz30 = uni.upx2px(32)
  270. ctx.fillStyle = '#212121'
  271. ctx.setFontSize(fz30)
  272. if(this.groupType){
  273. var namehp = uni.upx2px(100)
  274. ctx.fillText(this.nickname, namehp, vp)
  275. }else{
  276. ctx.fillText(this.nickname, hp, vp)
  277. }
  278. var timeX=hp;
  279. var timeY=vp+20
  280. const fz26 = uni.upx2px(26)
  281. ctx.setFillStyle('#3C3C3C')
  282. ctx.setFontSize(fz26)
  283. ctx.fillText(this.time, timeX, timeY)
  284. var sm=this.sellingPoint
  285. ctx.setFillStyle('#999999')
  286. ctx.setFontSize(fz26)
  287. var smy=timeY+20
  288. var maxwidth = uni.upx2px(550)
  289. if(sm.length>20){
  290. var sm1=sm.substring(0,20)
  291. ctx.fillText(sm1, timeX, smy)
  292. if(sm.length>40){
  293. var sm2=sm.substring(20,40)
  294. ctx.fillText(sm2, timeX, smy+20)
  295. var sm3=sm.substring(40,60)
  296. ctx.fillText(sm3, timeX, smy+40)
  297. }else{
  298. var sm2=sm.substring(20,40)
  299. ctx.fillText(sm2, timeX, smy+20)
  300. }
  301. }else{
  302. ctx.fillText(sm, timeX, smy)
  303. }
  304. var wemtis1='名额有限 先到先得'
  305. var wemtisx=uni.upx2px(240)
  306. if(this.sellingPoint){
  307. var wemtisy=uni.upx2px(700)
  308. }else{
  309. var wemtisy=uni.upx2px(600)
  310. }
  311. ctx.setFillStyle('#999999')
  312. const fz24 = uni.upx2px(24)
  313. ctx.setFontSize(fz24)
  314. ctx.fillText(wemtis1,wemtisx,wemtisy)
  315. var wemtis2='长按二维码识别参与活动'
  316. var wemtisy2=wemtisy+30
  317. ctx.fillText(wemtis2,wemtisx,wemtisy2)
  318. // draw nickname
  319. vp = vp + 30
  320. vp = vp + 42
  321. const iconW = uni.upx2px(30)
  322. const textH = hp + iconW + 6
  323. ctx.setFillStyle('#333333')
  324. ctx.setFontSize(fz30)
  325. vp = vp + 28
  326. ctx.setFillStyle('#333333')
  327. ctx.setFontSize(fz30)
  328. // ctx.fillText(this.showInvestAreas, textH, vp)
  329. const oPadding = uni.upx2px(34)
  330. const iPadding = uni.upx2px(40)
  331. const textW = w - textH + oPadding - iPadding
  332. //this.drawTextInOneLine(ctx, this.showInvestAreas, textH, vp, textW)
  333. vp = vp + 28
  334. ctx.setFillStyle('#333333')
  335. ctx.setFontSize(fz30)
  336. //ctx.fillText(this.phone ? this.phone : '', textH, vp)
  337. },
  338. async drawHelloInfo(ctx, x, y, w) {
  339. let vp = y + 12
  340. const hp = x
  341. ctx.setTextBaseline('top')
  342. const fz30 = uni.upx2px(30)
  343. ctx.setFillStyle('#333333')
  344. ctx.setFontSize(fz30)
  345. ctx.fillText('您好,', hp, vp)
  346. const text = "我是来自 " + this.company + ' 的投资人' + this.nickname
  347. const lines = this.drawTextInLines(ctx, text, hp, vp, w, 26)
  348. vp += 26 * lines + 26
  349. ctx.fillText('这是我的名片,请惠存。', hp, vp)
  350. vp += 26
  351. ctx.fillText('谢谢', hp, vp)
  352. vp += 26
  353. vp += 40
  354. ctx.setFillStyle('#F37231')
  355. ctx.fillRect(hp, vp, 20, 3)
  356. vp += 7
  357. ctx.setFillStyle('#333333')
  358. const fz28 = uni.upx2px(28)
  359. ctx.setFontSize(fz28)
  360. ctx.fillText('长按识别二维码', hp, vp)
  361. vp += 20
  362. const ttt = '在大天使中查看我的更多信息'
  363. ctx.fillText(ttt, hp, vp)
  364. },
  365. calculateCanvasHeight() {
  366. // 400 is card height
  367. const ctx = uni.createCanvasContext('test_poster')
  368. const padding = uni.upx2px(34)
  369. const text = "我是来自 " + this.company + ' 的投资人' + this.nickname
  370. const rows = this.drawTextInLines(ctx, text, padding, 0, this.canvasW - 2 * padding, 26)
  371. const cardH = uni.upx2px(380)
  372. const h = padding * 2 + cardH + padding + 12 + 26 * 3 + rows * 26
  373. return h + 90
  374. },
  375. _drawRoundRect(ctx, x, y, w, h, r) {
  376. ctx.beginPath()
  377. // 左上角
  378. console.log("x="+x+'y='+y+'w='+w+'h='+h+'r='+r)
  379. ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
  380. //ctx.arc(0, 0, 15, Math.PI, Math.PI * 1.5)
  381. // 右上角
  382. ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
  383. //ctx.arc(0, 0, 0, Math.PI, Math.PI * 1.5)
  384. // 右下角
  385. ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
  386. // 左下角
  387. ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
  388. ctx.closePath()
  389. // ctx.strokeStyle = '#D8D8D8';
  390. ctx.fillStyle = '#FFFFFF';
  391. // ctx.stroke()
  392. ctx.fill()
  393. },
  394. drawRoundRect(ctx, x, y, w, h, r, lineWidth) {
  395. //return false;
  396. ctx.save()
  397. //this._drawRoundRect(ctx, x, y, w, h, r)
  398. ctx.clip()
  399. // draw left border
  400. ctx.fillStyle = '#EEEEEE'
  401. if(this.sellingPoint){
  402. var y=uni.upx2px(619)
  403. }else{
  404. var y=uni.upx2px(519)
  405. }
  406. ctx.arc(0, 0, 15, Math.PI, Math.PI * 1.5)
  407. var bWidth=uni.upx2px(600)
  408. ctx.fillRect(0, y, bWidth, 2)
  409. ctx.restore()
  410. },
  411. drawback(ctx){
  412. ctx.save()
  413. var bWidth=uni.upx2px(12)
  414. this._drawRoundRect(ctx, 0, 0, this.canvasW, this.canvasH,bWidth )
  415. ctx.clip()
  416. // draw left border
  417. ctx.fillStyle = '#FFFFFF'
  418. var bWidth=uni.upx2px(600)
  419. ctx.fillRect(0, 0, bWidth, this.canvasH)
  420. ctx.restore()
  421. },
  422. drawRoundRectAvatar(ctx, x, y, w, h, r, imgPath) {
  423. ctx.save()
  424. this._drawRoundRect(ctx, x, y, w, h, r)
  425. ctx.clip()
  426. ctx.drawImage(imgPath, x, y, w, h)
  427. ctx.restore()
  428. },
  429. // TODO: measureText not works in App
  430. drawTextInLines(ctx, t, x, y, w, lineHeight) {
  431. const chr = t.split("")
  432. let temp = ''
  433. let row = []
  434. for (let i = 0; i < chr.length; i++) {
  435. if (ctx.measureText(temp).width < w) {
  436. //
  437. } else {
  438. row.push(temp)
  439. temp = ''
  440. }
  441. temp += chr[i]
  442. }
  443. row.push(temp)
  444. for (const i in row) {
  445. // i + 1 will be 11, 21,...
  446. ctx.fillText(row[i], x, (y + (i * 1 + 1) * lineHeight))
  447. }
  448. return row.length
  449. },
  450. // TODO: measureText not works in app
  451. drawTextInOneLine(ctx, t, x, y, w) {
  452. const chr = t.split('')
  453. let temp = ''
  454. for (let i = 0; i < chr.length; i++) {
  455. if (ctx.measureText(temp + '...').width <= w) {
  456. temp += chr[i]
  457. } else {
  458. temp = temp.substring(0, temp.length - 1)
  459. temp += '...'
  460. break
  461. }
  462. }
  463. ctx.fillText(temp, x, y)
  464. },
  465. downloadImage(url) {
  466. return new Promise((resolve, reject) => {
  467. uni.downloadFile({
  468. url: url,
  469. success: (res) => {
  470. return resolve(res)
  471. },
  472. fail: (err) => {
  473. return reject(err)
  474. }
  475. })
  476. })
  477. }
  478. }
  479. }
  480. </script>
  481. <style scoped>
  482. .box{
  483. width: 100%;
  484. height: 100vh;
  485. background: url('http://dmsphoto.66km.com.cn/thFiles/83BDAB66-DD76-4F3A-92B3-F6AF0BA57A9E.png');
  486. background-size: 100% 100%;
  487. }
  488. .downloadBtn{
  489. width: 329rpx;
  490. height: 92rpx;
  491. background: url('http://dmsphoto.66km.com.cn/thFiles/A0CF4704-69A8-4DAC-8943-75F98D1349DD.png');
  492. background-size: 100% 100%;
  493. line-height: 92rpx;
  494. text-align: center;
  495. font-size: 28rpx;
  496. font-family: PingFangSC-Medium, PingFang SC;
  497. font-weight: 500;
  498. color: #DC490A;
  499. margin: 0 auto;
  500. }
  501. </style>