Press Plus

# ActCashConfirmDialog

A dialog component for confirming cash reward collection information, designed based on PressPopupPlus and ActAwardDialog, specifically for cash reward collection confirmation scenarios. Supports displaying transfer information, recipient details, and input for recipient information.

# Component Dependencies

  • PressPopupPlus - Popup container component (from press-ui)
  • PressActGoodsDetailPrimaryButton - Primary button component (from press-plus)

# Import

import PressActCashConfirmDialog from 'press-plus/press-act-cash-confirm-dialog/press-act-cash-confirm-dialog';

export default {
  components: {
    PressActCashConfirmDialog,
  }
}

# Usage

# Basic Usage

<PressActCashConfirmDialog
  :show.sync="show"
  :props-data="propsData"
  :recipient-name.sync="recipientName"
  :phone-number.sync="phoneNumber"
  @confirm="onConfirm"
  @cancel="onCancel"
  @showTips="onShowTips"
/>

export default {
  data() {
    return {
      show: true,
      recipientName: '',
      phoneNumber: '',
      propsData: {
        wechatIcon: true,
        qqIcon: false,
        redpackIcon: 'https://igame-10037599.file.myqcloud.com/89062287-aabb-6935-cabf-cb2857816989.png',
        amount: 'Cash 100 CNY',
        amountLabel: 'Pre-tax Amount',
        channel: 'WeChat Pay',
        receiveInfoList: [
          {
            label: 'Recipient Nickname',
            value: 'Gkguan',
            tips: 'Only supports sending to the WeChat bound to the current logged-in account',
          },
          {
            label: 'Payment Channel',
            value: 'WeChat Pay',
            tips: 'Please confirm whether the account has enabled WeChat Pay and completed real-name verification',
          },
          {
            label: 'Delivery Time',
            value: 'Within 7 business days after confirmation',
            tips: '',
          },
        ],
      },
    }
  },
  methods: {
    onConfirm() {
      console.log('Confirm collection', {
        recipientName: this.recipientName,
        phoneNumber: this.phoneNumber,
      });
      this.show = false;
    },
    onCancel() {
      this.show = false;
    },
    onShowTips() {
      console.log('Show tips');
    },
  },
}

# QQ Wallet Collection

<PressActCashConfirmDialog
  :show.sync="show"
  :props-data="propsData"
  :recipient-name.sync="recipientName"
  @confirm="onConfirm"
/>

export default {
  data() {
    return {
      show: true,
      recipientName: '',
      propsData: {
        wechatIcon: false,
        qqIcon: true,
        redpackIcon: 'https://igame-10037599.file.myqcloud.com/89062287-aabb-6935-cabf-cb2857816989.png',
        amount: 'Cash 50 CNY',
        amountLabel: 'Pre-tax Amount',
        channel: 'QQ Wallet',
        receiveInfoList: [
          {
            label: 'Recipient Nickname',
            value: 'QQ Nickname',
            tips: 'Only supports sending to the QQ bound to the current logged-in account',
          },
          {
            label: 'Payment Channel',
            value: 'QQ Wallet',
            tips: 'Please confirm whether the account has enabled QQ Pay and completed real-name verification',
          },
        ],
      },
    }
  },
  methods: {
    onConfirm() {
      this.show = false;
    },
  },
}

# API

# Props

Attribute Description Type Default
show Whether to show the dialog boolean false
title Dialog title string 确认现金领取信息
props-data Dialog data, see below for details object -
recipient-name Recipient name (supports v-model) string ''
phone-number Phone number (supports v-model) string ''
confirm-button-text Confirm button text string 领取
use-tip-class Whether to use class names prefixed with tip-comp boolean true
hide-tip-style Whether to hide styles added by @TIP_STYLE_NAME keyword compilation boolean false

# Events

Event Description Parameters
confirm Triggered when confirm button is clicked -
cancel Triggered when cancel button is clicked -
showTips Triggered when title question mark icon is clicked -
update:show Update show status false
update:recipientName Update recipient name string
update:phoneNumber Update phone number string

# Inject

Attribute Description Type Default
globalHideTipStyle Whether to hide keyword compiled styles, corresponds to hide-tip-style prop boolean false

# Type Definitions

type IPropsData = {
  /** Whether to show WeChat icon */
  wechatIcon?: boolean;
  /** Whether to show QQ icon */
  qqIcon?: boolean;
  /** Red packet icon URL */
  redpackIcon: string;
  /** Amount text, e.g. "Cash 100 CNY" */
  amount: string;
  /** Amount label, e.g. "Pre-tax Amount" */
  amountLabel: string;
  /** Payment channel, e.g. "WeChat Pay" or "QQ Wallet" */
  channel: string;
  /** Receive info list */
  receiveInfoList: Array<{
    /** Info label */
    label: string;
    /** Info value */
    value: string;
    /** Tip message (optional) */
    tips?: string;
  }>;
}

# Notes

  • Transfer Info Display:

    • Left side shows red packet icon and amount info
    • Middle shows arrow icon
    • Right side shows payment channel (WeChat Pay or QQ Wallet) with corresponding icon

  • Recipient Details:

    • Configure receive info list through propsData.receiveInfoList
    • Each info item can contain label, value, and optional tips

  • Input Fields:

    • Recipient name is required
    • Phone number is optional
    • Supports two-way binding with v-model

  • Tips:

    • Bottom displays a fixed tip: "Uncollected within 7 days will be considered as giving up"
    • The question mark icon on the right side of the title can trigger the showTips event for more tips

  • Button:

    • Uses PressActGoodsDetailPrimaryButton component as the confirm button
    • Button text can be customized through confirm-button-text

# Custom Style

外链地址：
样式内容：

← ActGetAwardDialog →