0
# Business Components
1

2
Specialized components for e-commerce and business applications including address management, coupons, and product cards.
3

4
## Capabilities
5

6
### AddressEdit
7

8
Address editing component for managing delivery addresses.
9

10
```typescript { .api }
11
import { AddressEdit } from 'vant';
12

13
interface AddressEditProps {
14
  /** Address info */
15
  addressInfo?: AddressEditInfo;
16
  /** Area list */
17
  areaList?: Record<string, any>;
18
  /** Area columns placeholder */
19
  areaColumnsPlaceholder?: string[];
20
  /** Show area */
21
  showArea?: boolean;
22
  /** Show detail */
23
  showDetail?: boolean;
24
  /** Show postal */
25
  showPostal?: boolean;
26
  /** Detail rows */
27
  detailRows?: number | string;
28
  /** Detail maxlength */
29
  detailMaxlength?: number | string;
30
  /** Show set default */
31
  showSetDefault?: boolean;
32
  /** Show search result */
33
  showSearchResult?: boolean;
34
  /** Tel maxlength */
35
  telMaxlength?: number | string;
36
  /** Disable area */
37
  disableArea?: boolean;
38
  /** Save button text */
39
  saveButtonText?: string;
40
  /** Delete button text */
41
  deleteButtonText?: string;
42
  /** Validator */
43
  validator?: (key: string, value: string) => string | undefined;
44
}
45

46
interface AddressEditInfo {
47
  id?: string | number;
48
  name?: string;
49
  tel?: string;
50
  province?: string;
51
  city?: string;
52
  county?: string;
53
  areaCode?: string;
54
  postalCode?: string;
55
  addressDetail?: string;
56
  isDefault?: boolean;
57
}
58
```
59

60
### AddressList
61

62
Address list component for selecting delivery addresses.
63

64
```typescript { .api }
65
import { AddressList } from 'vant';
66

67
interface AddressListProps {
68
  /** Address list */
69
  list?: AddressListItem[];
70
  /** Disabled list */
71
  disabledList?: AddressListItem[];
72
  /** Disabled text */
73
  disabledText?: string;
74
  /** Switchable */
75
  switchable?: boolean;
76
  /** Show add button */
77
  showAddButton?: boolean;
78
  /** Add button text */
79
  addButtonText?: string;
80
  /** Default tag text */
81
  defaultTagText?: string;
82
  /** Right icon */
83
  rightIcon?: string;
84
}
85

86
interface AddressListItem {
87
  id?: string | number;
88
  name?: string;
89
  tel?: string;
90
  address?: string;
91
  isDefault?: boolean;
92
}
93
```
94

95
### Area
96

97
Area picker component for selecting provinces, cities, and districts.
98

99
```typescript { .api }
100
import { Area } from 'vant';
101

102
interface AreaProps {
103
  /** Selected value */
104
  modelValue?: string;
105
  /** Area list */
106
  areaList?: Record<string, any>;
107
  /** Columns placeholder */
108
  columnsPlaceholder?: string[];
109
  /** Title */
110
  title?: string;
111
  /** Confirm button text */
112
  confirmButtonText?: string;
113
  /** Cancel button text */
114
  cancelButtonText?: string;
115
  /** Columns number */
116
  columnsNum?: number | string;
117
}
118
```
119

120
### Card
121

122
Product card component for displaying product information.
123

124
```typescript { .api }
125
import { Card } from 'vant';
126

127
interface CardProps {
128
  /** Product thumb */
129
  thumb?: string;
130
  /** Product title */
131
  title?: string;
132
  /** Product description */
133
  desc?: string;
134
  /** Product tag */
135
  tag?: string;
136
  /** Product number */
137
  num?: number | string;
138
  /** Product price */
139
  price?: number | string;
140
  /** Origin price */
141
  originPrice?: number | string;
142
  /** Centered */
143
  centered?: boolean;
144
  /** Currency */
145
  currency?: string;
146
  /** Thumb link */
147
  thumbLink?: string;
148
  /** Lazy load */
149
  lazyLoad?: boolean;
150
}
151
```
152

153
### ContactCard
154

155
Contact card component for displaying contact information.
156

