wx-mls/pages/index/index - 副本.js

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,
    });
  }
})