fe / yohobuywap-node · Commits

Go to a project

Authored by 毕凯
Commit 0c13c93f180ff772444aa13397004d9a2b41c2b4 2 parents 436c2af4 26f917b6

Merge branch 'hotfix/shopCoupon' into 'release/6.0' 

'店铺优惠券样式微调'



See merge request !774
Inline Side-by-side
Showing 12 changed files with 282 additions and 159 deletions
... ... @@ -27,7 +27,7 @@
{{/ shopInfo}}
<!-- 优惠卷 -->
<div class="coupon-group">
<div class="shop-coupon coupon-group">
{{> reds-shop/coupon}}
</div>
... ...
... ... @@ -20,7 +20,7 @@
</div>
{{!--shop-tab-nav: 首页 | 全部商品--}}
<div class="tab">
<ul class="shop-tabs tab-navs" data-sticky>
<ul class="shop-tabs tab-navs">
<li class="shop-tab-nav tab-nav active">
<span data-target="#red-index" data-trigger="tab" data-funHome>首页</span>
</li>
... ...
... ... @@ -54,7 +54,7 @@
<div id="home-page" class="main">
<div id="nav-main" class="nav-main">
<!-- 优惠卷 -->
<div class="coupon-group"></div>
<div class="shop-coupon coupon-group"></div>
<!-- 大导航 -->
{{#if brandList}}
... ...
{{#couponData}}
<div class="coupon-content">
<div class="swiper-wrapper">
{{#if couponsOne}}
{{#each coupons}}
<div class="swiper-slide coupon-big" data-id = "{{id}}">
<div class='coupon-left'>
{{#if couponsOne}}
{{#each coupons}}
<div class="coupon-center 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>
<div class='coupon-right receive-btn'>
立即领取
</div>
</div><!--/coupon-big-->
{{/each}}
{{^}}
{{#each coupons}}
<div class="coupon-center 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}}
{{name}}
</span>
</div>
<div class='coupon-right receive-btn'>
立即领取
</div>
</div><!--/coupon-big-->
{{/each}}
{{^}}
{{#each coupons}}
<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>
<div class='coupon-right receive-btn'>
立即领取
</div>
</div><!--/coupon-small-->
{{/each}}
{{/if}}
</div>
</div>
</div>
<div class='coupon-right receive-btn'>
立即领取
</div>
</div><!--/coupon-small-->
{{/each}}
{{/if}}
{{/couponData}}
\ No newline at end of file
... ...
... ... @@ -110,7 +110,7 @@
{{#ifor brandHome baseShopHome}}
{{!--优惠卷--}}
<div class="coupon-group"></div>
<div class="shop-coupon coupon-group"></div>
{{/ifor}}
{{!--筛选tab--}}
... ...
<div class="coupon-content">
<div class="swiper-wrapper">
{{#if shopCouponsOne}}
{{#each shopCoupons}}
<div class="swiper-slide coupon-big" data-id = "{{id}}">
{{#if shopCouponsOne}}
{{#each shopCoupons}}
<div class="coupon-center 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="coupon-center 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>
<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'>
... ... @@ -21,31 +42,6 @@
已领取
</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
</div><!--/coupon-small-->
{{/each}}
{{/if}}
... ...
{{#if coupons}}
<div class="coupon-content">
<div class="swiper-wrapper">
{{#if couponsOne}}
{{#each coupons}}
<div class="swiper-slide coupon-big" data-id = "{{id}}">
<div class='coupon-left'>
{{#if couponsOne}}
{{#each coupons}}
<div class="coupon-center 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 coupons}}
<div class="coupon-center 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}}
{{name}}
</span>
</div>
{{#if status}}
<div class='coupon-right receive-btn'>
立即领取
</div>
{{#if status}}
<div class='coupon-right receive-btn'>
立即领取
</div>
{{^}}
<div class='coupon-right receive-btn'>
已领取
</div>
{{/if}}
</div><!--/coupon-big-->
{{/each}}
{{^}}
{{#each coupons}}
<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>
{{/if}}
\ No newline at end of file
{{^}}
<div class='coupon-right receive-btn'>
已领取
</div>
{{/if}}
</div><!--/coupon-small-->
{{/each}}
{{/if}}
... ...
... ... @@ -19,6 +19,8 @@ const productListWithFilterModel =
productListWithFilterModel.getFilter();
require('./shop/coupon');
/**
* 添加或者取消收藏处理
* @param {*} opt
... ...
let $ = require('yoho-jquery'),
Swiper = require('yoho-swiper'),
tip = require('plugin/tip');
require('common');
... ... @@ -9,7 +8,7 @@ let shopCoupon = {};
shopCoupon = {
common: {
appVersion: window.queryString.app_version || window.queryString.appVersion,
shopId: parseInt($('.shop-id').val() || $('.shopId').val(), 10) || null,
shopId: parseInt($('.shop-id').val() || $('.shopId').val() || $('#shopId').val(), 10) || null,
couponTemplate: require('product/shop/coupon.hbs')
},
init: function() {
... ... @@ -42,11 +41,6 @@ shopCoupon = {
},
success: function(result) {
$('.coupon-group').html(that.common.couponTemplate(result));
new Swiper('.coupon-content', {
slideElement: '.coupon-small',
slidesPerView: 'auto',
watchSlidesVisibility: true
});
that.userCoupon();
}
});
... ... @@ -54,7 +48,7 @@ shopCoupon = {
userCoupon: function() {
let $self = this;
$('.coupon-content .receive-btn').closest('.swiper-slide').on('click', function() {
$('.coupon-group .receive-btn').closest('.coupon-center').on('click', function() {
let that = this,
code = $(this).data('id') || '';
... ...
.coupon-content {
.shop-coupon {
overflow: auto;
width: 100%;
color: #fff;
height: 180px;
overflow: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
.coupon-big {
height: 120px;
width: 580px;
height: 140px;
width: 680px;
background: resolve("product/coupon-big.png") no-repeat;
background-size: 580px 120px;
margin: 30px;
background-size: contain;
margin: 35px;
position: relative;
display: inline-block;
white-space: normal;
.coupon-left {
position: absolute;
margin: 10px 0;
margin: 11px 0;
}
.coupon-left .coupon-left-price {
margin: 0 25px;
margin: 0 58px;
float: left;
}
.coupon-left .coupon-left-price .coupon-sign {
font-size: 50px;
float: left;
margin-top: 25px;
width: 35px;
}
.coupon-left .coupon-left-price .coupon-price {
font-size: 72px;
float: left;
}
.coupon-left .coupon-left-name {
font-size: 22px;
width: 250px;
height: 100px;
width: 322px;
height: 117px;
float: left;
align-items: center;
display: flex;
... ... @@ -41,68 +49,77 @@
.coupon-right {
width: 20px;
font-size: 22px;
right: 5%;
right: 37px;
position: absolute;
height: inherit;
line-height: 1.2em;
align-items: center;
display: flex;
transform: scale(0.88);
}
}
.coupon-small {
height: 120px;
width: 245px;
height: 140px;
width: 287px;
background: resolve("product/coupon-small.png") no-repeat;
background-size: 245px 120px;
margin: 30px 0 30px 30px;
background-size: contain;
margin: 35px 0 35px 35px;
position: relative;
float: left;
display: table;
display: inline-block;
white-space: normal;
&:last-child {
margin-right: 35px;
}
.coupon-left {
position: absolute;
width: 165px;
width: 158px;
overflow: hidden;
margin: 0 30px;
margin: 0 35px;
height: inherit;
}
.coupon-left .coupon-left-price {
width: inherit;
display: inline-block;
height: 60px;
height: 64px;
overflow: hidden;
float: left;
}
.coupon-left .coupon-left-price .coupon-sign {
font-size: 42px;
float: left;
width: 33px;
margin-top: 15px;
}
.coupon-left .coupon-left-price .coupon-price {
font-size: 52px;
float: left;
width: 100px;
overflow: hidden;
}
.coupon-left .coupon-left-name {
font-size: 16px;
width: 150px;
overflow: hidden;
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
float: left;
}
.coupon-right {
width: 20px;
width: 23px;
font-size: 18px;
right: 7.5%;
right: 22px;
position: absolute;
height: inherit;
line-height: 1.2em;
align-items: center;
display: flex;
transform: scale(0.88);
}
}
}
... ...
.shop-coupon {
overflow: auto;
width: 100%;
color: #fff;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
.coupon-big {
height: 120px;
width: 580px;
background: resolve("product/coupon-big.png") no-repeat;
background-size: contain;
margin: 30px;
position: relative;
display: inline-block;
white-space: normal;
.coupon-left {
position: absolute;
margin: 10px 0;
}
.coupon-left .coupon-left-price {
margin: 0 25px;
float: left;
}
.coupon-left .coupon-left-price .coupon-sign {
font-size: 50px;
float: left;
margin-top: 20px;
width: 30px;
}
.coupon-left .coupon-left-price .coupon-price {
font-size: 72px;
float: left;
}
.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: contain;
margin: 30px 0 30px 30px;
position: relative;
display: inline-block;
white-space: normal;
&:last-child {
margin-right: 30px;
}
.coupon-left {
position: absolute;
width: 165px;
overflow: hidden;
margin: 0 30px;
height: inherit;
}
.coupon-left .coupon-left-price {
width: inherit;
height: 60px;
overflow: hidden;
float: left;
}
.coupon-left .coupon-left-price .coupon-sign {
font-size: 42px;
float: left;
width: 30px;
margin-top: 10px;
}
.coupon-left .coupon-left-price .coupon-price {
font-size: 52px;
float: left;
overflow: hidden;
}
.coupon-left .coupon-left-name {
font-size: 16px;
overflow: hidden;
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
float: left;
}
.coupon-right {
width: 20px;
font-size: 18px;
right: 7.5%;
position: absolute;
height: inherit;
line-height: 1.2em;
align-items: center;
display: flex;
}
}
}
... ...
... ... @@ -17,5 +17,5 @@
@import "../shop/shop-index";
@import "../shop/shop-prodfile";
@import "../shop/product-category";
@import "../shop/shop-index-coupon";
@import "../shop/shop_coupon_640";
@import "home/hot-category";
... ...