vhall-mini-sdk 0.4.1 → 0.4.3

package/dist/components/mall-reward/index.js

@@ -0,0 +1,374 @@
+import { isEmpty, safeJsonParse, sleep, genRandom } from '../../shared/utils.js';
+import createLogger from '../../shared/logger.js';
+
+const log = createLogger('mall-reward');
+Component({
+  properties: {
+    sdkInstance: {
+      type: Object,
+      value: null,
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    initTime: 0,
+
+    mallRewardInfo: null,
+
+    activeMallReward: null, // 时间最近的未领取的奖励项
+    oriOnlineDuration: 0, // 最初始的在线时长(=mallRewardInfo?.online_duration || 0)
+
+    onlineDuration: 0, // 当前在线时长(倒计时会持续变化)
+
+    showIcon: false, // 是否显示小图标
+
+    showPopup: false, // 是否显示弹窗
+    filler: '', // 当前填充器
+    currentInfo: null, // 预处理后的当前福利信息，直接传给子组件渲染
+    isBubble: false, // 是否气泡显示, 因为气泡模式区域太小承载内容有限，且无遮罩，与产品沟通后调整为只有‘无条件+未领取’状态生效
+  },
+  observers: {
+    sdkInstance: function sdkInstance(_sdkInstance) {
+      if (!_sdkInstance) return;
+      log.info('mall-reward sdkInstance');
+      this.sdkInstance = _sdkInstance;
+      this.setData({
+        initTime: Date.now(),
+      });
+      this.initEventListener();
+
+      this.checkAndFetchMallRewardInfo('refresh');
+    },
+  },
+  lifetimes: {
+    attached() {
+      log.info('mall-reward component attached');
+    },
+    detached() {
+      this.unlistener?.();
+    },
+  },
+
+  methods: {
+    // 初始化事件监听
+    initEventListener() {
+      this.unlistener?.();
+      const obj = {};
+
+      // 推送商城奖励
+      obj[this.sdkInstance.EVENT.MALL_REWARD_PUSH] = (msg) => {
+        log.info('mallReward open msg:', JSON.stringify(msg));
+        const watchInitData = this.sdkInstance.store.get('watchInitData');
+        const webinarType = watchInitData?.webinar?.type;
+        if (!this.webinarType != 1) {
+          return;
+        }
+        this.checkAndFetchMallRewardInfo('push', { reward_id: msg.data?.id });
+        // 消息推送
+        // const data = {
+        //   roleName: msg.data.role_name,
+        //   nickname: msg.data.pusher_name,
+        //   avatar: '//cnstatic01.e.vhall.com/static/images/watch/system.png',
+        //   content: {
+        //     text_content: `${this.$t('chat.chat_1108')}`,
+        //   },
+        //   type: msg.data.type,
+        //   interactStatus: true,
+        // };
+        // useChatServer().addChatToList(data);
+      };
+
+      // 收到商城奖励结束消息
+      obj[this.sdkInstance.EVENT.MALL_REWARD_END] = (msg) => {
+        log.info('mallReward ------handleMsgMallRewardEnd-msg：', msg);
+        this.updateInfo(msg.data.id, { status: 2 });
+        if (
+          ['COUNTDOWN', 'OPEN'].includes(this.data.filler) &&
+          this.data.currentInfo?.reward_id === msg.data.id
+        ) {
+          this.changeMainFiller('');
+        }
+      };
+
+      // 直播结束
+      obj[this.sdkInstance.EVENT.LIVE_END] = (msg) => {
+        log.info('mallReward ------handleMsgMallRewardEnd-msg：', msg);
+        this.destroyTimer(); // 清除计时器
+        this.setData({
+          mallRewardInfo: null,
+          activeMallReward: null,
+          oriOnlineDuration: 0,
+          onlineDuration: 0,
+          showIcon: false,
+          showPopup: false,
+          filler: '',
+          currentInfo: null,
+        });
+      };
+
+      // 上线消息
+      obj[this.sdkInstance.EVENT.JOIN_MSG] = (msg) => {
+        log.info('mallReward ------handleMsgJoin-msg：', msg);
+        // 监听上线消息，刷新商城奖励数据条件：
+        //（1）上线的人是自己；（ 支持多端上线）
+        //（2）间隔初始化请求时间超过3s(否则每次刷新调用两次请求；是否可以仅使用JOIN消息请求？不行，因为join消息不可靠，有时候收不到)
+        if (!this.sdkInstance) return;
+        const watchInitData = this.sdkInstance.store.get('watchInitData');
+        const thirdPartyUserId = watchInitData?.join_info?.third_party_user_id;
+        /* prettier-ignore */
+        if (thirdPartyUserId && msg.sender_id == thirdPartyUserId && Date.now() - this.data.initTime > 3000) {
+          this.checkAndFetchMallRewardInfo('refresh');
+        }
+      };
+
+      // 下线消息
+      obj[this.sdkInstance.EVENT.LEAVE_MSG] = (msg) => {
+        log.info('mallReward ------handleMsgLeave-msg：', msg);
+        if (!this.sdkInstance) return;
+        const watchInitData = this.sdkInstance.store.get('watchInitData');
+        const localKickMark = this.sdkInstance.store.get('kickMark');
+        const localKickID = watchInitData?.sso?.kick_id;
+        const msgContex = safeJsonParse(msg?.context);
+        /* prettier-ignore */ // 自己下线了，计时器暂停
+        if (localKickMark && localKickID && msgContex.kick_id === localKickID && msgContex.kick_mark === localKickMark) {
+          console.log('mallReward 倒计时暂停');
+          this.destroyTimer();
+        }
+      };
+
+      this.unlistener = this.sdkInstance.on(obj);
+    },
+    async checkAndFetchMallRewardInfo(from, extra) {
+      log.info('mall-reward checkAndFetchMallRewardInfo start');
+      const mallRewardServer = this.sdkInstance.get('mallRewardServer');
+      if (!mallRewardServer) return;
+
+      const watchInitData = this.sdkInstance.store.get('watchInitData');
+      const webinarType = watchInitData?.webinar?.type;
+
+      if (webinarType != 1 && webinarType != 5) return;
+
+      if (from === 'refresh') {
+        this.destroyTimer();
+        this.changeMainFiller('');
+      }
+
+      if (from === 'push') {
+        // 延迟随机3s以内，再去调用接口，减少大并发
+        const rnd = genRandom(0, 3000);
+        await sleep(rnd);
+      }
+      const mallRewardInfo = await mallRewardServer.getValidList();
+      const activeMallReward = mallRewardServer.updateActiveMallReward();
+      this.setData({
+        mallRewardInfo: mallRewardInfo,
+        activeMallReward: activeMallReward,
+        oriOnlineDuration: mallRewardInfo?.online_duration || 0,
+        onlineDuration: mallRewardInfo?.online_duration || 0,
+      });
+      this.setData({
+        /* prettier-ignore */
+        showIcon: (webinarType == 1 || webinarType == 5) && (mallRewardInfo?.is_received == 1 || mallRewardInfo?.list?.length > 0),
+      });
+      if (webinarType == 1 || webinarType == 5) {
+        this.createTimer(); // 创建计时器
+      }
+
+      // 检查并弹窗
+      if (from === 'push' && extra?.reward_id && Array.isArray(mallRewardInfo?.list)) {
+        extra = mallRewardInfo.list.find((item) => item.reward_id == extra.reward_id);
+      }
+      this.checkAndOpenPopup(from, extra);
+    },
+    /**
+     * 创建定时器
+     */
+    createTimer() {
+      this.destroyTimer();
+
+      this.timer = setInterval(() => {
+        const currentTime = Date.now();
+        if (!this.startTime) {
+          // 如果还没记录开始时间，说明是刚启动定时器，记录当前时间作为开始时间
+          this.startTime = currentTime;
+        }
+        // 计时,延时问题处理
+        this.setData({
+          onlineDuration:
+            this.data.oriOnlineDuration + parseInt((Date.now() - this.startTime) / 1000),
+        });
+      }, 1000);
+    },
+    /**
+     * 销毁定时器
+     */
+    destroyTimer() {
+      if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = 0;
+      }
+      this.startTime = undefined;
+    },
+    // 关闭弹窗
+    handlePopupClose() {
+      this.setData({
+        showPopup: false,
+        filler: '',
+      });
+    },
+    // 点击icon图标
+    handleIconClick() {
+      this.checkAndOpenPopup('icon_click');
+    },
+    // 切换对话框视图
+    async changeMainFiller(filler, payload) {
+      this.setData({
+        showPopup: false,
+        filler: '',
+        currentInfo: null,
+        isBubble: false,
+      });
+      await sleep(20);
+      if (filler) {
+        const currentInfo = payload
+          ? { ...payload, tip_setting: safeJsonParse(payload.tip_setting) }
+          : { ...this.data.activeMallReward };
+        this.setData({
+          showPopup: true,
+          filler,
+          currentInfo,
+          isBubble:
+            filler === 'OPEN' &&
+            currentInfo?.viewing_minutes === 0 &&
+            currentInfo?.display_of_results === 1,
+        });
+      }
+    },
+    // 检测并打开对应的弹窗
+    async checkAndOpenPopup(action, payload) {
+      console.log('checkAndOpenPopup called with:', { action, payload });
+      const mallRewardInfo = this.sdkInstance.store.get('mallRewardInfo');
+      if (isEmpty(mallRewardInfo)) return;
+      switch (action) {
+        // 点击icon
+        case 'icon_click':
+          if (this.data.mallRewardInfo.list?.length === 1) {
+            // 列表中只有一条数据
+            const mrInfo = this.data.mallRewardInfo.list[0];
+            if (mrInfo.claim_status === 1) {
+              // 已领取(无论是无条件还是定时奖励)，都直接打开“开下收下”弹窗
+              this.changeMainFiller('RECEIVE', mrInfo);
+            } else if (
+              mrInfo.viewing_minutes === 0 &&
+              mrInfo.status === 1 &&
+              mrInfo.remaining_quota > 0
+            ) {
+              // （未领取）+ 无条件 + 推送中 + 有数量 可以拆商城奖励
+              this.changeMainFiller('OPEN', mrInfo);
+            } else if (
+              mrInfo.viewing_minutes > 0 &&
+              mrInfo.status === 0 &&
+              mrInfo.remaining_quota > 0
+            ) {
+              // （未领取）+ 定时奖励 + 推送中 + 有数量
+              if (this.data.onlineDuration <= mrInfo.viewing_minutes * 60) {
+                this.changeMainFiller('COUNTDOWN', mrInfo);
+              } else {
+                this.changeMainFiller('OPEN', mrInfo);
+              }
+            } else {
+              this.changeMainFiller('EMPTY');
+            }
+          } else if (this.data.mallRewardInfo.list?.length > 1) {
+            // 列表中有多条数据
+            this.changeMainFiller('HISTORY');
+          }
+          break;
+
+        // 推送触发
+        case 'push':
+          // 如果开了某些弹窗，则不操作
+          if (['OPEN', 'RECEIVE', 'EMPTY'].includes(this.data.filler)) return;
+          // 打开“立即领取”弹窗
+          this.changeMainFiller('OPEN', payload);
+          break;
+      }
+    },
+    // 更新某个奖励的属性
+    updateInfo(mallRewardId, attrs) {
+      if (this.data.mallRewardInfo) {
+        if (this.data.mallRewardInfo.list?.length > 0) {
+          for (let item of this.data.mallRewardInfo.list) {
+            if (item.reward_id === mallRewardId) {
+              Object.keys(attrs).forEach((k) => {
+                item[k] = attrs[k];
+              });
+              break;
+            }
+          }
+        }
+        if (attrs?.['claim_status'] == 1) {
+          this.data.mallRewardInfo.is_received = 1;
+        }
+        this.sdkInstance.store.set('mallRewardInfo', this.data.mallRewardInfo);
+        const mallRewardServer = this.sdkInstance.get('mallRewardServer');
+        const activeMallReward = mallRewardServer.updateActiveMallReward();
+        this.setData({
+          mallRewardInfo: this.data.mallRewardInfo,
+          activeMallReward: activeMallReward,
+        });
+      }
+    },
+
+    /**
+     * 立即领取福利
+     * @param {*} from 来源
+     *  1. claim_now 用户点击“立即领取”(默认).
+     *  2. countdown_end 倒计时结束自动立即领取
+     * @param {*} theInfo
+     * @returns
+     */
+    async claimNowHandler(from = 'claim_now', theInfo) {
+      console.log('claimNowHandler called with:', { from, theInfo });
+      const mallRewardServer = this.sdkInstance.get('mallRewardServer');
+      if (!mallRewardServer) return;
+
+      const rewardId = theInfo?.reward_id;
+      if (!rewardId) return;
+
+      const res = await mallRewardServer.claimMallReward(rewardId);
+      console.log('mallreward claim result:', res);
+      if (res?.code === 520099) {
+        // 已领光
+        this.updateInfo(rewardId, { remaining_quota: 0 });
+        this.changeMainFiller('EMPTY');
+      } else if (res?.code === 200 || res?.code === 520008) {
+        // 领取成功 || 已领取过
+        this.updateInfo(rewardId, { claim_status: 1 });
+        this.changeMainFiller('RECEIVE', { ...theInfo, claim_status: 1 });
+      } else {
+        // 其它错误，如果是手动点击的“立即领取”，有错误提示
+        if (from === 'claim_now') {
+          wx.showToast({
+            title: res?.msg || '领取失败',
+            icon: 'none',
+            duration: 2000,
+          });
+        } else {
+          this.changeMainFiller('OPEN', theInfo);
+        }
+      }
+    },
+    // 立即领取
+    onPopupClaim(e) {
+      this.claimNowHandler('claim_now', e.detail);
+    },
+    // 倒计时结束,自动领取福利
+    onCountdownEnd(e) {
+      this.claimNowHandler('countdown_end', e.detail);
+    },
+  },
+});

