`userGroupDetail` 标签在前端如何展示用户组的购买价格和优惠价格？

在AnQiCMS前端展示用户组购买价格和优惠价格

AnQiCMS的强大之处在于它为中小企业和内容运营者提供了灵活的用户组管理功能，轻松实现付费内容和会员服务。当我们为不同的用户组设置了专属的购买价格和优惠价格时，如何在网站前端直观地展示这些信息，让用户一目了然，从而更好地引导其购买决策呢？userGroupDetail 标签就是解决这个问题的关键工具。

理解 userGroupDetail 标签

userGroupDetail 标签专门用于在AnQiCMS前端获取特定用户组的详细数据。通过它，我们可以调用用户组的名称、介绍、等级，以及最重要的——购买价格和优惠价格。

这个标签的使用方式很直接：{% userGroupDetail 变量名称 with 参数="值" %}。其中，你可以指定一个变量名称（例如 vipGroup）来接收用户组的所有数据，也可以直接输出某个特定字段的值。

要获取具体用户组的信息，你需要提供其唯一标识符。这可以通过两种参数实现：

• id：用户组的唯一ID。如果你知道用户组的数字ID（例如，后台显示为1、2、3等），可以使用此参数。
• level：用户组的等级。AnQiCMS可能为用户组设定了不同的等级（例如，1级、2级、3级VIP），你可以通过等级来获取对应用户组的信息。

在本次主题中，我们重点关注两个核心字段：

• Price：用于获取用户组的原始购买价格。
• FavorablePrice：用于显示用户组的优惠价格。

这两个字段直接关联着用户组的商业价值，是我们在前端展示时最关注的焦点。

实际应用：展示用户组价格

现在，让我们通过具体的代码示例，看看如何在模板中灵活地展示用户组的原始价格和优惠价格。

假设我们有一个ID为 1 的用户组，名为“基础VIP”，并且设置了原始价格和优惠价格。

首先，我们可以通过用户组ID来获取其详细信息：

{# 通过用户组ID获取名为 "vipGroup" 的用户组数据 #}
{% userGroupDetail vipGroup with id="1" %}
    <div class="user-group-info">
        <h3>{{ vipGroup.Title }}</h3> {# 显示用户组名称 #}
        <p>{{ vipGroup.Description }}</p> {# 显示用户组介绍 #}
        <p>用户组等级：{{ vipGroup.Level }}</p> {# 显示用户组等级 #}
        <p>原始购买价格：¥{{ vipGroup.Price }}</p>
        <p>优惠价格：¥{{ vipGroup.FavorablePrice }}</p>
    </div>
{% enduserGroupDetail %}

如果希望通过用户组等级来获取数据，只需要将 id 参数替换为 level 即可：

{# 通过用户组等级 "2" 获取名为 "level2Group" 的用户组数据 #}
{% userGroupDetail level2Group with level="2" %}
    <div class="user-group-info">
        <h3>{{ level2Group.Title }}</h3>
        <p>原始购买价格：¥{{ level2Group.Price }}</p>
        <p>优惠价格：¥{{ level2Group.FavorablePrice }}</p>
    </div>
{% enduserGroupDetail %}

巧妙展示优惠价格与原价

在实际场景中，我们通常希望在有优惠时，能够醒目地展示优惠价格，并用删除线划掉原价，以突出优惠力度。同时，如果某个用户组没有优惠价格，或者优惠价格不合理（例如高于原价），我们应该只显示正常价格。这可以通过if条件判断标签配合实现：

{# 假设我们要展示ID为3的“高级会员”用户组 #}
{% set targetGroupId = 3 %}
{% userGroupDetail premiumGroup with id=targetGroupId %}
    <div class="user-group-card">
        <h2>{{ premiumGroup.Title }}</h2>
        <p class="description">{{ premiumGroup.Description }}</p>
        <div class="price-info">
            {% if premiumGroup.FavorablePrice > 0 and premiumGroup.FavorablePrice < premiumGroup.Price %}
                {# 如果存在有效优惠价，则显示原价（删除线）和优惠价 #}
                <span class="original-price">原价：<del>¥{{ premiumGroup.Price }}</del></span>
                <span class="discount-price">优惠价：<strong>¥{{ premiumGroup.FavorablePrice }}</strong></span>
                {# 还可以计算节省金额，这里利用 `add` 过滤器实现减法，注意负数用法 #}
                <p class="saving-tip">立省 ¥{{ premiumGroup.Price|add:-premiumGroup.FavorablePrice }}！</p>
            {% else %}
                {# 没有优惠价或优惠价无效，只显示正常购买价格 #}
                <span class="normal-price">购买价格：<strong>¥{{ premiumGroup.Price }}</strong></span>
            {% endif %}
        </div>
        <button class="buy-button">立即购买</button>
    </div>
{% enduserGroupDetail %}

在这段代码中：

• 我们首先通过id获取了用户组 premiumGroup 的详细信息。
• 接着，使用{% if ... %}标签判断FavorablePrice是否大于0（确保有优惠）并且小于Price（确保是真优惠）。
• 如果条件满足，就同时展示原价（使用<del>标签添加删除线）和醒目的优惠价。
• 如果条件不满足，则只显示原始的购买价格。
• 通过 {{ premiumGroup.Price|add:-premiumGroup.FavorablePrice }} 这样的方式，利用 add 过滤器来执行减法运算，计算出用户节省的金额。

通过灵活运用userGroupDetail标签，您可以在AnQiCMS前端清晰、准确地展示用户组的购买价格和优惠价格，有效引导用户做出购买决策，从而更好地实现内容变现和会员服务运营目标。

常见问题解答 (FAQ)

1. 如何确保userGroupDetail标签能够正确获取到用户组数据？

要确保标签能正确获取数据，最关键的是提供正确的id或level参数。在AnQiCMS后台的用户组管理界面，您可以查看每个用户组的ID和等级。请确保在模板中使用的是实际存在的ID或Level。如果数据未能正确显示，首先检查这些参数是否与后台配置一致。

2. 如果用户组没有设置优惠价格，前端会显示什么？

如果后台没有为用户组设置优惠价格，FavorablePrice字段通常会返回0或空值。在上述示例中，我们使用了`