feat(CouponCell): chosen-coupon can be string

src/coupon-cell/index.tsx

@@ -16,14 +16,14 @@ export type CouponCellProps = {
   coupons: Coupon[];
   currency: string;
   editable: boolean;
-  chosenCoupon: number;
+  chosenCoupon: number | string;
 };
 
 const [createComponent, bem, t] = createNamespace('coupon-cell');
 
 function formatValue(props: CouponCellProps) {
   const { coupons, chosenCoupon, currency } = props;
-  const coupon = coupons[chosenCoupon];
+  const coupon = coupons[+chosenCoupon];
 
   if (coupon) {
     const value = coupon.value || coupon.denominations || 0;
@@ -39,7 +39,7 @@ function CouponCell(
   slots: DefaultSlots,
   ctx: RenderContext<CouponCellProps>
 ) {
-  const valueClass = props.coupons[props.chosenCoupon]
+  const valueClass = props.coupons[+props.chosenCoupon]
     ? 'van-coupon-cell--selected'
     : '';
   const value = formatValue(props);
@@ -80,7 +80,7 @@ CouponCell.props = {
     default: true,
   },
   chosenCoupon: {
-    type: Number,
+    type: [Number, String],
     default: -1,
   },
 };

src/coupon-list/README.md

@@ -78,7 +78,7 @@ export default {
 | Attribute | Description | Type | Default |
 |------|------|------|------|
 | title | Cell title | *string* | `Coupon` |
-| chosen-coupon | Index of chosen coupon | *number* | `-1` |
+| chosen-coupon | Index of chosen coupon | *number \| string* | `-1` |
 | coupons | Coupon list | *Coupon[]* | `[]` |
 | editable | Cell editable | *boolean* | `true` |
 | border | Whether to show innner border | *boolean* | `true` |

src/coupon-list/README.zh-CN.md

@@ -78,7 +78,7 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 |
 |------|------|------|------|
 | title | 单元格标题 | *string* | `优惠券` |
-| chosen-coupon | 当前选中优惠券的索引 | *number* | `-1` |
+| chosen-coupon | 当前选中优惠券的索引 | *number \| string* | `-1` |
 | coupons | 可用优惠券列表 | *Coupon[]* | `[]` |
 | editable | 能否切换优惠券 | *boolean* | `true` |
 | border | 是否显示内边框 | *boolean* | `true` |