Authored by 郭成尧

Merge branch 'feature/coupon' into release/180420

{{#result}}
<section>
<div class="filter-box">
<span class="filter-btn valid active">可用({{usableCouponNumStr}})</span>
<span class="filter-btn invalid">不可用({{unusableCouponNumStr}})</span>
<span class="filter-btn valid active" data-num="{{usableCouponNumStr}}">可用({{usableCouponNumStr}})</span>
<span class="filter-btn invalid" data-num="{{unusableCouponNumStr}}">不可用({{unusableCouponNumStr}})</span>
</div>
<div class="exchange-box">
<input type="text" name="couponCodeInput" placeholder="请输入优惠券码">
<button id="exchangeCouponBtn" class="exchange-coupon-btn">兑换</button>
</div>
<div class="tip-box">
<div class="tip-box{{#if noShowTips}} hide{{/if}}">
<div class="tips">
{{{headMsg}}}
</div>
... ... @@ -21,12 +21,11 @@
{{#each ./coupons}}
<div class="coupon{{#isEqualOr is_selected_support 'N'}} no-support-selected{{/isEqualOr}}" data-code="{{coupon_code}}">
<div class="coupon-left{{#isEqualOr is_selected_support 'Y'}}
{{#isEqualOr coupon_type '1'}} coupon-left-activity{{/isEqualOr}}
{{#isEqualOr coupon_type '1' '3' '8'}} coupon-left-activity{{/isEqualOr}}
{{#isEqualOr coupon_type '5'}} coupon-left-freight{{/isEqualOr}}
{{#isEqualOr coupon_type '6'}} coupon-left-shop{{/isEqualOr}}
{{/isEqualOr}}">
<p class="value">
{{#isEqualOr coupon_type '1' '3' '6'}}¥{{/isEqualOr}}
<span>{{coupon_value_str}}</span>
</p>
<p class="threshold">{{use_rule}}</p>
... ... @@ -55,12 +54,13 @@
</div>
<div class="coupon-list unusable hide">
{{#unusableCouponsList}}
{{#if ./name}}
<div class="coupon-list-type"><hr><span>{{./name}}</span><hr></div>
{{/if}}
{{#each ./coupons}}
<div class="coupon">
<div class="coupon-left{{#isEqualOr coupon_type '1' '3'}} coupon-left-activity{{/isEqualOr}}{{#isEqualOr coupon_type '5'}} coupon-left-freight{{/isEqualOr}}{{#isEqualOr coupon_type '6'}} coupon-left-shop{{/isEqualOr}}">
<div class="coupon-left{{#isEqualOr coupon_type '1' '3' '8'}} coupon-left-activity{{/isEqualOr}}{{#isEqualOr coupon_type '5'}} coupon-left-freight{{/isEqualOr}}{{#isEqualOr coupon_type '6'}} coupon-left-shop{{/isEqualOr}}">
<p class="value">
{{#isEqualOr coupon_type '1' '3' '6'}}¥{{/isEqualOr}}
<span>{{coupon_value_str}}</span>
</p>
<p class="threshold">{{use_rule}}</p>
... ... @@ -68,7 +68,7 @@
<div class="coupon-right">
<div class="info">
<p class="title">
<span class="{{#isEqualOr coupon_type '1' '3'}} type-activity{{/isEqualOr}}{{#isEqualOr coupon_type '5'}} type-freight{{/isEqualOr}}{{#isEqualOr coupon_type '6'}} type-shop{{/isEqualOr}}">[{{catalog_name}}]</span> {{coupon_name}}</p>
<span class="{{#isEqualOr coupon_type '1' '3' '8'}} type-activity{{/isEqualOr}}{{#isEqualOr coupon_type '5'}} type-freight{{/isEqualOr}}{{#isEqualOr coupon_type '6'}} type-shop{{/isEqualOr}}">[{{catalog_name}}]</span> {{coupon_name}}</p>
<p class="time">{{coupon_validity}}</p>
<p class="desc unusable-desc">{{desc}}</p>
</div>
... ... @@ -80,7 +80,7 @@
{{/each}}
{{/ unusableCouponsList}}
</div>
<div class="use-now">
<div class="use-now" id="useNowBox">
{{#couponPay}}
<div class="left-info">
<p>已选择
... ...
<div id="conponDialogWrapper" class="dialog-wrapper">
<div id="conponDialogWrapper" class="dialog-wrapper conpon-diaalog-wrapper">
<div class="dialog-box" style="top: 50%; margin-top: -119px;">
<div class="dialog-header">优惠券使用规则</div>
<div class="dialog-content">{{{couponPayRule}}}</div>
... ...
<section class="coupon-section" data-code="{{coupon_code}}" data-id="{{coupon_id}}">
<div class="coupon{{#isEqualOr is_overtime 'Y'}} coupon-overtime{{/isEqualOr}}{{#if is_used}} coupon-used{{/if}}">
<div class="coupon-left{{#unless usedOrOvertime}}{{#isEqualOr coupon_type '1' '3'}} coupon-left-activity{{/isEqualOr}}{{#isEqualOr coupon_type '5'}} coupon-left-freight{{/isEqualOr}}{{#isEqualOr coupon_type '6'}} coupon-left-shop{{/isEqualOr}}{{/unless}}">
<p class="value">{{#unlessor coupon_type '5'}}¥{{/unlessor}}<span>{{coupon_value_str}}</span></p>
<div class="coupon-left{{#unless usedOrOvertime}}{{#isEqualOr coupon_type '1' '3' '8'}} coupon-left-activity{{/isEqualOr}}{{#isEqualOr coupon_type '5'}} coupon-left-freight{{/isEqualOr}}{{#isEqualOr coupon_type '6'}} coupon-left-shop{{/isEqualOr}}{{/unless}}">
<p class="value"><span>{{coupon_value_str}}</span></p>
{{#if use_rule}}
<p class="threshold">{{use_rule}}</p>
{{/if}}
... ... @@ -25,7 +25,9 @@
<div class="stamp used-stamp"></div>
{{^}}
<a href="{{useNowLink}}" class="use-now">立即使用</a>
<span class="top-tip"></span>
{{#isEqualOr is_overdue_soon 'Y'}}
<span class="top-tip"></span>
{{/isEqualOr}}
{{/if}}
{{/isEqualOr}}
</div>
... ...
export default {
path: '/cart/index'
};
... ...
... ... @@ -2,6 +2,8 @@ import $ from 'yoho-jquery';
import qs from 'yoho-qs';
import Page from 'yoho-page';
import tip from 'plugin/tip';
import cookie from 'yoho-cookie';
import cookieOption from './cookie-option';
class SelectCouponController extends Page {
constructor(params) {
... ... @@ -13,6 +15,7 @@ class SelectCouponController extends Page {
this.useCouponCodeUrl = params.useCouponCodeUrl;
this.selectCouponCodes = [];
this.isBuyNowPage = params.isBuyNowPage || false;
this.closeCouponRuleTipbyUser = cookie.get('close_coupon_rule_tip_by_user') || 'N';
if (this.orderInfo('coupon_code')) {
this.selectCouponCodes = this.orderInfo('coupon_code').split(',');
... ... @@ -65,7 +68,9 @@ class SelectCouponController extends Page {
unusableCouponList: resultHtml.find('.unusable'),
useNowBtn: resultHtml.find('#useNowBtn'),
exchangeCouponBtn: resultHtml.find('#exchangeCouponBtn'),
couponCodeInput: resultHtml.find('input[name=couponCodeInput]')
couponCodeInput: resultHtml.find('input[name=couponCodeInput]'),
exchangeBox: resultHtml.find('.exchange-box'),
useNowBox: resultHtml.find('#useNowBox')
};
this.view.filterBtn.on('click', this.tabChange.bind(this));
... ... @@ -74,6 +79,10 @@ class SelectCouponController extends Page {
this.view.useNowBtn.on('click', this.useCoupon.bind(this));
this.view.exchangeCouponBtn.on('click', this.exchangeCoupon.bind(this));
this.view.couponCodeInput.on('input', this.changeExchangeBtnStatus.bind(this));
if (this.closeCouponRuleTipbyUser === 'Y') {
this.view.tipBox.addClass('hide');
}
}
/**
... ... @@ -135,6 +144,8 @@ class SelectCouponController extends Page {
tabChange(event) {
let itemClicked = $(event.currentTarget);
console.log(this.view.useNowBox);
if (itemClicked.hasClass('active')) {
itemClicked.removeClass('active');
} else {
... ... @@ -145,9 +156,23 @@ class SelectCouponController extends Page {
if (itemClicked.hasClass('valid')) {
this.view.unusableCouponList.addClass('hide');
this.view.usableCouponList.removeClass('hide');
this.view.exchangeBox.removeClass('hide');
this.view.useNowBox.removeClass('hide');
} else {
this.view.usableCouponList.addClass('hide');
this.view.unusableCouponList.removeClass('hide');
this.view.exchangeBox.addClass('hide');
this.view.useNowBox.addClass('hide');
}
if (this.closeCouponRuleTipbyUser === 'Y') {
this.view.tipBox.addClass('hide');
} else {
if (itemClicked.data('num') === 0) {
this.view.tipBox.addClass('hide');
} else {
this.view.tipBox.removeClass('hide');
}
}
}
... ... @@ -176,6 +201,8 @@ class SelectCouponController extends Page {
* 关闭提示框
*/
closeTip() {
this.closeCouponRuleTipbyUser = 'Y';
cookie.set('close_coupon_rule_tip_by_user', 'Y', cookieOption);
this.view.tipBox.hide();
}
}
... ...
... ... @@ -890,3 +890,9 @@
}
}
}
.conpon-diaalog-wrapper {
> .dialog-box > .dialog-content {
padding-top: 0;
}
}
... ...
... ... @@ -54,7 +54,7 @@ body {
background-color: #fff;
input {
width: 580px;
width: 570px;
height: 60px;
margin-right: 12px;
padding: 0 20px;
... ... @@ -64,7 +64,7 @@ body {
}
.exchange-coupon-btn {
width: 110px;
width: 120px;
height: 60px;
border-radius: 4px;
font-size: 28px;
... ...
... ... @@ -78,7 +78,7 @@ body {
background-color: #fff;
input {
width: 580px;
width: 570px;
height: 60px;
margin-right: 12px;
padding: 0 20px;
... ... @@ -88,7 +88,7 @@ body {
}
.exchange-coupon-btn {
width: 110px;
width: 120px;
height: 60px;
border-radius: 4px;
font-size: 28px;
... ... @@ -172,6 +172,9 @@ body {
font-size: 22px;
color: #b0b0b0;
position: relative;
display: flex;
flex-direction: column;
align-content: space-between;
.type-shop {
color: #efaf46;
... ... @@ -186,12 +189,13 @@ body {
}
.title {
width: 400px;
font-size: 24px;
color: #444;
margin-bottom: 40px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.time {
... ...
... ... @@ -357,7 +357,7 @@ function handleCoupons(params) {
}
if (validCouponCount && couponData.coupon_count) {
showText = `可用${validCouponCount} 已推荐${couponData.coupon_count}张`;
showText = `${validCouponCount}张可用 已推荐${couponData.coupon_count}张`;
priceText = `-${couponData.coupon_amount_str}`;
}
... ... @@ -387,10 +387,13 @@ const couponProcess = conponData => {
let headMsg = _.replace(_.get(conponData, 'usable_coupon_catalogs.head_msg', []), '\n', '<br>');
let usableCouponNumStr = '';
let unusableCouponNumStr = '';
let noShowTips = false;
_.forEach(unusableCouponsList, listItem => {
if (listItem.coupons) {
if (listItem.coupons && listItem.coupons.length) {
unusableCouponNum += listItem.coupons.length;
} else {
listItem.name = '';
}
});
... ... @@ -406,13 +409,18 @@ const couponProcess = conponData => {
unusableCouponNumStr = unusableCouponNum + '';
}
if (!usableCouponNum) {
noShowTips = true;
}
return {
usableCouponNumStr,
unusableCouponNumStr,
usableCouponsList,
unusableCouponsList,
couponPay,
headMsg
headMsg,
noShowTips
};
};
... ...