mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] Coupon: add description prop (#2458)
This commit is contained in:
neverland
GitHub
parent
7f853f694a
commit
2c3458587e
@ -16,8 +16,6 @@ module.exports = function (api) {
|
||||
[
|
||||
'@vue/babel-preset-jsx',
|
||||
{
|
||||
vModel: true,
|
||||
injectH: true,
|
||||
functional: false
|
||||
}
|
||||
]
|
||||
|
||||
@ -79,8 +79,8 @@
|
||||
"@vant/markdown-loader": "^1.0.3",
|
||||
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.1",
|
||||
"@vue/babel-preset-jsx": "^1.0.0-beta.1",
|
||||
"@vue/server-test-utils": "^1.0.0-beta.26",
|
||||
"@vue/test-utils": "^1.0.0-beta.26",
|
||||
"@vue/server-test-utils": "^1.0.0-beta.28",
|
||||
"@vue/test-utils": "^1.0.0-beta.28",
|
||||
"autoprefixer": "^9.4.3",
|
||||
"babel-core": "^7.0.0-0",
|
||||
"babel-jest": "^23.6.0",
|
||||
|
||||
@ -30,14 +30,16 @@ export default {
|
||||
'zh-CN': {
|
||||
coupon: {
|
||||
name: '优惠券名称',
|
||||
reason: '优惠券不可用原因'
|
||||
reason: '优惠券不可用原因',
|
||||
description: '描述信息'
|
||||
},
|
||||
exchange: '兑换成功'
|
||||
},
|
||||
'en-US': {
|
||||
coupon: {
|
||||
name: 'Coupon name',
|
||||
reason: 'Coupon unavailable reason'
|
||||
reason: 'Coupon unavailable reason',
|
||||
description: 'Description'
|
||||
},
|
||||
exchange: 'Success'
|
||||
}
|
||||
@ -63,13 +65,13 @@ export default {
|
||||
coupon() {
|
||||
return {
|
||||
id: 1,
|
||||
available: 1,
|
||||
discount: 0,
|
||||
denominations: 150,
|
||||
originCondition: 0,
|
||||
reason: '',
|
||||
value: 150,
|
||||
name: this.$t('coupon.name'),
|
||||
description: this.$t('coupon.description'),
|
||||
startAt: 1489104000,
|
||||
endAt: 1514592000
|
||||
};
|
||||
@ -90,7 +92,6 @@ export default {
|
||||
return {
|
||||
...this.coupon,
|
||||
id: 3,
|
||||
available: 0,
|
||||
reason: this.$t('coupon.reason')
|
||||
};
|
||||
},
|
||||
@ -100,7 +101,6 @@ export default {
|
||||
...this.discountCoupon,
|
||||
discount: 10,
|
||||
id: 4,
|
||||
available: 0,
|
||||
reason: this.$t('coupon.reason')
|
||||
};
|
||||
}
|
||||
|
||||
@ -111,5 +111,6 @@ export default {
|
||||
| originCondition | Condition | `Number` |
|
||||
| startAt | Start time (Timestmap, unit second) | `Number` |
|
||||
| endAt | End time (Timestmap, unit second) | `Number` |
|
||||
| description | Description | `String` |
|
||||
| reason | Unavailable reason | `String` |
|
||||
| value | Value | `Number` |
|
||||
|
||||
@ -23,3 +23,139 @@ exports[`coupon cell 2`] = `
|
||||
<!----></i>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render coupon list 1`] = `
|
||||
<div class="van-coupon-list">
|
||||
<div class="van-cell van-cell--borderless van-field van-coupon-list__field">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" maxlength="20" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--small van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabs van-tabs--line van-coupon-list__tab">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div class="van-tabs__nav van-tabs__nav--line">
|
||||
<div class="van-tabs__line" style="width: 120px; transform: translateX(-60px);"></div>
|
||||
<div class="van-tab van-tab--active"><span class="van-ellipsis">可使用优惠券 (6)</span></div>
|
||||
<div class="van-tab"><span class="van-ellipsis">不可使用优惠券 (2)</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tab__pane" style="">
|
||||
<div class="van-coupon-list__list" style="height: 628px;">
|
||||
<div class="van-coupon">
|
||||
<div class="van-coupon__content">
|
||||
<div class="van-coupon__head">
|
||||
<h2></h2>
|
||||
<p>无使用门槛</p>
|
||||
</div>
|
||||
<div class="van-coupon__body">
|
||||
<h2></h2>
|
||||
<p>有效期：2017.03.10 - 2017.12.30</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-coupon">
|
||||
<div class="van-coupon__content">
|
||||
<div class="van-coupon__head">
|
||||
<h2><span>¥</span> 1.5</h2>
|
||||
<p>无使用门槛</p>
|
||||
</div>
|
||||
<div class="van-coupon__body">
|
||||
<h2>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">
|
||||
<!---->
|
||||
<!----></i></div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="van-coupon__description">description</p>
|
||||
</div>
|
||||
<div class="van-coupon">
|
||||
<div class="van-coupon__content">
|
||||
<div class="van-coupon__head">
|
||||
<h2><span>¥</span> 1</h2>
|
||||
<p>无使用门槛</p>
|
||||
</div>
|
||||
<div class="van-coupon__body">
|
||||
<h2>name</h2>
|
||||
<p>有效期：2017.03.10 - 2017.12.30</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="van-coupon__description">description</p>
|
||||
</div>
|
||||
<div class="van-coupon">
|
||||
<div class="van-coupon__content">
|
||||
<div class="van-coupon__head">
|
||||
<h2><span>¥</span> 1.23</h2>
|
||||
<p>无使用门槛</p>
|
||||
</div>
|
||||
<div class="van-coupon__body">
|
||||
<h2>name</h2>
|
||||
<p>有效期：2017.03.10 - 2017.12.30</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="van-coupon__description">description</p>
|
||||
</div>
|
||||
<div class="van-coupon">
|
||||
<div class="van-coupon__content">
|
||||
<div class="van-coupon__head">
|
||||
<h2>8.8折</h2>
|
||||
<p>满0.50元可用</p>
|
||||
</div>
|
||||
<div class="van-coupon__body">
|
||||
<h2>name</h2>
|
||||
<p>有效期：2017.03.10 - 2017.12.30</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-coupon">
|
||||
<div class="van-coupon__content">
|
||||
<div class="van-coupon__head">
|
||||
<h2>9折</h2>
|
||||
<p>满0.50元可用</p>
|
||||
</div>
|
||||
<div class="van-coupon__body">
|
||||
<h2>name</h2>
|
||||
<p>有效期：2017.03.10 - 2017.12.30</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠</span></button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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>
|
||||
<p>无使用门槛</p>
|
||||
</div>
|
||||
<div class="van-coupon__body">
|
||||
<h2>name</h2>
|
||||
<p>有效期：2017.03.10 - 2017.12.30</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="van-coupon__description">reason</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,6 +1,94 @@
|
||||
import Coupon from '../../coupon';
|
||||
import CouponList from '..';
|
||||
import CouponCell from '../../coupon-cell';
|
||||
import { mount } from '../../../test/utils';
|
||||
import { later, mount } from '../../../test/utils';
|
||||
|
||||
const coupon = {
|
||||
id: 1,
|
||||
discount: 0,
|
||||
denominations: 150,
|
||||
originCondition: 0,
|
||||
reason: '',
|
||||
value: 150,
|
||||
name: 'name',
|
||||
description: 'description',
|
||||
startAt: 1489104000,
|
||||
endAt: 1514592000
|
||||
};
|
||||
|
||||
const coupon2 = {
|
||||
...coupon,
|
||||
denominations: 100
|
||||
};
|
||||
|
||||
const coupon3 = {
|
||||
...coupon,
|
||||
denominations: 123
|
||||
};
|
||||
|
||||
const emptyCoupon = {
|
||||
id: 0,
|
||||
discount: 0,
|
||||
denominations: 0,
|
||||
originCondition: 0,
|
||||
startAt: 1489104000,
|
||||
endAt: 1514592000
|
||||
};
|
||||
|
||||
const discountCoupon = {
|
||||
...coupon,
|
||||
id: 2,
|
||||
discount: 88,
|
||||
denominations: 0,
|
||||
originCondition: 50,
|
||||
value: 12,
|
||||
description: ''
|
||||
};
|
||||
|
||||
const discountCoupon2 = {
|
||||
...coupon,
|
||||
id: 2,
|
||||
discount: 90,
|
||||
denominations: 0,
|
||||
originCondition: 50,
|
||||
value: 12,
|
||||
description: ''
|
||||
};
|
||||
|
||||
const disabledCoupon = {
|
||||
...coupon,
|
||||
id: 3,
|
||||
reason: 'reason'
|
||||
};
|
||||
|
||||
const disabledDiscountCoupon = {
|
||||
...discountCoupon,
|
||||
discount: 10,
|
||||
id: 4,
|
||||
reason: ''
|
||||
};
|
||||
|
||||
test('render disabled coupon', () => {
|
||||
const wrapper = mount(Coupon, {
|
||||
propsData: {
|
||||
coupon: disabledCoupon,
|
||||
disabled: true
|
||||
}
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('render coupon list', async () => {
|
||||
const wrapper = mount(CouponList, {
|
||||
propsData: {
|
||||
chosenCoupon: 1,
|
||||
coupons: [emptyCoupon, coupon, coupon2, coupon3, discountCoupon, discountCoupon2],
|
||||
disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
|
||||
}
|
||||
});
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('exchange coupon', () => {
|
||||
const wrapper = mount(CouponList);
|
||||
@ -22,7 +110,12 @@ test('exchange coupon', () => {
|
||||
});
|
||||
|
||||
test('coupon cell', () => {
|
||||
const wrapper = mount(CouponCell);
|
||||
const onClick = jest.fn();
|
||||
const wrapper = mount(CouponCell, {
|
||||
listeners: {
|
||||
click: onClick
|
||||
}
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
wrapper.setProps({
|
||||
@ -30,4 +123,7 @@ test('coupon cell', () => {
|
||||
chosenCoupon: 0
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
wrapper.trigger('click');
|
||||
expect(onClick.mock.calls.length).toEqual(1);
|
||||
});
|
||||
|
||||
@ -116,5 +116,6 @@ export default {
|
||||
| originCondition | 满减条件（0为无门槛，满XX元可用）单位分 | `Number` |
|
||||
| startAt | 卡有效开始时间 (时间戳, 单位秒) | `Number` |
|
||||
| endAt | 卡失效日期 (时间戳, 单位秒) | `Number` |
|
||||
| reason | 不可用原因 | `String` |
|
||||
| description | 描述信息，优惠券可用时展示 | `String` |
|
||||
| reason | 不可用原因，优惠券不可用时展示 | `String` |
|
||||
| value | 折扣券优惠金额，单位分 | `Number` |
|
||||
|
||||
@ -53,9 +53,10 @@ export default sfc({
|
||||
|
||||
render(h) {
|
||||
const { coupon, disabled } = this;
|
||||
const description = (disabled && coupon.reason) || coupon.description;
|
||||
|
||||
return (
|
||||
<div class={bem({ disabled: this.disabled })}>
|
||||
<div class={bem({ disabled })}>
|
||||
<div class={bem('content')}>
|
||||
<div class={bem('head')}>
|
||||
<h2 domPropsInnerHTML={this.faceAmount} />
|
||||
@ -67,7 +68,7 @@ export default sfc({
|
||||
{this.chosen && <Checkbox value={true} class={bem('corner')} />}
|
||||
</div>
|
||||
</div>
|
||||
{(disabled && coupon.reason) && <p class={bem('reason')}>{coupon.reason}</p>}
|
||||
{description && <p class={bem('description')}>{description}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__reason {
|
||||
&__description {
|
||||
padding: 7px 15px;
|
||||
border-top: 1px dashed @border-color;
|
||||
background-color: @background-color-light;
|
||||
|
||||
14
yarn.lock
14
yarn.lock
@ -802,15 +802,17 @@
|
||||
source-map "^0.5.6"
|
||||
vue-template-es2015-compiler "^1.6.0"
|
||||
|
||||
"@vue/server-test-utils@^1.0.0-beta.26":
|
||||
version "1.0.0-beta.27"
|
||||
resolved "https://registry.yarnpkg.com/@vue/server-test-utils/-/server-test-utils-1.0.0-beta.27.tgz#0c61cb724d04bf44c70938b4a6054e73e914492a"
|
||||
"@vue/server-test-utils@^1.0.0-beta.28":
|
||||
version "1.0.0-beta.28"
|
||||
resolved "https://registry.yarnpkg.com/@vue/server-test-utils/-/server-test-utils-1.0.0-beta.28.tgz#40adb6a6c05e8970cc5e5f0869eb490fa00d9cf3"
|
||||
integrity sha512-CrXQ2ISmLvye4HC4sIHqqR3Gyg02i8XcTwMAyIh+UY7fh1Nz4f9XE4LDsxg0B9uSGsSiR0lwphjlGtbUJjGl4A==
|
||||
dependencies:
|
||||
cheerio "^1.0.0-rc.2"
|
||||
|
||||
"@vue/test-utils@^1.0.0-beta.26":
|
||||
version "1.0.0-beta.27"
|
||||
resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.0-beta.27.tgz#7e5f7b7180c00e28a4ca55c0ff0a7e754377fdb2"
|
||||
"@vue/test-utils@^1.0.0-beta.28":
|
||||
version "1.0.0-beta.28"
|
||||
resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.0-beta.28.tgz#767c43413df8cde86128735e58923803e444b9a5"
|
||||
integrity sha512-uVbFJG0g/H9hf2pgWUdhvQYItRGzQ44cMFf00wp0YEo85pxuvM9e3mx8QLQfx6R2CogxbK4CvV7qvkLblehXeQ==
|
||||
dependencies:
|
||||
dom-event-types "^1.0.0"
|
||||
lodash "^4.17.4"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user