Press Plus

# AwardExplainDialog 奖励说明弹窗

用于展示活动奖励的详细说明信息，包括奖励图片、名称、库存、兑换条件等。

# 引入

import PressAwardExplainDialog from 'press-plus/press-award-explain-dialog/press-award-explain-dialog';

export default {
  components: {
    PressAwardExplainDialog,
  }
}

# 代码演示

# 基础用法

通过 show 控制弹窗显示，传入 rewardInfo 和 rewardDesc 展示奖励信息。

<template>
  <div>
    <button @click="showDialog = true">显示奖励说明</button>
    
    <press-award-explain-dialog
      :show.sync="showDialog"
      :reward-info="rewardInfo"
      :reward-desc="rewardDesc"
      @check-award="onCheckAward"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false,
      rewardInfo: {
        name: '王者荣耀限定皮肤',
        picurl: [
          'https://example.com/reward1.png',
          'https://example.com/reward2.png',
        ],
        limitLabel: '库存',
        limit: 100,
      },
      rewardDesc: [
        { label: '提供方', desc: '王者荣耀' },
        { label: '今日剩余', desc: '80/100' },
        { label: '单日可兑换上限', desc: '1次/人' },
        { label: '总计可兑换次数', desc: '3次/人' },
        { label: '领取条件', desc: '100个积分兑换' },
      ],
    };
  },
  methods: {
    onCheckAward(info) {
      console.log('点击查看奖励图片:', info);
      // 根据图片索引动态更新奖励描述
      const newDesc = [
        { label: '提供方', desc: '新的提供方' },
        { label: '今日剩余', desc: '200/500' },
      ];
      if (info.updateDesc) {
        info.updateDesc(newDesc);
      }
      // info 包含: { picUrl, index, name, limit, updateDesc }
    },
  },
};
</script>

# API

# Props

参数 说明 类型 默认值
show 是否显示弹窗 boolean false
reward-info 奖励基本信息 object {}
reward-desc 奖励描述信息列表 array []

# RewardInfo 数据结构

键名 说明 类型
name 奖励名称 string
picurl 奖励图片数组 array
limitLabel 库存标签 string
limit 库存数量 number

# RewardDesc 数据结构

键名 说明 类型
label 描述标签 string
desc 描述内容，支持富文本（HTML） string

# Events

事件名 说明 回调参数
update:show 关闭弹窗时触发 show: boolean
check-award 点击奖励图片时触发 info: { picUrl, index, name, limit, updateDesc }

# check-award 事件参数说明

参数 说明 类型
picUrl 当前点击的图片 URL string
index 图片索引（从 0 开始） number
name 奖励名称 string
limit 库存数量 number
updateDesc 更新奖励描述的回调函数 function

← ConvertExchangeList →