alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[Improvement] Reorganize demos (#1052)

Browse Source
This commit is contained in:
neverland
2018-05-12 15:22:37 +08:00
committed by GitHub
parent a55eda8891
commit 4de1e7da55
83 changed files with 109 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/coupon-list/demo/index.vue
+131
View File
@@ -0,0 +1,131 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-coupon-cell
:coupons="coupons"
:chosen-coupon="chosenCoupon"
@click="showList = true"
/>
<van-popup v-model="showList" position="bottom">
<van-coupon-list
:coupons="coupons"
:chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons"
@change="onChange"
@exchange="onExchange"
/>
</van-popup>
</demo-block>
</demo-section>
</template>
<script>
/* eslint-disable camelcase */
export default {
i18n: {
'zh-CN': {
coupon: {
name: '优惠券名称',
reason: '优惠券不可用原因'
},
exchange: '兑换成功'
},
'en-US': {
coupon: {
name: 'Coupon name',
reason: 'Coupon unavailable reason'
},
exchange: 'Success'
}
},
data() {
return {
showList: false,
chosenCoupon: -1,
exchangedCoupons: []
};
},
computed: {
coupons() {
return [this.coupon, this.discountCoupon, ...this.exchangedCoupons];
},
disabledCoupons() {
return [this.disabledCoupon, this.disabledDiscountCoupon];
},
coupon() {
return {
id: 1,
available: 1,
discount: 0,
denominations: 150,
origin_condition: 0,
reason: '',
value: 150,
name: this.$t('coupon.name'),
start_at: 1489104000,
end_at: 1514592000
};
},
discountCoupon() {
return {
...this.coupon,
id: 2,
discount: 88,
denominations: 0,
origin_condition: 50,
value: 12
};
},
disabledCoupon() {
return {
...this.coupon,
id: 3,
available: 0,
reason: this.$t('coupon.reason')
};
},
disabledDiscountCoupon() {
return {
...this.discountCoupon,
discount: 10,
id: 4,
available: 0,
reason: this.$t('coupon.reason')
};
}
},
methods: {
onChange(index) {
this.showList = false;
this.chosenCoupon = index;
},
onExchange(code) {
Toast(this.$t('exchange'));
this.exchangedCoupons.push({
...this.coupon,
id: this.randomId()
});
},
randomId(max = 999999) {
return Math.floor(Math.random() * max) + 1;
}
}
};
</script>
<style lang="postcss">
.demo-coupon-list {
.van-popup {
height: 100%;
}
}
</style>
packages/coupon-list/test/__snapshots__/index.spec.js.snap
+130
View File
@@ -0,0 +1,130 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`coupon cell 1`] = `
<div class="van-cell-group van-hairline--top-bottom van-coupon-cell">
<div class="van-cell van-cell--clickable van-hairline">
<!---->
<div class="van-cell__title"><span>优惠券码</span>
<!---->
</div>
<div class="van-cell__value"><span>使用优惠</span></div>
<i class="van-icon van-icon-arrow van-cell__right-icon">
<!---->
</i>
</div>
</div>
`;
exports[`coupon cell 2`] = `
<div class="van-cell-group van-hairline--top-bottom van-coupon-cell">
<div class="van-cell van-cell--clickable van-hairline">
<!---->
<div class="van-cell__title"><span>优惠券码</span>
<!---->
</div>
<div class="van-cell__value"><span>省￥1.00</span></div>
<i class="van-icon van-icon-arrow van-cell__right-icon">
<!---->
</i>
</div>
</div>
`;
exports[`renders coupon-list correctly 1`] = `
<div>
<div>
<div class="van-cell-group van-hairline--top-bottom van-coupon-cell">
<div class="van-cell van-cell--clickable van-hairline">
<!---->
<div class="van-cell__title"><span>优惠券码</span>
<!---->
</div>
<div class="van-cell__value"><span>您有 2 个可用优惠</span></div>
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;">
<!---->
</i>
</div>
</div>
<div class="van-popup van-popup--bottom" style="display:none;">
<div class="van-coupon-list">
<div class="van-cell-group van-hairline--top-bottom van-coupon-list__top">
<div placeholder="请输入优惠码" maxlength="20" class="van-hairline--surround van-cell van-hairline van-field van-coupon-list__field">
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone">
<input type="text" placeholder="请输入优惠码" maxlength="20" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<button disabled="disabled" class="van-button van-button--danger van-button--small van-button--disabled van-button--unclickable van-coupon-list__exchange">
<!----><span class="van-button__text">兑换</span></button>
</div>
<div class="van-coupon-list__list van-coupon-list__list--with-exchange">
<div class="van-coupon-item">
<div class="van-coupon-item__head">
<div class="van-coupon-item__lines"></div>
<div class="van-coupon-item__gradient">
<h2><span>¥</span> 1.5</h2>
<p>无使用门槛</p>
</div>
</div>
<div class="van-coupon-item__body">
<h2>优惠券名称</h2> <span>2017.03.10-2017.12.30</span>
<!---->
<!---->
</div>
</div>
<div class="van-coupon-item">
<div class="van-coupon-item__head">
<div class="van-coupon-item__lines"></div>
<div class="van-coupon-item__gradient">
<h2>8.8折</h2>
<p>满0.50元可用</p>
</div>
</div>
<div class="van-coupon-item__body">
<h2>优惠券名称</h2> <span>2017.03.10-2017.12.30</span>
<!---->
<!---->
</div>
</div>
<h3>不可用优惠</h3>
<div class="van-coupon-item van-coupon-item--disabled">
<div class="van-coupon-item__head">
<div class="van-coupon-item__lines"></div>
<div class="van-coupon-item__gradient">
<h2><span>¥</span> 1.5</h2>
<p>无使用门槛</p>
</div>
</div>
<div class="van-coupon-item__body">
<h2>优惠券名称</h2> <span>2017.03.10-2017.12.30</span>
<p>优惠券不可用原因</p>
<!---->
</div>
</div>
<div class="van-coupon-item van-coupon-item--disabled">
<div class="van-coupon-item__head">
<div class="van-coupon-item__lines"></div>
<div class="van-coupon-item__gradient">
<h2>1折</h2>
<p>满0.50元可用</p>
</div>
</div>
<div class="van-coupon-item__body">
<h2>优惠券名称</h2> <span>2017.03.10-2017.12.30</span>
<p>优惠券不可用原因</p>
<!---->
</div>
</div>
<!---->
</div>
<div class="van-hairline--top van-coupon-list__close">不使用优惠</div>
</div>
</div>
</div>
</div>
`;
packages/coupon-list/test/index.spec.js
+34
View File
@@ -0,0 +1,34 @@
import demoTest from '../../../test/demo-test';
import CouponList from '../../coupon-list';
import CouponCell from '../../coupon-cell';
import { mount } from '@vue/test-utils';
demoTest(CouponList);
test('exchange coupon', () => {
const wrapper = mount(CouponList);
const exchange = wrapper.find('.van-coupon-list__exchange');
wrapper.vm.displayedCouponIndex = 1;
wrapper.vm.currentCode = '1';
exchange.trigger('click');
wrapper.vm.code = '2';
exchange.trigger('click');
expect(wrapper.emitted('exchange')[0][0]).toBe('1');
expect(wrapper.emitted('exchange')[1][0]).toBe('2');
expect(wrapper.emitted('input')[0][0]).toBe('1');
expect(wrapper.emitted('input')[1][0]).toBe('');
expect(wrapper.emitted('input')[2][0]).toBe('2');
});
test('coupon cell', () => {
const wrapper = mount(CouponCell);
expect(wrapper.html()).toMatchSnapshot();
wrapper.setProps({
coupons: [{ value: 100 }],
chosenCoupon: 0
});
expect(wrapper.html()).toMatchSnapshot();
});