优惠卷内置本页标签调用说明_网站教程_学习吧

模板文件页面 coupon_list

 <li class="menu"> <a href="{:url('home/Coupon/coupon_list')}" rel="nofollow" target="_blank">优惠券中心</a> </li>

{empty name="coupon_list"} <div class="coupon-empty"> <img src="{eyou:global name='web_cmspath' /}/public/static/common/images/null-data.png" alt="暂无优惠券"> <p>暂无可领取的优惠券</p> </div> {else /} <div class="coupon-list"> {foreach name="coupon_list" item="vo"} <div class="coupon-item">  <div class="coupon-left" style="background: linear-gradient(135deg, {$vo.coupon_color} 0%, {$vo.coupon_color} 100%);"> <div class="coupon-price"> {if condition="$vo.coupon_form == 1"} <span class="coupon-label">抵¥</span>{$vo.coupon_price}<span class="coupon-unit">元</span> {elseif condition="$vo.coupon_form == 2"} <span class="coupon-label">享</span>{$vo.coupon_discount}<span class="coupon-unit">折</span> {/if} </div> <div class="coupon-condition"> 满{$vo.conditions_use}可用 </div> </div>  <div class="coupon-right"> <div class="coupon-name">{$vo.coupon_name}</div> <div class="coupon-info"> 有效期：{$vo.start_date|MyDate='Y-m-d',###} 至 {$vo.end_date|MyDate='Y-m-d',###} </div> <div class="coupon-stock"> 剩余：<span>{$vo.coupon_stock}</span> 张 </div> {if condition="$vo.can_get == 1"} <button class="coupon-btn" onclick="receiveCoupon({$vo.coupon_id})">立即领取</button> {elseif condition="$vo.is_get == 1"} <button class="coupon-btn disabled">已领取</button> {elseif condition="$vo.is_out == 1"} <button class="coupon-btn disabled">已领完</button> {elseif condition="$vo.is_expired == 1"} <button class="coupon-btn disabled">已过期</button> {elseif condition="$vo.is_not_start == 1"} <button class="coupon-btn disabled">未开始</button> {/if} </div> </div> {/foreach} </div> {/empty}

JS部分

<script type="text/javascript">
function receiveCoupon(coupon_id) {
    {empty name="$users_id"}
    layer.confirm('请先登录后再领取优惠券', {
        btn: ['去登录', '取消'],
        shadeClose: false
    }, function(index) {
        window.location.href = "{:url('user/Users/login')}";
        layer.close(index);
    });
    {else /}
    layer.confirm('确定要领取该优惠券吗？', {
        btn: ['确定', '取消'],
        shadeClose: false
    }, function(index) {
        layer_loading('正在领取...');
        $.ajax({
            type: 'post',
            url: "{:url('home/Coupon/receive_coupon', ['_ajax'=>1])}",
            data: {
                coupon_id: coupon_id,
                _ajax: 1
            },
            dataType: 'json',
            success: function(res) {
                layer.closeAll();
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1, shade: 0.1, time: 1500}, function() {
                        window.location.reload();
                    });
                } else {
                    layer.msg(res.msg, {icon: 2, shade: 0.1, time: 2000});
                }
            },
            error: function(xhr, status, error) {
                layer.closeAll();
                var errorMsg = '网络错误，请稍后重试';
                if (xhr.responseJSON && xhr.responseJSON.msg) {
                    errorMsg = xhr.responseJSON.msg;
                }
                layer.msg(errorMsg, {icon: 2, shade: 0.1, time: 2000});
            }
        });
    });
    {/empty}
}
</script>

CSS部分：（例子非正常可用）

