articlepay 文章付费

    [基础用法]
    标签:articlepay
    描述:文章模型实现文章付费阅读,会员专享,会员付费,在使用之前先在文章模型开启付费阅读
    属性:
aid='' 文档id
id='' 可以任意指定循环里的变量名替代c_field,假设id='c_field',模板调用如:{$c_field.hidden} 变成{$c_field.hidden}

使用方法:
付费标签需要加载 /template/pc/system/article_pay.htm 模板文件
下载地址: 点击下载   ,响应式模板该文件放在pc模板目录system里,手机端会自动识别共用,分离式模板pc模板目录和mobile模板目录的system里都需要放



    用法:

    把原来文章模型内容页的 {$eyou.field.content} 标签直接替换成以下代码:
{eyou:articlepay id='field'}     <!-- 内容显示 -->     <div {$field.contentId}>         {$field.content}     </div>     <!-- 付费文档 -->     {eyou:if condition='$eyou.field.restric_type == 1'}         <div {$field.displayId}>             <div class="content-hide-tips">                 <div class="login-false">当前隐藏内容需要支付<div class="coin"><span class="label label-warning">¥{$eyou.field.users_price}</span></div></div>                 <p>已有<span class="red">{eyou:freebuynum /}</span>人支付</p>                 <div class="pc-button">                     <a {$field.onclick} class="click-pay" >支付查看</a>                 </div>             </div>         </div>     {eyou:elseif condition='$eyou.field.restric_type == 4' /}         <div {$field.displayId}>             <div class="content-hide-tips">                 <div class="login-false">当前隐藏内容需要支付<div class="coin"><span class="label label-warning">{$eyou.field.users_score}{$usersConfig.score_name}</span></div></div>                 <p>已有<span class="red">{eyou:freebuynum /}</span>人支付</p>                 <div class="pc-button"><a {$field.onclick} class="click-pay" >支付查看</a></div>             </div>         </div>     {eyou:else /}         <!-- 会员限制 -->         <div {$field.vipDisplayId}>             <div class="content-hide-tips">                 {eyou:eq name='$eyou.field.restric_type' value='2'}加入VIP 永久免费浏览{/eyou:eq}                 <div class="login-false">                     {eyou:if condition='$eyou.field.restric_type == 2'}                         {eyou:eq name='$eyou.field.no_vip_pay' value='1'}                             <p>                                 开通【<font color="red">{$eyou.field.arc_level_id|getArcLevelName=###}</font>】免费查看                                 <br/>                                 <a {$field.onBuyVipClick} style="color: #ff9600;">立即开通</a>                                 <br/>                                 该内容支持单独购买 ¥{$eyou.field.users_price}                                 <br/>                                 已有<span class="red">{eyou:freebuynum /}</span>人支付                                 <br/>                                 <a {$field.onclick} class="click-pay">立即购买</a>                             </p>                         {eyou:else /}                             <p>开通【<font color="red">{$eyou.field.arc_level_id|getArcLevelName=###}</font>】免费查看</p>                             <div class="pc-button">                                 <a {$field.onBuyVipClick} class="click-pay" >购买会员</a>                             </div>                         {/eyou:eq}                     {eyou:elseif condition='$eyou.field.restric_type == 3' /}                         <p>当前隐藏内容需开通【<font color="red">{$eyou.field.arc_level_id|getArcLevelName=###}</font>】,并支付¥{$eyou.field.users_price}才能查看</p>                     <div class="pc-button">                         <a {$field.onBuyVipClick} class="click-pay" >购买会员</a>                     </div>                     {/eyou:if}                 </div>             </div>         </div>     {/eyou:if}     {$field.hidden} {/eyou:articlepay}


配合样式表使用,可实现下面付费效果

<style>     .content-hide-tips {         padding: 40px 20px 20px;         border: 1px dashed #ccc;         margin: 20px 0 40px;         background-color: #f6f6f6;         border-radius: 4px;         position: relative;         display: flex;         justify-content: center;         align-items: center;         flex-direction: column;     }     .content-hide-tips .login-false {         display: flex;         flex-direction: column;         font-size: 16px;     }     .content-hide-tips .coin {         display: flex;         text-align: center;         margin-top: 10px;         margin-bottom: 10px;         margin: 10px auto;     }     .content-hide-tips .coin span {         padding: 4px 18px;         background-color: #ffffff;         color: #f0ad4e;         line-height: 1;         border-radius: 20px;         font-size: 13px;         border: 1px solid #f0ad4e;     }     .content-hide-tips .t-c {         text-align: center;         font-size: 13px;     }     .content-hide-tips .red {         color: #ff3b41;     }     .content-hide-tips .pc-button {         margin: 0 auto;         text-align: center;     }     .content-hide-tips .pc-button .click-pay {         color: #fff;         display: inline-block;         font-size: 11px;         letter-spacing: 1px;         line-height: 36px;         outline: none;         padding: 0 18px;         text-align: center;         position: relative;         background: linear-gradient(90deg, #20a0ff, #20b8ff);         box-shadow: 0 3px 5px rgba(32, 160, 255, .5);         border-radius: 4px;         cursor: pointer;     }     .content-hide-tips .pc-button .click-pay:hover {         color: #fff;         opacity: 0.8;     } </style>


        【更多示例】

        -------------------------------前端示例--------------------------------

image.png
文档最后更新时间:2025-04-22 11:29:16

文档
目录

深色
模式

切换
宽度