<style>
    .coupon-wrapper {
        width:100%;
        height:auto;
        padding-left: 5%;
        padding-right: 5%;
    }
    .coupon-wrapper .coupon-item {
        width:100%;
    }
    .coupon-wrapper h3 {
        height:3rem;
        line-height:1.8rem;
        font-size:1.4rem;
        color:#454545;
        padding:2% 0;
    }
    .coupon-wrapper a {
        text-decoration:none;
        color:#a1a1a1;
        background:transparent;
        -webkit-tap-highlight-color:transparent;
    }
    .coupon-item .nick {
        padding:.66% 0;
        color:#fff;
    }
    .coupon-item .coupon-money {
        width:100%;
        display:-webkit-box;
        display:-webkit-flex;
        display:flex;
        font-size:1.2rem;
        align-items:center;
    }
    .coupon-item .coupon-money em {
        font-size:3.8rem;
    }
    .coupon-item .coupon-money .lay:last-child {
        flex:1;
        padding:0 3%;
        line-height:1.66rem;
    }
    .style-one {
        width:100%;
        height:8rem;
        position:relative;
        margin:5% 0;
        display:-webkit-box;
        display:-webkit-flex;
        display:flex;
        align-items:center;
        justify-content:center;
        background-color:#fff;
        border:1px solid #E5004F;
    }
    .style-one:after,.style-three .get-btn:after {
        content:"";
        width:1.2rem;
        position:absolute;
        top:0;
        bottom:0;
        right:23.9%;
        display:block;
        z-index:9;
        background-color:#fff;
        background-position:100% 35%;
        background-size:2rem .66rem;
        background-image:linear-gradient(-45deg,#e5004f 25%,transparent 25%,transparent),linear-gradient(-135deg,#e5004f 25%,transparent 25%,transparent),linear-gradient(-45deg,transparent 75%,#e5004f 75%),linear-gradient(-135deg,transparent 75%,#e5004f 75%);
    }
    .style-one .info-box,.style-two .info-box,.style-three .info-box,.style-four .info-box,.style-five .info-box,.style-six .info-box,.style-seven .info-box {
        -webkit-box:1;
        -webkit-flex:1;
        flex:1;
        padding:0 1% 0 8%;
        position:relative;
    }
    .style-one .info-box:before,.style-one .info-box:after,.style-one .get-btn:before,.style-one .get-btn:after,.style-two .info-box:before,.style-two .info-box:after,.style-two .get-btn:before,.style-two .get-btn:after {
        content:"";
        width:1.4rem;
        height:2rem;
        position:absolute;
        z-index:9;
        border-width:1px;
        border-style:solid;
        border-color:transparent #E5004F transparent transparent;
        -webkit-border-radius:50%;
        border-radius:50%;
        background-color:#f5f5f5;
    }
    .style-one .info-box:before,.style-two .info-box:before {
        top:-1.8rem;
        left:-.5rem;
        -webkit-transform:rotate(43deg);
        transform:rotate(43deg);
    }
    .style-one .info-box:after,.style-two .info-box:after {
        bottom:-1.8rem;
        left:-.5rem;
        -webkit-transform:rotate(-43deg);
        transform:rotate(-43deg);
    }
    .style-one .get-btn:before,.style-two .get-btn:before {
        top:-.8rem;
        right:-.35rem;
        -webkit-transform:rotate(143deg);
        transform:rotate(143deg);
        border-color:transparent;
    }
    .style-one .get-btn:after,.style-two .get-btn:after {
        bottom:-.8rem;
        right:-.35rem;
        -webkit-transform:rotate(-143deg);
        transform:rotate(-143deg);
        border-color:transparent;
    }
    .style-one .get-btn,.style-two .get-btn,.style-three .get-btn,.style-four .get-btn,.style-six .get-btn,.style-seven .get-btn {
        display:-webkit-box;
        display:-webkit-flex;
        display:flex;
        align-items:center;
        justify-content:center;
        width:24%;
        height:8rem;
        text-align:center;
        color:#fff;
        font-size:1.5rem;
        line-height:1.35;
        background-color:#E5004F;
        position:relative;
    }
    .style-one .get-btn span {
        width:1.6rem;
        padding:.66rem 2rem .66rem 0;
        display:inherit;
        margin:0 auto;
        word-break:break-all;
    }
    .style-one .nick,.style-four .nick {
        color:#c1c1c1;
    }
    .style-one .of,.style-one .lay .tit,.style-four .of,.style-four .lay .tit,.style-six .nick {
        color:#E5004F;
    }
    .style-one .lay .demand,.style-four .lay .demand {
        color:#454545;
    }

    /* 已领取 */
    .style-one.have {
        border:1px solid #ddd;
        color:#C1C1C1;
    }
    .style-one.have .info-box:before,.style-one.have .info-box:after {
        border-right:1px solid #c1c1c1;
    }
    .style-one.have .of,.style-one.have .tit,.style-one.have .demand {
        color:#c1c1c1;
    }
    .style-one.have .get-btn {
        background-color:#c1c1c1;
    }
    .style-one.have .get-btn span {
        color:#fff;
    }
    .style-one.have .get-btn:before,.style-one.have .get-btn:after {
        border-color:transparent;
    }
    .style-one.have:after {
        background-image:linear-gradient(-45deg,#c1c1c1 25%,transparent 25%,transparent),linear-gradient(-135deg,#c1c1c1 25%,transparent 25%,transparent),linear-gradient(-45deg,transparent 75%,#c1c1c1 75%),linear-gradient(-135deg,transparent 75%,#c1c1c1 75%);
    }
</style>
<div class="header_menu">
    <div class="container">
        <div class="header-nav clearfix">
            <?php echo $this->partial('shop/layout/headerMenu'); ?>
        </div>
    </div>
</div>
</div>

<div class="container" style="background-color: #f5f5f5">
    <div class="row">
        <div class="coupon-wrapper">
            <ul>
                <?php if(!empty($this->couponList)) foreach ($this->couponList as $couponValue) { ?>
                    <?php
                    $startDate  = '';
                    $endDate    = '';
                    $dateHtml   = '';
                    $active     = true;
                    if(!empty($gCouponValue['get_coupon_start_time'])) {
                        $startDate   = date("Y-m-d H:i:s", $gCouponValue['get_coupon_start_time']);
                        $dateHtml .= $this->translate('开始').'：'.$startDate;
                        if(time()<$gCouponValue['get_coupon_start_time']) $active = false;
                    }
                    if(!empty($gCouponValue['get_coupon_end_time'])) {
                        $endDate       = date("Y-m-d H:i:s", $gCouponValue['get_coupon_end_time']);
                        $dateHtml .= '&nbsp;'.$this->translate('结束').'：'.$endDate;
                        if(time()>$gCouponValue['get_coupon_end_time']) $active = false;
                    }

                    $couponUsedState = $this->translate('立即领取');
                    if(isset($this->user_coupon_id_array) and !empty($this->user_coupon_id_array) and in_array($gCouponValue['coupon_id'], $this->user_coupon_id_array)) {
                        $couponUsedState = $this->translate('已领取');
                        $active = false;
                    }
                    ?>
                    <li style="width: 90%;padding-right:5px;padding-left:5px;list-style: none;">
                        <div class="coupon-item">
                            <div id="style-one-<?php echo $couponValue[0]->getCouponId(); ?>" class="style-one <?php echo $couponValue['userCouponId'] > 0 ? 'have' : '';  ?>">
                                <div class="info-box">
                                    <p class="nick">
                                        <?php echo $this->escapeHtml($couponValue[0]->getCouponTitle()); ?>
                                        &nbsp;
                                        <?php echo $this->shopHelper()->effectiveTime($couponValue[0]->getGetCouponStartTime(), $couponValue[0]->getGetCouponEndTime()); ?>
                                    </p>
                                    <div class="coupon-money">
                                        <div class="lay of"><?php echo $this->frontCurrency($couponValue[0]->getShoppingDiscount()); ?></em></div>
                                        <div class="lay">
                                            <p class="tit"><?php echo $this->translate('优惠'); ?><?php echo ($couponValue[0]->getGetGoodsType() == 'allGoods' ? '('.$this->translate('全品类通用').')' : ''); ?></p>
                                            <p class="demand"><?php echo $this->escapeHtml($couponValue[0]->getCouponInfo()); ?></p>
                                        </div>
                                    </div>
                                </div>
                                <a href="javascript:;" onclick="getCoupon(<?php echo $couponValue[0]->getCouponId(); ?>);" class="get-btn">
                                    <span id="coupon-<?php echo $couponValue[0]->getCouponId(); ?>"><?php echo $couponValue['userCouponId'] > 0 ? $this->translate('已经领取') : $this->translate('点击领取'); ?></span>
                                </a>
                            </div>
                        </div>
                    </li>
                <?php } ?>
            </ul>

        </div>


    </div>
</div>
<script>
    function getCoupon(couponId) {
        $.post("<?php echo $this->url('shop-goods', ['action'=>'clickGetCoupon']); ?>",{couponId:couponId, goodsId:<?php echo $this->goodsInfo->getGoodsId(); ?>},
            function(data){
                if(data.state == 'true') {
                    $('#style-one-'+couponId).addClass('have');
                    $('#coupon-'+couponId).html('已领取');
                } else {
                    showMessage(data.message);
                }
            }, 'json');
    }
</script>