package/dist/components/mall-reward/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "duration-icon": "./duration-icon/index",
+    "main-popup": "./main-popup/index"
+  }
+}

package/dist/components/mall-reward/index.wxml

@@ -0,0 +1,4 @@
+<!-- 商城奖励浮动小图标 -->
+<duration-icon wx:if="{{showIcon}}" mallRewardInfo="{{mallRewardInfo}}" activeMallReward="{{activeMallReward}}" onlineDuration="{{onlineDuration}}" bind:onTapIcon="handleIconClick" bind:countdownEnd="onCountdownEnd"></duration-icon>
+<!-- 主弹窗组件 -->
+<main-popup show="{{showPopup}}" filler="{{filler}}" currentInfo="{{currentInfo}}" mallRewardInfo="{{mallRewardInfo}}" onlineDuration="{{onlineDuration}}" hasMask="{{true}}" isBubble="{{isBubble}}" bind:close="handlePopupClose" bind:claim="onPopupClaim"></main-popup>

package/dist/components/mall-reward/main-popup/index.js

@@ -0,0 +1,46 @@
+Component({
+  properties: {
+    show: { type: Boolean, value: false },
+    mallRewardInfo: { type: Object, value: null },
+    filler: { type: String, value: '' },
+    currentInfo: { type: Object, value: null },
+    onlineDuration: { type: Number, value: 0 },
+    isBubble: { type: Boolean, value: false }, //气泡模式
+  },
+
+  data: {
+    historyList: [],
+    tipMode: 1,
+    position: 'center', // 弹窗位置
+    showFooterCloseBtn: true,
+  },
+
+  observers: {
+    mallRewardInfo: function (newValue) {
+      if (newValue) {
+        this.setData({ historyList: newValue?.list || [] });
+      }
+    },
+    filler: function (filler) {
+      if (filler) {
+        const position = ['HISTORY'].includes(filler)
+          ? 'bottom'
+          : this.properties.isBubble
+            ? 'bottom-right'
+            : 'center';
+
+        this.setData({
+          tipMode: this.properties.currentInfo?.tip_mode || 1,
+          position: position,
+          showFooterCloseBtn: position === 'center',
+        });
+      }
+    },
+  },
+
+  methods: {
+    onClose() {
+      this.triggerEvent('close');
+    },
+  },
+});