157
```typescript { .api }
158
import { ContactCard } from 'vant';
159

160
interface ContactCardProps {
161
  /** Contact type */
162
  type?: 'add' | 'edit';
163
  /** Contact name */
164
  name?: string;
165
  /** Contact tel */
166
  tel?: string;
167
  /** Add text */
168
  addText?: string;
169
}
170
```
171

172
### ContactEdit
173

174
Contact editing component for managing contact information.
175

176
```typescript { .api }
177
import { ContactEdit } from 'vant';
178

179
interface ContactEditProps {
180
  /** Contact info */
181
  contactInfo?: ContactEditInfo;
182
  /** Tel maxlength */
183
  telMaxlength?: number | string;
184
  /** Show set default */
185
  showSetDefault?: boolean;
186
  /** Set default label */
187
  setDefaultLabel?: string;
188
  /** Save button text */
189
  saveButtonText?: string;
190
  /** Delete button text */
191
  deleteButtonText?: string;
192
  /** Validator */
193
  validator?: (key: string, value: string) => string | undefined;
194
}
195

196
interface ContactEditInfo {
197
  id?: string | number;
198
  name?: string;
199
  tel?: string;
200
  isDefault?: boolean;
201
}
202
```
203

204
### ContactList
205

206
Contact list component for managing multiple contacts.
207

208
```typescript { .api }
209
import { ContactList } from 'vant';
210

211
interface ContactListProps {
212
  /** Contact list */
213
  list?: ContactListItem[];
214
  /** Show add button */
215
  showAddButton?: boolean;
216
  /** Add button text */
217
  addButtonText?: string;
218
  /** Default tag text */
219
  defaultTagText?: string;
220
}
221

222
interface ContactListItem {
223
  id?: string | number;
224
  name?: string;
225
  tel?: string;
226
  isDefault?: boolean;
227
}
228
```
229

230
### Coupon & CouponCell & CouponList
231

232
Coupon components for managing promotional offers.
233

234
```typescript { .api }
235
import { Coupon, CouponCell, CouponList } from 'vant';
236

237
interface CouponProps {
238
  /** Coupon info */
239
  coupon?: CouponInfo;
240
  /** Chosen */
241
  chosen?: boolean;
242
  /** Disabled */
243
  disabled?: boolean;
244
  /** Currency */
245
  currency?: string;
246
}
247

248
interface CouponCellProps {
249
  /** Title */
250
  title?: string;
251
  /** Chosen coupon */
252
  chosenCoupon?: number | string;
253
  /** Coupons */
254
  coupons?: CouponInfo[];
255
  /** Editable */
256
  editable?: boolean;
257
  /** Border */
258
  border?: boolean;
259
  /** Currency */
260
  currency?: string;
261
}
262

263
interface CouponListProps {
264
  /** Chosen coupon */
265
  chosenCoupon?: number | string;
266
  /** Coupons */
267
  coupons?: CouponInfo[];
268
  /** Disabled coupons */
269
  disabledCoupons?: CouponInfo[];
270
  /** Enable empty coupon */
271
  enabledEmptyCoupon?: boolean;
272
  /** Exchange button loading */
273
  exchangeButtonLoading?: boolean;
274
  /** Exchange button disabled */
275
  exchangeButtonDisabled?: boolean;
276
  /** Exchange min length */
277
  exchangeMinLength?: number;
278
  /** Currency */
279
  currency?: string;
280
  /** Empty image */
281
  emptyImage?: string;
282
  /** Show exchange bar */
283
  showExchangeBar?: boolean;
284
  /** Show close button */
285
  showCloseButton?: boolean;
286
  /** Close button text */
287
  closeButtonText?: string;
288
  /** Input placeholder */
289
  inputPlaceholder?: string;
290
  /** Exchange button text */
291
  exchangeButtonText?: string;
292
  /** Display coupon code */
293
  displayedCouponIndex?: number;
294
  /** Show count */
295
  showCount?: boolean;
296
}
297

298
interface CouponInfo {
299
  id?: string | number;
300
  name?: string;
301
  condition?: string;
302
  startAt?: number;
303
  endAt?: number;
304
  description?: string;
305
  reason?: string;
306
  value?: number;
307
  valueDesc?: string;
308
  unitDesc?: string;
309
}
310
```
311

