AwardPopup

Introduction

import PressAwardPopup from '@tencent/press-plus/press-award-popup/press-award-popup';

export default {
   components: {
     PPressAwardPopup,
   }
}

Code Demo

Basic usage

  <PressAwardPopup
   v-if="show"
   :award-list="awardList"
   :tip-title="tipTitle"
   confirm-text="Confirm"
   @dimissDialog="onCloseAwardDialog"
   @onConfirm="onCloseAwardDialog"
/>

export default {
   data() {
     return {
       show: false,
       awardList: [],
       tipTitle: 'I didn't get the reward~',
     }
   },
   methods: {
     onCloseAwardDialog() {
       this.show = false;
     },
   }
}

API

Props

Parameters	Description	Type	Default value
award-list	award list	array	-
cur-role-name	role name	string	-
tip-title	When the reward is empty, the pop-up window title, when it is empty, the pop-up window will not be displayed	string	-
confirm-text	When the reward is empty, the pop-up window confirmation button text	string	-
cancel-text	When the reward is empty, the pop-up window cancel button copy	string	-

Events

Event name	Description	Parameters
dimissDialog	Pop-up window close	-
onGoAward	Click on "My Prize" to highlight the text	-
onShowSwitchRoleDialog	Click to switch roles	-
onExchange	Click to confirm and receive	-
onConfirm	When the prize is empty, click the confirm button	-
onCancel	When the prize is empty, click the cancel button	-

awardList type

type IAwardList = Array<{
   goodscfg: {
     goodsicon: string; // picture
   };
   displayName: string; // name
   propType: string; // description
   displayOverduetime: string; // Redemption validity period
   propsPrice: string; // price
   propsNum: string; // quantity
   isShowCheck: boolean; // Whether to display the selection box
   isChecked: boolean; // Whether it is selected
}>