Business Components

import { AddressEdit } from 'vant';

interface AddressEditProps {
  /** Address info */
  addressInfo?: AddressEditInfo;
  /** Area list */
  areaList?: Record<string, any>;
  /** Area columns placeholder */
  areaColumnsPlaceholder?: string[];
  /** Show area */
  showArea?: boolean;
  /** Show detail */
  showDetail?: boolean;
  /** Show postal */
  showPostal?: boolean;
  /** Detail rows */
  detailRows?: number | string;
  /** Detail maxlength */
  detailMaxlength?: number | string;
  /** Show set default */
  showSetDefault?: boolean;
  /** Show search result */
  showSearchResult?: boolean;
  /** Tel maxlength */
  telMaxlength?: number | string;
  /** Disable area */
  disableArea?: boolean;
  /** Save button text */
  saveButtonText?: string;
  /** Delete button text */
  deleteButtonText?: string;
  /** Validator */
  validator?: (key: string, value: string) => string | undefined;
}

interface AddressEditInfo {
  id?: string | number;
  name?: string;
  tel?: string;
  province?: string;
  city?: string;
  county?: string;
  areaCode?: string;
  postalCode?: string;
  addressDetail?: string;
  isDefault?: boolean;
}

import { AddressList } from 'vant';

interface AddressListProps {
  /** Address list */
  list?: AddressListItem[];
  /** Disabled list */
  disabledList?: AddressListItem[];
  /** Disabled text */
  disabledText?: string;
  /** Switchable */
  switchable?: boolean;
  /** Show add button */
  showAddButton?: boolean;
  /** Add button text */
  addButtonText?: string;
  /** Default tag text */
  defaultTagText?: string;
  /** Right icon */
  rightIcon?: string;
}

interface AddressListItem {
  id?: string | number;
  name?: string;
  tel?: string;
  address?: string;
  isDefault?: boolean;
}

import { Area } from 'vant';

interface AreaProps {
  /** Selected value */
  modelValue?: string;
  /** Area list */
  areaList?: Record<string, any>;
  /** Columns placeholder */
  columnsPlaceholder?: string[];
  /** Title */
  title?: string;
  /** Confirm button text */
  confirmButtonText?: string;
  /** Cancel button text */
  cancelButtonText?: string;
  /** Columns number */
  columnsNum?: number | string;
}

import { Card } from 'vant';

interface CardProps {
  /** Product thumb */
  thumb?: string;
  /** Product title */
  title?: string;
  /** Product description */
  desc?: string;
  /** Product tag */
  tag?: string;
  /** Product number */
  num?: number | string;
  /** Product price */
  price?: number | string;
  /** Origin price */
  originPrice?: number | string;
  /** Centered */
  centered?: boolean;
  /** Currency */
  currency?: string;
  /** Thumb link */
  thumbLink?: string;
  /** Lazy load */
  lazyLoad?: boolean;
}

import { ContactCard } from 'vant';

interface ContactCardProps {
  /** Contact type */
  type?: 'add' | 'edit';
  /** Contact name */
  name?: string;
  /** Contact tel */
  tel?: string;
  /** Add text */
  addText?: string;
}

import { ContactEdit } from 'vant';

interface ContactEditProps {
  /** Contact info */
  contactInfo?: ContactEditInfo;
  /** Tel maxlength */
  telMaxlength?: number | string;
  /** Show set default */
  showSetDefault?: boolean;
  /** Set default label */
  setDefaultLabel?: string;
  /** Save button text */
  saveButtonText?: string;
  /** Delete button text */
  deleteButtonText?: string;
  /** Validator */
  validator?: (key: string, value: string) => string | undefined;
}

interface ContactEditInfo {
  id?: string | number;
  name?: string;
  tel?: string;
  isDefault?: boolean;
}

import { ContactList } from 'vant';

interface ContactListProps {
  /** Contact list */
  list?: ContactListItem[];
  /** Show add button */
  showAddButton?: boolean;
  /** Add button text */
  addButtonText?: string;
  /** Default tag text */
  defaultTagText?: string;
}

interface ContactListItem {
  id?: string | number;
  name?: string;
  tel?: string;
  isDefault?: boolean;
}

import { Coupon, CouponCell, CouponList } from 'vant';

