套餐配置

如何配置套餐格式？

1.进入后台管理，点击左侧菜单中的订阅管理-添加订阅

2.在右侧弹出的表单中填写套餐信息，其中套餐描述有预设的html模板

html模板如下：

<div class="t4">
  <span class="tit">
    流量明细
    <!-- tag表示小标签 -->
    <span class="tag">轻量</span>
  </span>

  <div class="desc">
    <i class="gou"></i>
    每月
    <!-- re 表示标红, bo 表示加粗字体 -->
    <b class="re bo">250GB</b>
    流量
  </div>
</div>
<div class="t4">
  <span class="tit">重置期限</span>
  <div class="desc">
    <i class="gou"></i>
    每月购买日免费重置流量手动重置流量
    <span class="re">35CNY</span>
    /次
  </div>
</div>
<div class="t4">
  <span class="tit">线路优势</span>
  <div class="desc">
    <!-- cha 表示套餐不包含的内容 -->
    <i class="cha"></i>
    多地BGP跨境专线出国
  </div>
</div>
<div class="t4">
  <span class="tit">流媒体支持</span>
  <div class="desc">
    <!-- gou 表示套餐包含的内容 -->
    <i class="gou"></i>
    Netfilx/Hulu/Hbo/Disney+/Dazn等流媒体
  </div>
</div>
<div class="t4">
  <span class="tit">套餐优势</span>
  <div class="desc">
    <i class="gou"></i>
    全球
    <span class="re">90+</span>
    国家/地区，
    <span class="re">200+</span>
    节点
  </div>
</div>
<div class="t4">
  <span class="tit">设备支持</span>
  <div class="desc">
    <i class="gou"></i>
    SS-Obfs协议，支持
    <span class="re">10</span>
    台设备同时使用
  </div>
</div>
<div class="t4">
  <span class="tit">其他说明</span>
  <div class="desc">
    <i class="gou"></i>
    <b class="re bo">无退款服务</b>
    ，介意勿买
  </div>
</div>

对应的视图为蓝框中的部分：

3.套餐右上角的图标【即将售罄】字样的显示规则如下：

如果后台中配置了最大容纳用户量且值小于10，则前台视图会默认显示为即将售罄

如果没有配置最大容纳用户量，则会从套餐内容中匹配如下的html代码以方便您自定义该图标。

<div class="t0 color-1">即将售罄</div>

颜色有6种可选，类名与颜色对应如下：

也可以使用自定义style来设置图标样式：

<div class="t0" style="background: #2543b3;color: #fff;">爆款套餐</div>

兼容V2board官方APP套餐显示

官方套餐配置

[{
    "feature": "每月 100G 流量",
    "support": true
}, {
    "feature": "全球10个国家接入",
    "support": true
},  {
    "feature": "99.99% SLA 保证",
    "support": false
},  {
    "feature": "1Gbps 带宽保证",
    "support": false
}]

做了相应扩展，如下所示：

[
    {
        "feature":"每月 100G 流量",
        "support":true
    },
    {
        "feature":"全球10个国家接入",
        "support":true
    },
    {
        "feature":"99.99% SLA 保证",
        "support":false
    },
    {
        "feature":"1Gbps 带宽保证",
        "support":false
    },
    {
        "label":{
            "background":"#ff00ff",
            "textColor":"#fffff",
            "text":"热销中"
        }
    }
]

以下代码为扩展部分，释意参考注释，主要作用是显示右上角的销售标签。

{
        "label":{
            "background":"#ff00ff", // 标签的背景颜色
            "textColor":"#fffff", // 标签的文字颜色
            "text":"热销中" // 标签中显示的文本
        }
    }

效果展示:

最后更新于2年前

这有帮助吗？