import {miniProgramConfig,sharePoster} from '../../api/other'; import {BASE_URL} from '../../utils/request'; import {isLoggedIn,doLogin} from '../../utils/auth'; const app = getApp(); Page({ data: { baseUrl:BASE_URL, banners: [], introduction:'', start_time:'', end_time:'', ad_img:'', share_img:'', pendingAction:null,//按钮类型 loggedIn:false, showShare: false, showPoster:false, posterImg:'',//生成的海报 }, async onLoad(){ const res = await miniProgramConfig(); app.globalData.programConfig = res.data; this.setData({ banners:res.data.carousels, introduction:res.data.marathon_event.introduction, start_time:res.data.marathon_event.start_time, end_time:res.data.marathon_event.end_time, ad_img:res.data.ad_img, share_img:res.data.share_img }) }, onShow() { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 0 }) this.setData({ loggedIn: isLoggedIn() }) } }, goPage(e){ const index = e.currentTarget.dataset.index; if(index == 0){ wx.navigateTo({ url: `/pages/rules/rules?type=${index}` }) }else if(index == 1){ wx.navigateTo({ url: `/pages/rules/rules?type=${index}` }) } }, onShareAppMessage() { return { path: '/pages/index/index', imageUrl: app.globalData.programConfig.share_img } }, goRegister(e) { const action = e.currentTarget.dataset.action; if (isLoggedIn()) { this.doAction(action) } }, async onGetPhoneNumber(e) { const action = e.currentTarget.dataset.action; if (e.detail.errMsg !== 'getPhoneNumber:ok') { wx.showToast({ title: '授权失败', icon: 'none' }) return } const { encryptedData, iv } = e.detail; try { wx.login({ success: async loginRes => { await doLogin({ code: loginRes.code, phone: { encryptedData, iv } }); this.setData({ loggedIn: isLoggedIn() }) this.doAction(action); } }) } catch (err) { wx.showToast({ title: '登录失败,请重试', icon: 'none' }); console.error(err); } }, doAction(action) { if (action === 'register') wx.navigateTo({ url: '/pages/register/register' }); if (action === 'invite'){ this.setData({ showShare: true }); }; }, // 弹框取消 onClose(){ this.setData({ showShare: false }); }, // 点击海报生成图片 async openPoster(){ this.setData({ showPoster: true }, () => { this.drawPoster(); }); // wx.showLoading({ // title: '海报生成中...', // mask: true // }); // try { // const res = await sharePoster(); // if(res.code == 200){ // console.log(res.data); // this.setData({ showPoster:true,posterImg: res.data}); // } // } catch (error) { // console.log(error) // } finally{ // wx.hideLoading(); // } }, async drawPoster() { const ctx = wx.createCanvasContext('posterCanvas', this); const canvasWidth = 300; const canvasHeight = 600; const bottomHeight = 80; // 底部白色区域高度 // 先画整体背景图 const bgUrl = app.globalData.programConfig.share_img; if (bgUrl) { const bgPath = bgUrl.startsWith('http') ? await this.downloadImage(bgUrl) : bgUrl; ctx.drawImage(bgPath, 0, 0, canvasWidth, canvasHeight - bottomHeight); } else { ctx.setFillStyle('#fff'); ctx.fillRect(0, 0, canvasWidth, canvasHeight - bottomHeight); } // 底部白色区域 ctx.setFillStyle('#fff'); ctx.fillRect(0, canvasHeight - bottomHeight, canvasWidth, bottomHeight); // 用户头像(圆形)放在底部白色区域 const avatarUrl = app.globalData.userInfo.avatar; if (avatarUrl) { const avatarPath = avatarUrl.startsWith('http') ? await this.downloadImage(avatarUrl) : avatarUrl; const avatarX = 20; const avatarY = canvasHeight - bottomHeight + 10; ctx.save(); ctx.beginPath(); ctx.arc(avatarX + 30, avatarY + 30, 30, 0, Math.PI * 2); ctx.clip(); ctx.drawImage(avatarPath, avatarX, avatarY, 60, 60); ctx.restore(); } // 昵称放在头像右侧 const nickName = app.globalData.userInfo.nickname || '123456'; console.log(app.globalData.userInfo.nickName) ctx.setFontSize(16); ctx.setFillStyle('#000'); ctx.fillText(nickName, 100, canvasHeight - bottomHeight + 40); // 小程序二维码放在底部白色区域右下角 const qrUrl = app.globalData.programConfig.share_qrcode; if (qrUrl) { const qrPath = qrUrl.startsWith('http') ? await this.downloadImage(qrUrl) : qrUrl; const qrSize = 60; ctx.drawImage(qrPath, canvasWidth - qrSize - 20, canvasHeight - bottomHeight + 10, qrSize, qrSize); } // 绘制完成 ctx.draw(false, () => { wx.canvasToTempFilePath({ canvasId: 'posterCanvas', success: res => this.setData({ posterImg: res.tempFilePath }), fail: err => console.error(err) }, this); }); }, // 下载网络图片到临时路径 downloadImage(url) { return new Promise((resolve, reject) => { wx.downloadFile({ url, success(res) { if (res.statusCode === 200) resolve(res.tempFilePath); else reject(new Error('下载失败')); }, fail(err) { reject(err); } }); }); }, closePoster(){ this.setData({ showPoster: false}); }, // 保存相册 savePoster() { if (!this.data.posterImg) { wx.showToast({ title: '没有海报图片', icon: 'none' }); return; } wx.saveImageToPhotosAlbum({ filePath: this.data.posterImg, success() { wx.showToast({ title: '保存成功' }); }, fail(err) { if (err.errMsg.includes('auth')) wx.openSetting(); } }); }, // 发送朋友 sendImg(){ if (!this.data.posterImg) return; wx.showShareImageMenu({ path: this.data.posterImg, success() {}, fail: console.error, }); } })