# 组件js使用方式

页面底部引用通用脚本，并执行初始化方法。

<script src="//lol.qq.com/jssdk/dist/lib/lol.js" charset="utf-8"></script>
<script type="text/javascript">
  const { Common, Ajax } = LOL;
  Ajax.loadJS("//lol.qq.com/plugin/business/sell_common.light.min.js")
      .then(()=>{
        lolSellCommon.init()
      })
      .catch((e)=>{
        console.log(e)
      })
</script>

# 购买按钮设置

用户在售卖页上的主要操作，点击之后会根据平台类型跳转到对应的购买页面。

使用示例：

<a class="J-btn-buy" href="javascript:;"
title="立即购买"
target="_blank"
data-zm-id="8951"
data-djc-id="16650"
data-goods-id="GD2020032515851413357569"
data-tag="雷喵喵尔"
data-eas-tag="skin.1875">立即购买</a>

• 类名J-btn-buy需要添加至购买的a标签上，作为钩子。
• data-tag属性填入按钮对应的物品名称，用于PTT统计上报。
• data-eas-tag属性填入按钮对应的物品类型和唯一id标识，格式：物品类型.id标识；用于eas统计上报。 物品唯一id标识找内部同学确认

  物品类型	标签
  皮肤	skin
  英雄	champion
  礼包	bundles
  守卫	ward
  通行证	pass
  图标	icon

• data-zm-id、data-djc-id、data-goods-id分别对应掌盟id、道聚城id，微商城id，默认情况下只需要添加这三个属性；如果在某个渠道没有上架，则将对应属性置空：

<a class="J-btn-buy" href="javascript:;" data-zm-id="" data-djc-id="" data-goods-id="" data-tag="雷喵喵尔" title="立即购买" target="_blank">立即购买</a>

• data-wx-id、data-other-id分别对应微信渠道、其他渠道，默认情况下不需要添加；如果在某个渠道没有上架，则将对应属性置空：

<a class="J-btn-buy" href="javascript:;" data-wx-id="8951" data-djc-id="16650" data-wx-id="" data-other-id="" data-tag="雷喵喵尔" title="立即购买" target="_blank">立即购买</a>

• 如果是跳转到购买列表（非半价，找产品同学确认是否是跳转半价购买列表）的按钮，那么只需要在a标签上添加类名J-btn-buy-list即可：

<a class="J-btn-buy-list" href="javascript:;" title="立即购买" target="_blank">立即购买</a>

• 如果是跳转到半价购买列表的按钮，则需要在a标签上添加类名J-btn-buy-half-list：

<a class="J-btn-buy-half-list" href="javascript:;" title="立即购买" target="_blank">立即购买</a>

# 全局属性&方法

会引入全局变量lolSellCommon，提供initBtnBuy方法，适用于需要在动态插入dom结构之后初始化购买按钮的情况：

$('.list').html(shtml);//插入dom结构
lolSellCommon.initBtnBuy();

# 售卖数字

如无特殊要求，售卖页上的数字使用公共的字体，包含0到9数字及.符号。

# 可选字体

sellnum-1、sellnum-2 ... sellnum-12，共12种；使用时引用对应的字体即可。

::: demo

:::

# 常规渐变样式

根据视觉设计稿定义渐变色值

::: demo

:::

# 金色（带高光质感）

注意需要设置 data-num属性

::: demo

:::