Press Plus

# ActCashConfirmDialog 确认现金领取信息弹窗

用于确认现金领取信息的弹窗组件，基于 PressPopupPlus 和 ActAwardDialog 设计，专门用于现金奖励的领取确认场景。支持显示转账信息、收款人详情、输入收款人信息等功能。

# 组件依赖

  • PressPopupPlus - 弹窗容器组件（来自 press-ui）
  • PressActGoodsDetailPrimaryButton - 主要按钮组件（来自 press-plus）

# 引入

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

export default {
  components: {
    PressActCashConfirmDialog,
  }
}

# 代码演示

# 基础用法

<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: '现金100元',
        amountLabel: '税前金额',
        channel: '微信零钱',
        receiveInfoList: [
          {
            label: '收款昵称',
            value: 'Gkguan',
            tips: '仅支持发放至当前登录账号绑定的微信',
          },
          {
            label: '收款渠道',
            value: '微信零钱',
            tips: '确认账号是否开通微信支付和实名认证',
          },
          {
            label: '发放时间',
            value: '确认后7个工作日内发放',
            tips: '',
          },
        ],
      },
    }
  },
  methods: {
    onConfirm() {
      console.log('确认领取', {
        recipientName: this.recipientName,
        phoneNumber: this.phoneNumber,
      });
      this.show = false;
    },
    onCancel() {
      this.show = false;
    },
    onShowTips() {
      console.log('显示提示');
    },
  },
}

# QQ钱包领取

<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: '现金50元',
        amountLabel: '税前金额',
        channel: 'QQ钱包',
        receiveInfoList: [
          {
            label: '收款昵称',
            value: 'QQ昵称',
            tips: '仅支持发放至当前登录账号绑定的QQ',
          },
          {
            label: '收款渠道',
            value: 'QQ钱包',
            tips: '确认账号是否开通QQ支付和实名认证',
          },
        ],
      },
    }
  },
  methods: {
    onConfirm() {
      this.show = false;
    },
  },
}

# API

# Props

参数 说明 类型 默认值
show 是否展示 boolean false
title 弹窗标题 string 确认现金领取信息
props-data 弹窗数据，说明见下方 object -
recipient-name 收款人姓名（支持 v-model） string ''
phone-number 手机号（支持 v-model） string ''
confirm-button-text 确认按钮文案 string 领取
use-tip-class 是否使用 tip-comp 为前缀的类名 boolean true
hide-tip-style 是否隐藏 @TIP_STYLE_NAME 关键词编译时加的样式 boolean false

# Events

事件名 说明 回调参数
confirm 点击确认按钮 -
cancel 点击取消按钮 -
showTips 点击标题问号图标 -
update:show 更新是否展示 false
update:recipientName 更新收款人姓名 string
update:phoneNumber 更新手机号 string

# Inject

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

# 类型说明

type IPropsData = {
  /** 是否显示微信图标 */
  wechatIcon?: boolean;
  /** 是否显示QQ图标 */
  qqIcon?: boolean;
  /** 红包图标URL */
  redpackIcon: string;
  /** 金额文本，如 "现金100元" */
  amount: string;
  /** 金额标签，如 "税前金额" */
  amountLabel: string;
  /** 收款渠道，如 "微信零钱" 或 "QQ钱包" */
  channel: string;
  /** 收款信息列表 */
  receiveInfoList: Array<{
    /** 信息标签 */
    label: string;
    /** 信息值 */
    value: string;
    /** 提示信息（可选） */
    tips?: string;
  }>;
}

# 说明

  • 转账信息展示：

    • 左侧显示红包图标和金额信息
    • 中间显示箭头图标
    • 右侧显示收款渠道（微信零钱或QQ钱包）及对应图标

  • 收款人详情：

    • 通过 propsData.receiveInfoList 配置收款信息列表
    • 每个信息项可包含 label、value 和可选的 tips

  • 输入字段：

    • 收款人姓名为必填项
    • 手机号为可选项
    • 支持使用 v-model 双向绑定

  • 提示信息：

    • 底部固定显示"7日内未领取将视为放弃领取"的提示
    • 标题右侧的问号图标可触发 showTips 事件，用于显示更多提示信息

  • 按钮：

    • 使用 PressActGoodsDetailPrimaryButton 组件作为确认按钮
    • 按钮文案可通过 confirm-button-text 自定义

# 自定义样式

外链地址：
样式内容：

← ActGetAwardDialog →