diff --git a/packages/vant/docs/site/use-translate.ts b/packages/vant/docs/site/use-translate.ts index c7afffa00a0..164beef4fe5 100644 --- 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 index ace029421d9..4f51e8e10d2 100644 --- 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(), currency: makeStringProp('¥'), chosenCoupon: { - type: [Number, Array], + type: [Number, Array] as PropType, default: -1, }, }; export type CouponCellProps = ExtractPropTypes; -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 index 28a2971d6e0..26cf5dc8f0d 100644 --- 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(), @@ -51,6 +50,10 @@ export const couponListProps = { displayedCouponIndex: makeNumberProp(-1), exchangeButtonLoading: Boolean, exchangeButtonDisabled: Boolean, + chosenCoupon: { + type: [Number, Array] as PropType, + default: -1, + }, }; export type CouponListProps = ExtractPropTypes; @@ -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 = [], + const updateChosenCoupon = ( + currentValues: number[] = [], value: number = 0, - ): Array => { - 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 index dffdc229504..552cb108cfa 100644 --- 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 index d4abd8d7842..0452431d4ba 100644 --- 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 index 27ba8caf6f4..b83a414a91e 100644 --- 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([]); +const chosenCouponArrayResult = ref([]); const exchangedCoupons = ref([]); 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 = () => {