淘宝乐园新人权益活动设计与实现

// 事件管理export const Evt = {  // ...  // 游戏广场  IndexHall: getModuleEvent<IIndexHall.IEvent>('IndexHall'),};
// 数据管理export const Store = {  // ...  // 游戏广场  IndexHall: getModuleStore<IIndexHall.IData>('IndexHall'),};
// 以事件触发与监听为例，数据类似function getModuleEvent<E>(moduleName: PageName) {  return {    /** 触发事件 */    emit: function emit<T extends keyof E>(name: T, data?: E[T]): void {      mx.event.emit(`${moduleName}.${String(name)}`, data);    },    /** 监听事件 */    on: function on<T extends keyof E>(name: T, callback: (data: E[T]) => void, needMakeup?: boolean): void {      mx.event.on(`${moduleName}.${String(name)}`, callback, needMakeup);    },    /** 取消监听事件 */    off: function off<T extends keyof E>(name: T, callback?: (data?: E[T]) => void): void {      mx.event.off(`${moduleName}.${String(name)}`, callback);    },    /** 一次性监听事件 */    once: function once<T extends keyof E>(name: T, callback: (data: E[T]) => void): void {      const wrapCallback = (data) => {        callback(data);        this.off(name, wrapCallback);      };      this.on(name, wrapCallback);    },  };}

// 事件类型注册declare namespace IIndexHall {  // ...  interface IEvent {    // ...    Event_Envelope_Init: () => void;    Event_Envelope_Open: any;    Event_Envelope_Refresh: () => void;  }}
// 事件触发与监听 - 红包活动初始化Evt.IndexHall.on(ENVELOPE_EVENT.Event_Envelope_Init, (data: any) => {  // 事件监听  data && Evt.IndexHall.emit(ENVELOPE_EVENT.Event_Envelope_Refresh, data);  // 事件触发  const activityData = getActivityData(data, TASK_TYPE.MISSION_UPGRADES_AND_EARNS_REWARDS);  Store.IndexHall.update('activityData', activityData);  // 数据更新});

showGuide({  x: px2rpx(guideBtnRef.current.offsetLeft),  y: px2rpx(guideBtnRef.current.offsetTop),  width: px2rpx(targetReact.width),  height: px2rpx(targetReact.height),  clientX: targetReact.left,  clientY: targetReact.top,  pixelWidth: targetReact.width,  pixelHeight: targetReact.height,  popText: <GuidePopComp guideText='引导文案' picList={[guideData?.benefit?.pic]} />,  popWidth: 456,  popStyle: { padding: 0, width: 'max-content' },  popHeight: 136,  clickCallback: (isClickOnTarget) => {    // 点击事件回调    if (isClickOnTarget) {      // 数据埋点      doTracker({        logkey: '/xxxx.xxxx.xxxx',        gmkey: 'CLK',      });      Evt.IndexGame.emit('Event_IndexHall_Guild');    } else {      // 用户未点击    }  },})

/** * 确保异步订阅在异步查询订阅状态列表之前执行 */export async function subscriptionAsync() {  // 行为埋点  doTracker({    logkey: '/xxxx.xxxx.xxxx',    gmkey: 'CLK',  });  try {    await subscription();  } catch (e) {    logError(e);  }};
/** * 确保异步取消订阅在异步查询订阅状态列表之前执行 */export async function unsubscriptionAsync() {  // 行为埋点  doTracker({    logkey: '/xxxx.xxxx.xxxx',    gmkey: 'CLK',  });  try {    await unsubscription();  } catch (e) {    logError(e);  }};
/** * 查询并更新订阅状态 */export const setSubscriptionStatus = async () => {  try {    const subscriptionStatus = await checkSubscriptionStatus();    Store.IndexHall.update('subscriptionStatus', subscriptionStatus);    logInfo('订阅状态', subscriptionStatus);  } catch (e) {    logError(e);  }}

/** * * @param params * @ 开始位置 startPos: { x: number; y: number }| HTMLElement; * @ 结束位置 endPos: { x: number; y: number } | HTMLElement; * @ 动画总时间 during?: number; 单位：毫秒 * @ 飞行的图片 flyImage?: string; * @ 飞行图片大小 flyImageSize?: { width: number; height: number }; * @ 飞行个数 flyNumber?: number; * @ 飞行间隔时间 singleDelay?: number; * @ 最终缩放值 endScale?: number;; * @ 起点是否考虑屏幕滚动 withScreenStart?: boolean; * @ 终点是否考虑屏幕滚动 withScreenEnd?: boolean; * @ 图片做不做圆角处理 isFlyComShapeRound?: boolean; */await FlyAnimationComponent({  startPos: document.getElementById(`envelope${level}`) || { x: 0, y: 0 },  endPos: document.getElementById('envelopeAmount') || { x: 343, y: 690 },  during: 800,  flyImage: ICON.open_envelope,  flyNumber: 5,  singleDelay: 0.1,  endScale: 0.6,});