feat: migrate CouponList component

components.js

@@ -73,4 +73,7 @@ module.exports = [
   'contact-card',
   'contact-edit',
   'contact-list',
+  'coupon',
+  'coupon-list',
+  'coupon-cell',
 ];

docs/markdown/changelog-v3.zh-CN.md

@@ -66,6 +66,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 其他改动：
 
 - Circle: `v-model` 重命名为 `v-model:currentRate`
+- CouponList: `v-model` 重命名为 `v-model:code`
 - List: `v-model` 重命名为 `v-model:loading`，`error.sync` 重命名为 `v-model:error`
 - Tabs: `v-model` 重命名为 `v-model:active`
 - TreeSelect: `active-id.sync` 重命名为 `v-model:active-id`

src/coupon-cell/index.tsx

@@ -1,88 +0,0 @@
-// Utils
-import { createNamespace } from '../utils';
-import { inherit } from '../utils/functional';
-
-// Components
-import Cell from '../cell';
-
-// Types
-import { CreateElement, RenderContext } from 'vue/types';
-import { DefaultSlots } from '../utils/types';
-import { Coupon } from '../coupon/shared';
-
-export type CouponCellProps = {
-  title?: string;
-  border: boolean;
-  coupons: Coupon[];
-  currency: string;
-  editable: boolean;
-  chosenCoupon: number | string;
-};
-
-const [createComponent, bem, t] = createNamespace('coupon-cell');
-
-function formatValue(props: CouponCellProps) {
-  const { coupons, chosenCoupon, currency } = props;
-  const coupon = coupons[+chosenCoupon];
-
-  if (coupon) {
-    const value = coupon.value || coupon.denominations || 0;
-    return `-${currency} ${(value / 100).toFixed(2)}`;
-  }
-
-  return coupons.length === 0 ? t('tips') : t('count', coupons.length);
-}
-
-function CouponCell(
-  h: CreateElement,
-  props: CouponCellProps,
-  slots: DefaultSlots,
-  ctx: RenderContext<CouponCellProps>
-) {
-  const valueClass = props.coupons[+props.chosenCoupon]
-    ? 'van-coupon-cell--selected'
-    : '';
-  const value = formatValue(props);
-
-  return (
-    <Cell
-      class={bem()}
-      value={value}
-      title={props.title || t('title')}
-      border={props.border}
-      isLink={props.editable}
-      valueClass={valueClass}
-      {...inherit(ctx, true)}
-    />
-  );
-}
-
-CouponCell.model = {
-  prop: 'chosenCoupon',
-};
-
-CouponCell.props = {
-  title: String,
-  coupons: {
-    type: Array,
-    default: () => [],
-  },
-  currency: {
-    type: String,
-    default: '¥',
-  },
-  border: {
-    type: Boolean,
-    default: true,
-  },
-  editable: {
-    type: Boolean,
-    default: true,
-  },
-  chosenCoupon: {
-    type: [Number, String],
-    default: -1,
-  },
-};
-
-export default createComponent<CouponCellProps>(CouponCell);

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

@@ -88,7 +88,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| v-model | 当前输入的兑换码 | _string_ | - |
+| v-model:code | 当前输入的兑换码 | _string_ | - |
 | chosen-coupon | 当前选中优惠券的索引 | _number_ | `-1` |
 | coupons | 可用优惠券列表 | _Coupon[]_ | `[]` |
 | disabled-coupons | 不可用优惠券列表 | _Coupon[]_ | `[]` |

src/coupon-list/demo/index.vue

@@ -6,9 +6,8 @@
         :chosen-coupon="chosenCoupon"
         @click="showList = true"
       />
-
       <van-popup
-        v-model="showList"
+        v-model:show="showList"
         round
         position="bottom"
         style="height: 90%; padding-top: 4px;"

src/coupon-list/index.js

@@ -12,16 +12,12 @@ const [createComponent, bem, t] = createNamespace('coupon-list');
 const EMPTY_IMAGE = 'https://img.yzcdn.cn/vant/coupon-empty.png';
 
 export default createComponent({
-  model: {
-    prop: 'code',
-  },
-
   props: {
     code: String,
-    closeButtonText: String,
-    inputPlaceholder: String,
     enabledTitle: String,
     disabledTitle: String,
+    closeButtonText: String,
+    inputPlaceholder: String,
     exchangeButtonText: String,
     exchangeButtonLoading: Boolean,
     exchangeButtonDisabled: Boolean,
@@ -67,6 +63,8 @@ export default createComponent({
     },
   },
 
+  emits: ['change', 'exchange', 'update:code'],
+
   data() {
     return {
       tab: 0,
@@ -98,7 +96,7 @@ export default createComponent({
     },
 
     currentCode(code) {
-      this.$emit('input', code);
+      this.$emit('update:code', code);
     },
 
     displayedCouponIndex: 'scrollToShowCoupon',
@@ -194,9 +192,9 @@ export default createComponent({
               ref="card"
               key={coupon.id}
               coupon={coupon}
-              currency={this.currency}
               chosen={index === this.chosenCoupon}
-              nativeOnClick={onChange(index)}
+              currency={this.currency}
+              onClick={onChange(index)}
             />
           ))}
           {!coupons.length && this.genEmpty()}
@@ -234,8 +232,8 @@ export default createComponent({
           <Button
             vShow={this.showCloseButton}
             round
-            type="danger"
             block
+            type="danger"
             class={bem('close')}
             text={this.closeButtonText || t('close')}
             onClick={onChange(-1)}

src/coupon/index.js

@@ -83,8 +83,8 @@ export default createComponent({
             {!this.disabled && (
               <Checkbox
                 size={18}
-                value={this.chosen}
                 class={bem('corner')}
+                modelValue={this.chosen}
                 checkedColor={RED}
               />
             )}

vant.config.js

@@ -343,10 +343,10 @@ module.exports = {
                 path: 'contact-card',
                 title: 'Contact 联系人',
               },
-              // {
-              //   path: 'coupon-list',
-              //   title: 'Coupon 优惠券',
-              // },
+              {
+                path: 'coupon-list',
+                title: 'Coupon 优惠券',
+              },
               // {
               //   path: 'goods-action',
               //   title: 'GoodsAction 商品导航',
@@ -677,10 +677,10 @@ module.exports = {
                 path: 'contact-card',
                 title: 'Contact',
               },
-              // {
-              //   path: 'coupon-list',
-              //   title: 'Coupon',
-              // },
+              {
+                path: 'coupon-list',
+                title: 'Coupon',
+              },
               // {
               //   path: 'goods-action',
               //   title: 'GoodsAction',