ActGetAwardDialog 恭喜获得弹窗

# ActGetAwardDialog 恭喜获得弹窗

# 引入

import PressActGetAwardDialog from '@tencent/press-plus/press-act-get-award-dialog/press-act-get-award-dialog';

export default {
  components: {
    PressActGetAwardDialog,
  }
}

# 代码演示

# 基础用法

<PressActGetAwardDialog
  :show.sync="show"
  :show-subscribe="showSubscribe"
  :will-subscribe.sync="willSubscribe"
  :props-data="MOCK_GET_AWARD_DIALOG"
/>

export const MOCK_GET_AWARD_DIALOG = {
  getStatus: 'received', // 可选 get/received
  giftImg:
          'https://image-1251917893.file.myqcloud.com/2020/a20200414privilege_peacegame/gunAnddress/dress-2.png',
  giftName: '汉堡王皇堡套餐',
  giftDiscount: '立减十元券',
  giftExpiredDate: '2020-06-25',
  extraGiftName: '88元红包空投',
  receivedDialog: false,
};


export default {
  data() {
    return {
      show: true,
      showSubscribe: true,
      willSubscribe: true,
      MOCK_GET_AWARD_DIALOG,
    }
  },
   methods: {
  },
}

# API

# Props

参数	说明	类型	默认值
show	是否显示	boolean	`false`
show-subscribe	是否显示订阅	boolean	`false`
will-subscribe	是否已订阅	boolean	`false`
show-primary-button	是否展示主按钮｜ boolean	`true`
props-data	组件数据	Object	-
water	water	Object	-
waters	water 列表	Array	-
waters-desc	water 列表底部描述	string	-
use-tip-class	是否使用 `tip-comp` 为前缀的类名	boolean	`false`
hide-tip-style	是否隐藏 `@TIP_STYLE_NAME` 关键词编译时加的样式	boolean	`false`

# Events

事件名	说明	回调参数
clickCloseButton	点击取消按钮	-
clickExchangeButton	点击确认按钮
update:show	更新 show	false
update:willSubscribe	更新 willSubscribe	checked

# Inject

参数	说明	类型	默认值
globalHideTipStyle	是否隐藏关键词编译的样式，对应 `hide-tip-style` 属性	boolean	`false`

# 类型说明

奖品信息展示优先级：

如果传递了 waters，且长度不为 0，则使用 waters
如果传递了 propsData，且 propsData.receivedDialog 为 true，则使用 propsData
如果传递了 water，且 water.goodscfg 不为空，则展示 water 核心数据
展示 propsData 数据

type IWater = {
  goodsid: string;
  goodscfg: {
    goodsicon: string;
    goodsname: string;
    extra?: {
      benefit_tag: string;
    }
  };
  overduetime: string; // 有效期
}

type IWaters = Array<IWater>

type IPropsData = {
  receivedDialog: boolean;

  // 可选值为 get, received 
  // 分别代表 “恭喜获得”，“你已领取”
  getStatus: string; 

  giftImg: string;
  giftName: string;
  giftDiscount: string;
  giftExpiredDate: string; // 有效期

  extraGiftName?: string;
  extraGiftDesc?: string;

  cancelBtnText: string; // 取消按钮文案 
  exchangeButtonText: string; // 兑换按钮文案
}

# 自定义样式

外链地址：

样式内容：

横屏

← ActBarcodeDialog ActInputAddressDialog →