diff --git a/packages/coupon-cell/index.js b/packages/coupon-cell/index.js index 4339d229a..5943e3833 100644 --- a/packages/coupon-cell/index.js +++ b/packages/coupon-cell/index.js @@ -1,63 +1,63 @@ import { use } from '../utils'; +import { inherit } from '../utils/functional'; import Cell from '../cell'; const [sfc, bem, t] = use('coupon-cell'); -export default sfc({ - model: { - prop: 'chosenCoupon' - }, +function formatValue(props) { + const { coupons, chosenCoupon, currency } = props; + const coupon = coupons[chosenCoupon]; - props: { - title: String, - coupons: Array, - currency: { - type: String, - default: '¥' - }, - border: { - type: Boolean, - default: true - }, - editable: { - type: Boolean, - default: true - }, - chosenCoupon: { - type: Number, - default: -1 - } - }, - - computed: { - value() { - const { coupons } = this; - const coupon = coupons[this.chosenCoupon]; - if (coupon) { - const value = coupon.denominations || coupon.value; - return `-${this.currency}${(value / 100).toFixed(2)}`; - } - return coupons.length === 0 ? t('tips') : t('count', coupons.length); - }, - - valueClass() { - return this.coupons[this.chosenCoupon] ? 'van-coupon-cell--selected' : ''; - } - }, - - render(h) { - return ( - { - this.$emit('click'); - }} - /> - ); + if (coupon) { + const value = coupon.denominations || coupon.value; + return `-${currency}${(value / 100).toFixed(2)}`; } -}); + + return coupons.length === 0 ? t('tips') : t('count', coupons.length); +} + +function CouponCell(h, props, slots, ctx) { + const valueClass = props[props.chosenCoupon] + ? 'van-coupon-cell--selected' + : ''; + const value = formatValue(props); + + return ( + + ); +} + +CouponCell.model = { + prop: 'chosenCoupon' +}; + +CouponCell.props = { + title: String, + coupons: Array, + currency: { + type: String, + default: '¥' + }, + border: { + type: Boolean, + default: true + }, + editable: { + type: Boolean, + default: true + }, + chosenCoupon: { + type: Number, + default: -1 + } +}; + +export default sfc(CouponCell); diff --git a/packages/coupon-list/test/__snapshots__/index.spec.js.snap b/packages/coupon-list/test/__snapshots__/index.spec.js.snap index bd1c9eae4..0ebc94f6f 100644 --- a/packages/coupon-list/test/__snapshots__/index.spec.js.snap +++ b/packages/coupon-list/test/__snapshots__/index.spec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`coupon cell 1`] = ` +exports[`render coupon cell 1`] = `
优惠券
使用优惠
@@ -8,10 +8,10 @@ exports[`coupon cell 1`] = `
`; -exports[`coupon cell 2`] = ` +exports[`render coupon cell with coupon 1`] = `
优惠券
-
-¥1.00
+
-¥1.00
`; diff --git a/packages/coupon-list/test/index.spec.js b/packages/coupon-list/test/index.spec.js index dc8e51713..a0eca2f06 100644 --- a/packages/coupon-list/test/index.spec.js +++ b/packages/coupon-list/test/index.spec.js @@ -109,21 +109,27 @@ test('exchange coupon', () => { expect(wrapper.emitted('input')[2][0]).toBe('2'); }); -test('coupon cell', () => { +test('render coupon cell', () => { const onClick = jest.fn(); const wrapper = mount(CouponCell, { - listeners: { - click: onClick + context: { + on: { + click: onClick + } } }); - expect(wrapper).toMatchSnapshot(); - wrapper.setProps({ - coupons: [{ value: 100 }], - chosenCoupon: 0 - }); expect(wrapper).toMatchSnapshot(); - wrapper.trigger('click'); expect(onClick.mock.calls.length).toEqual(1); }); + +test('render coupon cell with coupon', () => { + const wrapper = mount(CouponCell, { + propsData: { + coupons: [{ value: 100 }], + chosenCoupon: 0 + } + }); + expect(wrapper).toMatchSnapshot(); +});