interface CouponProps {
  /** Coupon info */
  coupon?: CouponInfo;
  /** Chosen */
  chosen?: boolean;
  /** Disabled */
  disabled?: boolean;
  /** Currency */
  currency?: string;
}

interface CouponCellProps {
  /** Title */
  title?: string;
  /** Chosen coupon */
  chosenCoupon?: number | string;
  /** Coupons */
  coupons?: CouponInfo[];
  /** Editable */
  editable?: boolean;
  /** Border */
  border?: boolean;
  /** Currency */
  currency?: string;
}

interface CouponListProps {
  /** Chosen coupon */
  chosenCoupon?: number | string;
  /** Coupons */
  coupons?: CouponInfo[];
  /** Disabled coupons */
  disabledCoupons?: CouponInfo[];
  /** Enable empty coupon */
  enabledEmptyCoupon?: boolean;
  /** Exchange button loading */
  exchangeButtonLoading?: boolean;
  /** Exchange button disabled */
  exchangeButtonDisabled?: boolean;
  /** Exchange min length */
  exchangeMinLength?: number;
  /** Currency */
  currency?: string;
  /** Empty image */
  emptyImage?: string;
  /** Show exchange bar */
  showExchangeBar?: boolean;
  /** Show close button */
  showCloseButton?: boolean;
  /** Close button text */
  closeButtonText?: string;
  /** Input placeholder */
  inputPlaceholder?: string;
  /** Exchange button text */
  exchangeButtonText?: string;
  /** Display coupon code */
  displayedCouponIndex?: number;
  /** Show count */
  showCount?: boolean;
}

interface CouponInfo {
  id?: string | number;
  name?: string;
  condition?: string;
  startAt?: number;
  endAt?: number;
  description?: string;
  reason?: string;
  value?: number;
  valueDesc?: string;
  unitDesc?: string;
}

import { SubmitBar } from 'vant';

interface SubmitBarProps {
  /** Tip */
  tip?: string;
  /** Tip icon */
  tipIcon?: string;
  /** Price */
  price?: number | string;
  /** Decimal length */
  decimalLength?: number | string;
  /** Label */
  label?: string;
  /** Suffix label */
  suffixLabel?: string;
  /** Text align */
  textAlign?: 'left' | 'right';
  /** Button text */
  buttonText?: string;
  /** Button type */
  buttonType?: 'default' | 'primary' | 'info' | 'warning' | 'danger';
  /** Button color */
  buttonColor?: string;
  /** Loading */
  loading?: boolean;
  /** Disabled */
  disabled?: boolean;
  /** Currency */
  currency?: string;
  /** Safe area inset bottom */
  safeAreaInsetBottom?: boolean;
  /** Placeholder */
  placeholder?: boolean;
}

<template>
  <div>
    <!-- Address management -->
    <van-address-list
      v-model="chosenAddressId"
      :list="addressList"
      :disabled-list="disabledAddressList"
      disabled-text="The following address is out of range"
      default-tag-text="Default"
      @add="onAdd"
      @edit="onEdit"
    />
    
    <!-- Product card display -->
    <van-card
      num="2"
      price="2.00"
      title="Product Title"
      desc="Product Description"
      thumb="https://example.com/product.jpg"
    />
    
    <!-- Coupon selection -->
    <van-coupon-cell
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      @click="showCouponList = true"
    />
    
    <!-- Submit bar for checkout -->
    <van-submit-bar
      :price="3050"
      button-text="Submit Order"
      @submit="onSubmit"
    />
    
    <!-- Coupon list popup -->
    <van-popup v-model:show="showCouponList" position="bottom">
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
      />
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { 
  AddressList, 
  Card, 
  CouponCell, 
  CouponList, 
  SubmitBar, 
  Popup 
} from 'vant';

const chosenAddressId = ref('1');
const chosenCoupon = ref(0);
const showCouponList = ref(false);

const addressList = ref([
  {
    id: '1',
    name: 'John Snow',
    tel: '13000000000',
    address: 'Somewhere',
    isDefault: true,
  },
]);

const coupons = ref([
  {
    id: 1,
    condition: 'No threshold',
    reason: '',
    value: 150,
    name: 'Coupon name',
    startAt: 1661270400,
    endAt: 1661270400,
    valueDesc: '1.5',
    unitDesc: '元',
  },
]);

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