紅包元件

目前針對特定客戶開放使用。

本文檔主要描述如何接入互動功能接收端的紅包元件，接入後可實現觀眾端領取普通紅包、口令紅包和紅包雨的三種領取類型紅包。

積分紅包： 中獎後，紅包會自動發放到用戶的積分帳戶中，用戶可以在積分記錄中查看領取積分歷史。

支付寶紅包： 中獎後，可獲得支付寶口令，複製該口令，可在支付寶中搜尋領取紅包。

注意：本功能目前只支援 0.11.1-beta.2 及以上版本，如要使用請安裝對應版本。
npm i @polyv/interactions-receive-sdk@0.15.7
npm i @polyv/interactions-receive-sdk-ui-default@0.15.7

使用本功能元件前，需要先對互動功能接收端 SDK 進行公共配置，詳情請查看：互動功能接收端 UI 元件 - 配置 SDK。

引入

線上檔案引入方式

// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/MobileRedEnvelope/MobileRedEnvelope.umd.min.js"></script>
// 移动端
<script>
    const MobileRedEnvelope = window.PolyvIRScene.MobileRedEnvelope.default;
</script>

import 方式引入（推薦）

import { MobileRedEnvelope } from '@polyv/interactions-receive-sdk-ui-default/lib/PcWelfareLottery';

元件注入-紅包實例 程式碼範例

import { RedEnvelope } from '@polyv/interactions-receive-sdk';
export default {
    // 注入 redEnvelopeSdk 给子组件使用， redEnvelopeSdk 是红包实例 只实例化一次
    provide() {
        return {
            redEnvelopeSdk: new RedEnvelope()
        };
    },
    // 业务逻辑
    ...
}

以行動端接入為例紅包元件：

<template>
  <div>
    <red-envelope
      :red-envelope-sdk="redEnvelopeSdk"
      :redEnvelopeData="redEnvelopeData"
      :coverImg="redPackSkin"
      :openId="openId"
      :lang="lang"
      :withDrawEnabled="withDrawEnabled"
      :redirect-url="watchCodeUrl"
      :unit="donateSetting.scoreUnit"
      @copy-success="$emit('copySuccess')"
      @close="handleCloseRedEnvelope"
      @statusChange="handleStatusChange"
      @click-withdraw="handleClickWithdraw"
      @click-point-record="handleClickPoint"
      @received="handleReceived"
    />
  </div>
</template>

<script>
import RedEnvelope from '@polyv/interactions-receive-sdk-ui-default/lib/MobileRedEnvelope';
import mixin from './mixin';
export default {
  mixins: [mixin],
  components: {
    RedEnvelope
  },
  methods: {
    handleClickWithdraw() {
      // TODO 点击提现, 跳转到提现页面
      this.redEnvelopeData = null;
    },
    handleReceived(pwd) {
        // TODO 红包领取成功， pwd 为口令红包口令，领取成功后需要发言
    },
    handleClickPoint() {
        // TODO 点击积分记录，展示积分记录弹窗
      this.redEnvelopeData = null;
    },
  }
};
</script>

/**
 * @file 红包组件逻辑
 */
import { mapState } from 'vuex';

export default {
  data() {
    return {
      // 红包信息
      redEnvelopeData: null,
      // 红包主体显示
      showRedEnvelope: false,
    };
  },
  inject: ['redEnvelopeSdk'],
  props: {
    redPackSkin: {
      type: String,
      default: ''
    },
    withDrawEnabled: {
      type: Boolean,
      default: true,
    },
    // 观看地址
    watchCodeUrl: {
      type: String,
      default: '',
    },
    // 打赏设置
    donateSetting: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    ...mapState({
      lang: state => state.lang.lang,
    }),
    openId() {
      return this.redEnvelopeData?.user?.openId || this.redEnvelopeData?.openId || '';
    },
  },

  mounted() {
    this.bindAppEvents();
  },

  beforeUnmount() {
    this.unbindAppEvents();
  },

  methods: {
    handleCloseRedEnvelope() {
        this.redEnvelopeData = null;
    },
    handleOpenRedEnvelop(data) {
      const {
        content: greeting,
        type, redCacheId, redpackId, user: {
          pic: avatar,
          nick: nickname
        }
      } = data;
      if (type.includes('rain')) {
          // 打开红包雨组件
        this.$eventBus.$emit('OPEN_REDPACK_RAIN', {
          redCacheId,
          redPackId: redpackId,
          avatar,
          nickname,
          greeting,
          type
        });
      } else {
        this.redEnvelopeData = data;
      }
    },
    handleStatusChange(redpackId, status) {
        // 通知聊天室窗口改变红包状态
      this.$eventBus.$emit('SET_ENTRANCE_STATUS', {
        redpackId,
        status
      });
    }
  },
};

