fe / yohobuy-node · Commits

Go to a project

Authored by 陈峰
Commit db328f215514ab50fb9b34db551c130918989bb2 2 parents d17bffc8 f602a609

Merge branch 'feature/coupons' into 'gray' 

Feature/coupons

优惠券叠加使用

See merge request !258
Inline Side-by-side
Showing 31 changed files with 1253 additions and 696 deletions
... ... @@ -47,7 +47,7 @@ const index = (req, res, next) => {
// 获取优惠券列表
const getCoupons = (req, res, next) => {
req.ctx(oeModel).getCoupons(req.user.uid).then(data => {
req.ctx(oeModel).getCoupons(req.user.uid, req.query).then(data => {
res.send(data);
}).catch(next);
};
... ...
... ... @@ -31,7 +31,7 @@ module.exports = class extends global.yoho.BaseModel {
*/
getOrderPaymentAsync(uid, cartType, yohoCoinMode) {
let options = {
method: 'app.Shopping.payment',
method: 'app.Shopping.enhancedPayment',
cart_type: cartType,
yoho_coin_mode: yohoCoinMode,
uid: uid
... ... @@ -44,11 +44,12 @@ module.exports = class extends global.yoho.BaseModel {
* 获取用户优惠券信息API
* @param uid [number] uid
*/
getUesrCouponAsync(uid) {
getUesrCouponAsync(uid, code, deliveryWay) {
let options = {
method: 'app.Shopping.listCoupon',
method: 'app.Shopping.selectCoupon',
uid: uid,
is_group_frees: 'Y'
coupon_code: code,
delivery_way: deliveryWay
};
return this.get({data: options});
... ... @@ -61,7 +62,7 @@ module.exports = class extends global.yoho.BaseModel {
*/
getCouponByCodeAsync(uid, code) {
let options = {
method: 'app.Shopping.useCoupon',
method: 'app.coupons.bindPCoupon',
uid: uid,
coupon_code: code
};
... ...
... ... @@ -87,8 +87,7 @@ module.exports = class extends global.yoho.BaseModel {
g.sales_price = g.sales_price && Number(g.sales_price).toFixed(2) || '';
// link to goods
g.linkToGoods = helper.urlFormat(`/product/pro_${g.product_id}_${g.goods_id}/${g.cn_alphabet}.html`,
'', 'item');
g.linkToGoods = helper.urlFormat(`/product/${g.product_skn}.html`);
g.productPrice = g.sales_price;
g.isVipPrice = g.discount_tag === 'V';
g.isStuPrice = g.discount_tag === 'S';
... ... @@ -110,7 +109,9 @@ module.exports = class extends global.yoho.BaseModel {
deliveryWay: d.delivery_way,
shoppingCartData: Object.assign(d.shopping_cart_data, this.handleUseYohoCoin(d), {
redEnvelopes: d.red_envelopes,
useRedEnvelopes: d.use_red_envelopes
useRedEnvelopes: d.use_red_envelopes,
couponCount: parseInt(`0${_.get(d, 'coupon_pay.coupon_count', 0)}`, 10),
couponCode: _.get(d, 'coupon_pay.coupon_code', ''),
}),
invoices: d.invoices
});
... ...
... ... @@ -50,12 +50,15 @@ module.exports = class extends global.yoho.BaseModel {
}
// 获取优惠券列表
getCoupons(uid) {
return new EnsureApi(this.ctx).getUesrCouponAsync(uid).then(result => {
if (_.isEmpty(_.get(result, 'data.usable_coupons', [])) &&
_.isEmpty(_.get(result, 'data.usable_frees_coupons', []))) {
_.set(result, 'data.emptyUsable', true);
getCoupons(uid, params) {
let code = [...new Set(_.compact(_.split(params.code, ',')))].join(',');
return new EnsureApi(this.ctx).getUesrCouponAsync(uid, code, params.deliveryWay).then(result => {
if (result.code === 200) {
_.set(result, 'data.usedCouponCode',
_.get(result, 'data.usable_coupon_catalogs.list[0].coupon_pay.coupon_code', code));
}
return result;
});
}
... ... @@ -67,6 +70,10 @@ module.exports = class extends global.yoho.BaseModel {
// 订单计算
compute(uid, cartType, pa) {
if (pa.couponCode) {
pa.couponCode = [...new Set(_.compact(_.split(pa.couponCode,',')))].join(',');
}
return new EnsureApi(this.ctx).getOrderComputeAsync(
uid, cartType, pa.paymentType, pa.deliveryWay, pa
).then(result => {
... ... @@ -125,6 +132,10 @@ module.exports = class extends global.yoho.BaseModel {
// 订单提交
submit(uid, cartType, p, remoteIp) {
if (p.couponCode) {
p.couponCode = [...new Set(_.compact(_.split(p.couponCode,',')))].join(',');
}
return new EnsureApi(this.ctx).orderSubmitAsync(uid, cartType, p.addressId, p.deliveryTime,
p.deliveryWay, p.paymentType, p.paymentId, p.printPrice, p, remoteIp).then(result => {
if (result.code === 200) {
... ...
... ... @@ -193,26 +193,29 @@
<div class="extra-wrap">
<dl>
{{#unless ../notUseCoupon}}
<dt id="use-coupons" class="use-coupons">
<dt id="use-coupons" class="use-coupons" data-used="{{couponCode}}">
<span class="locker-switch"></span>使用优惠券／优惠码
<span class="used-num fw300">{{#if couponCount}}已推荐{{couponCount}}张{{/if}}</span>
<div class="tip-box right">
<p class="hide">优惠码不可与优惠券同时使用</p>
<p class="coupon-err-tip"></p>
</div>
</dt>
<dd>
<dd class="coupon-choose-box">
<div class="coupon-opt-title">
<ul class="coupon-tab clearfix">
<li class="tab-item usable active">可用<span></span></li>
<li class="tab-item unusable">不可用<span></span></li>
</ul>
<div class="use-code">
<span class="code-use-tip red"></span>
<input type="text" class="coupon-code" placeholder="输入优惠码">
<label class="sure-convert fw300">兑换</label>
</div>
<span class="ticket-use-tip hide">
已成功使用<em class="red num">1</em>张优惠券，<em class="red price"></em>
<b class="cancel-use-ticket">取消使用</b>
</span>
<p class="tip-box red right"></p>
</div>
<div class="coupon-list-wrap"></div>
<div class="coupon-list-wrap">
<div class="usable-wrap"></div>
<div class="unusable-wrap hide"></div>
</div>
</dd>
{{/unless}}
... ...
'use strict';
let couponsModel = require('../models/coupons-model');
let couponsModel = require('../models/coupon-service');
const index = (req, res, next)=>{
let uid = req.user.uid;
req.ctx(couponsModel).couponsData(uid, req.query).then(result => {
req.ctx(couponsModel).getCouponData(uid, req.query).then(result => {
res.render('coupons', result);
}).catch(next);
};
... ...
module.exports = class extends global.yoho.BaseModel {
constructor(ctx) {
super(ctx);
}
getCouponList(uid, type, page, extra) {
extra = extra || {};
let reqData = {
method: 'app.coupons.get',
uid: uid,
type: type || 'notuse',
page: page || 1,
limit: extra.limit || 10
};
if (extra.filter) {
reqData.filter = extra.filter;
}
return this.get({data: reqData});
}
getCouponNum(uid) {
return this.get({data: {
method: 'app.coupons.getCouponNums',
uid: uid
}});
}
};
... ...
const _ = require('lodash');
const CouponApi = require('./coupon-api');
const helpers = global.yoho.helpers;
const setPager = require(`${global.utils}/pager`).setPager;
const handleFilterUrl = require(`${global.utils}/parameter`).fullParamToMinPath;
const COUPON_BASE_URI = '/home/coupons';
const COUPON_TYPE = {
UNUSED: 'notuse',
USED: 'use',
INVALID: 'overtime'
};
module.exports = class extends global.yoho.BaseModel {
constructor(ctx) {
super(ctx);
}
_setShowNum(num) {
num = num > 0 ? num : 0;
num = num > 99 ? '99+' : num;
return num ? `（${num}）` : '';
}
_setCouponTabs(nums, type) {
nums = nums || {};
return [
{
active: type === COUPON_TYPE.UNUSED,
url: helpers.urlFormat(COUPON_BASE_URI),
name: `可用${this._setShowNum(nums[COUPON_TYPE.UNUSED])}`
},
{
active: type === COUPON_TYPE.USED,
url: helpers.urlFormat(COUPON_BASE_URI, {type: COUPON_TYPE.USED}),
name: `已使用${this._setShowNum(nums[COUPON_TYPE.USED])}`
},
{
active: type === COUPON_TYPE.INVALID,
url: helpers.urlFormat(COUPON_BASE_URI, {type: COUPON_TYPE.INVALID}),
name: `已失效${this._setShowNum(nums[COUPON_TYPE.INVALID])}`
}
];
}
getCouponData(uid, params) {
params = params || {};
const page = parseInt(`0${params.page}`, 10) || 1;
const type = params.type || COUPON_TYPE.UNUSED;
const couponApiCase = new CouponApi(this.ctx);
let resData = {};
return Promise.all([
couponApiCase.getCouponList(uid, params.type, page, params),
couponApiCase.getCouponNum(uid)
]).then(result => {
Object.assign(resData, _.get(result, '[0].data', {}));
if (resData.couponList && resData.couponList.length) {
_.forEach(resData.couponList, value => {
if (type === COUPON_TYPE.USED) {
value.isUsed = true;
} else if (type === COUPON_TYPE.INVALID) {
if (value.is_overtime === 'Y') {
value.isOvertime = true;
} else {
value.isUseless = true;
}
} else {
value.toUse = helpers.urlFormat(handleFilterUrl('/list', {
cpc_id: value.coupon_id,
coupon_code: value.coupon_code,
phrase: `以下商品可使用【${value.coupon_name}】优惠券`
}));
}
});
} else {
resData.couponList = false;
}
resData.tabs = this._setCouponTabs(_.get(result, '[1].data', {}), type);
if (_.get(resData, 'tabs[0].active') && resData.filters) {
const filterUrl = helpers.urlFormat(COUPON_BASE_URI,
Object.assign({}, params, {filter: '__filter__', page: 1}));
let filter = params.filter || 0;
_.forEach(resData.filters, value => {
if ((+filter === +value.filter_id)) {
value.active = true;
value.url = 'javascript:;'; // eslint-disable-line
} else {
value.url = filterUrl.replace('__filter__', value.filter_id);
}
});
} else {
resData.filters = false;
}
let total = _.get(resData, 'total', 0);
let pageTotal = _.get(resData, 'pageNum') || 1;
if (resData.couponList && resData.couponList.length) {
resData.pager = Object.assign({
count: total,
curPage: page,
totalPages: pageTotal
}, setPager(pageTotal, params));
}
return resData;
});
}
};
... ...
'use strict';
const Promise = require('bluebird');
const co = Promise.coroutine;
const UserData = require('./user-data');
const helpers = global.yoho.helpers;
const path = require('path');
const _ = require('lodash');
const moment = require('moment');
// 使用 product中的分页逻辑
const pagerPath = path.join(global.appRoot, '/apps/product/models/public-handler.js');
const pager = require(pagerPath).handlePagerData;
const UNUSED = 'notuse';
const USED = 'use';
const INVALID = 'overtime';
module.exports = class extends global.yoho.BaseModel {
constructor(ctx) {
super(ctx);
}
getCouponsList(uid, type, page, limit) {
let userDataModel = new UserData(this.ctx);
return co(function*() {
let couponsInfo = yield userDataModel.getCouponsList(uid, type, page, limit);
let result = [],
coupons = _.get(couponsInfo, 'data.couponList');
if (!coupons) {
return {
list: result
};
}
if (coupons) {
coupons.forEach(function(item, i) {
result[i] = {};
result[i].id = item.couponId;
result[i].code = item.couponCode;
result[i].couponType = Number(item.couponType);
// 格式化有效日期 "couponValidity": "2016.03.15-2016.03.31"
let dates = item.couponValidity.split('-'),
extra = ['秒杀', '限定', '境外', '预售'],
limits = _.get(item, 'shopPriceLimits', '');
result[i].beginTime = dates[0];
result[i].endTime = dates[1];
if (!item.couponImageUrl) {
result[i].img = '//static.yohobuy.com/images/v2/activity/default_coupon.jpg';
} else {
result[i].img = item.couponImageUrl;
}
result[i].value = item.couponValue;
result[i].validity = item.couponValidity;
result[i].useRemark = item.couponDetailInfomation;
if (limits.indexOf('1') >= 0) {
extra.push('3折以下');
}
if (limits.indexOf('2') >= 0) {
extra.push('限量');
}
result[i].notes = item.notes;
result[i].proListUrl = helpers.urlFormat('', {cpc_id: item.couponId, coupon_code: item.couponCode,
phrase: encodeURIComponent('以下商品可使用 【' + item.couponDetailInfomation + '】优惠券')}, 'list');
result[i].rule = item.rule4ShortName || '';
result[i].overState = item.overState || '';
if (type === USED) {
result[i].orderNum = _.get(item, 'orderCode', '');
result[i].orderDetailUrl = helpers.urlFormat('/home/orders/detail',
{orderCode: item.orderCode || ''});
result[i].orderSum = _.get(item, 'orderPrice', 0).toFixed(2);
result[i].payment = _.get(item, 'actuallyPaid', 0).toFixed(2);
let date = item.usedTime ? moment(item.usedTime).format('YYYY-MM-DD H:m') : 0;
if (date) {
result[i].useTime = date;
} else {
result[i].useTime = '';
}
} else {
result[i].status = item.isValidity ? '可使用' : '已过期';
}
if (item.couponType) {
result[i].type = item.couponType;
}
});
}
let pageNum = pager(couponsInfo.data.total, {
page: page,
limit: limit,
type: type
});
return {
list: result,
pager: Object.assign({
count: couponsInfo.data.total || 0,
curPage: page,
totalPages: couponsInfo.data.totalPageNum
}, pageNum)
};
})();
}
couponsData(uid, params) {
let type = params.type || UNUSED;
let page = params.page || 1;
let limit = params.limit || 10;
let _this = this;
return co(function*() {
let coupons = yield _this.getCouponsList(uid, type, page, limit);
let data = {};
if (type === UNUSED) {
data.unUseCoupons = !coupons.list.length ? {empty: '您没有优惠券'} : coupons.list;
data.unUse = true;
} else if (type === USED) {
data.usedCoupons = !coupons.list.length ? {empty: '您没有优惠券'} : coupons.list;
data.used = true;
} else if (type === INVALID) {
data.noValidCoupons = !coupons.list.length ? {empty: '您没有优惠券'} : coupons.list;
data.noValid = true;
}
data.tabs = [
{
active: type === UNUSED ? true : false,
url: helpers.urlFormat('/home/coupons', {type: UNUSED}),
name: '未使用优惠券'
},
{
active: type === USED ? true : false,
url: helpers.urlFormat('/home/coupons', {type: USED}),
name: '已使用优惠券'
},
{
active: type === INVALID ? true : false,
url: helpers.urlFormat('/home/coupons', {type: INVALID}),
name: '已失效优惠券'
}
];
data.pager = coupons.pager;
return data;
})();
}
};
... ... @@ -39,20 +39,4 @@ module.exports = class extends global.yoho.BaseModel {
return this.get({data: Object.assign(options, params)});
}
getCouponsList(uid, type, page, limit) {
page = page || 1;
type = type || 'notuse';
limit = limit || 10;
let options = {
method: 'app.coupons.lists',
uid: uid,
type: type,
page: page,
limit: limit
};
return this.get({data: options});
}
};
... ...
<div class="me-coupons-page me-page yoho-page clearfix">
{{> path}}
{{> navigation}}
<div class="me-main">
<div class="coupons{{#if unUse}} un-use-coupons{{/if}}{{#if used}} used-coupons{{/if}}{{#if noValid}} no-valid-coupons{{/if}} block">
<h2 class="title">优惠券</h2>
{{> path}}
{{> navigation}}
<div class="me-main">
<div class="coupons {{#if unUse}} un-use-coupons{{/if}}{{#if used}} used-coupons{{/if}}{{#if noValid}} no-valid-coupons{{/if}} block">
<h2 class="title">优惠券</h2>
{{> tabs}}
<div class="coupons-wrap">
<p class="coupons-header clearfix">
<span class="coupons-name">优惠券名称</span>
<span class="coupons-info">详细说明</span>
{{#if unUse}}
<span class="coupons-opt">操作</span>
{{/if}}
{{#if used}}
<span class="coupons-opt">订单号</span>
{{/if}}
{{#if noValid}}
<span class="coupons-opt">状态</span>
{{/if}}
</p>
<div class="coupon-tabs">
<div class="tab-wrap">
{{> tabs}}
{{# unUseCoupons}}
{{#unless empty}}
<div class="coupon" data-couponId="{{id}}">
<div class="coupons-card{{#isEqual couponType 5}} coupons-freight{{/isEqual}}">
<div class="coupons-card-header">
<p class="left-title">{{useRemark}}</p>
</div>
<div class="coupons-card-content">
<div class="coupons-card-row">
<div class="coupons-sht">
<p class="coupons-price">{{value}}</p>
{{#if rule}}
<p class="coupons-full" title="{{rule}}">{{rule}}</p>
{{/if}}
</div>
<div class="coupons-dtl">
<p>{{beginTime}} - {{endTime}}</p>
{{#if overState}}
<p class="red">({{overState}})</p>
{{/if}}
</div>
</div>
</div>
</div>
<div class="coupons-info">
<div class="coupons-text">
{{notes}}
</div>
</div>
<div class="coupons-opt">
<a class="btn use-btn" id="coupon-use" href="{{proListUrl}}" target="_black">立即使用</a>
</div>
</div>
{{/unless}}
{{/ unUseCoupons}}
{{# usedCoupons}}
{{#unless empty}}
<div class="coupon" data-couponId="{{id}}">
<div class="coupons-card coupons-use{{#isEqual couponType 5}} coupons-freight{{/isEqual}}">
<div class="coupons-card-header">
<p class="left-title">{{useRemark}}</p>
</div>
<div class="coupons-card-content">
<div class="coupons-card-row">
<div class="coupons-sht">
<p class="coupons-price">{{value}}</p>
{{#if rule}}
<p class="coupons-full" title="{{rule}}">{{rule}}</p>
{{/if}}
</div>
<div class="coupons-dtl">{{beginTime}} - {{endTime}}</div>
</div>
</div>
</div>
<div class="coupons-info">
<div class="coupons-text">
{{#categorys}}<p>限品类：{{.}}</p>{{/categorys}}
{{#brands}}<p>限品牌：{{.}}</p>{{/brands}}
{{#if isNoLimit}}<p>全场通用</p>{{/if}}
<p>特例商品（{{extraPro}}等特例商品）暂不支持使用优惠券。</p>
{{#explains}}<p>说明：{{.}}</p>{{/explains}}
</div>
</div>
<div class="coupons-opt">
<a href="{{orderDetailUrl}}">
<p>{{orderNum}}</p>
<p>{{useTime}}</p>
</a>
</div>
</div>
{{/unless}}
{{/ usedCoupons}}
{{# noValidCoupons}}
{{#unless empty}}
<div class="coupon" data-couponId="{{id}}">
<div class="coupons-card coupons-invalid">
<div class="coupons-card-header">
<p class="left-title">{{useRemark}}</p>
</div>
<div class="coupons-card-content">
<div class="coupons-card-row">
<div class="coupons-sht">
<p class="coupons-price">{{value}}</p>
{{#if rule}}
<p class="coupons-full" title="{{rule}}">{{rule}}</p>
{{/if}}
</div>
<div class="coupons-dtl">{{beginTime}} - {{endTime}}</div>
</div>
</div>
</div>
<div class="coupons-info">
<div class="coupons-text">
{{#categorys}}<p>限品类：{{.}}</p>{{/categorys}}
{{#brands}}<p>限品牌：{{.}}</p>{{/brands}}
{{#if isNoLimit}}<p>全场通用</p>{{/if}}
<p>特例商品（{{extraPro}}等特例商品）暂不支持使用优惠券。</p>
{{#explains}}<p>说明：{{.}}</p>{{/explains}}
</div>
</div>
<div class="coupons-opt">
<a class="btn overtime-btn">过期</a>
</div>
</div>
{{/unless}}
{{/ noValidCoupons}}
<button class="code-sure-btn right">兑换</button>
<input type="text" class="code-input right" placeholder="请输入优惠券码">
</div>
{{#if filters}}
<div class="type-wrap">
{{# filters}}
<a href="{{url}}" class="type-item{{#if active}} active{{/if}}">{{filter_name}}</a>
{{/ filters}}
</div>
{{#if unUseCoupons}}
{{#unless unUseCoupons.empty}}
{{> pager}}
{{^}}
{{#with unUseCoupons}}
{{> empty}}
{{/with}}
{{/unless}}
{{/if}}
{{#if usedCoupons}}
{{#unless usedCoupons.empty}}
{{> pager}}
{{^}}
{{#with usedCoupons}}
{{> empty}}
{{/with}}
{{/unless}}
{{/if}}
</div>
<div class="coupons-wrap clearfix">
{{# couponList}}
<div class="coupon-item coupon-item-{{catalog}}{{#if isUsed}} used{{/if}}{{#if isOvertime}} over-time{{/if}}{{#if isUseless}} useless{{/if}}">
{{#isY is_overdue_soon}}
<div class="due-tig"></div>
{{/isY}}
<div class="worth">
{{#isEqual catalog 300}}
<p><span class="freight">{{../coupon_value_str}}</span></p>
{{^}}
<p><span class="price">{{../coupon_value_str}}</span>
{{#if ../use_rule}}<br><span class="conditions">{{../use_rule}}</span>{{/if}}
</p>
{{/isEqual}}
</div>
<div class="coupon-info">
<p class="name"><span class="type type-{{catalog}}">[{{catalog_name}}]</span>{{coupon_name}}</p>
<p class="time">{{coupon_validity}}</p>
{{#if notes}}
<label class="explain">
使用说明<i class="iconfont explain-icon">&#xe60c;</i>
<p class="explain-wrap">
{{# notes}}
{{{.}}}<br>
{{/ notes}}
</p>
</label>
{{/if}}
</div>
{{# toUse}}
<a href="{{.}}" class="use-now-btn" target="_blank">立即使用</a>
{{/ toUse}}
</div>
{{/ couponList}}
{{#if noValidCoupons}}
{{#unless noValidCoupons.empty}}
{{> pager}}
{{^}}
{{#with noValidCoupons}}
{{> empty}}
{{/with}}
{{/unless}}
{{/if}}
{{#unless couponList}}
<p class="empty-tip">暂无优惠券</p>
{{/unless}}
</div>
{{> pager}}
</div>
</div>
</div>
... ...
<div class="list-content">
{{# unusableCoupon}}
<div class="clearfix">
<p class="unusable-title">{{name}}</p>
{{# coupons}}
<div class="coupon-item coupon-item-{{catalog}}">
{{#if is_overdue_soon}}
<div class="due-tig"></div>
{{/if}}
<div class="worth">
<p>
{{#if isFreight}}
<span class="freight">{{coupon_value_str}}</span>
{{^}}
<span class="price">{{coupon_value_str}}</span>
{{#if use_rule}}<br><span class="conditions">{{use_rule}}</span>{{/if}}
{{/if}}
</p>
</div>
<div class="coupon-info">
<p class="name"><span class="type type-s">[{{catalog_name}}]</span> {{coupon_name}}</p>
<p class="time">{{coupon_validity}}</p>
<p class="desc">{{desc}}</p>
</div>
</div>
{{/ coupons}}
</div>
{{/ unusableCoupon}}
{{#unless unusableNum}}
<p class="empty"><span>暂无优惠券</span></p>
{{/unless}}
</div>
... ...
<div class="head-msg fw300">{{{headMsg}}}</div>
<div class="list-content">
{{#each usableCoupon}}
<div class="list-{{@key}} type-content clearfix">
{{#each this}}
{{#if show}}
{{#if is_selected_support}}
<div class="coupon-item coupon-item-{{catalog}}{{#if selected}} active{{/if}}" data-code="{{coupon_code}}">
{{^}}
<div class="coupon-item coupon-item-{{catalog}} mutex">
{{/if}}
{{#if is_overdue_soon}}
<div class="due-tig"></div>
{{/if}}
<div class="worth">
<p>
{{#if isFreight}}
<span class="freight">{{coupon_value_str}}</span>
{{^}}
<span class="price">{{coupon_value_str}}</span>
{{#if use_rule}}<br><span class="conditions">{{use_rule}}</span>{{/if}}
{{/if}}
</p>
</div>
<div class="coupon-info">
<p class="name"><span class="type">[{{catalog_name}}]</span> {{coupon_name}}</p>
<p class="time">{{coupon_validity}}</p>
{{#if desc}}
<p class="mutex-tip">{{desc}}</p>
{{/if}}
</div>
{{#if selected}}
<span class="iconfont check-icon coupon-check-btn">&#xe622;</span>
{{^}}
{{#if is_selected_support}}
<span class="iconfont coupon-check-btn">&#xe6c3;</span>
{{^}}
<span class="iconfont disable-icon coupon-check-btn">&#xe6f2;</span>
{{/if}}
{{/if}}
</div>
{{/if}}
{{/each}}
</div>
{{/each}}
{{#unless usableNum}}
<p class="empty"><span>暂无优惠券</span></p>
{{/unless}}
</div>
... ...
... ... @@ -31,7 +31,10 @@ var address = require('./order/address'),
invoice = require('./order/invoice'),
esaypayInfo = require('./order/easypay');
var couponUsableTpl = require('hbs/cart/ensure-coupon-usable.hbs');
var couponUnusableTpl = require('hbs/cart/ensure-coupon-unusable.hbs');
var giftCardTpl = require('hbs/cart/ensure-gift-card-list.hbs');
var coinTpl = Hbs.compile($('#yoho-coin-tpl').html());
var promotionTpl = Hbs.compile($('#promotion-list-tpl').html());
... ... @@ -336,6 +339,10 @@ deliveryWay = {
}
});
this.eventBind();
if (!order.deliveryWay) {
this.$deliveryType.eq(0).trigger('click');
}
},
eventBind: function() {
var that = this;
... ... @@ -354,12 +361,11 @@ deliveryWay = {
// 更新订单配送方式数据
that.updateOrder({way: id});
// 更新优惠券列表
coupon.getList();
// 重新计算订单价格
compute(0, function(data) {
if (data.code === 200 && coupon && coupon.$ticketUseTip) {
coupon.$ticketUseTip.find('.price').text('- ¥' + data.data.coupon_amount.toFixed(2));
}
});
compute(0);
});
this.$deliveryTime.click(function() {
... ... @@ -497,38 +503,95 @@ multiPackage = {
coupon = {
$el: $('#use-coupons'),
init: function() {
var code;
if (!this.$el.length) {
this.unsupport = true;
return;
}
code = this.$el.data('used');
code && (order.couponCode = code);
this.$couponWrap = this.$el.next();
this.$errorTip = $('.coupon-err-tip', this.$el);
this.$ticketUseTip = $('.ticket-use-tip', this.$couponWrap);
this.$usedNum = $('.used-num', this.$el);
this.$couponCode = $('.coupon-code', this.$couponWrap);
this.$couponList = $('.coupon-list-wrap', this.$couponWrap);
this.couponsTpl = Hbs.compile($('#coupons-tpl').html());
this.$couponCodeUse = $('.sure-convert', this.$couponWrap);
this.$couponUsableWrap = $('.usable-wrap', this.$couponWrap);
this.$couponUnusableWrap = $('.unusable-wrap', this.$couponWrap);
this.getList();
this.eventBind();
},
getList: function(choose) {
getList: function(code) {
var that = this;
if (this.unsupport || !order.deliveryWay) {
return;
}
if (typeof code !== 'string') {
code = order.couponCode || '';
} else {
this.userChoosed = true;
}
$.ajax({
type: 'GET',
url: '/cart/ensure/coupons'
url: '/cart/ensure/coupons',
data: {
code: code,
deliveryWay: order.deliveryWay
}
}).then(function(data) {
if (data.code === 200) {
$('.coupon-list-wrap', that.$couponWrap).html(that.couponsTpl(that.selectUsedCoupon(data.data)));
var usedNum, usedText;
var unHtml, usHtml;
if (choose) { // 兑换券后默认使用该券
$('.coupon-radio', that.$couponWrap).each(function() {
$(this).data('id') === choose && $(this).trigger('click');
});
}
if (data.code !== 200) {
return;
}
data = that.handleCouponList(data.data);
that.setTabItemNum('unusable', data.unusableNum);
that.setTabItemNum('usable', data.usableNum);
// 更新券状态
usHtml = couponUsableTpl(data);
unHtml = couponUnusableTpl(data);
if (that.$couponUsableList) {
that.$couponUsableList.html($('<div' + usHtml + '</div>').find('.list-content').html());
that.$couponUnusableList.html($(unHtml).find('.list-content').html());
} else {
that.$couponUsableWrap.html(usHtml);
that.$couponUnusableWrap.html(unHtml);
that.$couponUsableList = $('.list-content', that.$couponUsableWrap);
that.$couponUnusableList = $('.list-content', that.$couponUnusableWrap);
}
usedText = `${data.usableNum}张可用`;
// 更新使用数量
usedNum = that.$couponWrap.find('.coupon-item.active').length;
if (that.userChoosed) {
usedText = usedNum ? `已选${usedNum}张` : usedText;
order.couponCode = data.usedCouponCode;
// 重新计算价格
compute(0);
} else {
usedText += usedNum ? ` 已推荐${usedNum}张` : '';
}
that.$usedNum.text(usedText);
// 还原券类型筛选
if (that.chooseType) {
$('.type-item.type-' + that.chooseType, this.$couponWrap).trigger('click');
}
});
},
... ... @@ -545,101 +608,173 @@ coupon = {
data: {code: code}
}).then(function(data) {
if (data.code === 200) {
that.getList(data.data.coupon_code);
new dialog.Alert('兑换成功').show();
that.getList(order.couponCode + ',' + data.data.coupon_code);
} else {
that.$errorTip.text(data.message || '兑换失败，请稍后再试');
that.showCodeUseTip(data.message || '兑换失败，请稍后再试');
}
});
},
selectUsedCoupon: function(data) {
var i;
setTabItemNum: function(name, num) {
var key = '$' + name + 'Num';
num = num > 0 ? num : 0;
if (!this[key]) {
this[key] = $('.tab-item.' + name + ' > span', this.$couponWrap);
}
if (num > 99) {
num = '（99+）';
} else if (num > 0) {
num = `（${num}）`;
} else {
num = '';
}
this[key].text(num);
},
showCodeUseTip: function(tip) {
tip = tip || '';
if (this.codeUseTip === tip) {
return;
}
if (!this.$codeUseTip) {
this.$codeUseTip = $('.code-use-tip', this.$couponWrap);
}
this.$codeUseTip.text(tip);
this.codeUseTip = tip;
},
handleCouponList: function(data) {
var unusableCoupon = [],
usableList = [];
var unusableNum = 0,
usableNum = 0;
var list, i, j, c, item;
if (data.unusable_coupon_catalogs && data.unusable_coupon_catalogs.list) {
list = data.unusable_coupon_catalogs.list || [];
for (i = 0; i < list.length; i++) {
c = list[i].coupons || [];
if (c && c.length) {
unusableNum += c.length;
for (j = 0; j < c.length; j++) {
$.extend(c[j], {
is_overdue_soon: c[j].is_overdue_soon === 'Y',
isFreight: +c[j].catalog === 300
});
}
unusableCoupon.push(list[i]);
}
}
}
this.usableCoupon = this.usableCoupon || {};
data.usable_coupon_catalogs = data.usable_coupon_catalogs || {};
if (data.usable_coupon_catalogs.list) {
list = data.usable_coupon_catalogs.list || [];
for (i = 0; i < list.length; i++) {
c = list[i].coupons || [];
if (c && c.length) {
usableNum += c.length;
for (j = 0; j < c.length; j++) {
item = c[j];
if (order.couponCode) {
data.usable_coupons = data.usable_coupons || [];
data.usable_frees_coupons = data.usable_frees_coupons || [];
$.extend(item, {
is_overdue_soon: item.is_overdue_soon === 'Y',
is_selected_support: item.is_selected_support === 'Y',
selected: item.selected === 'Y',
isFreight: +item.catalog === 300
});
for (i = 0; i < data.usable_coupons.length; i++) {
if (order.couponCode.indexOf(data.usable_coupons[i].coupon_code) > -1) {
data.usable_coupons[i].using = true;
if (!this.usableCoupon[item.catalog]) {
this.usableCoupon[item.catalog] = {};
}
this.usableCoupon[item.catalog][item.coupon_code] = item;
usableList.push(item.coupon_code);
}
}
}
}
for (i = 0; i < data.usable_frees_coupons.length; i++) {
if (order.couponCode.indexOf(data.usable_frees_coupons[i].coupon_code) > -1) {
data.usable_frees_coupons[i].using = true;
for (i in this.usableCoupon) {
if (!this.usableCoupon.hasOwnProperty(i)) {
continue;
}
for (j in this.usableCoupon[i]) {
if (this.usableCoupon[i].hasOwnProperty(j)) {
this.usableCoupon[i][j].show = usableList.indexOf(j) >= 0;
}
}
}
return data;
return {
usedCouponCode: data.usedCouponCode,
unusableCoupon: unusableCoupon,
usableCoupon: this.usableCoupon,
headMsg: data.usable_coupon_catalogs.head_msg || '',
unusableNum: unusableNum,
usableNum: usableNum
};
},
eventBind: function() {
var that = this;
this.$couponWrap.on('click', '.cancel-use-ticket', function() {
that.cancelTicketUse();
}).on('change', '.coupon-code', function() {
that.$errorTip.empty();
}).on('click', '.sure-convert', function() {
that.useCode($(this).siblings('.coupon-code').val());
}).on('click', '.coupon-radio', function() {
var $this = $(this),
$par = $this.parent();
this.$couponWrap.on('click', '.tab-item', function() {
var $this = $(this);
if ($this.hasClass('on')) {
if ($this.hasClass('active')) {
return;
}
$par.siblings('.red').removeClass('red').children('.coupon-radio').removeClass('on');
$this.addClass('on');
$par.addClass('red');
$this.siblings('.active').removeClass('active');
$this.addClass('active');
// 改变优惠券使用搭配，重新计算订单价格
that.changeTicketsUse();
});
},
changeTicketsUse: function() {
var that = this;
var coupons = [];
this.$couponWrap.find('.coupon-radio.on').each(function() {
var data = $(this).data();
if (data) {
coupons.push(data.id);
if ($this.hasClass('usable')) {
that.$couponUsableWrap.removeClass('hide');
that.$couponUnusableWrap.addClass('hide');
} else {
that.$couponUsableWrap.addClass('hide');
that.$couponUnusableWrap.removeClass('hide');
}
});
}).on('keyup', '.coupon-code', function() {
var val = $.trim($(this).val());
if (coupons.length) {
this.$ticketUseTip.find('.num').text(coupons.length);
order.couponCode = coupons.join(',');
if (val) {
that.$couponCodeUse.addClass('sure-convert-btn');
} else {
that.$couponCodeUse.removeClass('sure-convert-btn');
}
// 重新计算订单价格
compute(0, function(data) {
if (data.code === 200) {
that.$ticketUseTip.find('.price').text('- ¥' + data.data.coupon_amount.toFixed(2));
that.$ticketUseTip.removeClass('hide');
}
});
}
},
cancelTicketUse: function() {
if (order.couponCode) {
this.$ticketUseTip.addClass('hide');
this.$couponWrap.find('li.red').removeClass('red').find('.on').removeClass('on');
that.showCodeUseTip();
}).on('click', '.sure-convert-btn', function() {
that.useCode(that.$couponCode.val());
}).on('click', '.usable-wrap .coupon-item', function() {
var $this = $(this),
code = $this.data('code');
var useCode = order.couponCode || '';
delete order.couponCode;
compute(); // 重新计算订单价格
}
},
cancelCodeUse: function() {
this.$errorTip.empty();
this.$couponCode.val('');
if ($this.hasClass('mutex') || !code) {
return;
}
if (order.couponCode) {
delete order.couponCode;
compute(); // 重新计算订单价格
}
if ($this.hasClass('active')) {
that.getList(useCode.replace(code, ''));
} else {
that.getList(useCode + ',' + code);
}
});
},
close: function() {
this.$el.children('.locker-switch').trigger('click');
... ...
var $ = require('yoho-jquery');
var yas = require('../common/data-yas');
var yas = require('../common/data-yas'),
dialog = require('../common/dialog');
var $couponUse = $('#coupon-use');
var $couponCodeUse = $('.code-sure-btn'),
$codeInput = $('.code-input');
require('../common');
$couponUse.on('click', function() {
var couponid = $couponUse.parents('.coupon').data('couponid');
$('.use-now-btn').click(function() {
var couponid = $(this).data('couponid');
yas.yasEvent('YB_COUPON_IMMEDIATE_USE_C', {COUPON_ID: couponid});
if (couponid) {
yas.yasEvent('YB_COUPON_IMMEDIATE_USE_C', {COUPON_ID: couponid});
}
});
$codeInput.keyup(function() {
if ($.trim($(this).val())) {
$couponCodeUse.addClass('sure-convert-btn');
} else {
$couponCodeUse.removeClass('sure-convert-btn');
}
});
$couponCodeUse.click(function() {
var code = $.trim($codeInput.val());
if ($(this).hasClass('sure-convert-btn') && code) {
$.ajax({
type: 'GET',
url: '/cart/ensure/couponcode',
data: {code: code}
}).then(function(data) {
if (data.code === 200) {
new dialog.Dialog({
className: 'coupon-code-confirm',
content: '兑换成功',
btns: [
{
id: 'confirm-sure',
btnClass: ['confirm-sure'],
name: '确定',
cb: function() {
window.location.reload();
}
}
]
}).show();
} else {
new dialog.Alert(data.message || '兑换失败，请稍后再试').show();
}
});
}
});
... ...
... ... @@ -951,6 +951,17 @@
}
.use-coupons {
.used-num {
line-height: 16px;
font-size: 12px;
padding: 0 6px;
background: #ff575c;
color: #fff;
display: inline-block;
vertical-align: text-top;
margin-left: 6px;
}
.tip-box {
width: 60%;
color: $red;
... ... @@ -971,130 +982,376 @@
}
}
.coupon-choose-box {
border: 1px solid #e0e0e0;
}
.coupon-opt-title {
height: 50px;
line-height: 50px;
padding: 0 30px;
height: 40px;
line-height: 40px;
background-color: #f0f0f0;
.red {
color: $red;
}
.use-code {
.coupon-tab {
display: inline-block;
li {
min-width: 120px;
float: left;
color: #b0b0b0;
text-align: center;
cursor: pointer;
}
.active {
background: #fff;
color: #444;
font-weight: bold;
}
}
.use-code {
float: right;
margin-right: 20px;
font-size: 12px;
.code-use-tip {
margin-right: 8px;
}
> input {
width: 180px;
line-height: 24px;
border: 1px solid #e0e0e0;
padding: 0 10px;
margin-right: 18px;
font-size: 14px;
margin-right: 8px;
box-sizing: border-box;
}
.sure-convert {
color: #fff;
background-color: #000;
width: 60px;
background-color: #b0b0b0;
width: 40px;
height: 24px;
line-height: 24px;
text-align: center;
cursor: pointer;
display: inline-block;
}
.sure-convert-btn {
background-color: #444;
}
}
.ticket-use-tip {
margin-left: 20px;
.coupon-code::-webkit-input-placeholder {
color: #b0b0b0;
}
.num {
margin: 0 4px;
}
.coupon-code:-moz-placeholder {
color: #b0b0b0;
}
.red {
color: $red;
}
.coupon-code::-moz-placeholder {
color: #b0b0b0;
}
.cancel-use-ticket {
color: #1987cf;
margin-left: 20px;
cursor: pointer;
}
.coupon-code:-ms-input-placeholder {
color: #b0b0b0;
}
}
.coupon-list-wrap {
padding: 0 30px;
border: 1px solid #e8e8e8;
line-height: 18px;
padding-bottom: 10px;
padding: 20px;
position: relative;
.red {
color: $red;
.list-content {
width: 100%;
height: 450px;
padding-top: 20px;
padding-bottom: 5px;
font-weight: 400;
background: #f5f5f5;
border: 1px solid #e0e0e0;
box-sizing: border-box;
overflow-x: hidden;
position: relative;
}
.empty-tip {
line-height: 24px;
padding-top: 10px;
}
.empty {
width: 100%;
height: 100%;
text-align: center;
color: #b0b0b0;
position: relative;
li {
padding: 6px 0;
> span {
width: 100%;
position: absolute;
left: 0;
top: 36%;
}
> span:before {
content: "";
width: 104px;
height: 65px;
background: resolve(home/coupon-empty.png);
display: block;
margin: 0 auto 20px;
}
}
.usable-free-list {
border-top: 1px solid #e8e8e8;
margin-top: 10px;
.unusable-wrap .list-content {
height: 486px;
}
.unusable-list {
color: #999;
border-top: 1px solid #e8e8e8;
margin-top: 10px;
.head-msg {
line-height: 20px;
color: #fff;
background-color: #ff8085;
font-size: 13px;
padding: 8px 20px;
}
.useable-title,
.unuseable-title {
color: #444;
line-height: 30px;
margin-top: 6px;
.unusable-title {
padding-left: 20px;
line-height: 28px;
font-size: 13px;
color: #222;
}
.title {
width: 330px;
margin-right: 10px;
.coupon-item {
width: 354px;
height: 100px;
font-size: 12px;
display: inline-block;
vertical-align: middle;
margin-left: 20px;
margin-bottom: 14px;
border-radius: 4px;
background: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
user-select: none;
cursor: pointer;
box-sizing: border-box;
&:before {
content: "";
width: 8px;
height: 100%;
background: #222;
position: absolute;
left: 0;
}
&:after {
content: "";
width: 4px;
height: 100%;
background: resolve(home/coupon-hole.png);
position: absolute;
top: 0;
left: 6px;
}
.due-tig {
width: 42px;
height: 42px;
background: resolve(home/due-tig.png);
position: absolute;
top: 0;
right: 0;
z-index: 3;
}
.worth {
width: 100px;
line-height: 100px;
color: #fc5960;
border-right: 1px dashed #e0e0e0;
text-align: center;
position: absolute;
left: 8px;
> p {
width: 90%;
line-height: 1;
display: inline-block;
vertical-align: middle;
}
.price {
font-size: 36px;
font-weight: bold;
}
.conditions {
line-height: 1.5;
margin-top: 10px;
display: block;
}
.freight {
font-size: 24px;
font-weight: bold;
color: #444;
}
&:before,
&:after {
content: "";
width: 12px;
height: 12px;
position: absolute;
right: -7px;
background: url(/home/grey-round.png);
}
&:before {
top: -7px;
}
&:after {
bottom: -7px;
}
}
.coupon-info {
padding: 12px 10px;
margin-left: 108px;
color: #b0b0b0;
.name {
max-width: 90%;
height: 36px;
line-height: 1.4;
font-size: 12px;
color: #444;
overflow: hidden;
}
.type {
font-weight: bold;
margin-right: 4px;
}
.time {
margin-bottom: 16px;
}
.explain-wrap {
width: calc(100% - 119px);
height: 98px;
line-height: 1.4;
position: absolute;
top: 1px;
left: 118px;
color: #444;
background: #fff;
box-sizing: border-box;
padding-top: 20px;
padding-right: 20px;
border-radius: 6px;
z-index: 2;
word-break: break-all;
overflow: hidden;
display: none;
}
.explain:hover .explain-wrap {
display: block;
}
.mutex-tip {
width: 200px;
max-height: 30px;
line-height: 1.2;
position: absolute;
left: 118px;
bottom: 7px;
background: #fff;
color: #444 !important;
overflow: hidden;
word-break: break-all;
display: none;
}
}
&.mutex .mutex-tip {
display: block;
}
.coupon-check-btn {
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 18px;
color: #b0b0b0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -10px;
}
.disable-icon {
color: #e0e0e0 !important;
font-size: 20px;
}
.check-icon {
color: #444;
font-size: 20px;
}
}
.time {
width: 340px;
display: inline-block;
.coupon-item-100 {
$shopColor: #ffa72e;
&:before {
background: $shopColor;
}
.worth {
color: $shopColor;
}
.coupon-info .type {
color: $shopColor;
}
}
.money {
width: 170px;
display: inline-block;
.coupon-item-200 {
$activityColor: #fc5960;
&:before {
background: $activityColor;
}
.worth {
color: $activityColor;
}
.coupon-info .type {
color: $activityColor;
}
}
.coupon-radio {
display: inline-block;
width: 15px;
height: 15px;
margin-right: 6px;
background-image: url(/cart/radio-off.png);
vertical-align: middle;
position: relative;
top: -1px;
cursor: pointer;
.mutex {
&:before {
background: #b0b0b0;
}
&.on {
background-image: url(/cart/radio-check.png);
* {
color: #b0b0b0 !important;
}
.coupon-info .mutex-tip {
display: block;
}
}
}
... ...
... ... @@ -179,6 +179,11 @@
-moz-background-size: 100% 100%;
}
.user-img > img {
width: 100%;
height: 100%;
}
.user-name {
margin-top: 14px;
line-height: 25px;
... ...
... ... @@ -148,6 +148,7 @@
.me-main {
float: left;
width: 800px;
box-sizing: border-box;
}
.me-pager {
... ... @@ -189,6 +190,7 @@
&.cur {
background-color: #222;
color: #fff;
border-color: #222;
}
}
... ...
.me-coupons-page {
font-size: 12px;
color: #444;
.coupons > .title {
font-size: 14px;
font-weight: bold;
}
.coupons-wrap {
width: 776px;
border: 1px solid #e6e6e6;
margin: 0 auto 10px;
.coupons-header {
height: 25px;
padding: 0 20px;
line-height: 25px;
text-align: center;
border-bottom: 1px solid #e6e6e6;
background: #efefef;
.coupons:after {
content: "";
display: block;
}
span {
display: block;
float: left;
.coupon-tabs {
border-top: 1px solid #e0e0e0;
margin-top: 16px;
.tab-wrap {
height: 40px;
background-color: #f5f5f5;
overflow: hidden;
.code-input {
width: 220px;
height: 26px;
margin-top: 7px;
padding: 0 8px;
border: 1px solid #e0e0e0;
box-sizing: border-box;
}
.code-input::-webkit-input-placeholder {
color: #b0b0b0;
}
.code-input:-moz-placeholder {
color: #b0b0b0;
}
.code-input::-moz-placeholder {
color: #b0b0b0;
}
.code-input:-ms-input-placeholder {
color: #b0b0b0;
}
.code-sure-btn {
width: 40px;
height: 26px;
margin: 7px 15px 0 10px;
background: #b0b0b0;
color: #fff;
padding: 0;
border: 0;
outline: none;
}
span.coupons-name {
width: 241px;
.sure-convert-btn {
background: #444;
}
}
span.coupons-info {
width: 388px;
.tabs {
height: 100%;
line-height: 40px;
font-size: 14px;
display: inline-block;
margin: 0;
padding: 0;
background: none;
li {
min-width: 120px;
height: 100%;
padding: 0 10px;
box-sizing: border-box;
background: none;
a {
color: #b0b0b0;
}
}
.active {
background: #fff;
font-weight: bold;
.coupons-text {
color: #000;
padding: 0 25px;
text-align: left;
a {
color: #222;
}
}
}
.type-wrap {
padding: 10px 15px;
font-size: 0;
border-bottom: 1px solid #e0e0e0;
.type-item {
min-width: 90px;
height: 30px;
line-height: 28px;
font-size: 12px;
text-align: center;
padding: 0 10px;
margin-left: 40px;
box-sizing: border-box;
border: 1px solid #e0e0e0;
display: inline-block;
cursor: pointer;
}
span.coupons-opt {
width: 100px;
color: #000;
.type-item:first-child {
margin-left: 0;
}
.active {
color: #fff;
background: #444;
border-color: #444;
}
}
}
.coupons-wrap .coupon {
display: table;
border-bottom: 1px solid #e6e6e6;
width: 736px;
margin: 0 auto;
text-align: center;
color: #666;
padding: 15px 0;
.coupons-wrap {
min-height: 100px;
margin: 17px 15px;
background: #f5f5f5;
padding-top: 20px;
font-size: 0;
font-weight: 400;
}
> * {
display: table-cell;
vertical-align: middle;
line-height: 20px;
.empty-tip {
font-size: 12px;
color: #bbb;
background: #fff;
margin-top: -22px;
&:before {
content: "";
width: 104px;
height: 65px;
background: resolve(home/coupon-empty.png);
display: block;
margin: auto;
position: relative;
top: -20px;
}
}
.coupons-img {
border-left: none;
.coupon-item {
width: 354px;
height: 100px;
font-size: 12px;
margin-left: 20px;
margin-bottom: 15px;
border-radius: 4px;
background: #fff;
overflow: hidden;
position: relative;
user-select: none;
box-sizing: border-box;
display: inline-block;
&:before {
content: "";
width: 8px;
height: 100%;
background: #222;
position: absolute;
left: 0;
}
&:last-child {
border-bottom: none;
&:after {
content: "";
width: 4px;
height: 100%;
background: resolve(home/coupon-hole.png);
position: absolute;
top: 0;
left: 6px;
}
.coupons-card {
width: 221px;
height: 80px;
display: table;
table-layout: fixed;
text-align: left;
padding: 0 10px;
background-image: resolve(home/coupons1.png);
background-repeat: no-repeat;
.due-tig {
width: 42px;
height: 42px;
background: resolve(home/due-tig.png);
position: absolute;
top: 0;
right: 0;
z-index: 3;
}
.coupons-card-header {
height: 20px;
color: #fff;
overflow: hidden;
.worth {
width: 100px;
line-height: 100px;
border-right: 1px dashed #e0e0e0;
text-align: center;
position: absolute;
left: 8px;
p.left-title {
width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
> p {
width: 90%;
line-height: 1;
display: inline-block;
vertical-align: middle;
}
p.right-title {
width: 61px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: right;
}
.price {
font-size: 36px;
font-weight: bold;
}
.coupons-card-content {
height: 60px;
display: table;
overflow: hidden;
.conditions {
line-height: 1.5;
margin-top: 10px;
display: block;
}
.coupons-card-content .coupons-card-row {
display: table-row;
.freight {
font-size: 24px;
font-weight: bold;
color: #222;
}
.coupons-card-content .coupons-card-row .coupons-sht {
display: table-cell;
width: 65px;
vertical-align: middle;
text-align: center;
font-size: 12px;
&:before,
&:after {
content: "";
width: 12px;
height: 12px;
position: absolute;
right: -7px;
background: url(/home/grey-round.png);
}
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
width: inherit;
vertical-align: bottom;
}
&:before {
top: -7px;
}
.coupons-price {
vertical-align: sub;
font-size: 24px;
font-weight: bold;
}
&:after {
bottom: -7px;
}
}
.coupons-card-content .coupons-card-row .coupons-full {
display: table-cell;
vertical-align: middle;
.coupon-info {
padding: 12px 10px;
margin-left: 108px;
color: #b0b0b0;
.name {
max-width: 90%;
height: 34px;
line-height: 1.4;
margin-bottom: 2px;
color: #444;
overflow: hidden;
}
.coupons-card-content .coupons-card-row .coupons-dtl {
display: table-cell;
padding-left: 10px;
.type {
font-weight: bold;
vertical-align: middle;
margin-right: 4px;
}
.red {
color: red;
font-weight: normal;
.time {
margin-bottom: 16px;
}
}
.coupons-freight {
background-image: resolve(home/coupons2.png);
}
.explain-icon {
line-height: 12px;
position: relative;
top: 2px;
}
.coupons-use {
&:before {
content: "";
background-image: resolve(home/use.png);
background-repeat: no-repeat;
width: 55px;
height: 48px;
.explain-wrap {
width: calc(100% - 119px);
height: 98px;
line-height: 1.4;
position: absolute;
margin-left: 148px;
margin-top: 25px;
top: 1px;
left: 118px;
color: #444;
background: #fff;
box-sizing: border-box;
padding-top: 20px;
padding-right: 20px;
border-radius: 6px;
z-index: 2;
word-break: break-all;
overflow: hidden;
display: none;
}
}
.coupons-invalid {
background-image: resolve(home/coupons3.png);
&:before {
content: "";
background-image: resolve(home/invalid.png);
background-repeat: no-repeat;
width: 55px;
height: 48px;
position: absolute;
margin-left: 148px;
margin-top: 25px;
.explain:hover .explain-wrap {
display: block;
}
}
.coupons-info {
width: 388px;
.use-now-btn {
width: 66px;
height: 26px;
line-height: 24px;
border: 1px solid #444;
border-radius: 13px;
text-align: center;
box-sizing: border-box;
position: absolute;
right: 10px;
bottom: 10px;
z-index: 1;
}
}
.coupons-info .coupons-text {
padding: 0 25px;
}
.coupon-item-100 {
$shopColor: #ffa72e;
.coupons-opt {
.btn {
width: 90px;
height: 30px;
display: inline-block;
line-height: 30px;
float: left;
}
&:before {
background: $shopColor;
}
.use-btn {
border: 1px solid;
cursor: pointer;
}
.worth {
color: $shopColor;
}
.overtime-btn {
background: #ccc;
color: #fff;
}
.coupon-info .type {
color: $shopColor;
}
}
.coupons-wrap .coupon .end-soon {
color: #e8044f;
}
.coupon-item-200 {
$activityColor: #fc5960;
.coupons-wrap .un-use-coupons {
.coupons-img {
width: 20%;
&:before {
background: $activityColor;
}
.value {
width: 18%;
.worth {
color: $activityColor;
}
.term-of-validity {
width: 22%;
.coupon-info .type {
color: $activityColor;
}
}
span {
display: none;
}
.used,
.over-time,
.useless {
* {
color: #b0b0b0 !important;
}
&:before {
background: #b0b0b0;
}
.use-remark {
width: 24%;
.coupon-info:after {
content: "";
width: 63px;
height: 57px;
position: absolute;
right: 10px;
bottom: 22px;
background: resolve(home/used-tig.png);
}
.status {
width: 16%;
.coupon-info .name {
max-width: 77%;
}
.end-soon span {
display: inline;
padding: 3px 10px;
color: #fff;
background: #e8044f;
.use-now-btn {
display: none;
}
}
.over-time .coupon-info:after {
background: resolve(home/over-time-tig.png);
}
.useless .coupon-info:after {
background: resolve(home/useless-tig.png);
}
}
.coupon-code-confirm {
.close,
.confirm-cancel {
display: none;
}
.content {
min-width: 0;
padding: 50px 0;
}
}
... ...