312
### SubmitBar
313

314
Submit bar component for order submission and payment.
315

316
```typescript { .api }
317
import { SubmitBar } from 'vant';
318

319
interface SubmitBarProps {
320
  /** Tip */
321
  tip?: string;
322
  /** Tip icon */
323
  tipIcon?: string;
324
  /** Price */
325
  price?: number | string;
326
  /** Decimal length */
327
  decimalLength?: number | string;
328
  /** Label */
329
  label?: string;
330
  /** Suffix label */
331
  suffixLabel?: string;
332
  /** Text align */
333
  textAlign?: 'left' | 'right';
334
  /** Button text */
335
  buttonText?: string;
336
  /** Button type */
337
  buttonType?: 'default' | 'primary' | 'info' | 'warning' | 'danger';
338
  /** Button color */
339
  buttonColor?: string;
340
  /** Loading */
341
  loading?: boolean;
342
  /** Disabled */
343
  disabled?: boolean;
344
  /** Currency */
345
  currency?: string;
346
  /** Safe area inset bottom */
347
  safeAreaInsetBottom?: boolean;
348
  /** Placeholder */
349
  placeholder?: boolean;
350
}
351
```
352

353
**Usage Example:**
354

355
```vue
356
<template>
357
  <div>
358
    <!-- Address management -->
359
    <van-address-list
360
      v-model="chosenAddressId"
361
      :list="addressList"
362
      :disabled-list="disabledAddressList"
363
      disabled-text="The following address is out of range"
364
      default-tag-text="Default"
365
      @add="onAdd"
366
      @edit="onEdit"
367
    />
368
    
369
    <!-- Product card display -->
370
    <van-card
371
      num="2"
372
      price="2.00"
373
      title="Product Title"
374
      desc="Product Description"
375
      thumb="https://example.com/product.jpg"
376
    />
377
    
378
    <!-- Coupon selection -->
379
    <van-coupon-cell
380
      :coupons="coupons"
381
      :chosen-coupon="chosenCoupon"
382
      @click="showCouponList = true"
383
    />
384
    
385
    <!-- Submit bar for checkout -->
386
    <van-submit-bar
387
      :price="3050"
388
      button-text="Submit Order"
389
      @submit="onSubmit"
390
    />
391
    
392
    <!-- Coupon list popup -->
393
    <van-popup v-model:show="showCouponList" position="bottom">
394
      <van-coupon-list
395
        :coupons="coupons"
396
        :chosen-coupon="chosenCoupon"
397
        :disabled-coupons="disabledCoupons"
398
        @change="onChange"
399
        @exchange="onExchange"
400
      />
401
    </van-popup>
402
  </div>
403
</template>
404

405
<script setup lang="ts">
406
import { ref } from 'vue';
407
import { 
408
  AddressList, 
409
  Card, 
410
  CouponCell, 
411
  CouponList, 
412
  SubmitBar, 
413
  Popup 
414
} from 'vant';
415

416
const chosenAddressId = ref('1');
417
const chosenCoupon = ref(0);
418
const showCouponList = ref(false);
419

420
const addressList = ref([
421
  {
422
    id: '1',
423
    name: 'John Snow',
424
    tel: '13000000000',
425
    address: 'Somewhere',
426
    isDefault: true,
427
  },
428
]);
429

430
const coupons = ref([
431
  {
432
    id: 1,
433
    condition: 'No threshold',
434
    reason: '',
435
    value: 150,
436
    name: 'Coupon name',
437
    startAt: 1661270400,
438
    endAt: 1661270400,
439
    valueDesc: '1.5',
440
    unitDesc: '元',
441
  },
442
]);
443

444
const onAdd = () => console.log('Add address');
445
const onEdit = (item: any, index: number) => console.log('Edit address', item, index);
446
const onSubmit = () => console.log('Submit order');
447
const onChange = (index: number) => chosenCoupon.value = index;
448
const onExchange = (code: string) => console.log('Exchange coupon', code);
449
</script>
450
```