Press Plus

# ActBenefitItem 福利列表项

# 引入

import PressActBenefitItem from 'press-plus/press-act-benefit-item/press-act-benefit-item';

export default {
  components: {
    PressActBenefitItem,
  }
}

# 代码演示

# 基础用法

<PressActBenefitItem 
  :actshowcolumn="MOCK_ACT_BENEFIT_ITEM"
/>

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

const MOCK_ACT_BENEFIT_ITEM = {
  treport: [],
  custom_info: '自定义信息',
  brandinfo: {
    brandName: '品牌名称',
    brandicon: MOCK_ICON,
  },
  actshowlist: [
    {
      treport: [],
      merc_task_info: {
        task_info: {
          taskid: 1693469987,
          condition: [
            {
              gift: {
                name: '奖品名称',
                picurl: MOCK_ICON,
                benefittag: '满20减10',
              },
            },
            {
              gift: {
                name: '自选福利宝箱',
                picurl: MOCK_ICON,
              },
            },
          ],
        },
        acquire_status: 1,
      },
    },
  ],
};

export default {
  data() {
    return {
      MOCK_ACT_BENEFIT_ITEM,
    }
  },
}

# API

# Props

参数 说明 类型 默认值
actshowcolumn 组件数据 object -
index 当前索引 number -1
show-distance 是否显示距离 boolean true
use-tip-class 是否使用 tip-comp 为前缀的类名 boolean false
hide-tip-style 是否隐藏 @TIP_STYLE_NAME 关键词编译时加的样式 boolean false

# Events

事件名 说明 回调参数
clickGiftDetail 点击按钮 -
clickGetTaskReward 点击福利详情 -
clickMerc 点击商家 -

# Inject

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

# 类型说明

// actshowcolumn
type IActShowItem = {
  treport?: any;

  merc_task_info: {
    acquire_status: number; // 1 领取，2 已领完，3 去使用
    task_info: {  // 任务信息
      taskid: number;
      
      condition: Array<{
        desc?: string;
        // 礼包详情
        gift: {     
          name: string;
          picurl: string;
          benefittag: string;
          cyc_introduct?: string; // 默认为“用券后返”
        };
      }>;
    };
  };
}

// actshowcolumn
IActshowcolumn = {
  treport?: string;
  custom_info: string; // 自定义信息

  brandinfo?: { // 品牌信息，brandinfo 和 mercinfo 只会展示其中之一
    brandName: string;
    brandicon: string;
  };

  mercinfo?: { // 商家信息
    merclogo: string;
    storename: string;
  },

  actshowlist: Array<IActShowItem>; // 展示列表
}

# 自定义样式

外链地址：
样式内容：

← ActGoodsItem →