package/dist/components/mall-reward/main-popup/index.json

@@ -0,0 +1,12 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "vh-popup": "../../../pubComponents/popup/popup",
+    "f-open": "../f-open/index",
+    "f-count-down": "../f-count-down/index",
+    "f-history": "../f-history/index",
+    "f-empty": "../f-empty/index",
+    "f-receive": "../f-receive/index"
+  }
+}

package/dist/components/mall-reward/main-popup/index.wxml

@@ -0,0 +1,16 @@
+<vh-popup wx:if="{{show}}" visible="{{show}}" showClose="{{false}}" mode="{{position}}" hasMask="{{!isBubble}}" maskClosable="{{false}}" hasGap="{{false}}" bgColor="transparent" bind:close="onClose">
+  <view class="mall-reward-pupup-content">
+    <!-- 福利领取未到时长，显示倒计时 -->
+    <f-count-down wx:if="{{filler==='COUNTDOWN'}}" tip-mode="{{tipMode}}" info="{{currentInfo}}" onlineDuration="{{onlineDuration}}" />
+    <!-- 拆福利（立即领取） -->
+    <f-open wx:if="{{filler==='OPEN'}}" isBubble="{{isBubble}}" tip-mode="{{tipMode}}" info="{{currentInfo}}" onlineDuration="{{onlineDuration}}" />
+    <!-- 开心收下 -->
+    <f-receive wx:if="{{filler==='RECEIVE'}}" tip-mode="{{tipMode}}" info="{{currentInfo}}" />
+    <!-- 福利已领完 -->
+    <f-empty wx:if="{{filler==='EMPTY'}}" />
+    <!-- 福利记录 -->
+    <f-history wx:if="{{filler==='HISTORY'}}" dataList="{{historyList}}" onlineDuration="{{onlineDuration}}" />
+    <!-- 是否显示关闭按钮 -->
+    <view wx:if="{{showFooterCloseBtn}}" class="close-btn" bindtap="onClose">✕</view>
+  </view>
+</vh-popup>

