ActAwardDialog 奖励弹窗

# ActAwardDialog 奖励弹窗

# 引入

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

export default {
  components: {
    PressActAwardDialog,
  }
}

另外，该组件依赖 vue-qrcode 和 vue-barcode，使用者需先行安装。

# 代码演示

# 基础用法

<PressActAwardDialog
  sub-btn-text="订阅"
  :show.sync="show"
  :issubscribe="isSubscribe"
  :props-data="MOCK_AWARD_PROPS_DATA"
  :water="MOCK_AWARD_WATER"
  @clickSub="isSubscribe = !isSubscribe"
  @clickButton="show = false"
/>

const MOCK_ICON = 'https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2024/1/own_mike_b4dd7d92644d642238.png';

export const MOCK_AWARD_PROPS_DATA = {
  shopName: '商店名称',
  shopIcon: MOCK_ICON,
  issubscribe: 1,
  brandacttitle: '品牌活动标题',
  extraGiftImg: MOCK_ICON,
  extraGiftName: '现金红包',
  limitDate: '2021.09.30前到店兑换上述物品后',
  giftList: [
    {
      giftname: '大乔-猫狗日记永久*1',
      giftpic: MOCK_ICON,
    },
    {
      giftname: '荣耀水晶*1',
      giftpic: MOCK_ICON,
    },
    {
      giftname: '舞动绿茵7日',
      giftpic: MOCK_ICON,
    },
    {
      giftname: '圣诞狂欢7日',
      giftpic: MOCK_ICON,
    },
    {
      giftname: '大喇叭*1',
      giftpic: MOCK_ICON,
    },
  ],
  expireTime: '兑换有效期至 2021.09.30',
  actList: [
    {
      pic: MOCK_ICON,
      name: '免费领取',
      benefittag: '价值128元免费游玩门票',
      giftBoxData: {
        expireTime: '兑换有效期至 2021.09.30',
      },
    },
  ],
  type: 'received',
  btnText: '兑换到账',
};

export const MOCK_AWARD_WATER = {
  goodscfg: {
    goodsname: '免费领取',
    goodsdetail:
      '<p>1、本券为王者人生用户专享，仅限本人使用，不可转赠或转卖。<br/>2、本券仅可使用一次，以下文旅城任选且仅可选择一个文旅城使用。<br/>3、于融创文旅城票口，出示融创文旅俱乐部会员码核销兑换，即获得该文旅城所包含指定四项票设备游玩门票一张。<br/>4、项目体验时会有身高、体重、年龄、陪同等要求，具体内容请各位游客以园区公示牌及实际开放为准。<br/>5、限当天使用有效，项目可游玩一次，门票不退不改，不挂失、不兑换现金。<br/>6、有效期限：自领取之日，至9月30日内有效（7.10-8.22暑期期间周末不可使用）</p><p>7、本券不可用于联营游乐设备。</p><p>8、本券使用以当日设备实际开放情况为准。<br/>9、使用时需要到当地融创文旅城售票口出显会员码进行兑换。<br/>适用范围：<br/>重庆融创文旅城<br/>成都融创文旅城<br/>无锡融创文旅城<br/>广州融创文旅城<br/>合肥融创文旅城<br/>南昌融创文旅城<br/>哈尔滨融创文旅城<br/>青岛融创东方影都</p>',
    goodsicon: MOCK_ICON,
  },
  status: 4,
};


export default {
  data() {
    return {
      show: true,
      isSubscribe: true,
      
      MOCK_AWARD_PROPS_DATA,
      MOCK_AWARD_WATER,
    }
  }
}

# API

# Props

参数	说明	类型	默认值
show	是否展示	boolean	`false`
issubscribe	是否已订阅	boolean	`false`
sub-btn-text	订阅按钮文案	String	``
is-show-mp-button	是否显示小程序按钮	boolean	`true`
props-data	弹窗数据，说明见下方	Object	-
water	物品详情，说明见下方	Object	-
water-list	物品列表，说明见下方	Array	-
use-tip-class	是否使用 `tip-comp` 为前缀的类名	boolean	`false`
hide-tip-style	是否隐藏 `@TIP_STYLE_NAME` 关键词编译时加的样式	boolean	`false`

# Events

事件名	说明	回调参数
clickButton	点击主按钮	event
update:show	更新是否展示	false
clickCloseButton	点击关闭按钮	-
clickEnter	点击更多福利	-
clickSub	点击订阅	-
clickModfy	点击修改绑定的微信/手机号	-
clickUsedShop	点击商店	-
clickExtraAct	点击查看活动	url
clickGoodItem	点击物品列表项	waterItem, index
gotoGoodsDetailDesc	查看物品详情	waterItem, index

# Inject

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

# 类型说明

左侧部分

对于每日任务类型，用活动数据，即 propsData.actList[0]
其他的弹窗，则用 water

这里是不好的设计，数据应该提前处理好，然后给组件，组件应该不需要关心业务，后面需重构。

右侧部分，使用的都是 propsData，使用到的属性包括 shopIcon, shopName, brandacttitle

type IPropsData = {
  // 奖励类型：恭喜获得，你已获得，奖励说明
  type: 'get' | 'received' | 'detail'; 
  extraGiftDesc: string; // 核销文案
  limitDate: string; // 使用期限
  extraGiftName: string; // 宝箱
  btnText: string; // 按钮文案

  shopIcon: string; // 店铺图标
  shopName: string; // 店铺名称
  brandacttitle: string; // 品牌提示

  actList?: Array<{
    acquireStatus?: number; // 领取类型
    useWay?: number; // 1 线上，2 线下
    pic: string; // 图片
    benefittag: string; // 福利标签
    name: string;

    giftBoxData: {
      expireTime: string; // 过期时间
    }

    des: string; // 任务描述
    processDesc: string; // 任务进度
  }>;

  giftList?: Array<{
    giftid: number | string;
    giftname: string; 
    giftpic: string; 
  }>;

  extraAct?: IExtraAct;
}

// 核销相关
type IExtraAct = {
  img: string; // 图片
  title: string; // 标题
  desc: string; // 描述
  link: string; // 活动链接
}

water

type IWater = {
  goodscfg: {
    goodsicon: string; // 物品图片地址
    goodsname: string; // 物品名称
    goodsdetail: string; //其他说明
  };
  benefitTag: string; // 标签
  displayOverduetime: string; // 兑换有限期
  winningtime: string; // 领取时间戳，用作 id

  // 兑换状态，2 已兑换, 4 立即兑换, 6 已过期
  // 7 待发货, 8 已发货
  status: number; 

  displayCdKey: string; // 兑换码
  recvWay: string; // 使用方式
  displayType: number; // 展示方式
  wechatCard: string; 
  isBindWechat: boolean;  // 是否绑定微信
  bindNick: string; // 绑定昵称
  wxNick: string; // 微信昵称

  bindWechatExchange: boolean; // 是否显示“将”
  needBindWechat: boolean; // 是否显示修改绑定的微信号

  showVipNumber: string | number; // 奖励发放号码
  showMonifyMobile: string | number; // 奖励发放号码
  extraAct?: IExtraAct;
  useLimit: string; // 使用限制
  specialStatement: string; // 特别说明
}

waterList

type IWaterList = Array<IWater>

# 自定义样式

外链地址：

样式内容：

横屏

← ActTipDialog ActBarcodeDialog →