blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Coupon: add less vars

Browse Source
This commit is contained in:
陈嘉涵 2019-05-14 12:06:07 +08:00
parent 6fd8f2b1a4
commit c970279700
4 changed files with 90 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/coupon-list/test/__snapshots__/index.spec.js.snap
View File

@ -39,11 +39,11 @@ exports[`render coupon list 1`] = `
<div class="van-coupon">
<div class="van-coupon__content">
<div class="van-coupon__head">
<h2></h2>
<h2 class="van-coupon__amount"></h2>
<p>无使用门槛</p>
</div>
<div class="van-coupon__body">
<h2></h2>
<h2 class="van-coupon__name"></h2>
<p>有效期：2017.03.10 - 2017.12.30</p>
</div>
</div>
@ -51,14 +51,14 @@ exports[`render coupon list 1`] = `
<div class="van-coupon">
<div class="van-coupon__content">
<div class="van-coupon__head">
<h2><span>¥</span> 1.5</h2>
<h2 class="van-coupon__amount"><span>¥</span> 1.5</h2>
<p>无使用门槛</p>
</div>
<div class="van-coupon__body">
<h2>name</h2>
<h2 class="van-coupon__name">name</h2>
<p>有效期：2017.03.10 - 2017.12.30</p>
<div class="van-checkbox van-coupon__corner">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #f44; background-color: rgb(255, 68, 68);">
<!----></i></div>
</div>
</div>
@ -68,11 +68,11 @@ exports[`render coupon list 1`] = `
<div class="van-coupon">
<div class="van-coupon__content">
<div class="van-coupon__head">
<h2><span>¥</span> 1</h2>
<h2 class="van-coupon__amount"><span>¥</span> 1</h2>
<p>无使用门槛</p>
</div>
<div class="van-coupon__body">
<h2>name</h2>
<h2 class="van-coupon__name">name</h2>
<p>有效期：2017.03.10 - 2017.12.30</p>
</div>
</div>
@ -81,11 +81,11 @@ exports[`render coupon list 1`] = `
<div class="van-coupon">
<div class="van-coupon__content">
<div class="van-coupon__head">
<h2><span>¥</span> 1.23</h2>
<h2 class="van-coupon__amount"><span>¥</span> 1.23</h2>
<p>无使用门槛</p>
</div>
<div class="van-coupon__body">
<h2>name</h2>
<h2 class="van-coupon__name">name</h2>
<p>有效期：2017.03.10 - 2017.12.30</p>
</div>
</div>
@ -94,11 +94,11 @@ exports[`render coupon list 1`] = `
<div class="van-coupon">
<div class="van-coupon__content">
<div class="van-coupon__head">
<h2>8.8折</h2>
<p>满0.50元可用</p>
<h2 class="van-coupon__amount">8.8折</h2>
<p>满0.5元可用</p>
</div>
<div class="van-coupon__body">
<h2>name</h2>
<h2 class="van-coupon__name">name</h2>
<p>有效期：2017.03.10 - 2017.12.30</p>
</div>
</div>
@ -106,11 +106,11 @@ exports[`render coupon list 1`] = `
<div class="van-coupon">
<div class="van-coupon__content">
<div class="van-coupon__head">
<h2>9折</h2>
<p>满0.50元可用</p>
<h2 class="van-coupon__amount">9折</h2>
<p>满0.5元可用</p>
</div>
<div class="van-coupon__body">
<h2>name</h2>
<h2 class="van-coupon__name">name</h2>
<p>有效期：2017.03.10 - 2017.12.30</p>
</div>
</div>
@ -129,11 +129,11 @@ exports[`render disabled coupon 1`] = `
<div class="van-coupon van-coupon--disabled">
<div class="van-coupon__content">
<div class="van-coupon__head">
<h2><span>¥</span> 1.5</h2>
<h2 class="van-coupon__amount"><span>¥</span> 1.5</h2>
<p>无使用门槛</p>
</div>
<div class="van-coupon__body">
<h2>name</h2>
<h2 class="van-coupon__name">name</h2>
<p>有效期：2017.03.10 - 2017.12.30</p>
</div>
</div>

37
packages/coupon/index.js
View File

@ -1,4 +1,5 @@
import { use } from '../utils';
import { RED } from '../utils/color';
import Checkbox from '../checkbox';
const [sfc, bem, t] = use('coupon');
@ -9,7 +10,9 @@ function padZero(num) {
function getDate(timeStamp) {
const date = new Date(timeStamp * 1000);
return `${date.getFullYear()}.${padZero(date.getMonth() + 1)}.${padZero(date.getDate())}`;
return `${date.getFullYear()}.${padZero(date.getMonth() + 1)}.${padZero(
date.getDate()
)}`;
}
function formatDiscount(discount) {
@ -33,25 +36,31 @@ export default sfc({
computed: {
validPeriod() {
return `${t('valid')}：${getDate(this.coupon.startAt)} - ${getDate(this.coupon.endAt)}`;
const { startAt, endAt } = this.coupon;
return `${t('valid')}：${getDate(startAt)} - ${getDate(endAt)}`;
},
faceAmount() {
const { coupon } = this;
if (coupon.valueDesc) {
return `${coupon.valueDesc}<span>${coupon.unitDesc || ''}</span>`;
}
return coupon.denominations
? `<span>${this.currency}</span> ${formatAmount(this.coupon.denominations)}`
: coupon.discount
? t('discount', formatDiscount(this.coupon.discount))
: '';
if (coupon.denominations) {
return `<span>${this.currency}</span> ${formatAmount(this.coupon.denominations)}`;
}
if (coupon.discount) {
return t('discount', formatDiscount(this.coupon.discount));
}
return '';
},
conditionMessage() {
let condition = this.coupon.originCondition;
condition = condition % 100 === 0 ? Math.round(condition / 100) : (condition / 100).toFixed(2);
return condition === 0 ? t('unlimited') : t('condition', condition);
const condition = formatAmount(this.coupon.originCondition);
return condition === '0' ? t('unlimited') : t('condition', condition);
}
},
@ -63,13 +72,15 @@ export default sfc({
<div class={bem({ disabled })}>
<div class={bem('content')}>
<div class={bem('head')}>
<h2 domPropsInnerHTML={this.faceAmount} />
<h2 class={bem('amount')} domPropsInnerHTML={this.faceAmount} />
<p>{this.coupon.condition || this.conditionMessage}</p>
</div>
<div class={bem('body')}>
<h2>{coupon.name}</h2>
<h2 class={bem('name')}>{coupon.name}</h2>
<p>{this.validPeriod}</p>
{this.chosen && <Checkbox value={true} class={bem('corner')} />}
{this.chosen && (
<Checkbox value={true} class={bem('corner')} checked-color={RED} />
)}
</div>
</div>
{description && <p class={bem('description')}>{description}</p>}

67
packages/coupon/index.less
View File

@ -2,21 +2,21 @@
@import '../style/mixins/ellipsis';
.van-coupon {
margin: 0 15px 15px;
margin: @coupon-margin;
overflow: hidden;
background-color: @white;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
background-color: @coupon-background-color;
border-radius: @coupon-border-radius;
box-shadow: @coupon-box-shadow;
&:active {
background-color: @active-color;
background-color: @coupon-active-background-color;
}
&__content {
display: flex;
box-sizing: border-box;
height: 100px;
padding: 24px 0 0 15px;
height: @coupon-content-height;
padding: @coupon-content-padding;
}
p,
@ -40,67 +40,62 @@
&__head {
position: relative;
min-width: 85px;
min-width: @coupon-head-width;
padding-right: 10px;
h2 {
color: @red;
font-size: 24px;
span {
&:not(:empty) {
margin-left: 2px;
}
font-size: 50%;
}
}
p {
white-space: pre-wrap;
}
}
&__amount {
color: @coupon-amount-color;
font-size: @coupon-amount-font-size;
span {
font-size: @coupon-currency-font-size;
&:not(:empty) {
margin-left: 2px;
}
}
}
&__body {
position: relative;
flex: 1;
border-radius: 0 4px 4px 0;
h2 {
font-size: 16px;
border-radius: 0 @coupon-border-radius @coupon-border-radius 0;
}
&__name {
font-size: @coupon-name-font-size;
}
&__corner {
position: absolute;
top: 16px;
right: 15px;
.van-icon {
background-color: @red;
border-color: @red;
}
}
&__description {
padding: 7px 15px;
background-color: @background-color-light;
border-top: 1px dashed @border-color;
padding: @coupon-description-padding;
background-color: @coupon-description-background-color;
border-top: 1px dashed @coupon-description-border-color;
}
&--disabled {
&:active {
background-color: @white;
background-color: @coupon-background-color;
}
.van-coupon-item__content {
height: 90px;
height: @coupon-content-height - 10px;
}
p,
h2,
span {
color: @gray-dark;
color: @coupon-disabled-text-color;
}
}
}

18
packages/style/var.less
View File

@ -166,6 +166,24 @@
@contact-list-add-button-z-index: 9999;
@contact-list-item-padding: 15px;
// Coupon
@coupon-margin: 0 15px 15px;
@coupon-content-height: 100px;
@coupon-content-padding: 24px 0 0 15px;
@coupon-background-color: @white;
@coupon-active-background-color: @active-color;
@coupon-border-radius: 4px;
@coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
@coupon-head-width: 85px;
@coupon-amount-color: @red;
@coupon-amount-font-size: 24px;
@coupon-currency-font-size: 50%;
@coupon-name-font-size: 16px;
@coupon-disabled-text-color: @gray-dark;
@coupon-description-padding: 7px 15px;
@coupon-description-background-color: @background-color-light;
@coupon-description-border-color: @border-color;
// Dialog
@dialog-width: 85%;
@dialog-font-size: 16px;