import {miniProgramConfig,sharePoster} from '../../api/other'; import {BASE_URL} from '../../utils/request'; import {isLoggedIn,doLogin} from '../../utils/auth'; import { REPORT_BEHAVIOR } from '../../utils/util.js'; 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(); wx.setStorageSync('programConfig', res.data); 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() { REPORT_BEHAVIOR('分享'); 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() { const userInfo = app.globalData.userInfo; const programConfig = app.globalData.programConfig; console.log(userInfo) const posterKey = `posterImg_${userInfo.avatar}_${userInfo.nickname}_${programConfig.share_img}_${programConfig.share_qrcode}`; const cachedData = wx.getStorageSync('posterCache') || {}; if (cachedData.key === posterKey && cachedData.path) { this.setData({ posterImg: cachedData.path, showPoster: true }); } else { this.setData({ showPoster: true }, async () => { const path = await this.drawPoster(); wx.setStorageSync('posterCache', { key: posterKey, path }); }); } }, async drawPoster() { const ctx = wx.createCanvasContext('posterCanvas', this); const canvasWidth = 300; const canvasHeight = 600; const bottomHeight = 80; const radius = 16; // 圆角半径 ctx.save(); ctx.setFillStyle('#fff'); this.drawRoundRect(ctx, 0, 0, canvasWidth, canvasHeight, radius); // 背景图 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); } // 底部白色区域 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 avatarSize = 40; const avatarX = 20; const avatarY = canvasHeight - bottomHeight + (bottomHeight - avatarSize) / 2; ctx.save(); ctx.beginPath(); ctx.arc(avatarX + avatarSize / 2, avatarY + avatarSize / 2, avatarSize / 2, 0, Math.PI * 2); ctx.clip(); ctx.drawImage(avatarPath, avatarX, avatarY, avatarSize, avatarSize); ctx.restore(); } // 昵称 const nickName = app.globalData.userInfo.nickname || '游客'; ctx.setFontSize(16); ctx.setFillStyle('#000'); const textX = 20 + 40 + 12; const textY = canvasHeight - bottomHeight + bottomHeight / 2 + 6; ctx.fillText(nickName, textX, textY); // 二维码 const qrUrl = app.globalData.programConfig.share_qrcode; if (qrUrl) { const qrPath = qrUrl.startsWith('http') ? await this.downloadImage(qrUrl) : qrUrl; const qrSize = 50; const qrX = canvasWidth - qrSize - 20; const qrY = canvasHeight - bottomHeight + (bottomHeight - qrSize) / 2; ctx.drawImage(qrPath, qrX, qrY, qrSize, qrSize); } ctx.restore(); // 恢复裁剪 return new Promise((resolve, reject) => { ctx.draw(true, () => { wx.canvasToTempFilePath({ canvasId: 'posterCanvas', success: res => resolve(res.tempFilePath), fail: err => { console.error('生成临时文件失败:', err); reject(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); } }); }); }, // 绘制圆角矩形函数 drawRoundRect(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r); ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath(); ctx.fill(); ctx.clip(); // 关键:裁剪出圆角 }, 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, }); } })