Press Plus

# ActMerchantItem 福利列表项-游戏内专用

# 引入

import PressActMerchantItem from '@tencent/press-plus/press-act-merchant-item/press-act-merchant-item';

export default {
  components: {
    PressActMerchantItem,
  }
}

# 代码演示

# 基础用法

<PressActMerchantItem
  :bind-ticket-class="bindTicketClass"
  :actshowcolumn="MOCK_DATA"
/>

const MOCK_DATA = {
  treport: [],
  custom_info: '线上',
  brandinfo: {
    brandid: 'b1650877400',
    brandName: '胡十二铺',
    brandicon:
            'https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2024/1/own_mike_b4dd7d92644d642238.png',
    mercNum: 2,
    brand_typeid: '1566963789',
  },
  actshowlist: [
    {
      treport: [],
      merchantid: 'tip626663ea3a3xKu',
      act_id: '1693469993',
      batch_id: '1693469987',
      brand_id: 'b1650877400',
      merc_task_info: {
        task_info: {
          merchantid: 'tip626663ea3a3xKu',
          taskid: 1693469987,
          condition: [
            {
              gift: {
                name: '手机号（高校）不勾选',
                picurl:
                        'https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2024/1/own_mike_b4dd7d92644d642238.png',
                giftid: 1693469920,
                expiretime: 1696089599,
                benefittag: '满20减10',
                goods_list: [
                  {
                    goods_id: 1693469921,
                    goods_type: 26,
                    overduetime: 1696089599,
                    goodsname: '手机号（高校）不勾选',
                    benefit_tag: '满20减10',
                    goodsicon:
                            'https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2024/1/own_mike_b4dd7d92644d642238.png',
                  },
                ],
              },
            },
            {
              gift: {
                name: '自选福利宝箱',
                picurl:
                        'https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2024/1/own_mike_b4dd7d92644d642238.png',
                giftid: 1798734202,
                is_bonus: 1,
                expiretime: 1697385600,
                goods_list: [
                  {
                    goods_id: 1798734200,
                    goods_type: 31,
                    overduetime: 1697385600,
                    goodsname: '自选福利宝箱',
                    goodsicon:
                            'https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2024/1/own_mike_b4dd7d92644d642238.png',
                  },
                ],
              },
            },
          ],
        },
        acquire_status: 1,
        brandactid: '1693469987',
      },
      act_cornermark:
              '{"type":"college","custom":{"is_phone_number":false,"giftTagOptions":[{"item_id":"college","item_name":"高校券"},{"item_id":"college_age","item_name":"高校年龄认证券"}]}}',
    },
  ],
  is_open_rmd: 1,
};

export default {
  data() {
    return {
      MOCK_DATA,
      bindTicketClass: 'press-act-merchant-item--big',
    }
  }
}

# API

# Props

参数 说明 类型 默认值
index 索引值 boolean false
bind-ticket-class 顶级额外类名 string -
actshowcolumn 核心数据 object -
hide-merc 是否隐藏商家信息 boolean false
from 来源，可选值 wz-wsq, wz-act string -
use-tip-class 是否使用 tip-comp 为前缀的类名 boolean false
hide-tip-style 是否隐藏 @TIP_STYLE_NAME 关键词编译时加的样式 boolean false

# Events

事件名 说明 参数
clickGetTaskReward 点击福利列表项 { actshow, index }

# Inject

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

# bind-ticket-class 可选值

可以传 press-act-merchant-item--big、press-act-merchant-item--small 等。

export const EXTRA_CLASS_MAP = {
  'merchant-page-ticket-big': 'press-act-merchant-item--big',
  'merchant-page-ticket-sm': 'press-act-merchant-item--small',
  'merchant-page-ticket-brand': 'press-act-merchant-item--brand',
  'merchant-page-ticket-like': 'press-act-merchant-item--like',
  'merchant-page-ticket-priority': 'press-act-merchant-item--priority',
  'merchant-page-priority-brand': 'press-act-merchant-item--priority-brand',
  'merchant-page-ticket-video': 'press-act-merchant-item--priority-video',
};

# from 说明

王者样式中之前的 tip-act-container-both 和 tip-wsq-container，和业务产生了耦合，这里改成用 from 字段来声明来源，对应关系如下：

tip-act-container-both => wx-act
tip-wsq-container => wz-wsq

默认 from 为空。

# 自定义样式

外链地址：
样式内容：
横屏

← ActStoreItem →