wx-mls/pages/index/index.js

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:'',//生成的海报
  },
  onLoad(){
    // this.getminiProgramConfig();
  },
  // 获取配置信息
  async getminiProgramConfig(){
    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(!wx.getStorageSync('programConfig')){
      this.getminiProgramConfig();
    }
    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 || wx.getStorageSync('userInfo');
    const programConfig = app.globalData.programConfig || wx.getStorageSync('programConfig');
    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 userInfo = app.globalData.userInfo || wx.getStorageSync('userInfo');
    const programConfig = app.globalData.programConfig || wx.getStorageSync('programConfig');
    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 = 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 = 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 = 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 = 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() {
    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,
    });
  }
})