package/dist/components/mall-reward/main-popup/index.wxss

@@ -0,0 +1 @@
+.mall-reward-pupup-content{display:flex;flex-direction:column}.mall-reward-pupup-content .close-btn{align-items:center;border:5rpx solid hsla(0,0%,100%,.6);border-radius:50%;color:hsla(0,0%,100%,.8);display:flex;font-size:1.29rem;height:48rpx;justify-content:center;line-height:1;margin:24rpx auto 0;width:48rpx}

package/dist/components/praise/praise.js

@@ -0,0 +1,150 @@
+Component({
+  properties: {
+    sdkInstance: {
+      type: Object,
+      value: null,
+    },
+  },
+  data: {
+    likeCount: 0, // 点赞数
+    eleList: [], // 动画元素列表
+  },
+  observers: {
+    sdkInstance: function sdkInstance(_sdkInstance) {
+      if (!_sdkInstance) return;
+      this.sdkInstance = _sdkInstance;
+      this.initStoreListener();
+    },
+  },
+  lifetimes: {
+    detached() {
+      // 组件销毁时清除监听
+      this.unsub && this.unsub();
+    },
+  },
+  methods: {
+    // 初始化 store 监听
+    initStoreListener() {
+      this.unsub = this.sdkInstance.store.get({
+        likeCount: (val) => {
+          if (val !== undefined) {
+            let num = Number(val)
+            if (num >= 10000) {
+              const n = Math.floor((num / 10000) * 10) / 10;
+              if (n > 9999.9) {
+                num = '9999.9+w';
+              } else {
+                num = n + 'w';
+              }
+            }
+
+            this.setData({
+              likeCount: num
+            });
+          }
+        },
+      });
+    },
+    // 处理点赞点击
+    handleLike() {
+      if (!this.properties.sdkInstance) return;
+      const interactServer = this.properties.sdkInstance.get('interactServer');
+      if (interactServer) {
+        interactServer.like();
+      }
+      // 触发点赞动画
+      this.giveParise();
+    },
+    // 随机算法闭包生成封装
+    randomAlgorithmFactory(array) {
+      const randomBase = Math.ceil(array.length / 2); // 随机选择前半边的元素
+      return function () {
+        const idx = Math.floor(randomBase * Math.random());
+        const eleArr = array.splice(idx, 1); // 选中的元素摘除
+        const ele = eleArr[0];
+        array.push(ele); // 塞到队尾
+        return ele;
+      };
+    },
+    // 单次渲染一个元素的动画
+    renderParise() {
+      const iconList = [
+        {
+          name: 'happy',
+          url: 'happy.png'
+        },
+        {
+          name: 'balloon',
+          url: 'balloon.png'
+        },
+        {
+          name: 'quitegood',
+          url: 'quitegood.png'
+        },
+        {
+          name: 'star',
+          url: 'star.png'
+        },
+        {
+          name: 'microphone',
+          url: 'microphone.png'
+        },
+        {
+          name: 'love',
+          url: 'love.png'
+        },
+        {
+          name: 'likes2',
+          url: 'likes2.png'
+        },
+        {
+          name: 'likes',
+          url: 'likes.png'
+        }
+      ];
+      const toTopAnimations = [
+        'zan-animation-01',
+        'zan-animation-02',
+        'zan-animation-03',
+        'zan-animation-04'
+      ];
+      const shakeAnimations = [
+        'shake-animation-01',
+        'shake-animation-02',
+        'shake-animation-03',
+        'shake-animation-04'
+      ];
+
+      const pickIcon = this.randomAlgorithmFactory([...iconList]); // 挑选图标
+      const pick2TopAnimations = this.randomAlgorithmFactory([...toTopAnimations]); // 挑选向上动画
+      const pickShakeTopAnimations = this.randomAlgorithmFactory([...shakeAnimations]); // 挑选左右摇摆动画
+
+      const selectedIcon = pickIcon();
+      const uuid = Date.now() + Math.random(); // 唯一id
+      const newItem = {
+        uuid,
+        icon: selectedIcon.name,
+        iconUrl: `https://cnstatic01.e.vhall.com/common-static/weapp/praise/img/${selectedIcon.url}`,
+        toTopAnimation: pick2TopAnimations(),
+        shakeTopAnimations: pickShakeTopAnimations()
+      };
+
+      const eleList = this.data.eleList.concat(newItem);
+      this.setData({ eleList });
+
+      // 及时删除第一个被占位的元素
+      setTimeout(() => {
+        const newEleList = this.data.eleList.filter(item => item.uuid !== uuid);
+        this.setData({ eleList: newEleList });
+      }, 2000);
+    },
+    // 对外暴露的点赞函数
+    giveParise() {
+      const maxCount = 2; // 一次点赞最大渲染元素次数
+      const count = Math.ceil(Math.random() * maxCount);
+      for (let i = 0; i < count; i++) {
+        this.renderParise();
+      }
+    },
+  },
+});