Attributes

customImgConfig

Event

紅包掛件元件 程式碼範例

<template>
  <red-envelop-pendant
    v-if="showPendant"
    :type="redEnvelopeDelayData.type || redEnvelopeDelayData.redpackType"
    :time="redEnvelopeDelayData.delayTime"
    @end="handleCloseRedPendant"
  />
</template>

<script>
import RedEnvelopPendant from '@polyv/interactions-receive-sdk-ui-default/lib/RedEnvelopePendant';
import mixin from './mixin';
export default {
  mixins: [mixin],
  components: {
    RedEnvelopPendant
  },
};
</script>

/**
 * @file 红包挂件组件逻辑
 */
export default {
  data() {
    return {
      // 红包挂件显示
      showPendant: false,
      // 倒计时红包内容
      redEnvelopeDelayData: null,
      // 接口是否请求完毕
      getNewestRequestEnd: true,
    };
  },
  watch: {
    redEnvelopeSdk: {
      immediate: true,
      handler() {
        this.handleRedPaper = this.handleRedPaperEvent.bind(this);
        this.handleRedPaperDelay = this.handleRedPaperDelayEvent.bind(this);
        this.bindAppEvents();
      }
    },
  }, 
  // 父组件注入 redEnvelopeSdk 实例
  inject: ['redEnvelopeSdk'],
  mounted() {
    // 是否有延时红包
    this.getNewest();
    this.handleVisibilitychange();
  },
  beforeUnmount() {
    this.unbindAppEvents();
  },

  methods: {
    // 是否有延时红包
    async getNewest() {
      this.getNewestRequestEnd = false;
      const result = await this.redEnvelopeSdk.getNewest();
      this.getNewestRequestEnd = true;
      const { code, data } = result;
      const delayTime = data ? Math.round((data.sendTime - data.serverTime) / 1000) : 0;
      if (code === 200 && data && data.timeEnabled === 'Y' && delayTime > 0) {
        this.redEnvelopeDelayData = {
          ...data,
          pic: data.avatar,
          delayTime
        };
        this.showPendant = true;
      }
    },
    // 监听红包相关事件
    bindAppEvents() {
      const redEnvelopeSdk = this.redEnvelopeSdk;
      redEnvelopeSdk && redEnvelopeSdk
        .on(redEnvelopeSdk.events.REDPAPER_FOR_DELAY, this.handleRedPaperDelay)
        .on(redEnvelopeSdk.events.REDPAPER, this.handleRedPaper);
    },
    // 取消监听红包相关事件
    unbindAppEvents() {
      const redEnvelopeSdk = this.redEnvelopeSdk;
      redEnvelopeSdk && redEnvelopeSdk
        .off(redEnvelopeSdk.events.REDPAPER_FOR_DELAY, this.handleRedPaperDelay)
        .off(redEnvelopeSdk.events.REDPAPER, this.handleRedPaper);
    },
    handleRedPaperDelayEvent(data) {
      this.redEnvelopeDelayData = data;
      this.showPendant = true;
    },
    handleRedPaperEvent() {
      this.showPendant = false;
    },
    handleCloseRedPendant() {
      this.showPendant = false;
    },
    handleVisibilitychange() {
      // 页面最近一次隐藏的时间
      let latestTime;
      document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'visible' && this.getNewestRequestEnd && latestTime && (Date.now() - latestTime) > 1000) {
          this.getNewest();
        }
        if (document.visibilityState === 'hidden') {
          latestTime = Date.now();
        }
      });
    }
  },
};

Attributes

Event

紅包訊息元件 程式碼範例

<!-- 聊天列表红包消息组件内容 -->
<template>
  <div class="c-red-paper-msg">
      <red-envelope-entrance
        ref="redEnvelopEntrance"
        :red-envelope-data="msg"
        :red-envelope-sdk="redEnvelopeSdk"
        :lang="lang"
        @open="handleRedpackVisible"/>
  </div>
</template>

<script>
import RedEnvelopeEntrance from '@polyv/interactions-receive-sdk-ui-default/lib/RedEnvelopeEntrance';
import mixin from '../mixins';

export default {
  mixins: [mixin],

  components: {
    RedEnvelopeEntrance
  },

  props: {
    msg: Object,
  },
};
</script>