<style>
.coupon-center {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.coupon-header {
    text-align: center;
    margin-bottom: 30px;
}

.coupon-header h1 {
    font-size: 28px;
    color: #333;
    margin-bottom: 10px;
}

.coupon-header p {
    color: #666;
    font-size: 14px;
}

.coupon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.coupon-item {
    flex: 0 0 calc(33.333% - 14px);
    max-width: calc(33.333% - 14px);
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.coupon-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.coupon-left {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    color: #fff;
    padding: 20px;
    text-align: center;
    position: relative;
}

.coupon-left::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
}

.coupon-price {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 5px;
}

.coupon-price span {
    font-size: 16px;
}

.coupon-label {
    font-size: 14px;
    opacity: 0.9;
    margin-right: 2px;
}

.coupon-unit {
    font-size: 14px;
    opacity: 0.9;
    margin-left: 2px;
}

.coupon-condition {
    font-size: 12px;
    opacity: 0.9;
}

.coupon-right {
    padding: 20px;
    flex: 1;
}

.coupon-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coupon-info {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}

.coupon-info span {
    color: #ff6b6b;
}

.coupon-stock {
    font-size: 12px;
    color: #666;
    margin-bottom: 15px;
}

.coupon-btn {
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
    background: #ff6b6b;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s ease;
}

.coupon-btn:hover {
    background: #ff8e53;
}

.coupon-btn.disabled {
    background: #ccc;
    cursor: not-allowed;
}

.coupon-btn.disabled:hover {
    background: #ccc;
}

.coupon-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.coupon-empty img {
    width: 200px;
    margin-bottom: 20px;
}

.coupon-empty p {
    font-size: 16px;
    margin-bottom: 20px;
}

@media (max-width: 992px) {
    .coupon-item {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
}

@media (max-width: 576px) {
    .coupon-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
</style>

商品详情页调用标签说明：

 //价格区域
        <div class="selected-list">
          <ul>
            <li>
              <div class="guiname">{$field.spec_title}</div>
              <div class="guijiage">{$field.spec_price}元</div>
            </li>
          </ul>
          <div class="total-price">总计：{$field.totol_price}元</div>
//优惠卷优惠后价格标签
          {eyou:notempty name='$field.used_coupon'}
          <div class="final-price">优惠后：{$field.final_price_html}元
              <span class="coupon-desc">使用优惠券：{$field.used_coupon.coupon_name}</span>
          </div>
          {/eyou:notempty}
        </div>
    <!-- 优惠券信息 -->
        {eyou:notempty name='$field.coupon_info'}
        <div class="coupon-section">
            <div class="coupon-toggle" onclick="toggleCouponList()">
                {eyou:assign name="available_coupon_count" value="0" /}
                {eyou:volist name='$field.coupon_info' id='coupon' key='k'}
                {eyou:if condition="empty($coupon.use_status) || $coupon.use_status eq 0"}
                {eyou:assign name="available_coupon_count" value="$available_coupon_count+1" /}
                {/eyou:if}
                {/eyou:volist}
                <span>可用优惠券 ({$available_coupon_count}张)</span>
                <span class="toggle-icon">▼</span>
            </div>
            <div class="coupon-list" style="display: none;">
                {eyou:volist name='$field.coupon_info' id='coupon' key='k'}
                {eyou:if condition="$coupon.use_status neq 1 && $coupon.use_status neq 3"}
                <div class="coupon-item" data-coupon-id="{$coupon.coupon_id}">
                    <div class="coupon-select">
                        {if condition="$coupon.is_get && $coupon.can_use"}
                        <input type="radio" name="coupon_select" value="{$coupon.coupon_id}" 
                            {if condition="$field.used_coupon.coupon_id eq $coupon.coupon_id"}checked{/if}
                            onchange="switchCoupon({$coupon.coupon_id}, {$coupon.final_price})">
                        {/if}
                    </div>
                    <div class="coupon-content">
                        <div class="coupon-left" style="background-color: {$coupon.coupon_color|default='#ff4444'}">
                            <div class="coupon-price">
                                {if condition="$coupon.coupon_form eq 2"}
                                <span>{$coupon.coupon_discount}折</span>
                                {else}
                                <span>¥</span>
                                <span>{$coupon.coupon_price}</span>
                                {/if}
                            </div>
                            <div class="coupon-condition">满{$coupon.conditions_use}元</div>
                        </div>
                        <div class="coupon-right">
                            <div class="coupon-name">{$coupon.coupon_name}</div>
                            <div class="coupon-info">
                                有效期：{$coupon.start_date|MyDate='Y-m-d',###} 至 {$coupon.end_date|MyDate='Y-m-d',###}
                            </div>


{if condition="($coupon.use_status === '' || $coupon.use_status === null || !isset($coupon.use_status))"}
    <button class="coupon-btn" onclick="receiveCoupon({$coupon.coupon_id})">立即领取</button>
{elseif condition="$coupon.use_status == 0"}
    <button class="coupon-btn disabled">已领取</button>
{elseif condition="$coupon.use_status == 1"}
    <button class="coupon-btn disabled">已使用</button>
{elseif condition="$coupon.use_status == 3"}
    <button class="coupon-btn disabled">已过期</button>
{else}
    <button class="coupon-btn disabled">暂不可领</button>
{/if}
                        </div>
                    </div>
                </div>
                {/eyou:if}
                {/eyou:volist}
            </div>
        </div>
        {/eyou:notempty}
       
//立即购买按钮部分

  <ul class="action">
          <li>
            {eyou:assign name="has_available_coupon" value="0" /}
            {eyou:volist name='$field.coupon_info' id='coupon'}
            {eyou:if condition="$coupon.can_use && !$coupon.is_get"}
            {eyou:assign name="has_available_coupon" value="1" /}
            {/eyou:if}
            {/eyou:volist}
            {eyou:if condition="$has_available_coupon eq 1"}
            <button class="btn goumai btn-red" href="javascript:void(0);" onclick="checkCouponsAndBuy()">领券购买</button>
            {eyou:else /}
            <button class="btn goumai btn-red" href="javascript:void(0);" {$field.BuyNow}>立即购买</button>
            {/eyou:if}
            <button class="btn jiaru btn-car" href="javascript:void(0);" {$field.ShopAddCart}>加入购物车</button>
          </li>
        </ul>




        <style>
    /*优惠卷样式*/

        .coupon-section {
            margin: 10px 0;
            border: 1px solid #f0f0f0;
            border-radius: 6px;
            overflow: hidden;
        }
        .coupon-toggle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            background-color: #f9f9f9;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .coupon-toggle:hover {
            background-color: #f0f0f0;
        }
        .coupon-toggle span:first-child {
            font-size: 14px;
            color: #333;
        }
        .toggle-icon {
            font-size: 12px;
            color: #666;
            transition: transform 0.3s ease;
        }
        .toggle-icon.active {
            transform: rotate(180deg);
        }
        .coupon-list {
            max-height: 300px;
            overflow-y: auto;
            background-color: #fff;
        }
        .coupon-item {
            display: flex;
            padding: 10px;
            border-bottom: 1px solid #f5f5f5;
            align-items: center;
        }
        .coupon-item:last-child {
            border-bottom: none;
        }
        .coupon-select {
            margin-right: 10px;
            display: flex;
            align-items: center;
        }
        .coupon-select input[type="radio"] {
            transform: scale(1.1);
            cursor: pointer;
        }
        .coupon-content {
            flex: 1;
            display: flex;
            align-items: center;
        }
        .coupon-left {
            width: 100px;
            padding: 8px 12px;
            color: #fff;
            text-align: center;
            border-radius: 4px;
            margin-right: 10px;
        }
        .coupon-price {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 2px;
        }
        .coupon-price span:first-child {
            font-size: 12px;
        }
        .coupon-condition {
            font-size: 10px;
            opacity: 0.9;
        }
        .coupon-right {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .coupon-name {
            font-size: 13px;
            font-weight: bold;
            color: #333;
            margin-bottom: 2px;
        }
        .coupon-info {
            font-size: 10px;
            color: #666;
            margin-bottom: 6px;
        }
        .coupon-btn {
            align-self: flex-start;
            padding: 4px 12px;
            border: 1px solid #ff4444;
            border-radius: 12px;
            background-color: #fff;
            color: #ff4444;
            font-size: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .coupon-btn:hover {
            background-color: #ff4444;
            color: #fff;
        }
        .coupon-btn.disabled {
            border-color: #ccc;
            color: #ccc;
            cursor: not-allowed;
        }
        .coupon-btn.disabled:hover {
            background-color: #fff;
        }
        /* 最终价格样式 */
        .final-price {
            margin-top: 10px;
            padding: 8px;
            background-color: #fff3f3;
            border-radius: 4px;
            border-left: 3px solid #ff4444;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .final-price span:first-child {
            font-size: 14px;
            font-weight: bold;
            color: #ff4444;
        }
        .coupon-desc {
            font-size: 10px;
            color: #666;
        }
        </style>

JS部分

      <script>
        function receiveCoupon(couponId) {
            $.ajax({
                url: '{:url("home/Coupon/receive_coupon")}',
                type: 'POST',
                data: {
                    coupon_id: couponId
                },
                dataType: 'json',
                success: function(res) {
                    if (res.code == 1) {
                        alert('领取成功');
                        // 刷新页面以更新优惠券状态
                        location.reload();
                    } else {
                        alert('领取失败：' + res.msg);
                    }
                },
                error: function() {
                    alert('网络错误，请稍后重试');
                }
            });
        }
                function switchCoupon(couponId, finalPrice) {
            // 更新最终价格显示
            $('#final_price').text('¥' + finalPrice.toFixed(2));
                        // 更新优惠券描述
            var couponName = $('input[name="coupon_select"][value="' + couponId + '"]').closest('.coupon-item').find('.coupon-name').text();
            $('.final-price .coupon-desc').text('使用优惠券：' + couponName);
        }

        // 更新优惠券的优惠后价格
        function updateCouponPrices() {
            var currentPrice = parseFloat($('#totol_price').text());
                        $('.coupon-item').each(function() {
                var $couponItem = $(this);
                var couponId = $couponItem.data('coupon-id');
                var couponForm = $couponItem.find('.coupon-left').text().indexOf('折') > -1 ? 2 : 1;
                var couponPrice = 0;
                var discountRate = 1;
                                if (couponForm == 2) {
                    // 折扣券
                    var discountText = $couponItem.find('.coupon-price').text().replace('折', '');
                    discountRate = parseFloat(discountText) / 10;
                    couponPrice = currentPrice * discountRate;
                } else {
                    // 满减券
                    var priceText = $couponItem.find('.coupon-price').text().replace('¥', '').trim();
                    var couponAmount = parseFloat(priceText);
                    couponPrice = Math.max(0, currentPrice - couponAmount);
                }
                                // 更新优惠券的 final_price 属性
                $couponItem.attr('data-final-price', couponPrice.toFixed(2));
                                // 如果当前选中了该优惠券，更新最终价格显示
                if ($('input[name="coupon_select"][value="' + couponId + '"]').prop('checked')) {
                    $('#final_price').text('¥' + couponPrice.toFixed(2));
                }
                                // 更新优惠券选择框的 onchange 事件
                $('input[name="coupon_select"][value="' + couponId + '"]').attr('onchange', 'switchCoupon(' + couponId + ', ' + couponPrice.toFixed(2) + ')');
            });
        }

        // 检查优惠券并购买
        function checkCouponsAndBuy() {
            // 获取可领取的优惠券数量
            var couponItems = $('.coupon-item');
            var canReceiveCoupons = [];
                        couponItems.each(function() {
                var couponId = $(this).data('coupon-id');
                var isGet = $(this).find('.coupon-btn:not(.disabled)').length > 0;
                if (isGet) {
                    canReceiveCoupons.push({
                        id: couponId,
                        name: $(this).find('.coupon-name').text()
                    });
                }
            });
                        var couponCount = canReceiveCoupons.length;
                        if (couponCount === 0) {
                // 没有可领取的优惠券，直接购买
                {$field.BuyNow}
            } else if (couponCount === 1) {
                // 只有一个优惠券，弹出确认对话框
                var coupon = canReceiveCoupons[0];
                layer.confirm('是否领取优惠券"' + coupon.name + '"并购买？', {
                    btn: ['确定领取并购买', '取消']
                }, function(index) {
                    layer.close(index);
                    receiveCouponAndBuy(coupon.id);
                });
            } else {
                // 多个优惠券，弹出选择窗口
                showCouponSelectDialog(canReceiveCoupons);
            }
        }

        // 领取优惠券后购买
        function receiveCouponAndBuy(couponId) {
            layer_loading('正在领取优惠券...');
            $.ajax({
                url: '{:url("home/Coupon/receive_coupon")}',
                type: 'POST',
                data: {
                    coupon_id: couponId
                },
                dataType: 'json',
                success: function(res) {
                    layer.closeAll();
                    if (res.code == 1) {
                        layer.msg('领取成功', {icon: 1, time: 2000}, function() {
                            // 领取成功后立即购买
                            BuyNow();
                        });
                    } else {
                        layer.msg('领取失败：' + res.msg, {icon: 2});
                    }
                },
                error: function() {
                    layer.closeAll();
                    layer.msg('网络错误，请稍后重试', {icon: 2});
                }
            });
        }

        // 显示优惠券选择对话框
        function showCouponSelectDialog(coupons) {
            var html = '<div class="coupon-select-dialog">';
            html += '<h3>选择优惠券</h3>';
            html += '<div class="coupon-list">';
                        coupons.forEach(function(coupon) {
                html += '<div class="coupon-item">';
                html += '<span>' + coupon.name + '</span>';
                html += '<button class="select-btn" onclick="selectCouponAndBuy(' + coupon.id + ')">选择并领取</button>';
                html += '</div>';
            });
                        html += '</div>';
            html += '</div>';
                        layer.open({
                type: 1,
                title: '选择优惠券',
                content: html,
                area: ['400px', 'auto'],
                btn: ['取消'],
                success: function(layero) {
                    // 添加样式
                    $(layero).find('.coupon-select-dialog').css({
                        padding: '20px'
                    });
                    $(layero).find('h3').css({
                        margin: '0 0 15px 0',
                        fontSize: '16px'
                    });
                    $(layero).find('.coupon-item').css({
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        padding: '10px',
                        borderBottom: '1px solid #eee'
                    });
                    $(layero).find('.select-btn').css({
                        padding: '5px 15px',
                        backgroundColor: '#ff6b6b',
                        color: '#fff',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer'
                    });
                }
            });
        }

        // 选择优惠券并购买
        function selectCouponAndBuy(couponId) {
            layer.closeAll();
            receiveCouponAndBuy(couponId);
        }

        // 原有的receiveCoupon函数修改
        function receiveCoupon(couponId) {
            layer.confirm('确定要领取该优惠券吗？', {
                btn: ['确定', '取消']
            }, function(index) {
                layer.close(index);
                layer_loading('正在领取...');
                $.ajax({
                    url: '{:url("home/Coupon/receive_coupon")}',
                    type: 'POST',
                    data: {
                        coupon_id: couponId
                    },
                    dataType: 'json',
                    success: function(res) {
                        layer.closeAll();
                        if (res.code == 1) {
                            layer.msg('领取成功', {icon: 1, time: 2000}, function() {
                                // 刷新页面，更新优惠券状态
                                location.reload();
                            });
                        } else {
                            layer.msg('领取失败：' + res.msg, {icon: 2});
                        }
                    },
                    error: function() {
                        layer.closeAll();
                        layer.msg('网络错误，请稍后重试', {icon: 2});
                    }
                });
            });
        }

        function switchCoupon(couponId, finalPrice) {
            // 更新最终价格显示
            $('#final_price').text('¥' + finalPrice.toFixed(2));
                        // 更新优惠券描述
            var couponName = $('input[name="coupon_select"][value="' + couponId + '"]').closest('.coupon-item').find('.coupon-name').text();
            $('.final-price .coupon-desc').text('使用优惠券：' + couponName);
        }
                function toggleCouponList() {
            var couponList = $('.coupon-list');
            var toggleIcon = $('.toggle-icon');
                        if (couponList.is(':visible')) {
                couponList.hide();
                toggleIcon.removeClass('active');
            } else {
                couponList.show();
                toggleIcon.addClass('active');
            }
        }
        </script>

内页的第二种写法：

引用独立的JS 和CSS 另加

        <script>
        // 初始化优惠券功能
        $(document).ready(function() {
            initCoupon('{:url("home/Coupon/receive_coupon")}');
        });
        </script>