blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

OrderCoupon: rename to Coupon

Browse Source
This commit is contained in:
陈嘉涵 2017-09-08 10:18:18 +08:00
parent eaaed9661c
commit df9c40bc3f
8 changed files with 93 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
docs/examples-docs/order-coupon.md → docs/examples-docs/coupon.md
View File

@ -1,4 +1,4 @@
## OrderCoupon 下单页优惠券 ## Coupon 优惠券选择器
<script> <script>
import { Toast } from 'packages'; import { Toast } from 'packages';
@ -61,10 +61,10 @@ export default {
### 使用指南 ### 使用指南
``` javascript ``` javascript
import { OrderCoupon, OrderCouponList } from 'vant'; import { CouponCell, CouponList } from 'vant';
Vue.component(OrderCoupon.name, OrderCoupon); Vue.component(CouponCell.name, CouponCell);
Vue.component(OrderCouponList.name, OrderCouponList); Vue.component(CouponList.name, CouponList);
``` ```
### 代码演示 ### 代码演示
@ -74,25 +74,25 @@ Vue.component(OrderCouponList.name, OrderCouponList);
:::demo 基础用法 :::demo 基础用法
```html ```html
<!-- 优惠券单元格 --> <!-- 优惠券单元格 -->
<van-order-coupon <van-coupon-cell
:coupons="coupons" :coupons="coupons"
:chosen-coupon="chosenCoupon" :chosen-coupon="chosenCoupon"
@click="showList = true" @click="showList = true"
></van-order-coupon> ></van-coupon-cell>
<!-- 优惠券列表 --> <!-- 优惠券列表 -->
<van-order-coupon-list <van-coupon-list
v-model="showList" v-model="showList"
:coupons="coupons" :coupons="coupons"
:chosen-coupon="chosenCoupon" :chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons" :disabled-coupons="disabledCoupons"
@change="onChange" @change="onChange"
@exchange="onExchange" @exchange="onExchange"
></van-order-coupon-list> ></van-coupon-list>
``` ```
```javascript ```javascript
const mockCoupon = { const coupon = {
available: 1, available: 1,
discount: 0, discount: 0,
denominations: 150, denominations: 150,
@ -109,8 +109,8 @@ export default {
data() { data() {
return { return {
chosenCoupon: -1, chosenCoupon: -1,
coupons: [mockCoupon], coupons: [coupon],
disabledCoupons: [mockCoupon] disabledCoupons: [coupon]
} }
}, },
@ -119,22 +119,23 @@ export default {
this.chosenCoupon = index; this.chosenCoupon = index;
}, },
onExchange(code) { onExchange(code) {
this.coupons.push(mockCoupon); this.coupons.push(coupon);
} }
} }
} }
``` ```
::: :::
### OrderCoupon API ### CouponCell API
| 参数 | 说明 | 类型 | 默认值 | 必须 | | 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| title | 单元格标题 | `String` | `优惠` | - |
| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - | | chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
| coupons | 可用优惠券列表 | `Array` | `[]` | - | | coupons | 可用优惠券列表 | `Array` | `[]` | - |
| editable | 能否切换优惠券 | `Boolean` | `true` | - | | editable | 能否切换优惠券 | `Boolean` | `true` | - |
### OrderCouponList API ### CouponList API
| 参数 | 说明 | 类型 | 默认值 | 必须 | | 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
@ -149,7 +150,7 @@ export default {
| disabledListTitle | 不可用券列表标题 | `String` | 不可用优惠 | - | | disabledListTitle | 不可用券列表标题 | `String` | 不可用优惠 | - |
| inputPlaceholder | 输入框文字提示 | `String` | 请输入优惠码 | - | | inputPlaceholder | 输入框文字提示 | `String` | 请输入优惠码 | - |
### OrderCouponList Event ### CouponList Event
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|

10
packages/order-coupon/index.vue → packages/coupon-cell/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="van-order-coupon"> <div class="van-coupon-cell">
<van-cell-group> <van-cell-group>
<van-cell title="优惠" :isLink="editable" @click="$emit('click')"> <van-cell :title="title" :isLink="editable" @click="$emit('click')">
<div v-if="coupons[chosenCoupon]"> <div v-if="coupons[chosenCoupon]">
<h2>{{ amount }}</h2> <h2>{{ amount }}</h2>
<span>{{ coupons[chosenCoupon].condition }}</span> <span>{{ coupons[chosenCoupon].condition }}</span>
@ -17,7 +17,7 @@ import Cell from '../cell';
import CellGroup from '../cell-group'; import CellGroup from '../cell-group';
export default { export default {
name: 'van-order-coupon', name: 'van-coupon-cell',
components: { components: {
[Cell.name]: Cell, [Cell.name]: Cell,
@ -29,6 +29,10 @@ export default {
}, },
props: { props: {
title: {
type: String,
default: '优惠'
},
coupons: { coupons: {
type: Array, type: Array,
default: () => [] default: () => []

14
packages/order-coupon-list/Coupon.vue → packages/coupon-list/Item.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<div :class="['van-order-coupon-coupon', { 'van-order-coupon-coupon--disabled': disabled }]"> <div :class="['van-coupon-item', { 'van-coupon-item--disabled': disabled }]">
<div class="van-order-coupon-coupon__head"> <div class="van-coupon-item__head">
<div class="van-order-coupon-coupon__lines"></div> <div class="van-coupon-item__lines"></div>
<div class="van-order-coupon-coupon__gradient"> <div class="van-coupon-item__gradient">
<h2 v-html="faceAmount" /> <h2 v-html="faceAmount" />
<p>{{ conditionMessage }}</p> <p>{{ conditionMessage }}</p>
</div> </div>
</div> </div>
<div class="van-order-coupon-coupon__body"> <div class="van-coupon-item__body">
<h2>{{ data.name }}</h2> <h2>{{ data.name }}</h2>
<span>{{ validPeriod }}</span> <span>{{ validPeriod }}</span>
<p v-if="disabled && data.reason">{{ data.reason }}</p> <p v-if="disabled && data.reason">{{ data.reason }}</p>
<div class="van-order-coupon-coupon__corner" v-if="chosen"> <div class="van-coupon-item__corner" v-if="chosen">
<van-icon name="success" /> <van-icon name="success" />
</div> </div>
</div> </div>
@ -22,7 +22,7 @@
import Icon from '../icon'; import Icon from '../icon';
export default { export default {
name: 'van-order-coupon-coupon', name: 'van-coupon-item',
components: { components: {
[Icon.name]: Icon [Icon.name]: Icon

20
packages/order-coupon-list/index.vue → packages/coupon-list/index.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<van-popup v-model="showPopup" position="bottom" class="van-order-coupon-list"> <van-popup v-model="showPopup" position="bottom" class="van-coupon-list">
<van-cell-group class="van-order-coupon-list__top"> <van-cell-group class="van-coupon-list__top">
<van-field v-model="exchangeCode" :placeholder="inputPlaceholder" :maxlength="20" /> <van-field v-model="exchangeCode" :placeholder="inputPlaceholder" :maxlength="20" />
<van-button size="small" type="danger" class="van-order-coupon-list__exchange" :disabled="exchangeButtonDisabled || !exchangeCode.length" @click="onClickExchangeButton">{{ exchangeButtonText }}</van-button> <van-button size="small" type="danger" class="van-coupon-list__exchange" :disabled="exchangeButtonDisabled || !exchangeCode.length" @click="onClickExchangeButton">{{ exchangeButtonText }}</van-button>
</van-cell-group> </van-cell-group>
<div class="van-order-coupon-list__list" ref="list"> <div class="van-coupon-list__list" ref="list">
<van-order-coupon-coupon <van-coupon-item
ref="card" ref="card"
v-for="(item, index) in coupons" v-for="(item, index) in coupons"
:key="item.id || item.name" :key="item.id || item.name"
@ -14,27 +14,27 @@
@click.native="onClickCoupon(index)" @click.native="onClickCoupon(index)"
/> />
<h3 v-if="disabledCoupons.length">{{ disabledListTitle }}</h3> <h3 v-if="disabledCoupons.length">{{ disabledListTitle }}</h3>
<van-order-coupon-coupon <van-coupon-item
disabled disabled
v-for="item in disabledCoupons" v-for="item in disabledCoupons"
:key="item.id || item.name" :key="item.id || item.name"
:data="item" :data="item"
/> />
</div> </div>
<div class="van-order-coupon-list__close van-hairline--top" @click="onClickNotUse">{{ closeButtonText }}</div> <div class="van-coupon-list__close van-hairline--top" @click="onClickNotUse">{{ closeButtonText }}</div>
</van-popup> </van-popup>
</template> </template>
<script> <script>
import Cell from '../cell'; import Cell from '../cell';
import CellGroup from '../cell-group'; import CellGroup from '../cell-group';
import Coupon from './Coupon'; import Item from './Item';
import Field from '../field'; import Field from '../field';
import Popup from '../popup'; import Popup from '../popup';
import Button from '../button'; import Button from '../button';
export default { export default {
name: 'van-order-coupon-list', name: 'van-coupon-list',
components: { components: {
[Button.name]: Button, [Button.name]: Button,
@ -42,7 +42,7 @@ export default {
[CellGroup.name]: CellGroup, [CellGroup.name]: CellGroup,
[Field.name]: Field, [Field.name]: Field,
[Popup.name]: Popup, [Popup.name]: Popup,
[Coupon.name]: Coupon [Item.name]: Item
}, },
model: { model: {

12
packages/index.js
View File

@ -10,6 +10,8 @@ import CellSwipe from './cell-swipe';
import Checkbox from './checkbox'; import Checkbox from './checkbox';
import CheckboxGroup from './checkbox-group'; import CheckboxGroup from './checkbox-group';
import Col from './col'; import Col from './col';
import CouponCell from './coupon-cell';
import CouponList from './coupon-list';
import DatetimePicker from './datetime-picker'; import DatetimePicker from './datetime-picker';
import DeepSelect from './deep-select'; import DeepSelect from './deep-select';
import Dialog from './dialog'; import Dialog from './dialog';
@ -24,8 +26,6 @@ import InvalidGoods from './invalid-goods';
import Lazyload from './lazyload'; import Lazyload from './lazyload';
import Loading from './loading'; import Loading from './loading';
import NoticeBar from './notice-bar'; import NoticeBar from './notice-bar';
import OrderCoupon from './order-coupon';
import OrderCouponList from './order-coupon-list';
import OrderGoods from './order-goods'; import OrderGoods from './order-goods';
import Panel from './panel'; import Panel from './panel';
import PayOrder from './pay-order'; import PayOrder from './pay-order';
@ -65,6 +65,8 @@ const components = [
Checkbox, Checkbox,
CheckboxGroup, CheckboxGroup,
Col, Col,
CouponCell,
CouponList,
DatetimePicker, DatetimePicker,
DeepSelect, DeepSelect,
ExpressWay, ExpressWay,
@ -76,8 +78,6 @@ const components = [
InvalidGoods, InvalidGoods,
Loading, Loading,
NoticeBar, NoticeBar,
OrderCoupon,
OrderCouponList,
OrderGoods, OrderGoods,
Panel, Panel,
PayOrder, PayOrder,
@ -130,6 +130,8 @@ export {
Checkbox, Checkbox,
CheckboxGroup, CheckboxGroup,
Col, Col,
CouponCell,
CouponList,
DatetimePicker, DatetimePicker,
DeepSelect, DeepSelect,
Dialog, Dialog,
@ -144,8 +146,6 @@ export {
Lazyload, Lazyload,
Loading, Loading,
NoticeBar, NoticeBar,
OrderCoupon,
OrderCouponList,
OrderGoods, OrderGoods,
Panel, Panel,
PayOrder, PayOrder,

10
packages/vant-css/src/order-coupon.css → packages/vant-css/src/coupon.css
View File

@ -1,7 +1,7 @@
@import './common/var.css'; @import './common/var.css';
@import "./mixins/ellipsis.css"; @import "./mixins/ellipsis.css";
.van-order-coupon { .van-coupon {
&-list { &-list {
height: 100%; height: 100%;
background-color: $background-color; background-color: $background-color;
@ -57,7 +57,7 @@
} }
} }
.van-order-coupon-card + h3 { .van-coupon-item + h3 {
margin-top: 30px; margin-top: 30px;
} }
} }
@ -74,7 +74,7 @@
} }
} }
&-coupon { &-item {
display: flex; display: flex;
height: 100px; height: 100px;
margin: 0 15px 10px; margin: 0 15px 10px;
@ -176,11 +176,11 @@
} }
&--disabled { &--disabled {
.van-order-coupon-coupon__lines { .van-coupon-item__lines {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAADICAMAAAC3WLNTAAAAWlBMVEUAAACqrremq7Oqv7+mq7Wqqr+rsLeprreqsrmqrralq7SkqbKrsbikqLGqwNWqrrmrr7mkqbGrsbijqLGnq7SssrimrLKlqrOnrLWprraqr7ekqbKrsLijqLGfTYl9AAAAF3RSTlMAN5oMQgya5kJC5uaSkgZC8/PV1b0rK6hQU+kAAASjSURBVFjDfZlJduMwDESZntJDeh5sUdb9r9kuA+AXA0iIIi/8X6FYALNJU/19+fWj3/pNT1V35NvLratgMvTtjxH+1NBLt7rLHbb7OwhVrSUhKQhz7z1Dv6xZoLWnH70vg5ESINDedkg5BrR0yrGs9Pbpw21SqxNvH593YsN+30OibhwvaQXUPgghVH1m6EkAXK30VllB+UeCMG7OmCPtlk5exN6TcWsRv0UE/aG0GIKxMsycfB9j6QgZwn7FgO/AYhSFq+7Q4hBgyMT9kJKkkhJiriTEuoKACereTw+Y98LTsDVvKdenDWAW6gh1lNwTGHvjEGGhRre+U3J0iKGGknl7zeCJjoBCDPQBBxXhY94WwlYFuXLQTfW979LKYKzvECKH3aLGRSCFnnPwK7UPi8VZ7IRAGH+9X9w7iv0a3GvjZG+F8Y8LRRS0fMQ0hUn0o2ws1wEB7tJqV4iEDKVlgZo5bDWYPQWiVzNmNCX2CMo9XSutziEFoTRjRNqkAwBBqBGBvSpMpEVwrXLgr9Gidi511FaQSZVASO2VkJqxRQPefw3GbX2syqdnqdEy2bd7F77qWRvU3ggp09LDvUMmu/crJVN+wlRA9CrG4+0eadmTteLeScW0/De3+zSEljIpD3Mx53WoGssbfQfgrwm6Un5EgAJCL0MAQ2r4AkoYzoBgBnbuiREilSGLw/YLpUuSChBjKAGltIBSzxDKUOpVQYbEx27ABTYiEOurUjvSi6V7V0ihxb3LqbNfXARqRvdXqmb8fgyI8eSNqNst834l41mNe1f1G38EHzE9w8ycZW5juVzEwCHl7S5CqJJrd0Sci9VUM8CcJ843qwnBVFUGCamJBU+OGVsEKsiYE18egQllJSLA1ZF3Nx6uyoYonRwRJbBM+oANtY6pbFU+iwBMp/R7x/dZa6yvGELVZ4aeRliEn6C3QlDzvgnyIvS6HYWpZJxQzRQUEYC5fTDCpFjleLf3jGWvhTG2oKKoBHEA2tZK1gxPpdC8XzXELosBOsIeYDsEEMpKOXugGjG1MyUW9VgJBqWC88cGfJKCgazKETiW7jhOFeubigvNRTjbGIPeFwRJAB1T3LvTwviJFhGshxRhnjl/jGVd0Sk9rUKoGroj4s7EtE/x9aqnhqQRptYzTysqJ578dQIZ475OIvATnhlfcVVjzZFwFXCthNipUo0xYHpVjK3KFxcTk8FYujuB0Hq0vkgJ0WeGnggrjYcrRRCRfwENBk+53SbEQUxl43ZAY48jwDvhz2GqAMuxbPcfPbF/Q4gBb5teoQMFtN0rkE3AiAqw6euBccRaaRMK5kccSsIQYmeMNUiAYU5iC08BGAGAkCBvuEZa+Wq0Gclh6SWl4X1Ogt1pmwMg2/6MYvCkj30/5mgDXi1PDrmNQxpoqxJCSCE3lk4KKdRLjDvWdwPAfQQ6LgJHnPK0CPxK2fnQA1MBCaDZ/oS0A4v9oty4MajNgVoEG7UOMaIgTJy7LZzHWGBWA+FswBTctMsZYr+AfpbAHFb7XQiZScy3rxliFfzd/h06wlY7kJp86d+FGTEhlO4UWgU6Bvzv6++fmWGE/wHKk5MgoCYAjwAAAABJRU5ErkJggg=='); background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAADICAMAAAC3WLNTAAAAWlBMVEUAAACqrremq7Oqv7+mq7Wqqr+rsLeprreqsrmqrralq7SkqbKrsbikqLGqwNWqrrmrr7mkqbGrsbijqLGnq7SssrimrLKlqrOnrLWprraqr7ekqbKrsLijqLGfTYl9AAAAF3RSTlMAN5oMQgya5kJC5uaSkgZC8/PV1b0rK6hQU+kAAASjSURBVFjDfZlJduMwDESZntJDeh5sUdb9r9kuA+AXA0iIIi/8X6FYALNJU/19+fWj3/pNT1V35NvLratgMvTtjxH+1NBLt7rLHbb7OwhVrSUhKQhz7z1Dv6xZoLWnH70vg5ESINDedkg5BrR0yrGs9Pbpw21SqxNvH593YsN+30OibhwvaQXUPgghVH1m6EkAXK30VllB+UeCMG7OmCPtlk5exN6TcWsRv0UE/aG0GIKxMsycfB9j6QgZwn7FgO/AYhSFq+7Q4hBgyMT9kJKkkhJiriTEuoKACereTw+Y98LTsDVvKdenDWAW6gh1lNwTGHvjEGGhRre+U3J0iKGGknl7zeCJjoBCDPQBBxXhY94WwlYFuXLQTfW979LKYKzvECKH3aLGRSCFnnPwK7UPi8VZ7IRAGH+9X9w7iv0a3GvjZG+F8Y8LRRS0fMQ0hUn0o2ws1wEB7tJqV4iEDKVlgZo5bDWYPQWiVzNmNCX2CMo9XSutziEFoTRjRNqkAwBBqBGBvSpMpEVwrXLgr9Gidi511FaQSZVASO2VkJqxRQPefw3GbX2syqdnqdEy2bd7F77qWRvU3ggp09LDvUMmu/crJVN+wlRA9CrG4+0eadmTteLeScW0/De3+zSEljIpD3Mx53WoGssbfQfgrwm6Un5EgAJCL0MAQ2r4AkoYzoBgBnbuiREilSGLw/YLpUuSChBjKAGltIBSzxDKUOpVQYbEx27ABTYiEOurUjvSi6V7V0ihxb3LqbNfXARqRvdXqmb8fgyI8eSNqNst834l41mNe1f1G38EHzE9w8ycZW5juVzEwCHl7S5CqJJrd0Sci9VUM8CcJ843qwnBVFUGCamJBU+OGVsEKsiYE18egQllJSLA1ZF3Nx6uyoYonRwRJbBM+oANtY6pbFU+iwBMp/R7x/dZa6yvGELVZ4aeRliEn6C3QlDzvgnyIvS6HYWpZJxQzRQUEYC5fTDCpFjleLf3jGWvhTG2oKKoBHEA2tZK1gxPpdC8XzXELosBOsIeYDsEEMpKOXugGjG1MyUW9VgJBqWC88cGfJKCgazKETiW7jhOFeubigvNRTjbGIPeFwRJAB1T3LvTwviJFhGshxRhnjl/jGVd0Sk9rUKoGroj4s7EtE/x9aqnhqQRptYzTysqJ578dQIZ475OIvATnhlfcVVjzZFwFXCthNipUo0xYHpVjK3KFxcTk8FYujuB0Hq0vkgJ0WeGnggrjYcrRRCRfwENBk+53SbEQUxl43ZAY48jwDvhz2GqAMuxbPcfPbF/Q4gBb5teoQMFtN0rkE3AiAqw6euBccRaaRMK5kccSsIQYmeMNUiAYU5iC08BGAGAkCBvuEZa+Wq0Gclh6SWl4X1Ogt1pmwMg2/6MYvCkj30/5mgDXi1PDrmNQxpoqxJCSCE3lk4KKdRLjDvWdwPAfQQ6LgJHnPK0CPxK2fnQA1MBCaDZ/oS0A4v9oty4MajNgVoEG7UOMaIgTJy7LZzHWGBWA+FswBTctMsZYr+AfpbAHFb7XQiZScy3rxliFfzd/h06wlY7kJp86d+FGTEhlO4UWgU6Bvzv6++fmWGE/wHKk5MgoCYAjwAAAABJRU5ErkJggg==');
} }
.van-order-coupon-coupon__gradient { .van-coupon-item__gradient {
background-image: linear-gradient(45deg, #a4a9b2, #b7bcc3); background-image: linear-gradient(45deg, #a4a9b2, #b7bcc3);
} }
} }

6
packages/vant-css/src/index.css
View File

@ -41,13 +41,15 @@
@import './pull-refresh.css'; @import './pull-refresh.css';
@import './toast.css'; @import './toast.css';
/* high order components */
@import './switch-cell.css';
/* business components */ /* business components */
@import './deep-select.css'; @import './deep-select.css';
@import './express-way.css'; @import './express-way.css';
@import './goods-action.css'; @import './goods-action.css';
@import './invalid-goods.css'; @import './invalid-goods.css';
@import './notice-bar.css'; @import './notice-bar.css';
@import './order-coupon.css'; @import './coupon.css';
@import './order-goods.css'; @import './order-goods.css';
@import './pay-order.css'; @import './pay-order.css';
@import './switch-cell.css';

76
test/unit/specs/order-coupon.spec.js → test/unit/specs/coupon.spec.js
View File

@ -1,5 +1,5 @@
import OrderCoupon from 'packages/order-coupon'; import CouponCell from 'packages/coupon-cell';
import OrderCouponList from 'packages/order-coupon-list'; import CouponList from 'packages/coupon-list';
import { mount } from 'avoriaz'; import { mount } from 'avoriaz';
import { DOMChecker } from '../utils'; import { DOMChecker } from '../utils';
@ -42,14 +42,14 @@ const disabledDiscountCoupon = {
reason: '未满足使用门槛' reason: '未满足使用门槛'
}; };
describe('OrderCoupon', () => { describe('CouponCell', () => {
let wrapper; let wrapper;
afterEach(() => { afterEach(() => {
wrapper && wrapper.destroy(); wrapper && wrapper.destroy();
}); });
it('no coupon', () => { it('no coupon', () => {
wrapper = mount(OrderCoupon, {}); wrapper = mount(CouponCell, {});
DOMChecker(wrapper, { DOMChecker(wrapper, {
text: { text: {
@ -59,7 +59,7 @@ describe('OrderCoupon', () => {
}); });
it('has two coupon', () => { it('has two coupon', () => {
wrapper = mount(OrderCoupon, { wrapper = mount(CouponCell, {
propsData: { propsData: {
coupons: [coupon, discountCoupon] coupons: [coupon, discountCoupon]
} }
@ -73,7 +73,7 @@ describe('OrderCoupon', () => {
}); });
it('select first coupon', () => { it('select first coupon', () => {
wrapper = mount(OrderCoupon, { wrapper = mount(CouponCell, {
propsData: { propsData: {
chosenCoupon: 0, chosenCoupon: 0,
coupons: [coupon, discountCoupon] coupons: [coupon, discountCoupon]
@ -92,7 +92,7 @@ describe('OrderCoupon', () => {
}); });
it('not editable', () => { it('not editable', () => {
wrapper = mount(OrderCoupon, { wrapper = mount(CouponCell, {
propsData: { propsData: {
chosenCoupon: 0, chosenCoupon: 0,
coupons: [coupon, discountCoupon], coupons: [coupon, discountCoupon],
@ -112,14 +112,14 @@ describe('OrderCoupon', () => {
}); });
}); });
describe('OrderCouponList', () => { describe('CouponList', () => {
let wrapper; let wrapper;
afterEach(() => { afterEach(() => {
wrapper && wrapper.destroy(); wrapper && wrapper.destroy();
}); });
it('no coupon', () => { it('no coupon', () => {
wrapper = mount(OrderCouponList, { wrapper = mount(CouponList, {
propsData: { propsData: {
chosenCoupon: -1 chosenCoupon: -1
} }
@ -127,15 +127,15 @@ describe('OrderCouponList', () => {
DOMChecker(wrapper, { DOMChecker(wrapper, {
count: { count: {
'.van-order-coupon-coupon': 0, '.van-coupon-item': 0,
'.van-order-coupon-coupon--disabled': 0, '.van-coupon-item--disabled': 0,
'.van-order-coupon-list__list h3': 0 '.van-coupon-list__list h3': 0
} }
}); });
}); });
it('has two coupon', () => { it('has two coupon', () => {
wrapper = mount(OrderCouponList, { wrapper = mount(CouponList, {
propsData: { propsData: {
chosenCoupon: -1, chosenCoupon: -1,
coupons: [coupon, discountCoupon], coupons: [coupon, discountCoupon],
@ -144,15 +144,15 @@ describe('OrderCouponList', () => {
}); });
DOMChecker(wrapper, { DOMChecker(wrapper, {
count: { count: {
'.van-order-coupon-coupon': 4, '.van-coupon-item': 4,
'.van-order-coupon-coupon--disabled': 2, '.van-coupon-item--disabled': 2,
'.van-order-coupon-list__list h3': 1 '.van-coupon-list__list h3': 1
} }
}); });
}); });
it('switch to first coupon', (done) => { it('switch to first coupon', (done) => {
wrapper = mount(OrderCouponList, { wrapper = mount(CouponList, {
attachToDocument: true, attachToDocument: true,
propsData: { propsData: {
show: true, show: true,
@ -168,8 +168,8 @@ describe('OrderCouponList', () => {
// 弹出 popup // 弹出 popup
setTimeout(() => { setTimeout(() => {
expect(wrapper.find('.van-order-coupon-list')[0].hasStyle('display', 'none')).to.equal(false); expect(wrapper.find('.van-coupon-list')[0].hasStyle('display', 'none')).to.equal(false);
wrapper.find('.van-order-coupon-coupon')[0].trigger('click'); wrapper.find('.van-coupon-item')[0].trigger('click');
setTimeout(() => { setTimeout(() => {
expect(wrapper.vm.chosenCoupon).to.equal(0); expect(wrapper.vm.chosenCoupon).to.equal(0);
@ -179,7 +179,7 @@ describe('OrderCouponList', () => {
}); });
it('cancel select coupon', (done) => { it('cancel select coupon', (done) => {
wrapper = mount(OrderCouponList, { wrapper = mount(CouponList, {
attachToDocument: true, attachToDocument: true,
propsData: { propsData: {
show: false, show: false,
@ -198,17 +198,17 @@ describe('OrderCouponList', () => {
}); });
setTimeout(() => { setTimeout(() => {
wrapper.find('.van-order-coupon-list__close')[0].trigger('click'); wrapper.find('.van-coupon-list__close')[0].trigger('click');
setTimeout(() => { setTimeout(() => {
expect(wrapper.vm.chosenCoupon).to.equal(-1); expect(wrapper.vm.chosenCoupon).to.equal(-1);
expect(wrapper.find('.van-order-coupon-list')[0].hasStyle('display', 'none')).to.equal(true); expect(wrapper.find('.van-coupon-list')[0].hasStyle('display', 'none')).to.equal(true);
done(); done();
}, 500); }, 500);
}, 500); }, 500);
}); });
it('denominations format', () => { it('denominations format', () => {
wrapper = mount(OrderCouponList, { wrapper = mount(CouponList, {
attachToDocument: true, attachToDocument: true,
propsData: { propsData: {
coupons: [coupon, { coupons: [coupon, {
@ -227,15 +227,15 @@ describe('OrderCouponList', () => {
} }
}); });
expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[0].text()).to.equal('¥ 1.5'); expect(wrapper.find('.van-coupon-item__gradient h2')[0].text()).to.equal('¥ 1.5');
expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[1].text()).to.equal('¥ 0.1'); expect(wrapper.find('.van-coupon-item__gradient h2')[1].text()).to.equal('¥ 0.1');
expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[2].text()).to.equal('¥ 1'); expect(wrapper.find('.van-coupon-item__gradient h2')[2].text()).to.equal('¥ 1');
expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[3].text()).to.equal('¥ 1.35'); expect(wrapper.find('.van-coupon-item__gradient h2')[3].text()).to.equal('¥ 1.35');
expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[4].text()).to.equal(''); expect(wrapper.find('.van-coupon-item__gradient h2')[4].text()).to.equal('');
}); });
it('discount format', () => { it('discount format', () => {
wrapper = mount(OrderCouponList, { wrapper = mount(CouponList, {
attachToDocument: true, attachToDocument: true,
propsData: { propsData: {
coupons: [discountCoupon, { coupons: [discountCoupon, {
@ -248,13 +248,13 @@ describe('OrderCouponList', () => {
} }
}); });
expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[0].text()).to.equal('8.8折'); expect(wrapper.find('.van-coupon-item__gradient h2')[0].text()).to.equal('8.8折');
expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[1].text()).to.equal('1折'); expect(wrapper.find('.van-coupon-item__gradient h2')[1].text()).to.equal('1折');
expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[2].text()).to.equal(''); expect(wrapper.find('.van-coupon-item__gradient h2')[2].text()).to.equal('');
}); });
it('add coupon', (done) => { it('add coupon', (done) => {
wrapper = mount(OrderCouponList, { wrapper = mount(CouponList, {
attachToDocument: true, attachToDocument: true,
propsData: { propsData: {
show: true, show: true,
@ -282,7 +282,7 @@ describe('OrderCouponList', () => {
wrapper.find('.van-field__control')[0].trigger('input'); wrapper.find('.van-field__control')[0].trigger('input');
setTimeout(() => { setTimeout(() => {
wrapper.find('.van-order-coupon-list__exchange')[0].trigger('click'); wrapper.find('.van-coupon-list__exchange')[0].trigger('click');
DOMChecker(wrapper, { DOMChecker(wrapper, {
count: { count: {
'.van-button--disabled': 0 '.van-button--disabled': 0
@ -290,12 +290,12 @@ describe('OrderCouponList', () => {
}); });
setTimeout(() => { setTimeout(() => {
expect(wrapper.find('.van-order-coupon-list')[0].hasStyle('display', 'none')).to.equal(false); expect(wrapper.find('.van-coupon-list')[0].hasStyle('display', 'none')).to.equal(false);
DOMChecker(wrapper, { DOMChecker(wrapper, {
count: { count: {
'.van-button--disabled': 1, '.van-button--disabled': 1,
'.van-order-coupon-coupon': 6, '.van-coupon-item': 6,
'.van-order-coupon-coupon--disabled': 2 '.van-coupon-item--disabled': 2
} }
}); });
done(); done();
@ -305,7 +305,7 @@ describe('OrderCouponList', () => {
}); });
it('displayedCouponIndex out of range', (done) => { it('displayedCouponIndex out of range', (done) => {
wrapper = mount(OrderCouponList, { wrapper = mount(CouponList, {
propsData: { propsData: {
show: true, show: true,
displayedCouponIndex: -100, displayedCouponIndex: -100,