# AwardPopup 奖励弹出层
# 引入
import PressAwardPopup from 'press-plus/press-award-popup/press-award-popup';
export default {
components: {
PressAwardPopup,
}
}
# 代码演示
# 基础用法
<PressAwardPopup
v-if="show"
:award-list="awardList"
:tip-title="tipTitle"
confirm-text="确认"
@dimissDialog="onCloseAwardDialog"
@onConfirm="onCloseAwardDialog"
/>
export default {
data() {
return {
show: false,
awardList: [],
tipTitle: '没有获得奖励哦~',
}
},
methods: {
onCloseAwardDialog() {
this.show = false;
},
}
}
# API
# Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | string | - |
| award-list | 奖励列表 | array | - |
| cur-role-name | 角色名称 | string | - |
| is-game-prize | 是否仅为游戏礼包 | boolean | true |
| tip-title | 奖励为空时,弹窗标题,为空时弹窗不显示 | string | - |
| confirm-text | 奖励为空时,弹窗确认按钮文案 | string | - |
| cancel-text | 奖励为空时,弹窗取消按钮文案 | string | - |
| is-hor | 是否为横版 | boolean | false |
| hor-title | 横版弹窗标题 | string | 恭喜获得 |
| hor-sub-title | 横版弹窗副标题 | string | `` |
| hor-confirm-text | 横版确认按钮文案 | string | 立即兑换 |
| hor-cancel-text | 横版取消按钮文案 | string | 关闭 |
| hor-desc | 横版弹窗描述 | string | 本次仅发放游戏礼包(其他奖励请联系办赛方),已发放到「我的奖品」,请在有效期内兑换 |
# Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| dimissDialog | 弹窗关闭 | - |
| onGoAward | 点击“我的奖品”高亮文字 | - |
| onShowSwitchRoleDialog | 点击切换角色 | - |
| onExchange | 点击确认领取 | - |
| onConfirm | 奖品为空时,点击确认按钮 | - |
| onCancel | 奖品为空时,点击取消按钮 | - |
# awardList 类型
type IAwardList = Array<{
goodscfg: {
goodsicon: string; // 图片
};
displayName: string; // 名称
propType: string; // 描述
displayOverduetime: string; // 兑换有效期
propsPrice: string; // 价格
propsNum: string; // 数量
isShowCheck: boolean; // 是否显示选择框
isChecked: boolean; // 是否被选中
}>