/*! For license information please see 8443.7fc6b315.js.LICENSE.txt */
(self.webpackChunk=self.webpackChunk||[]).push([["8443"],{24433:function(n,t,s){"use strict";s.r(t);var d=s("80681");let a=["innerHTML"];t.default={setup:()=>({html:""}),render:()=>((0,d.wg)(),(0,d.iD)("div",{class:"van-doc-markdown-body",innerHTML:'<h1>Coupon</h1>\n<div class="van-doc-card"><h3 id="intro" tabindex="-1">Intro</h3>\n<p>Used for redemption and selection of coupons.</p>\n</div><div class="van-doc-card"><h3 id="install" tabindex="-1">Install</h3>\n<p>Register component globally via <code>app.use</code>, refer to <a href="#/en-US/advanced-usage#zu-jian-zhu-ce" target="_blank">Component Registration</a> for more registration ways.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>;\n<span class="hljs-keyword">import</span> { <span class="hljs-title class_">CouponCell</span>, <span class="hljs-title class_">CouponList</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vant&#x27;</span>;\n\n<span class="hljs-keyword">const</span> app = <span class="hljs-title function_">createApp</span>();\napp.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">CouponCell</span>);\napp.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">CouponList</span>);\n</code></pre>\n</div><h2 id="usage" tabindex="-1">Usage</h2>\n<div class="van-doc-card"><h3 id="basic-usage" tabindex="-1">Basic Usage</h3>\n<pre><code class="language-html"><span class="hljs-comment">&lt;!-- Coupon Cell --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-coupon-cell</span>\n  <span class="hljs-attr">:coupons</span>=<span class="hljs-string">&quot;coupons&quot;</span>\n  <span class="hljs-attr">:chosen-coupon</span>=<span class="hljs-string">&quot;chosenCoupon&quot;</span>\n  @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;showList = true&quot;</span>\n/&gt;</span>\n<span class="hljs-comment">&lt;!-- Coupon List --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span>\n  <span class="hljs-attr">v-model:show</span>=<span class="hljs-string">&quot;showList&quot;</span>\n  <span class="hljs-attr">round</span>\n  <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>\n  <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 90%; padding-top: 4px;&quot;</span>\n&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-coupon-list</span>\n    <span class="hljs-attr">:coupons</span>=<span class="hljs-string">&quot;coupons&quot;</span>\n    <span class="hljs-attr">:chosen-coupon</span>=<span class="hljs-string">&quot;chosenCoupon&quot;</span>\n    <span class="hljs-attr">:disabled-coupons</span>=<span class="hljs-string">&quot;disabledCoupons&quot;</span>\n    @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n    @<span class="hljs-attr">exchange</span>=<span class="hljs-string">&quot;onExchange&quot;</span>\n  /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-popup</span>&gt;</span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n  <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n    <span class="hljs-keyword">const</span> coupon = {\n      <span class="hljs-attr">available</span>: <span class="hljs-number">1</span>,\n      <span class="hljs-attr">originCondition</span>: <span class="hljs-number">0</span>,\n      <span class="hljs-attr">reason</span>: <span class="hljs-string">&#x27;&#x27;</span>,\n      <span class="hljs-attr">value</span>: <span class="hljs-number">150</span>,\n      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Coupon name&#x27;</span>,\n      <span class="hljs-attr">startAt</span>: <span class="hljs-number">1489104000</span>,\n      <span class="hljs-attr">endAt</span>: <span class="hljs-number">1514592000</span>,\n      <span class="hljs-attr">valueDesc</span>: <span class="hljs-string">&#x27;1.5&#x27;</span>,\n      <span class="hljs-attr">unitDesc</span>: <span class="hljs-string">&#x27;\u5143&#x27;</span>,\n    };\n\n    <span class="hljs-keyword">const</span> coupons = <span class="hljs-title function_">ref</span>([coupon]);\n    <span class="hljs-keyword">const</span> showList = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n    <span class="hljs-keyword">const</span> chosenCoupon = <span class="hljs-title function_">ref</span>(-<span class="hljs-number">1</span>);\n\n    <span class="hljs-keyword">const</span> <span class="hljs-title function_">onChange</span> = (<span class="hljs-params">index</span>) =&gt; {\n      showList.<span class="hljs-property">value</span> = <span class="hljs-literal">false</span>;\n      chosenCoupon.<span class="hljs-property">value</span> = index;\n    };\n    <span class="hljs-keyword">const</span> <span class="hljs-title function_">onExchange</span> = (<span class="hljs-params">code</span>) =&gt; {\n      coupons.<span class="hljs-property">value</span>.<span class="hljs-title function_">push</span>(coupon);\n    };\n\n    <span class="hljs-keyword">return</span> {\n      coupons,\n      showList,\n      onChange,\n      onExchange,\n      chosenCoupon,\n      <span class="hljs-attr">disabledCoupons</span>: [coupon],\n    };\n  },\n};\n</code></pre>\n</div><h2 id="api" tabindex="-1">API</h2>\n<div class="van-doc-card"><h3 id="couponcell-props" tabindex="-1">CouponCell Props</h3>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>title</td>\n<td>Cell title</td>\n<td><em>string</em></td>\n<td><code>Coupon</code></td>\n</tr>\n<tr>\n<td>chosen-coupon</td>\n<td>Index of chosen coupon</td>\n<td><em>number | number[]</em></td>\n<td><code>-1</code></td>\n</tr>\n<tr>\n<td>coupons</td>\n<td>Coupon list</td>\n<td><em>Coupon[]</em></td>\n<td><code>[]</code></td>\n</tr>\n<tr>\n<td>editable</td>\n<td>Cell editable</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>border</td>\n<td>Whether to show inner border</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>currency</td>\n<td>Currency symbol</td>\n<td><em>string</em></td>\n<td><code>\xa5</code></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="couponlist-props" tabindex="-1">CouponList Props</h3>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>v-model</td>\n<td>Current exchange code</td>\n<td><em>string</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>chosen-coupon</td>\n<td>Index of chosen coupons, support multiple selection (type is <code>[]</code>)</td>\n<td><em>number | number[]</em></td>\n<td><code>-1</code></td>\n</tr>\n<tr>\n<td>coupons</td>\n<td>Coupon list</td>\n<td><em>CouponInfo[]</em></td>\n<td><code>[]</code></td>\n</tr>\n<tr>\n<td>disabled-coupons</td>\n<td>Disabled coupon list</td>\n<td><em>CouponInfo[]</em></td>\n<td><code>[]</code></td>\n</tr>\n<tr>\n<td>enabled-title</td>\n<td>Title of coupon list</td>\n<td><em>string</em></td>\n<td><code>Available</code></td>\n</tr>\n<tr>\n<td>disabled-title</td>\n<td>Title of disabled coupon list</td>\n<td><em>string</em></td>\n<td><code>Unavailable</code></td>\n</tr>\n<tr>\n<td>exchange-button-text</td>\n<td>Exchange button text</td>\n<td><em>string</em></td>\n<td><code>Exchange</code></td>\n</tr>\n<tr>\n<td>exchange-button-loading</td>\n<td>Whether to show loading in exchange button</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>exchange-button-disabled</td>\n<td>Whether to disable exchange button</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>exchange-min-length</td>\n<td>Min length to enable exchange button</td>\n<td><em>number</em></td>\n<td><code>1</code></td>\n</tr>\n<tr>\n<td>displayed-coupon-index</td>\n<td>Index of displayed coupon</td>\n<td><em>number</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>close-button-text</td>\n<td>Close button text</td>\n<td><em>string</em></td>\n<td><code>Close</code></td>\n</tr>\n<tr>\n<td>input-placeholder</td>\n<td>Input placeholder</td>\n<td><em>string</em></td>\n<td><code>Coupon code</code></td>\n</tr>\n<tr>\n<td>currency</td>\n<td>Currency symbol</td>\n<td><em>string</em></td>\n<td><code>\xa5</code></td>\n</tr>\n<tr>\n<td>empty-image</td>\n<td>Placeholder image when list is empty</td>\n<td><em>string</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>show-count</td>\n<td>Whether to show coupon count in tab title</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="couponlist-events" tabindex="-1">CouponList Events</h3>\n<table>\n<thead>\n<tr>\n<th>Event</th>\n<th>Description</th>\n<th>Arguments</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>change</td>\n<td>Emitted when chosen coupon changed</td>\n<td>index: index of chosen coupon</td>\n</tr>\n<tr>\n<td>exchange</td>\n<td>Emitted when exchanging coupon</td>\n<td>code: exchange code</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="couponlist-slots" tabindex="-1">CouponList Slots</h3>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>list-footer</td>\n<td>Coupon list bottom</td>\n</tr>\n<tr>\n<td>disabled-list-footer</td>\n<td>Unavailable coupons list bottom</td>\n</tr>\n<tr>\n<td>list-button</td>\n<td>Customize the bottom button</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="data-structure-of-couponinfo" tabindex="-1">Data Structure of CouponInfo</h3>\n<table>\n<thead>\n<tr>\n<th>Key</th>\n<th>Description</th>\n<th>Type</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>id</td>\n<td>Id</td>\n<td><em>string</em></td>\n</tr>\n<tr>\n<td>name</td>\n<td>Name</td>\n<td><em>string</em></td>\n</tr>\n<tr>\n<td>condition</td>\n<td>Condition</td>\n<td><em>string</em></td>\n</tr>\n<tr>\n<td>startAt</td>\n<td>Start time (Timestamp, unit second)</td>\n<td><em>number</em></td>\n</tr>\n<tr>\n<td>endAt</td>\n<td>End time (Timestamp, unit second)</td>\n<td><em>number</em></td>\n</tr>\n<tr>\n<td>description</td>\n<td>Description</td>\n<td><em>string</em></td>\n</tr>\n<tr>\n<td>reason</td>\n<td>Unavailable reason</td>\n<td><em>string</em></td>\n</tr>\n<tr>\n<td>value</td>\n<td>Value</td>\n<td><em>number</em></td>\n</tr>\n<tr>\n<td>valueDesc</td>\n<td>Value Text</td>\n<td><em>string</em></td>\n</tr>\n<tr>\n<td>unitDesc</td>\n<td>Unit Text</td>\n<td><em>string</em></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="types" tabindex="-1">Types</h3>\n<p>The component exports the following type definitions:</p>\n<pre><code class="language-ts"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">CouponCellProps</span>, <span class="hljs-title class_">CouponListProps</span>, <span class="hljs-title class_">CouponInfo</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vant&#x27;</span>;\n</code></pre>\n</div><h2 id="theming" tabindex="-1">Theming</h2>\n<div class="van-doc-card"><h3 id="css-variables" tabindex="-1">CSS Variables</h3>\n<p>The component provides the following CSS variables, which can be used to customize styles. Please refer to <a href="#/en-US/config-provider" target="_blank">ConfigProvider component</a>.</p>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Default Value</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>--van-coupon-margin</td>\n<td><em>0 var(--van-padding-sm) var(--van-padding-sm)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-content-height</td>\n<td><em>84px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-content-padding</td>\n<td><em>14px 0</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-content-text-color</td>\n<td><em>var(--van-text-color)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-background</td>\n<td><em>var(--van-background-2)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-active-background</td>\n<td><em>var(--van-active-color)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-radius</td>\n<td><em>var(--van-radius-lg)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-shadow</td>\n<td><em>0 0 4px rgba(0, 0, 0, 0.1)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-head-width</td>\n<td><em>96px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-amount-color</td>\n<td><em>var(--van-danger-color)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-amount-font-size</td>\n<td><em>30px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-currency-font-size</td>\n<td><em>40%</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-name-font-size</td>\n<td><em>var(--van-font-size-md)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-disabled-text-color</td>\n<td><em>var(--van-text-color-2)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-description-padding</td>\n<td><em>var(--van-padding-xs) var(--van-padding-md)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-description-border-color</td>\n<td><em>var(--van-border-color)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-checkbox-color</td>\n<td><em>var(--van-danger-color)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-list-background</td>\n<td><em>var(--van-background)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-list-field-padding</td>\n<td><em>5px 0 5px var(--van-padding-md)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-list-exchange-button-height</td>\n<td><em>32px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-list-close-button-height</td>\n<td><em>40px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-list-empty-tip-color</td>\n<td><em>var(--van-text-color-2)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-list-empty-tip-font-size</td>\n<td><em>var(--van-font-size-md)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-list-empty-tip-line-height</td>\n<td><em>var(--van-line-height-md)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-coupon-cell-selected-text-color</td>\n<td><em>var(--van-text-color)</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div>'},null,8,a))}}}]);