articlepay 文章付費

{eyou:articlepay id='field'}
    <!-- 內(nèi)容顯示 -->
    <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">當前隱藏內(nèi)容需要支付<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">當前隱藏內(nèi)容需要支付<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/>
                                該內(nèi)容支持單獨購買 ￥{$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>當前隱藏內(nèi)容需開通【<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>