refactor(Coupon): simplify the checkbox usage (#12771)

youzan · Apr 6, 2024 · fd89f71 · fd89f71
1 parent 3a524e8
commit fd89f71
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 71 deletions.
diff --git a/packages/vant/docs/site/use-translate.ts b/packages/vant/docs/site/use-translate.ts
@@ -53,7 +53,6 @@ export function initDemoLocale() {
       disabled: '禁用状态',
       uneditable: '不可编辑',
       basicUsage: '基础用法',
-      checkboxUsage: '多选用法',
       usingUrl: '使用图片 URL',
       advancedUsage: '高级用法',
       loadingStatus: '加载状态',
@@ -81,7 +80,6 @@ export function initDemoLocale() {
       disabled: 'Disabled',
       uneditable: 'Uneditable',
       basicUsage: 'Basic Usage',
-      checkboxUsage: 'Checkbox Usage',
       usingUrl: 'Using URL',
       advancedUsage: 'Advanced Usage',
       loadingStatus: 'Loading',

diff --git a/packages/vant/src/coupon-cell/CouponCell.tsx b/packages/vant/src/coupon-cell/CouponCell.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, type ExtractPropTypes } from 'vue';
+import { defineComponent, type PropType, type ExtractPropTypes } from 'vue';
 
 // Utils
 import {
@@ -24,46 +24,40 @@ export const couponCellProps = {
   coupons: makeArrayProp<CouponInfo>(),
   currency: makeStringProp('¥'),
   chosenCoupon: {
-    type: [Number, Array],
+    type: [Number, Array] as PropType<number | number[]>,
     default: -1,
   },
 };
 
 export type CouponCellProps = ExtractPropTypes<typeof couponCellProps>;
 
-function formatValue({ coupons, chosenCoupon, currency }: CouponCellProps) {
-  const getValue = (coupon: CouponInfo) => {
-    let value = 0;
-    const { value: couponValue, denominations } = coupon;
-    if (isDef(coupon.value)) {
-      value = couponValue;
-    } else if (isDef(coupon.denominations)) {
-      value = denominations as number;
-    }
+const getValue = (coupon: CouponInfo) => {
+  const { value, denominations } = coupon;
+  if (isDef(value)) {
     return value;
-  };
+  }
+  if (isDef(denominations)) {
+    return denominations;
+  }
+  return 0;
+};
 
-  let value = 0,
-    isExist = false;
-  if (Array.isArray(chosenCoupon)) {
-    (chosenCoupon as CouponInfo[]).forEach((i) => {
-      const coupon = coupons[+i];
-      if (coupon) {
-        isExist = true;
-        value += getValue(coupon);
-      }
-    });
-  } else {
-    const coupon = coupons[+chosenCoupon];
+function formatValue({ coupons, chosenCoupon, currency }: CouponCellProps) {
+  let value = 0;
+  let isExist = false;
+
+  (Array.isArray(chosenCoupon) ? chosenCoupon : [chosenCoupon]).forEach((i) => {
+    const coupon = coupons[+i];
     if (coupon) {
       isExist = true;
-      value = getValue(coupon);
+      value += getValue(coupon);
     }
+  });
+
+  if (isExist) {
+    return `-${currency} ${(value / 100).toFixed(2)}`;
   }
-  if (!isExist) {
-    return coupons.length === 0 ? t('noCoupon') : t('count', coupons.length);
-  }
-  return `-${currency} ${(value / 100).toFixed(2)}`;
+  return coupons.length === 0 ? t('noCoupon') : t('count', coupons.length);
 }
 
 export default defineComponent({

diff --git a/packages/vant/src/coupon-list/CouponList.tsx b/packages/vant/src/coupon-list/CouponList.tsx
@@ -4,8 +4,8 @@ import {
   computed,
   nextTick,
   onMounted,
-  unref,
   defineComponent,
+  type PropType,
   type ExtractPropTypes,
 } from 'vue';
 
@@ -38,7 +38,6 @@ export const couponListProps = {
   currency: makeStringProp('¥'),
   showCount: truthProp,
   emptyImage: String,
-  chosenCoupon: [Number, Array],
   enabledTitle: String,
   disabledTitle: String,
   disabledCoupons: makeArrayProp<CouponInfo>(),
@@ -51,6 +50,10 @@ export const couponListProps = {
   displayedCouponIndex: makeNumberProp(-1),
   exchangeButtonLoading: Boolean,
   exchangeButtonDisabled: Boolean,
+  chosenCoupon: {
+    type: [Number, Array] as PropType<number | number[]>,
+    default: -1,
+  },
 };
 
 export type CouponListProps = ExtractPropTypes<typeof couponListProps>;
@@ -134,21 +137,18 @@ export default defineComponent({
     };
 
     const renderCouponTab = () => {
-      const { coupons } = props;
+      const { coupons, chosenCoupon } = props;
       const count = props.showCount ? ` (${coupons.length})` : '';
       const title = (props.enabledTitle || t('enable')) + count;
 
-      const getChosenCoupon = (
-        chosenCoupon: Array<any> = [],
+      const updateChosenCoupon = (
+        currentValues: number[] = [],
         value: number = 0,
-      ): Array<any> => {
-        const unrefChosenCoupon = unref(chosenCoupon);
-        const index = unrefChosenCoupon.indexOf(value);
-        if (index === -1) {
-          return [...unrefChosenCoupon, value];
+      ) => {
+        if (currentValues.includes(value)) {
+          return currentValues.filter((item) => item !== value);
         }
-        unrefChosenCoupon.splice(index, 1);
-        return [...unrefChosenCoupon];
+        return [...currentValues, value];
       };
 
       return (
@@ -163,16 +163,16 @@ export default defineComponent({
                 ref={setCouponRefs(index)}
                 coupon={coupon}
                 chosen={
-                  Array.isArray(props.chosenCoupon)
-                    ? props.chosenCoupon.includes(index)
-                    : index === props.chosenCoupon
+                  Array.isArray(chosenCoupon)
+                    ? chosenCoupon.includes(index)
+                    : index === chosenCoupon
                 }
                 currency={props.currency}
                 onClick={() =>
                   emit(
                     'change',
-                    Array.isArray(props.chosenCoupon)
-                      ? getChosenCoupon(props.chosenCoupon, index)
+                    Array.isArray(chosenCoupon)
+                      ? updateChosenCoupon(chosenCoupon, index)
                       : index,
                   )
                 }

diff --git a/packages/vant/src/coupon-list/README.md b/packages/vant/src/coupon-list/README.md
@@ -90,21 +90,21 @@ export default {
 
 ### CouponCell Props
 
-| Attribute     | Description                  | Type               | Default  |
-| ------------- | ---------------------------- | ------------------ | -------- |
-| title         | Cell title                   | _string_           | `Coupon` |
-| chosen-coupon | Index of chosen coupon       | _number \| string_ | `-1`     |
-| coupons       | Coupon list                  | _Coupon[]_         | `[]`     |
-| editable      | Cell editable                | _boolean_          | `true`   |
-| border        | Whether to show inner border | _boolean_          | `true`   |
-| currency      | Currency symbol              | _string_           | `¥`      |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| title | Cell title | _string_ | `Coupon` |
+| chosen-coupon | Index of chosen coupon | _number \| number[]_ | `-1` |
+| coupons | Coupon list | _Coupon[]_ | `[]` |
+| editable | Cell editable | _boolean_ | `true` |
+| border | Whether to show inner border | _boolean_ | `true` |
+| currency | Currency symbol | _string_ | `¥` |
 
 ### CouponList Props
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
 | v-model | Current exchange code | _string_ | - |
-| chosen-coupon | Index of chosen coupon,support multiple selection(type `[]`) | _number\|number[]_ | `-1` |
+| chosen-coupon | Index of chosen coupons, support multiple selection (type is `[]`) | _number \| number[]_ | `-1` |
 | coupons | Coupon list | _CouponInfo[]_ | `[]` |
 | disabled-coupons | Disabled coupon list | _CouponInfo[]_ | `[]` |
 | enabled-title | Title of coupon list | _string_ | `Available` |

diff --git a/packages/vant/src/coupon-list/README.zh-CN.md b/packages/vant/src/coupon-list/README.zh-CN.md
@@ -90,21 +90,21 @@ export default {
 
 ### CouponCell Props
 
-| 参数          | 说明                 | 类型               | 默认值   |
-| ------------- | -------------------- | ------------------ | -------- |
-| title         | 单元格标题           | _string_           | `优惠券` |
-| chosen-coupon | 当前选中优惠券的索引 | _number \| string_ | `-1`     |
-| coupons       | 可用优惠券列表       | _Coupon[]_         | `[]`     |
-| editable      | 能否切换优惠券       | _boolean_          | `true`   |
-| border        | 是否显示内边框       | _boolean_          | `true`   |
-| currency      | 货币符号             | _string_           | `¥`      |
+| 参数          | 说明                 | 类型                 | 默认值   |
+| ------------- | -------------------- | -------------------- | -------- |
+| title         | 单元格标题           | _string_             | `优惠券` |
+| chosen-coupon | 当前选中优惠券的索引 | _number \| number[]_ | `-1`     |
+| coupons       | 可用优惠券列表       | _Coupon[]_           | `[]`     |
+| editable      | 能否切换优惠券       | _boolean_            | `true`   |
+| border        | 是否显示内边框       | _boolean_            | `true`   |
+| currency      | 货币符号             | _string_             | `¥`      |
 
 ### CouponList Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | v-model:code | 当前输入的兑换码 | _string_ | - |
-| chosen-coupon | 当前选中优惠券的索引,支持多选（类型为`[]`） | _number\|number[]_ | `-1` |
+| chosen-coupon | 当前选中优惠券的索引,支持多选（类型为 `[]`） | _number \| number[]_ | `-1` |
 | coupons | 可用优惠券列表 | _CouponInfo[]_ | `[]` |
 | disabled-coupons | 不可用优惠券列表 | _CouponInfo[]_ | `[]` |
 | enabled-title | 可用优惠券列表标题 | _string_ | `可使用优惠券` |

diff --git a/packages/vant/src/coupon-list/demo/index.vue b/packages/vant/src/coupon-list/demo/index.vue
@@ -3,7 +3,7 @@ import VanCouponCell from '../../coupon-cell';
 import VanPopup from '../../popup';
 import VanButton from '../../button';
 import VanCouponList from '..';
-import { ref, computed, unref } from 'vue';
+import { ref, computed } from 'vue';
 import { useTranslate } from '../../../docs/site';
 import { CouponInfo } from '../../coupon';
 import { showToast } from '../../toast';
@@ -16,6 +16,7 @@ const t = useTranslate({
       description: '描述信息',
     },
     exchange: '兑换成功',
+    checkboxUsage: '多选用法',
   },
   'en-US': {
     coupon: {
@@ -24,6 +25,7 @@ const t = useTranslate({
       description: 'Description',
     },
     exchange: 'Success',
+    checkboxUsage: 'Checkbox Usage',
   },
 });
 
@@ -33,8 +35,8 @@ const getRandomId = (max = 999999) =>
 const showList = ref(false);
 const showListArray = ref(false);
 const chosenCoupon = ref(-1);
-const chosenCouponArray = ref([]);
-const chosenCouponArrayResult = ref([]);
+const chosenCouponArray = ref<number[]>([]);
+const chosenCouponArrayResult = ref<number[]>([]);
 const exchangedCoupons = ref<CouponInfo[]>([]);
 
 const coupon = computed(() => ({
@@ -88,13 +90,13 @@ const onChange = (index: number) => {
   chosenCoupon.value = index;
 };
 
-const onChangeArray = (chosenCoupon: []) => {
+const onChangeArray = (chosenCoupon: number[]) => {
   chosenCouponArray.value = chosenCoupon;
 };
 
 const onSubmit = () => {
   showListArray.value = false;
-  chosenCouponArrayResult.value = unref(chosenCouponArray);
+  chosenCouponArrayResult.value = chosenCouponArray.value;
 };
 
 const onExchange = () => {