fix(ecard): add callback,add test (jd-opensource#1214)

src/packages/__VUE/ecard/demo.vue

@@ -3,11 +3,11 @@
     <h2>基础用法</h2>
     <nut-cell>
       <nut-ecard
+        v-model="money"
         @inputChange="inputChange"
         @change="change"
         @changeStep="changeStep"
         :data-list="dataList"
-        v-model="money"
       ></nut-ecard>
     </nut-cell>
   </div>
@@ -17,7 +17,6 @@ import { reactive, ref } from 'vue';
 import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('ecard');
 export default createDemo({
-  props: {},
   setup() {
     const dataList = reactive([
       {
@@ -34,20 +33,15 @@ export default createDemo({
       }
     ]);
     const money = ref(0);
-    const inputChange = (val: any) => {
+    const inputChange = (val: number) => {
       money.value = val;
     };
-    const change = (item: any) => {
-      console.log(item);
+    const change = (item: { price: number }) => {
       money.value = item.price;
     };
-    const changeStep = (num) => {
-      const val = money.value * num;
-      if (val > 100) {
-        money.value = val * 0.9;
-      } else {
-        money.value = val;
-      }
+    const changeStep = (num: number, price: number) => {
+      const val = price * num;
+      money.value = val;
     };
     return {
       dataList,

src/packages/__VUE/ecard/doc.md

@@ -26,13 +26,13 @@ app.use(InputNumber);
 
 ```html
 <template>
-  <nut-ecard 
-    chooseText='请选择电子卡面值'
-    @inputChange="inputChange" 
-    @change="change" 
-    :data-list="dataList" 
-    :money="money">
-  </nut-ecard>
+  <nut-ecard
+    v-model="money"
+    @inputChange="inputChange"
+    @change="change"
+    @changeStep="changeStep"
+    :data-list="dataList"
+  ></nut-ecard>
 </template>
 <script>
   import { reactive, toRefs } from 'vue';
@@ -52,18 +52,23 @@ app.use(InputNumber);
           price:40
         },
       ])
-      const money = ref(0)
-      const inputChange = (val:any)=>{
-        money.value = val
-      }
-      const change = (item:any)=>{
-        money.value = item.price
-      }
+    const money = ref(0);
+    const inputChange = (val) => {
+      money.value = val;
+    };
+    const change = (item) => {
+      money.value = item.price;
+    };
+    const changeStep = (num,price) => {
+      const val = price * num;
+      money.value = val;
+    };
       return {
         dataList,
         inputChange,
         change,
-        money
+        money,
+        changeStep
       };
     }
   };
@@ -78,14 +83,14 @@ app.use(InputNumber);
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
+| modelValue        | 购买电子卡所需价钱                    | Number | 0            |
 | choose-text         | 选择面值文案               | String |   请选择电子卡面值              |
 | other-value-text        | 其他面值文案   | String |         其他面值        |
 | data-list         | 电子卡面值列表| Array |        []        |
 | card-amount-min| 其它面值最小值     | Number | 1|
 | card-amount-max        | 其他面值最大值                      | Number | 9999            |
 | card-buy-min        | 购买数量最小值                      | Number | 9999            |
 | card-buy-max        | 购买数量最大值                      | Number | 9999            |
-| money        | 购买电子卡所需价钱                    | Number | 0            |
 | placeholder        | 其他面值默认提示语                    | String |    请输入1-5000整数         |
 | suffix        | 符号标示                      | String | ¥            |
 
@@ -95,4 +100,4 @@ app.use(InputNumber);
 |--------|----------------|--------------|
 | change  | 选中电子卡事件 | 点击的数据 |
 | input-change  | 更改input框触发事件 |输入的数据 |
-| change-step  | 更改数量时触发 | 当前数量 |
+| change-step  | 更改数量时触发 | 当前数量，当前选中的卡面值 |

src/packages/__VUE/ecard/index.scss

@@ -27,7 +27,7 @@
 
       &.active {
         background: $white;
-        border: 1px solid $primary-color;
+        outline: 1px solid $primary-color;
         border-radius: 4px;
       }
     }
@@ -61,7 +61,7 @@
 
       &.active {
         background: $white;
-        border: 1px solid $primary-color;
+        outline: 1px solid $primary-color;
 
         > view > input {
           background: $white;

src/packages/__VUE/ecard/index.taro.vue

@@ -82,40 +82,45 @@ export default create({
 
   setup(props, { emit }) {
     const currentIndex: Ref<number | null | string> = ref(null);
+    const currentValue: Ref<number | null | string> = ref(null);
     const inputValue: Ref<string | undefined | number> = ref();
     const stepValue: Ref<number> = ref(props.cardAmountMin);
     const money: Ref<number | string | undefined> = ref(props.modelValue);
     const handleClick = (item: { price: number | string }, index: number) => {
       currentIndex.value = index;
       inputValue.value = '';
+      stepValue.value = props.cardAmountMin;
+      currentValue.value = item.price;
       emit('change', item);
     };
     const change = (event: Event) => {
       let input = event.target as HTMLInputElement;
       let val = input.value.replace(/[^\d]/g, '');
-
       inputValue.value = val;
+      currentValue.value = val;
       if (Number(val) > props.cardAmountMax) {
         inputValue.value = props.cardAmountMax;
+        currentValue.value = props.cardAmountMax;
       }
       if (Number(val) < props.cardAmountMin) {
         inputValue.value = props.cardAmountMin;
+        currentValue.value = props.cardAmountMin;
       }
       emit('inputChange', Number(inputValue.value));
     };
     const inputClick = () => {
       currentIndex.value = 'input';
+      stepValue.value = props.cardAmountMin;
       emit('update:modelValue', 0);
       emit('inputClick');
     };
     const changeStep = (value: number) => {
       stepValue.value = value;
-      emit('changeStep', stepValue.value); // 返回数量
+      emit('changeStep', stepValue.value, currentValue.value); // 返回数量, 返回当前选中值
     };
     watch(
       () => props.modelValue,
       (value) => {
-        console.log('value', value);
         money.value = value;
       }
     );

src/packages/__VUE/ecard/index.vue

@@ -14,6 +14,7 @@
         <view>{{ otherValueText || translate('otherValueText') }}</view>
         <view class="nut-ecard__list__input--con">
           <input
+            class="nut-ecard__list__input--input"
             type="text"
             v-model="inputValue"
             @input="change"
@@ -96,39 +97,47 @@ export default create({
 
   setup(props, { emit }) {
     const currentIndex: Ref<number | null | string> = ref(null);
+    const currentValue: Ref<number | null | string> = ref(null);
     const inputValue: Ref<string | undefined | number> = ref();
     const stepValue: Ref<number> = ref(props.cardAmountMin);
     const money: Ref<number | string | undefined> = ref(props.modelValue);
     const handleClick = (item: { price: number | string }, index: number) => {
       currentIndex.value = index;
       inputValue.value = '';
+      stepValue.value = props.cardAmountMin;
+      currentValue.value = item.price;
       emit('change', item);
+      emit('update:modelValue', item.price);
     };
     const change = (event: Event) => {
       let input = event.target as HTMLInputElement;
       let val = input.value.replace(/[^\d]/g, '');
       inputValue.value = val;
+      currentValue.value = val;
       if (Number(val) > props.cardAmountMax) {
         inputValue.value = props.cardAmountMax;
+        currentValue.value = props.cardAmountMax;
       }
       if (Number(val) < props.cardAmountMin) {
         inputValue.value = props.cardAmountMin;
+        currentValue.value = props.cardAmountMin;
       }
       emit('inputChange', Number(inputValue.value));
+      emit('update:modelValue', Number(inputValue.value));
     };
     const inputClick = () => {
       currentIndex.value = 'input';
+      stepValue.value = props.cardAmountMin;
       emit('update:modelValue', 0);
       emit('inputClick');
     };
     const changeStep = (value: number) => {
       stepValue.value = value;
-      emit('changeStep', stepValue.value); // 返回数量
+      emit('changeStep', stepValue.value, currentValue.value); // 返回数量, 返回当前选中值
     };
     watch(
       () => props.modelValue,
       (value) => {
-        console.log('value', value);
         money.value = value;
       }
     );

src/packages/__VUE/ecard/test/index.spec.ts

@@ -0,0 +1,104 @@
+import { config, DOMWrapper, mount } from '@vue/test-utils';
+import Ecard from '../index.vue';
+import NutInputnumber from '../../inputnumber/index.vue';
+// inputnumber中有使用icon
+import NutIcon from '../../icon/index.vue';
+import { nextTick } from 'vue';
+
+function sleep(delay = 0): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, delay);
+  });
+}
+// 所有的测试用例之前执行一次
+beforeAll(() => {
+  config.global.components = {
+    NutInputnumber,
+    NutIcon
+  };
+});
+// 所有的测试用例之后执行一次
+afterAll(() => {
+  config.global.components = {};
+});
+
+const data = [
+  {
+    price: 10
+  },
+  {
+    price: 20
+  },
+  {
+    price: 30
+  },
+  {
+    price: 40
+  }
+];
+test('should render ecard', async () => {
+  const wrapper = mount(Ecard, {
+    props: {
+      dataList: data
+    }
+  });
+  // expect(wrapper.html()).toMatchSnapshot();
+});
+test('should render correct money', async () => {
+  const wrapper = mount(Ecard, {
+    props: {
+      dataList: data,
+      modelValue: 0
+    }
+  });
+  const item = wrapper.findAll('.nut-ecard__list__item');
+
+  item[0].trigger('click');
+  await nextTick();
+  expect((wrapper.emitted('update:modelValue') as any)[0][0]).toBe(10);
+});
+
+test('input change when more than maxValue', async () => {
+  const wrapper = mount(Ecard, {
+    props: {
+      dataList: data,
+      modelValue: 0,
+      cardAmountMax: 100
+    }
+  });
+  const input: DOMWrapper<Element> = wrapper.find('.nut-ecard__list__input--input');
+  (input.element as HTMLInputElement).value = '123';
+  input.trigger('input');
+  await nextTick();
+  expect((wrapper.emitted('update:modelValue') as any)[0][0]).toEqual(100);
+});
+
+test('input change when less than maxValue', async () => {
+  const wrapper = mount(Ecard, {
+    props: {
+      dataList: data,
+      modelValue: 0,
+      cardAmountMin: 100
+    }
+  });
+  const input: DOMWrapper<Element> = wrapper.find('.nut-ecard__list__input--input');
+  (input.element as HTMLInputElement).value = '90';
+  input.trigger('input');
+  await nextTick();
+  expect((wrapper.emitted('update:modelValue') as any)[0][0]).toEqual(100);
+});
+test('input change when less than maxValue', async () => {
+  const wrapper = mount(Ecard, {
+    props: {
+      dataList: data,
+      modelValue: 10,
+      cardAmountMin: 100
+    }
+  });
+  const input: DOMWrapper<Element> = wrapper.find('.nut-ecard__list__input');
+  const add = wrapper.find('.nut-icon-plus');
+  input.trigger('click');
+  add.trigger('click');
+  await nextTick();
+  expect((wrapper.emitted('update:modelValue') as any)[0][0]).toBe(0);
+});

src/packages/styles/variables.scss

@@ -771,6 +771,5 @@ $cmt-header-time-color: rgba(153, 153, 153, 1) !default;
 $cmt-bottom-label-color: rgba(153, 153, 153, 1) !default;
 $cmt-shop-color: $primary-color !default;
 
-
 @import './mixins/index';
 @import './animation/index';

src/sites/mobile-taro/vue/src/business/pages/ecard/index.vue

@@ -32,19 +32,15 @@ export default defineComponent({
       }
     ]);
     const money = ref(0);
-    const inputChange = (val: any) => {
+    const inputChange = (val: number) => {
       money.value = val;
     };
-    const change = (item: any) => {
+    const change = (item: { price: number }) => {
       money.value = item.price;
     };
-    const changeStep = (num: any) => {
-      const val = money.value * num;
-      if (val > 100) {
-        money.value = val * 0.9;
-      } else {
-        money.value = val;
-      }
+    const changeStep = (num: number, price: number) => {
+      const val = price * num;
+      money.value = val;
     };
     return {
       dataList,