export default {
  inject: ['redEnvelopeSdk'],
  mounted() {
    this.$eventBus.$on('SET_ENTRANCE_STATUS', this.handleStatusUpdate);
  },
  beforeDestroy() {
    this.$eventBus.$off('SET_ENTRANCE_STATUS', this.handleStatusUpdate);
  },
  props: {
    msg: {
      type: Object
    },
    lang: {
      type: String
    },
  },
  methods: {
    handleRedpackVisible() {
      this.$eventBus.$emit('OPEN_REDPAPER', this.msg);
    },
    handleStatusUpdate({
      redpackId,
      status
    }) {
      if (this.msg.redpackId === redpackId) {
       // 更新消息列表红包状态
          this.$refs.redEnvelopEntrance.updateStatus(status);
      }
    },
  }
};

Attributes

Event

紅包雨元件 程式碼範例

<template>
  <div>
    <redpack-rain-comp
      ref="redpackRain"
      :redpack-rain="redpackRainSdk"
      :lang="lang"
      :customThemeImgs="customRedpackThemeImgs"
      :withDrawEnabled="withDrawEnabled"
      :redirect-url="watchCodeUrl"
      :unit="donateSetting.scoreUnit"
      @click-withdraw="handleClickWithdraw"
      @copy-success="handleCopySuccess"
      @state-change="handleStateChange"
      @visible-change="handleVisibleChange"
      @click-point-record="handleClickPoint"
    />
  </div>
</template>

<script>
import mixin from './mixin';
import RedpackRainComp from '@polyv/interactions-receive-sdk-ui-default/lib/MobileRedpackRain';
export default {
  mixins: [mixin],
  components: {
    RedpackRainComp
  }
};
</script>

/**
 * @file 红包雨组件逻辑
 */
import { RedpackRain } from '@polyv/interactions-receive-sdk';

export default {
  props: {
    lang: {
      type: String,
      default: 'zh_CN'
    },
    customRedpackThemeImgs: {
      type: Object,
    },
    withDrawEnabled: {
      type: Boolean,
      default: true
    },
    // 观看地址
    watchCodeUrl: {
      type: String,
      default: '',
    },
    donateSetting: {
      type: Object,
      default: () => {
        return {};
      }
    },
  },
  data() {
    return {
      redpackRainSdk: null, 
      redEnvelopeData: null
    };
  },
  created() {
    this.redpackRainSdk = new RedpackRain();
    // 监听消息列表红包雨点击事件
    this.$eventBus.$on('OPEN_REDPACK_RAIN', this.openRedpackRain);
  },
  beforeDestroy() {
    this.$eventBus.$off('OPEN_REDPACK_RAIN', this.openRedpackRain);
    this.redpackRainSdk = null;
  },
  methods: {
    // 处理点击提现
    handleClickWithdraw() {
    },
    // 处理点击积分记录
    handleClickPoint() {
      
    },
    // 处理复制成功
    handleCopySuccess() {
       // TODO Toast提示 复制成功
    },
    // 调用红包组件的展示方法
    openRedpackRain(data) {
      this.redEnvelopeData = data;
      this.$refs.redpackRain.showRedpackRain({
        ...data,
        source: 'msg'
      });
    },
      // 通知聊天室窗口改变红包状态
    handleStateChange({ redPackId, state }) {
      this.$eventBus.$emit('SET_ENTRANCE_STATUS', {
        redpackId: redPackId,
        status: state
      });
    },
    handleVisibleChange(visible) {
     // TODO 红包弹窗显示隐藏回调
    },
  }
};

Attributes

Event

Methods

紅包積分記錄元件 程式碼範例

<template>
  <div class="plv-demo-point-re-record-default">
      <modal
        :visible="isShowResult"
        title="积分记录"
        :modal-style="{
          height: 'auto',
          position: 'absolute',
          bottom: '0',
        }"
        @close="isShowResult = false"
      >
        <MobilePointRERecord v-if="isShowResult" :red-envelope-sdk="redEnvelopeSdk" unit="点" />
      </modal>
  </div>
</template>

<script>
import MobilePointRERecord from '@polyv/interactions-receive-sdk-ui-default/lib/MobilePointRERecord';
// Modal 是移动端弹窗组件,
import Modal from '../MobileModal';

export default {
  components: {
    MobilePointRERecord,
    Modal
  }, 
  data() {
    return {
    // 红包 SDK 实例
        redEnvelopeSdk: null,
        isShowResult: true
    };
  },
  created() {
    this.redEnvelopeSdk = new RedEnvelope();
  },
};
</script>

<style lang="scss">
.plv-demo-point-re-record-default {
  width: 100%;
}
</style>

Attributes