Press Plus

# AwardExplainDialog Award Explanation Dialog

Used to display detailed information about activity rewards, including reward images, names, inventory, redemption conditions, etc.

# Import

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

export default {
  components: {
    PressAwardExplainDialog,
  }
}

# Usage

# Basic Usage

Control dialog visibility with show, pass rewardInfo and rewardDesc to display reward information.

<template>
  <div>
    <button @click="showDialog = true">Show Reward Info</button>
    
    <press-award-explain-dialog
      :show.sync="showDialog"
      :reward-info="rewardInfo"
      :reward-desc="rewardDesc"
      :must-do-task="mustDoTask"
      :must-do-task-list="mustDoTaskList"
      @check-award="onCheckAward"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false,
      rewardInfo: {
        name: 'Limited Skin',
        picurl: [
          'https://example.com/reward1.png',
          'https://example.com/reward2.png',
        ],
        limitLabel: 'Stock',
        limit: 100,
      },
      rewardDesc: [
        { label: 'Provider', desc: 'Honor of Kings' },
        { label: 'Remaining Today', desc: '80/100' },
        { label: 'Daily Limit', desc: '1 time/person' },
        { label: 'Total Limit', desc: '3 times/person' },
        { label: 'Redemption Condition', desc: '100 points' },
      ],
      // 必须完成的任务列表（当前奖励对应的任务要求）
      mustDoTask: [
        { task_id: 1001 },
        { task_id: 1002 },
      ],
      // 全量任务列表（用于通过 task_id 匹配任务名称）
      mustDoTaskList: [
        { id: 1001, name: '完成一局匹配对战' },
        { id: 1002, name: '达到 10 杀' },
        { id: 1003, name: '达到 MVP' },
      ],
    };
  },
  methods: {
    onCheckAward(info) {
      console.log('Check award image:', info);
      // Dynamically update reward description based on image index
      const newDesc = [
        { label: 'Provider', desc: 'New Provider' },
        { label: 'Remaining', desc: '200/500' },
      ];
      if (info.updateDesc) {
        info.updateDesc(newDesc);
      }
      // info contains: { picUrl, index, name, limit, updateDesc }
    },
  },
};
</script>

# API

# Props

Prop Description Type Default
show Whether to show dialog boolean false
reward-info Basic reward information object {}
reward-desc Reward description list array []
must-do-task Required task list for current reward array []
must-do-task-list Full task list (matched by task_id) array []

# RewardInfo Data Structure

Key Description Type
name Reward name string
picurl Reward image array array
limitLabel Stock label string
limit Stock quantity number

# RewardDesc Data Structure

Key Description Type
label Description label string
desc Description content, supports rich text (HTML) string

# MustDoTask Data Structure

Key Description Type
task_id Task ID number

# MustDoTaskList Data Structure

Key Description Type
id Task ID number
name Task name, supports rich text (HTML) string

# Events

Event Description Callback Parameters
update:show Triggered when closing show: boolean
check-award Triggered when clicking image info: { picUrl, index, name, limit, updateDesc }

# check-award Event Parameters

Parameter Description Type
picUrl Current clicked image URL string
index Image index (starting from 0) number
name Reward name string
limit Stock quantity number
updateDesc Callback function to update desc function

← ConvertExchangeList →