package/dist/components/praise/praise.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {}
+}

package/dist/components/praise/praise.wxml

@@ -0,0 +1,17 @@
+<view class="praise-container">
+  <view class="praise-button" bindtap="handleLike">
+    <image class="praise-icon" src="https://cnstatic01.e.vhall.com/common-static/saas-wap/static/img/icon_like0.866359fe.png" mode="aspectFit"></image>
+    <view class="praise-count" wx:if="{{likeCount>0}}">{{likeCount}}</view>
+  </view>
+  
+  <!-- 点赞动画区域 -->
+  <view class="zan-zone">
+    <view 
+      wx:for="{{eleList}}" 
+      wx:key="uuid" 
+      class="zan-icon-wrapper {{item.toTopAnimation}}"
+    >
+      <image class="zan-icon {{item.shakeTopAnimations}}" src="{{item.iconUrl}}" mode="aspectFit"></image>
+    </view>
+  </view>
+</view>

package/dist/components/praise/praise.wxss

@@ -0,0 +1 @@
+.praise-button,.praise-container{position:relative}.praise-button{align-items:center;background:rgba(6,6,6,.25);border-radius:50%;display:flex;height:2rem;justify-content:center;width:2rem}.praise-button:active{transform:scale(.9)}.praise-icon{height:100%;width:100%}.praise-count{align-items:center;background-color:#ff4d4f;border:2rpx solid #fff;border-radius:16rpx;box-shadow:0 2rpx 8rpx rgba(255,77,79,.2);color:#fff;display:flex;font-size:.71rem;font-weight:700;height:32rpx;justify-content:center;min-width:32rpx;padding:0 8rpx;position:absolute;right:-8rpx;top:-8rpx}.zan-zone{bottom:100rpx;display:block;height:500rpx;pointer-events:none;position:fixed;right:0;width:100rpx;z-index:1000}.zan-icon-wrapper{bottom:0;display:block;left:0;opacity:0;position:absolute}.zan-icon{display:inline-block;height:70rpx;left:0;position:relative;width:70rpx}.zan-animation-01{animation:toTop 2s linear 0s}.zan-animation-02{animation:toTop 1.8s linear 0s}.zan-animation-03{animation:toTop 1.6s linear 0s}.zan-animation-04{animation:toTop 1.4s linear 0s}.zan-icon.shake-animation-01{animation:shake1 2s linear 0s}.zan-icon.shake-animation-02{animation:shake2 2s linear 0s}.zan-icon.shake-animation-03{animation:shake3 2s linear 0s}.zan-icon.shake-animation-04{animation:shake4 2s linear 0s}@keyframes toTop{0%{bottom:-40rpx;opacity:1;transform:scale(0)}10%{bottom:-20rpx;opacity:1;transform:scale(1)}50%{bottom:300rpx}60%{bottom:360rpx;opacity:.8}70%{bottom:420rpx}80%{bottom:480rpx}90%{bottom:600rpx}to{bottom:660rpx;opacity:0}}@keyframes shake1{0%{left:0}25%{left:-20rpx}50%{left:0}75%{left:-20rpx}to{left:0}}@keyframes shake2{0%{left:0}80%{left:-80rpx}to{left:-40rpx}}@keyframes shake3{0%{left:0}65%{left:-20rpx}to{left:30rpx}}@keyframes shake4{0%{left:0}20%{left:-30rpx}70%{left:40rpx}to{left:10rpx}}