Authored by 郭成尧

'shop-coupon-page'

... ... @@ -52,6 +52,11 @@
<div id="home-page" class="main">
<div id="nav-main" class="nav-main">
<!-- 优惠卷 -->
{{#if shopCoupons}}
{{> shop/shop-coupon}}
{{/if}}
<!-- 大导航 -->
{{#if brandList}}
<div class="multi-brands first">
... ...
<div class="coupon-content">
<div class="swiper-wrapper">
{{#if shopCouponsOne}}
{{#each shopCoupons}}
<div class="swiper-slide coupon-big" data-id = "{{id}}">
<div class='coupon-left'>
<span class="coupon-left-price">
<span class="coupon-sign">¥</span>
<span class="coupon-price">{{money}}</span>
</span>
<span class="coupon-left-name">
{{name}}
</span>
</div>
{{#if status}}
<div class='coupon-right receive-btn'>
立即领取
</div>
{{^}}
<div class='coupon-right receive-btn'>
已领取
</div>
{{/if}}
</div><!--/coupon-big-->
{{/each}}
{{^}}
{{#each shopCoupons}}
<div class="swiper-slide coupon-small" data-id = "{{id}}">
<div class='coupon-left'>
<span class="coupon-left-price">
<span class="coupon-sign">¥</span>
<span class="coupon-price">{{money}}</span>
</span>
<span class="coupon-left-name">
{{name}}
</span>
</div>
{{#if status}}
<div class='coupon-right receive-btn'>
立即领取
</div>
{{^}}
<div class='coupon-right receive-btn'>
已领取
</div>
{{/if}}
</div><!--/coupon-small-->
{{/each}}
{{/if}}
</div>
</div>
\ No newline at end of file
... ...
require('./shop/shop');
require('./shop/shop-coupon');
... ...
var $ = require('yoho-jquery'),
Swiper = require('yoho-swiper'),
tip = require('../../plugin/tip');
var appVersion = $('input[name="app_version"]').val();
$(".coupon-content .receive-btn").closest('.swiper-slide').on('click', function(e) {
var that = this,
code = $(this).data('id') || '';
if (that.isCouponClick === false) {
return false;
}
that.isCouponClick = false;
$.ajax({
method: 'POST',
url: location.protocol + '//m.yohobuy.com/product/index/userCoupon',
data: {
couponID: code,
app_version: appVersion
},
xhrFields: {
withCredentials: true
},
success: function(data) {
that.isCouponClick = true;
if (data.code === 200) {
tip.show('领取成功');
$(that).find('.receive-btn').html('已领取');
return true;
} else if (data.code === 4401) {
$('#shop-login').remove();
$('body').append('<a href=\'' + data.url + '\'><span id="shop-login"><span></a>');
$('#shop-login').click();
} else if (data.code === 401) {
tip.show('已领取过');
} else {
tip.show(data.message);
}
},
error: function() {
tip.show('网络断开连接了~');
that.isCouponClick = true;
}
});
});
$(function() {
new Swiper('.coupon-content', {
slideElement: '.coupon-small',
slidesPerView: 'auto',
watchSlidesVisibility: true
});
})
... ...
@import "shop-index";
@import "shop-prodfile";
@import "product-category";
\ No newline at end of file
@import "product-category";
@import "shop-index-coupon";
\ No newline at end of file
... ...
.coupon-content {
color: #fff;
height: 180px;
overflow: hidden;
.coupon-big {
height: 120px;
width: 580px;
background: resolve('product/coupon-big.png') no-repeat;
background-size: 580px 120px;
margin: 30px;
position: relative;
.coupon-left {
position: absolute;
margin: 10px 0;
}
.coupon-left .coupon-left-price {
margin: 0 50px;
float: left;
}
.coupon-left .coupon-left-price .coupon-sign{
font-size: 50px;
}
.coupon-left .coupon-left-price .coupon-price{
font-size: 72px;
}
.coupon-left .coupon-left-name {
font-size: 22px;
width: 250px;
height: 100px;
float: left;
align-items: center;
display: flex;
}
.coupon-right {
width: 20px;
font-size: 22px;
right: 5%;
position: absolute;
height: inherit;
line-height: 1.2em;
align-items: center;
display: flex;
}
}
.coupon-small {
height: 120px;
width: 245px;
background: resolve('product/coupon-small.png') no-repeat;
background-size: 245px 120px;
margin: 30px 0 30px 30px;
position: relative;
float: left;
display: table;
.coupon-left {
position: absolute;
width: 165px;
overflow: hidden;
margin: 0 30px;
height: inherit;
}
.coupon-left .coupon-left-price {
width: inherit;
display: inline-block;
height: 62px;
}
.coupon-left .coupon-left-price .coupon-sign{
font-size: 42px;
}
.coupon-left .coupon-left-price .coupon-price{
font-size: 52px;
}
.coupon-left .coupon-left-name {
font-size: 18px;
width: 150px;
height: 45px;
line-height: 24px;
padding-top: 2px;
overflow: hidden;
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.coupon-right {
width: 20px;
font-size: 18px;
right: 7.5%;
position: absolute;
height: inherit;
line-height: 1.2em;
align-items: center;
display: flex;
}
}
}
\ No newline at end of file
... ...