邀请卡
<p>[TOC]</p>
<h4>安装</h4>
<p>七巧板基于 VUE （2.5）， Webpack (3.0) 请确保已具备较新的 node 环境。</p>
<h4>邀请卡控制台使用</h4>
<p>当前用法中所有参数，均为必填参数，可以设置邀请卡开始或关闭状态，设置邀请卡标题、简介、主办方、时间、背景图、活动地点及展示方式</p>
<pre><code class="language-javascript"><template>
<div class="vh-invitation-control">
邀请卡
<el-switch
v-model="showInvite"
active-color="#409eff"
inactive-color="#d2d2d2"
@change="switchInviteCard"
>
</el-switch>
<span class="vh-info"
>开启后，观众可以在观看页面中生成邀请卡，邀请好友观看</span
>
<div class="vh-share-btns">
<el-button class="vh-show-codeimg">扫码查看</el-button>
<div class="vh-code-img">
<img :src="'//aliqr.e.vhall.com/qr.png?t=' + inviteQrUrl" alt="" />
</div>
<el-button @click="downLoad">本地下载</el-button>
</div>
</div>
<div class="invitation-wrap">
<invitation-Card-Control
ref="invitationCardControl"
:urlDefault="urlDefault"
:roomInfo="roomInfo"
:inviteQrUrl="inviteQrUrl"
:userName="userName"
:showInvite="showInvite"
></invitation-Card-Control>
</div>
</template>
<script>
import invitationCardControl from '../../libs/fe-bu-invitationcard/invitation-card-control'
export default {
props: {
},
data() {
return {
roomInfo:{
vss_token: '',
room_id: ''
},
urlDefault: '//t-static01-open.e.vhall.com', // 邀请卡背景图阿里云域名
userName: 'Biu~Biu~', // 当前用户名称
inviteQrUrl: 'https://webcastingtest.new.azc.astrazeneca.cn/publish/invitationCard/5325/86', // 邀请卡路径
showInvite: false // 当前活动是否开启邀请卡
}
},
created() {
this.$nextTick(() => {
this.showInvite = sessionStorage.getItem('vhall-is-invitecard') == 1
})
},
mounted() {},
methods: {
/**
* 下载邀请卡
*/
downLoad() {
this.$refs.invitationCardControl.downLoadImg() // 下载邀请卡调用组件方法
},
/**
* 更新邀请卡开启关闭状态
*/
switchInviteCard() {
this.$refs.invitationCardControl.switchInviteCard(this.showInvite) // 更新邀请卡开启关闭状态调用组件方法
}
},
components: { invitationCardControl }
}
</script></code></pre>
<h4>邀请卡 Wap 端使用</h4>
<p>当前用法中所有参数，均为必填参数，可以显示已经配置好的邀请卡,由于参数设置相关问题，目前只能支持 history 模式</p>
<pre><code class="language-javascript"><template>
<section>
<invitation-Card
:user_name="user_name"
:inviteQrUrl="inviteQrUrl"
:urlDefault="urlDefault"
></invitation-Card>
</section>
</template>
<script>
import invitationCard from '../libs/fe-mobile-invitationcard'
export default {
data() {
return {
urlDefault: '//t-static01-open.e.vhall.com', // 邀请卡背景图阿里云域名
user_name: 'Biu~Biu~', // 当前用户名称
inviteQrUrl: 'https://webcastingtest.new.azc.astrazeneca.cn/publish/invitationCard/5325/86' // 邀请卡路径
}
},
components: { invitationCard },
props: {
webinar: {
type: Object,
default: () => {
return {}
}
}
},
methods: {}
}
</script></code></pre>
<h4>props</h4>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选值</th>
<th>默认值</th>
<th>必填</th>
</tr>
</thead>
<tbody>
<tr>
<td>urlDefault</td>
<td>默认背景图存放域名</td>
<td>String</td>
<td>-</td>
<td>-</td>
<td>是</td>
</tr>
<tr>
<td>roomInfo</td>
<td>-</td>
<td>Object</td>
<td>-</td>
<td>{vss_token:'',room_id:''}</td>
<td>是</td>
</tr>
<tr>
<td>inviteQrUrl</td>
<td>邀请卡二维码对应观看地址</td>
<td>String</td>
<td>-</td>
<td>-</td>
<td>是</td>
</tr>
</tbody>
</table>
<h4>wap 端 props</h4>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选值</th>
<th>默认值</th>
<th>必填</th>
</tr>
</thead>
<tbody>
<tr>
<td>urlDefault</td>
<td>默认背景图存放域名</td>
<td>String</td>
<td>-</td>
<td>-</td>
<td>是</td>
</tr>
<tr>
<td>vss_token</td>
<td>vss_token</td>
<td>Object</td>
<td>-</td>
<td>-</td>
<td>是</td>
</tr>
<tr>
<td>room_id</td>
<td>房间 id</td>
<td>Object</td>
<td>-</td>
<td>-</td>
<td>是</td>
</tr>
<tr>
<td>inviteQrUrl</td>
<td>邀请卡二维码对应观看地址</td>
<td>String</td>
<td>-</td>
<td>-</td>
<td>是</td>
</tr>
</tbody>
</table>
<h4>邀请卡 v1.1 版本升级，优化 class 名称</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">原CLass</th>
<th style="text-align: left;">修改后Class</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">vh-invitation-card-control-wrap</td>
<td style="text-align: left;">vh-invitation-card__control-wrap</td>
</tr>
<tr>
<td style="text-align: left;">vh-mark</td>
<td style="text-align: left;">vh-invitation-card__mark</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card-input-warp</td>
<td style="text-align: left;">vh-invitation-card__input-warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card-title-warp</td>
<td style="text-align: left;">vh-invitation-card__title-warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card_center</td>
<td style="text-align: left;">vh-invitation-card__center</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card_update-img</td>
<td style="text-align: left;">vh-invitation-card__update-img</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card_update-img-btn</td>
<td style="text-align: left;">vh-invitation-card__update-img-btn</td>
</tr>
<tr>
<td style="text-align: left;">vh-select-warp</td>
<td style="text-align: left;">vh-invitation-card__select-warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-active</td>
<td style="text-align: left;">vh-invitation-card__active</td>
</tr>
<tr>
<td style="text-align: left;">vh-text-mark</td>
<td style="text-align: left;">vh-invitation-card__text-mark</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card-icon</td>
<td style="text-align: left;">vh-invitation-card__card-icon</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card-preview-warp</td>
<td style="text-align: left;">vh-invitation-card__preview-warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card_preview-content</td>
<td style="text-align: left;">vh-invitation-card__preview-content</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card_preview-content-warp</td>
<td style="text-align: left;">vh-invitation-card__preview-content-warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card_preview-content-warp-pre0</td>
<td style="text-align: left;">vh-invitation-card__preview-content-warp-pre0</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card_preview-content-warp-pre-text</td>
<td style="text-align: left;">vh-invitation-card__preview-content-warp-pre-text</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card_preview-content-warp-pre-title</td>
<td style="text-align: left;">vh-invitation-card__preview-content-warp-pre-title</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card_preview-content-warp-pre-company</td>
<td style="text-align: left;">vh-invitation-card__preview-content-warp-pre-company</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card_preview-content-warp-pre-date</td>
<td style="text-align: left;">vh-invitation-card__preview-content-warp-pre-date</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card_preview-content-warp-pre-location</td>
<td style="text-align: left;">vh-invitation-card__preview-content-warp-pre-location</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card_preview-content-warp-pre-description</td>
<td style="text-align: left;">vh-invitation-card__preview-content-warp-pre-description</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card_preview-content-warp-pre-barcode-content</td>
<td style="text-align: left;">vh-invitation-card__preview-content-warp-pre-barcode-content</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card_preview-content-warp-pre-barcode-text</td>
<td style="text-align: left;">vh-invitation-card__preview-content-warp-pre-barcode-text</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card_preview-content-warp-pre1</td>
<td style="text-align: left;">vh-invitation-card__preview-content-warp-pre1</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card_preview-content-warp-pre2</td>
<td style="text-align: left;">vh-invitation-card__preview-content-warp-pre2</td>
</tr>
<tr>
<td style="text-align: left;">vhall-add-bg</td>
<td style="text-align: left;">vh-invitation-card__add-bg-dailog</td>
</tr>
<tr>
<td style="text-align: left;">vh-bg-select</td>
<td style="text-align: left;">vh-invitation-card__bg-select</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation_add-bg</td>
<td style="text-align: left;">vh-invitation-card__add-bg</td>
</tr>
<tr>
<td style="text-align: left;">vh-btn-group</td>
<td style="text-align: left;">vh-invitation-card__btn-group</td>
</tr>
<tr>
<td style="text-align: left;">vh-btn</td>
<td style="text-align: left;">vh-invitation-card__btn</td>
</tr>
<tr>
<td style="text-align: left;">vh-invitation-card_preview-content-download</td>
<td style="text-align: left;">vh-invitation-card__preview-content-download</td>
</tr>
</tbody>
</table>
<h4>邀请卡 wap 组件 v1.1 版本升级，优化 class 名称</h4>
<table>
<thead>
<tr>
<th>原CLass</th>
<th>修改后CLass</th>
</tr>
</thead>
<tbody>
<tr>
<td>vh-invitation-warp</td>
<td>vh-invitation__warp</td>
</tr>
<tr>
<td>vh-show-img</td>
<td>vh-invitation__show-img</td>
</tr>
<tr>
<td>vh-dowm-warp</td>
<td>vh-invitation__down-warp</td>
</tr>
<tr>
<td>vh-prompt-information</td>
<td>vh-invitation__prompt-information</td>
</tr>
<tr>
<td>vh-invitation-card_preview-content-download</td>
<td>vh-invitation__card-preview-content-download</td>
</tr>
<tr>
<td>vh-invitation-card_preview-content-warp</td>
<td>vh-invitation__card-preview-content-warp</td>
</tr>
<tr>
<td>vh-invitation-card_preview-content-warp-pre0</td>
<td>vh-invitation__card-preview-content-warp-pre0</td>
</tr>
<tr>
<td>vh-invitation-card_preview-content-warp-pre-logo</td>
<td>vh-invitation__card-preview-content-warp-pre-logo</td>
</tr>
<tr>
<td>vh-invitation-card_preview-content-warp-pre-text</td>
<td>vh-invitation__card-preview-content-warp-pre-text</td>
</tr>
<tr>
<td>vh-invitation-card_preview-content-warp-pre-title</td>
<td>vh-invitation__card-preview-content-warp-pre-title</td>
</tr>
<tr>
<td>vh-invitation-card_preview-content-warp-pre-company</td>
<td>vh-invitation__card-preview-content-warp-pre-company</td>
</tr>
<tr>
<td>vh-invitation-card_preview-content-warp-pre-date</td>
<td>vh-invitation__card-preview-content-warp-pre-date</td>
</tr>
<tr>
<td>vh-invitation-card_preview-content-warp-pre-location</td>
<td>vh-invitation__card-preview-content-warp-pre-location</td>
</tr>
<tr>
<td>vh-invitation-card_preview-content-warp-pre-desciption</td>
<td>vh-invitation__card-preview-content-warp-pre-desciption</td>
</tr>
<tr>
<td>vh-invitation-card_preview-content-warp-pre-barcode-content</td>
<td>vh-invitation__card-preview-content-warp-pre-barcode-content</td>
</tr>
<tr>
<td>vh-invitation-card_preview-content-warp-pre-barcode-text</td>
<td>vh-invitation__card-preview-content-warp-pre-barcode-text</td>
</tr>
<tr>
<td>vh-invitation-card_preview-content-warp-pre1</td>
<td>vh-invitation__card-preview-content-warp-pre1</td>
</tr>
<tr>
<td>vh-red</td>
<td>vh-invitation__red</td>
</tr>
<tr>
<td>vh-invitation-card_preview-content-warp-pre2</td>
<td>vh-invitation__card-preview-content-warp-pre2</td>
</tr>
<tr>
<td>vh-no-data</td>
<td>vh-invitation__no-data</td>
</tr>
</tbody>
</table>