Red Envelope Component

Currently available for specific customers.

This document describes how to integrate the red envelope component on the interaction feature receiving end. After integration, viewers can receive three types of red envelopes: normal red envelopes, password red envelopes, and red envelope rain.

Points Red Envelope: After winning, the red envelope amount will be automatically credited to the user's points account. Users can view the history of points received in the points records.

Alipay Red Envelope: After winning, an Alipay password will be provided. Copy the password and search for the red envelope in Alipay to claim it.

Note: This feature is only supported in version 0.11.1-beta.2 and above. Please install the corresponding version to use it.
npm i @polyv/interactions-receive-sdk@0.15.7
npm i @polyv/interactions-receive-sdk-ui-default@0.15.7

Before using this component, you need to perform the public configuration for the interaction feature receiving end SDK. For details, please refer to: Interaction Feature Receiving End UI Component - Configure SDK.

Import

Online File Import

// 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 Method (Recommended)

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

Component Injection - Red Envelope Instance Code Example

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

Example of integrating the red envelope component on mobile:

<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

Red Envelope Pendant Component Code Example

<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

Red Envelope Message Component Code Example

<!-- 聊天列表红包消息组件内容 -->
<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

Red Envelope Rain Component Code Example

<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

Red Envelope Points Record Component Code Example

<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