mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
add OrderCoupon component
This commit is contained in:
陈嘉涵
parent
225df48ba5
commit
556f5ce75b
173
docs/examples-docs/order-coupon.md
Normal file
173
docs/examples-docs/order-coupon.md
Normal file
@ -0,0 +1,173 @@
|
||||
## OrderCoupon 下单页优惠券
|
||||
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
|
||||
const coupon = {
|
||||
available: 1,
|
||||
discount: 0,
|
||||
denominations: 150,
|
||||
origin_condition: 0,
|
||||
reason: '',
|
||||
value: 150,
|
||||
condition: '下单立减 1.50 元',
|
||||
name: '新手专用优惠券',
|
||||
start_at: 1489104000,
|
||||
end_at: 1514592000
|
||||
};
|
||||
|
||||
const discountCoupon = {
|
||||
...coupon,
|
||||
discount: 88,
|
||||
denominations: 0,
|
||||
origin_condition: 50,
|
||||
value: 12,
|
||||
condition: '下单即享 8.8 折',
|
||||
};
|
||||
|
||||
const disabledCoupon = {
|
||||
...coupon,
|
||||
avaliable: 0,
|
||||
reason: '未满足使用门槛'
|
||||
};
|
||||
|
||||
const disabledDiscountCoupon = {
|
||||
...discountCoupon,
|
||||
avaliable: 0,
|
||||
reason: '未满足使用门槛'
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showList: false,
|
||||
chosenCoupon: -1,
|
||||
coupons: [coupon, discountCoupon],
|
||||
disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.chosenCoupon = index;
|
||||
},
|
||||
onExchange(code) {
|
||||
Toast('兑换成功');
|
||||
this.coupons.push(coupon);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { OrderCoupon, OrderCouponList } from 'vant';
|
||||
|
||||
Vue.component(OrderCoupon.name, OrderCoupon);
|
||||
Vue.component(OrderCouponList.name, OrderCouponList);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<!-- 优惠券单元格 -->
|
||||
<van-order-coupon
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
@click="showList = true"
|
||||
></van-order-coupon>
|
||||
|
||||
<!-- 优惠券列表 -->
|
||||
<van-order-coupon-list
|
||||
v-model="showList"
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
:disabled-coupons="disabledCoupons"
|
||||
@change="onChange"
|
||||
@exchange="onExchange"
|
||||
></van-order-coupon-list>
|
||||
```
|
||||
|
||||
```javascript
|
||||
const mockCoupon = {
|
||||
available: 1,
|
||||
discount: 0,
|
||||
denominations: 150,
|
||||
origin_condition: 0,
|
||||
reason: '',
|
||||
value: 150,
|
||||
condition: '下单立减 1.50 元',
|
||||
name: '新手专用优惠券',
|
||||
start_at: 1489104000,
|
||||
end_at: 1514592000
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenCoupon: -1,
|
||||
coupons: [mockCoupon],
|
||||
disabledCoupons: [mockCoupon]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.chosenCoupon = index;
|
||||
},
|
||||
onExchange(code) {
|
||||
this.coupons.push(mockCoupon);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### OrderCoupon API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
|
||||
| coupons | 可用优惠券列表 | `Array` | `[]` | - |
|
||||
| editable | 能否切换优惠券 | `Boolean` | `true` | - |
|
||||
|
||||
### OrderCouponList API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 是否展示优惠券列表 | `Boolean` | `false` | - |
|
||||
| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
|
||||
| coupons | 可用优惠券列表 | `Array` | `[]` | - |
|
||||
| disabledCoupons | 不可用优惠券列表 | `Array` | `[]` | - |
|
||||
| exchangeButtonText | 兑换按钮文字 | `String` | `兑换` | - |
|
||||
| exchangeButtonDisabled | 是否禁用兑换按钮 | `Boolean` | `false` | - |
|
||||
| displayedCouponIndex | 滚动至特定优惠券位置 | `Number` | - | - |
|
||||
| closeButtonText | 列表底部按钮文字 | `String` | 不使用优惠 | - |
|
||||
| disabledListTitle | 不可用券列表标题 | `String` | 不可用优惠 | - |
|
||||
| inputPlaceholder | 输入框文字提示 | `String` | 请输入优惠码 | - |
|
||||
|
||||
### OrderCouponList Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 优惠券切换回调 | index, 选中优惠券的索引 |
|
||||
| exchange | 兑换优惠券回调 | code, 兑换码 |
|
||||
|
||||
### 数据格式
|
||||
#### 优惠券字段说明
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| id | 优惠券 id | `String` |
|
||||
| name | 优惠券名称 | `String` |
|
||||
| available | 是否可用, 1:可用,0:不可用 | `Number` |
|
||||
| discount | 折扣（0为满减券）88=>8.8折 | `Number` |
|
||||
| denominations | 面值（0为折扣券）单位分 | `Number` |
|
||||
| origin_condition | 满减条件（0为无门槛，满XX元可用）单位分 | `Number` |
|
||||
| start_at | 卡有效开始时间 | `Number` |
|
||||
| end_at | 卡失效日期 | `Number` |
|
||||
| reason | 不可用原因 | `String` |
|
||||
| value | 订单优惠金额，单位分 | `Number` |
|
||||
| condition | 格式化输出 value | `String` |
|
||||
@ -201,6 +201,10 @@ module.exports = {
|
||||
"path": "/invalid-goods",
|
||||
"title": "InvalidGoods 不可用商品列表"
|
||||
},
|
||||
{
|
||||
"path": "/order-coupon",
|
||||
"title": "OrderCoupon 下单页优惠券"
|
||||
},
|
||||
{
|
||||
"path": "/order-goods",
|
||||
"title": "OrderGoods 下单页商品列表"
|
||||
|
||||
@ -116,6 +116,6 @@
|
||||
"webpack": "^3.5.5",
|
||||
"webpack-dev-server": "^2.7.1",
|
||||
"webpack-merge": "^4.1.0",
|
||||
"zan-doc": "^0.2.10"
|
||||
"zan-doc": "^0.2.11"
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,6 +23,8 @@ import InvalidGoods from './invalid-goods';
|
||||
import Lazyload from './lazyload';
|
||||
import Loading from './loading';
|
||||
import NoticeBar from './notice-bar';
|
||||
import OrderCoupon from './order-coupon';
|
||||
import OrderCouponList from './order-coupon-list';
|
||||
import OrderGoods from './order-goods';
|
||||
import Panel from './panel';
|
||||
import PayOrder from './pay-order';
|
||||
@ -71,6 +73,8 @@ const components = [
|
||||
InvalidGoods,
|
||||
Loading,
|
||||
NoticeBar,
|
||||
OrderCoupon,
|
||||
OrderCouponList,
|
||||
OrderGoods,
|
||||
Panel,
|
||||
PayOrder,
|
||||
@ -135,6 +139,8 @@ export {
|
||||
Lazyload,
|
||||
Loading,
|
||||
NoticeBar,
|
||||
OrderCoupon,
|
||||
OrderCouponList,
|
||||
OrderGoods,
|
||||
Panel,
|
||||
PayOrder,
|
||||
|
||||
71
packages/order-coupon-list/Coupon.vue
Normal file
71
packages/order-coupon-list/Coupon.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div :class="['van-order-coupon-coupon', { 'van-order-coupon-coupon--disabled': disabled }]">
|
||||
<div class="van-order-coupon-coupon__head">
|
||||
<div class="van-order-coupon-coupon__lines"></div>
|
||||
<div class="van-order-coupon-coupon__gradient">
|
||||
<h2 v-html="faceAmount" />
|
||||
<p>{{ conditionMessage }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-order-coupon-coupon__body">
|
||||
<h2>{{ data.name }}</h2>
|
||||
<span>{{ validPeriod }}</span>
|
||||
<p v-if="disabled && data.reason">{{ data.reason }}</p>
|
||||
<div class="van-order-coupon-coupon__corner" v-if="chosen">
|
||||
<van-icon name="success" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from '../icon';
|
||||
|
||||
export default {
|
||||
name: 'van-order-coupon-coupon',
|
||||
|
||||
components: {
|
||||
[Icon.name]: Icon
|
||||
},
|
||||
|
||||
props: {
|
||||
data: Object,
|
||||
chosen: Boolean,
|
||||
disabled: Boolean
|
||||
},
|
||||
|
||||
computed: {
|
||||
validPeriod() {
|
||||
return `${this.getDate(this.data.start_at)}-${this.getDate(this.data.end_at)}`;
|
||||
},
|
||||
faceAmount() {
|
||||
return this.data.denominations !== 0
|
||||
? `<span>¥</span> ${this.formatAmount(this.data.denominations)}`
|
||||
: this.data.discount !== 0
|
||||
? this.formatDiscount(this.data.discount)
|
||||
: '';
|
||||
},
|
||||
conditionMessage() {
|
||||
let condition = this.data.origin_condition;
|
||||
condition = condition % 100 === 0 ? Math.round(condition / 100) : (condition / 100).toFixed(2);
|
||||
return this.data.origin_condition === 0 ? '无使用门槛' : `满${condition}元可用`;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getDate(timeStamp) {
|
||||
const date = new Date(timeStamp * 1000);
|
||||
return `${date.getFullYear()}.${this.padZero(date.getMonth() + 1)}.${this.padZero(date.getDate())}`;
|
||||
},
|
||||
padZero(num) {
|
||||
return (num < 10 ? '0' : '') + num;
|
||||
},
|
||||
formatDiscount(discount) {
|
||||
return `${(discount / 10).toFixed(discount % 10 === 0 ? 0 : 1)}折`;
|
||||
},
|
||||
formatAmount(amount) {
|
||||
return (amount / 100).toFixed(amount % 100 === 0 ? 0 : amount % 10 === 0 ? 1 : 2);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
153
packages/order-coupon-list/index.vue
Normal file
153
packages/order-coupon-list/index.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<van-popup v-model="showPopup" position="bottom" class="van-order-coupon-list">
|
||||
<van-cell-group class="van-order-coupon-list__top">
|
||||
<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-cell-group>
|
||||
<div class="van-order-coupon-list__list" ref="list">
|
||||
<van-order-coupon-coupon
|
||||
ref="card"
|
||||
v-for="(item, index) in coupons"
|
||||
:key="item.id || item.name"
|
||||
:data="item"
|
||||
:chosen="index === chosenCoupon"
|
||||
@click.native="onClickCoupon(index)"
|
||||
/>
|
||||
<h3 v-if="disabledCoupons.length">{{ disabledListTitle }}</h3>
|
||||
<van-order-coupon-coupon
|
||||
disabled
|
||||
v-for="item in disabledCoupons"
|
||||
:key="item.id || item.name"
|
||||
:data="item"
|
||||
/>
|
||||
</div>
|
||||
<div class="van-order-coupon-list__close" @click="onClickNotUse">{{ closeButtonText }}</div>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cell from '../cell';
|
||||
import CellGroup from '../cell-group';
|
||||
import Coupon from './Coupon';
|
||||
import Field from '../field';
|
||||
import Popup from '../popup';
|
||||
import Button from '../button';
|
||||
|
||||
export default {
|
||||
name: 'van-order-coupon-list',
|
||||
|
||||
components: {
|
||||
[Button.name]: Button,
|
||||
[Cell.name]: Cell,
|
||||
[CellGroup.name]: CellGroup,
|
||||
[Field.name]: Field,
|
||||
[Popup.name]: Popup,
|
||||
[Coupon.name]: Coupon
|
||||
},
|
||||
|
||||
model: {
|
||||
prop: 'show'
|
||||
},
|
||||
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
chosenCoupon: {
|
||||
type: Number,
|
||||
default: -1
|
||||
},
|
||||
coupons: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
disabledCoupons: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
exchangeButtonText: {
|
||||
type: String,
|
||||
default: '兑换'
|
||||
},
|
||||
exchangeButtonDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
displayedCouponIndex: {
|
||||
type: Number,
|
||||
default: -1
|
||||
},
|
||||
closeButtonText: {
|
||||
type: String,
|
||||
default: '不使用优惠'
|
||||
},
|
||||
disabledListTitle: {
|
||||
type: String,
|
||||
default: '不可用优惠'
|
||||
},
|
||||
inputPlaceholder: {
|
||||
type: String,
|
||||
default: '请输入优惠码'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
show(val) {
|
||||
this.showPopup = val;
|
||||
},
|
||||
showPopup(val) {
|
||||
this.$emit('input', val);
|
||||
this.scrollToTop();
|
||||
},
|
||||
displayedCouponIndex(val) {
|
||||
this.scrollToShowCoupon(val);
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
exchangeCode: '',
|
||||
showPopup: this.show
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.scrollToShowCoupon(this.displayedCouponIndex);
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickNotUse() {
|
||||
this.showPopup = false;
|
||||
this.$emit('change', -1);
|
||||
},
|
||||
onClickCoupon(index) {
|
||||
this.showPopup = false;
|
||||
this.$emit('change', index);
|
||||
},
|
||||
onClickExchangeButton() {
|
||||
this.$emit('exchange', this.exchangeCode);
|
||||
this.exchangeCode = '';
|
||||
},
|
||||
// 滚动到特定优惠券的位置
|
||||
scrollToShowCoupon(index) {
|
||||
if (index === -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
const { card, list } = this.$refs;
|
||||
|
||||
if (list && card && card[index]) {
|
||||
list.scrollTop = card[index].$el.offsetTop - 100;
|
||||
}
|
||||
});
|
||||
},
|
||||
scrollToTop() {
|
||||
const { list } = this.$refs;
|
||||
|
||||
list.scrollTop = 0;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
56
packages/order-coupon/index.vue
Normal file
56
packages/order-coupon/index.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="van-order-coupon">
|
||||
<van-cell-group>
|
||||
<van-cell title="优惠" :isLink="editable" @click="$emit('click')">
|
||||
<div v-if="coupons[chosenCoupon]">
|
||||
<h2>{{ amount }}</h2>
|
||||
<span>{{ coupons[chosenCoupon].condition }}</span>
|
||||
</div>
|
||||
<template v-else>{{ guide }}</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cell from '../cell';
|
||||
import CellGroup from '../cell-group';
|
||||
|
||||
export default {
|
||||
name: 'van-order-coupon',
|
||||
|
||||
components: {
|
||||
[Cell.name]: Cell,
|
||||
[CellGroup.name]: CellGroup
|
||||
},
|
||||
|
||||
model: {
|
||||
prop: 'chosenCoupon'
|
||||
},
|
||||
|
||||
props: {
|
||||
coupons: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
chosenCoupon: {
|
||||
type: Number,
|
||||
default: -1
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
guide() {
|
||||
return this.coupons.length === 0 ? '使用优惠' : `您有 ${this.coupons.length} 个可用优惠`;
|
||||
},
|
||||
amount() {
|
||||
const coupon = this.coupons[this.chosenCoupon];
|
||||
return `${coupon.name} 省￥${(coupon.value / 100).toFixed(2)}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Binary file not shown.
@ -1,40 +1,51 @@
|
||||
/**
|
||||
css组件库入口，组装成css组件库
|
||||
* style entry
|
||||
*/
|
||||
|
||||
/* base */
|
||||
@import './reset.css';
|
||||
|
||||
/* common components */
|
||||
@import './col.css';
|
||||
@import './row.css';
|
||||
@import './badge.css';
|
||||
@import './button.css';
|
||||
@import './cell.css';
|
||||
@import './cell-swipe.css';
|
||||
@import './card.css';
|
||||
@import './deep-select.css';
|
||||
@import './dialog.css';
|
||||
@import './field.css';
|
||||
@import './icon.css';
|
||||
@import './loading.css';
|
||||
@import './picker.css';
|
||||
@import './popup.css';
|
||||
@import './radio.css';
|
||||
@import './switch.css';
|
||||
@import './badge.css';
|
||||
@import './search.css';
|
||||
@import './panel.css';
|
||||
@import './steps.css';
|
||||
@import './tag.css';
|
||||
@import './checkbox.css';
|
||||
@import './tab.css';
|
||||
@import './col.css';
|
||||
@import './row.css';
|
||||
@import './image-preview.css';
|
||||
@import './actionsheet.css';
|
||||
@import './quantity.css';
|
||||
@import './progress.css';
|
||||
@import './toast.css';
|
||||
@import './uploader.css';
|
||||
@import './swipe.css';
|
||||
@import './notice-bar.css';
|
||||
@import './switch-cell.css';
|
||||
|
||||
/* form components */
|
||||
@import './checkbox.css';
|
||||
@import './field.css';
|
||||
@import './radio.css';
|
||||
@import './switch.css';
|
||||
@import './uploader.css';
|
||||
|
||||
/* action components */
|
||||
@import './actionsheet.css';
|
||||
@import './dialog.css';
|
||||
@import './picker.css';
|
||||
@import './toast.css';
|
||||
|
||||
/* business components */
|
||||
@import './deep-select.css';
|
||||
@import './express-way.css';
|
||||
@import './pay-order.css';
|
||||
@import './order-goods.css';
|
||||
@import './invalid-goods.css';
|
||||
@import './goods-action.css';
|
||||
@import './invalid-goods.css';
|
||||
@import './notice-bar.css';
|
||||
@import './order-coupon.css';
|
||||
@import './order-goods.css';
|
||||
@import './pay-order.css';
|
||||
@import './switch-cell.css';
|
||||
|
||||
196
packages/vant-css/src/order-coupon.css
Normal file
196
packages/vant-css/src/order-coupon.css
Normal file
@ -0,0 +1,196 @@
|
||||
@import "./mixins/border_retina.css";
|
||||
@import "./mixins/ellipsis.css";
|
||||
|
||||
.van-order-coupon {
|
||||
&-list {
|
||||
height: 100%;
|
||||
background-color: #f8f8f8;
|
||||
|
||||
&__top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::after {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__exchange {
|
||||
top: 6px;
|
||||
right: 15px;
|
||||
position: absolute;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&__list {
|
||||
padding: 60px 0;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
h3 {
|
||||
color: #999;
|
||||
margin: 15px 0;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 45px;
|
||||
height: 1px;
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 50%;
|
||||
margin-left: -95px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 50%;
|
||||
margin-right: -95px;
|
||||
}
|
||||
}
|
||||
|
||||
.van-order-coupon-card + h3 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&__close {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
line-height: 45px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-coupon {
|
||||
display: flex;
|
||||
height: 100px;
|
||||
margin: 0 15px 10px;
|
||||
|
||||
&__head {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-width: 126px;
|
||||
}
|
||||
|
||||
&__lines {
|
||||
height: 100%;
|
||||
min-width: 18px;
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAADICAMAAAC3WLNTAAAAclBMVEUAAAD/cHD/gID/amr/a2v/cXH/amr/dHT/cHD/cnL/bW3/aGj/dXX/gID/Z2f/Z2f/bW3/dXX/Zmb/dnb/Z2f/d3f/a2v/dnb/c3P/dXX/dHT/eHj/dHT/amr/cXH/bm7/aGj/bW3/cHD/bGz/dnb/Z2fPFIA9AAAAHHRSTlMANwyaQpoMQkLm5uaaBvPVvZSUj48rK/Pz1dVCCskVeAAABKBJREFUWMOFmdd2GzEMRKH03ntW0a5l//8vBh0hB2JgcZ/umRkC4JNJ6uvnn983rvvtnos/UzHy9uP9poj/7qGY+aCIcULxB6CPiYQjKn1VrzVIn7eqCDVT9AtlNlD6sWFBpg7RAxBiI/To9GYi8ILE9fwlaI0YSf1ugG2G6E17w22ETg0DSo/6UBtAHbKBHXJbHxwvmdBzBJzCZiLiII4FpzgNGKNbpj9/tj8LTA8hgdkZYq01Jkr/1yJmVpxn4vrPBQXSVEuQAMFyO/ssoAi1ghRZp5cBPzVkQdmqeLAFxFQSPUdaT+2GwfTQKXrQY/6kjIH8AGHr0Q4wDF5MQtgCL0FKDJtZEGrpWKoEQY4KGDiAgNpQ6Q6E/oDSHUrNIDEDXAEFYXJQurvrHEdIkYljYsBIAFRCO5FatosE0QPpUUkh7GoNeLogrg1xvXhpGHZrWDrL1QvV+jICk/ZPPYQbXTC1eFIayjlcVIcMAcqYtOOy7ChWwZWCS252lHnBhFMolM0MpAd9LBf+48Iput2FASH4mBIKMcSVQq1hKF1MKYgJKyV1teqUyi8viVBhl6IQilwru+RSigsgp1ALleyU1B1ApZUAQi7Tx5cB/yOkFLx8W5XABqHQyqVToORyH4zz9S0hpmAf/CEMfrUQhsWTSmQOxhRATkRLBUG7SpYYBM/xFJPQi1FHuCG+Mq8SCKwY1rKxHEcB0AqxOxZIJCNG9A+5ooiFWikLZuMhRfggWOEFUgSJuqRChWEsg67GtMn9Ry5zE/u/nWPEbvwLuT6/QFModGToGkouhSvBA358RK5yLEaVuJ68cs9b4W3pHOk6Lx/Sesw3vEQwlPKHEFJ9LH9SdUOkEjrqhs4gdOJuFQepPLgP5+KnU3rCkazzfSprphP9RthYrlKHnl6LrlaBtBSdz9ezMemJkBLnUEpqgrgESQyWXpXCT4jMlVqViT9KFlhY2VWsrAm6Zi6/YPZLQIMSCQ4ab3b2SerfYRvkgEPmNWgdDhlZrVC5Syk94wEHUZOuCx65Kh6sMg1dzaUbu8VEVb47Far52BTj5cdDqCtCt5jzJzXd8NATz9qhZwqE35TrUnaBlVJ5evBizoOUOVoLlHG1EktHb2YxpVWLKmMJwDHnjtp52kekYgnnajQh1dRKL9A+C4VU7hdNjCHDnlqmHXMJWE2F4IDp7fa9cxxykSL8wfs5J8FFaO/tMjpDZohYgSQyejDUeVCqUL2nDni/wYSjrsprj7XfkMqlY+xmdF/fCgb5EzppsxDxWP6kNBTGutrHIVFyBJc57fYcD3IVPLrQZbcW7FH9alkzQ6iftY7FVXKKaPcP4VdELXrYAUNoYILYV0qVbKEUlwS7B/4DysVKCQwtFmTCKxpT0ANKwe0emlT2WWeqFUwlhkRu0S0ZMCPLfvqqNEr1NGLp+lgpF+srwVqsoFPY4RULeiZ3vHnD3SEGeqnBjhn5tY6uxK0SrB1QtkAIw1qpaGYJ4axtLMbYBRFjyIjg+lgBlVpT9G6ghEGO3g9M3yv6MhB+ZqVvKIR29CmBm6D8uxCRiSOmJq0dM0l9+/L+3crwL+JFMIL5LZlUAAAAAElFTkSuQmCC') no-repeat;
|
||||
background-size: 18px 100px;
|
||||
}
|
||||
|
||||
&__gradient {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
margin-left: -1px; /* hack for flex space */
|
||||
text-align: center;
|
||||
padding-right: 16px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-image: linear-gradient(45deg, #ff6868, #ff8c8c);
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
@mixin multi-ellipsis 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding: 0 15px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-radius: 0 4px 4px 0;
|
||||
|
||||
h2 {
|
||||
opacity: .8;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p,
|
||||
span {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
span {
|
||||
line-height: 1.4;
|
||||
@mixin multi-ellipsis 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__corner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 18px 19px;
|
||||
border-radius: 0 4px 0 0;
|
||||
border-color: #f44 #f44 transparent transparent;
|
||||
|
||||
.van-icon {
|
||||
position: absolute;
|
||||
top: -13px;
|
||||
right: -13px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
|
||||
&::before {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
.van-order-coupon-coupon__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==');
|
||||
}
|
||||
|
||||
.van-order-coupon-coupon__gradient {
|
||||
background-image: linear-gradient(45deg, #a4a9b2, #b7bcc3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
321
test/unit/specs/order-coupon.spec.js
Normal file
321
test/unit/specs/order-coupon.spec.js
Normal file
@ -0,0 +1,321 @@
|
||||
import OrderCoupon from 'packages/order-coupon';
|
||||
import OrderCouponList from 'packages/order-coupon-list';
|
||||
import { mount } from 'avoriaz';
|
||||
import { DOMChecker } from '../utils';
|
||||
|
||||
const coupon = {
|
||||
available: 1,
|
||||
discount: 0,
|
||||
denominations: 150,
|
||||
origin_condition: 0,
|
||||
reason: '',
|
||||
value: 150,
|
||||
condition: '下单立减 1.50 元',
|
||||
name: '新手专用优惠券',
|
||||
start_at: 1489104000,
|
||||
end_at: 1514592000
|
||||
};
|
||||
|
||||
const discountCoupon = {
|
||||
...coupon,
|
||||
discount: 88,
|
||||
denominations: 0,
|
||||
origin_condition: 50,
|
||||
value: 12,
|
||||
condition: '下单即享 8.8 折'
|
||||
};
|
||||
|
||||
const emptyCoupon = {
|
||||
denominations: 0,
|
||||
discount: 0
|
||||
};
|
||||
|
||||
const disabledCoupon = {
|
||||
...coupon,
|
||||
avaliable: 0,
|
||||
reason: '未满足使用门槛'
|
||||
};
|
||||
|
||||
const disabledDiscountCoupon = {
|
||||
...discountCoupon,
|
||||
avaliable: 0,
|
||||
reason: '未满足使用门槛'
|
||||
};
|
||||
|
||||
describe('OrderCoupon', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('no coupon', () => {
|
||||
wrapper = mount(OrderCoupon, {});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-cell__value--link': '使用优惠'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('has two coupon', () => {
|
||||
wrapper = mount(OrderCoupon, {
|
||||
propsData: {
|
||||
coupons: [coupon, discountCoupon]
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-cell__value--link': '您有 2 个可用优惠'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('select first coupon', () => {
|
||||
wrapper = mount(OrderCoupon, {
|
||||
propsData: {
|
||||
chosenCoupon: 0,
|
||||
coupons: [coupon, discountCoupon]
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-cell__value--link h2': '新手专用优惠券 省￥1.50',
|
||||
'.van-cell__value--link span': '下单立减 1.50 元'
|
||||
},
|
||||
count: {
|
||||
'.van-cell__right-icon': 1
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('not editable', () => {
|
||||
wrapper = mount(OrderCoupon, {
|
||||
propsData: {
|
||||
chosenCoupon: 0,
|
||||
coupons: [coupon, discountCoupon],
|
||||
editable: false
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-cell__value h2': '新手专用优惠券 省￥1.50',
|
||||
'.van-cell__value span': '下单立减 1.50 元'
|
||||
},
|
||||
count: {
|
||||
'.van-cell__right-icon': 0
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('OrderCouponList', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('no coupon', () => {
|
||||
wrapper = mount(OrderCouponList, {
|
||||
propsData: {
|
||||
chosenCoupon: -1
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
count: {
|
||||
'.van-order-coupon-coupon': 0,
|
||||
'.van-order-coupon-coupon--disabled': 0,
|
||||
'.van-order-coupon-list__list h3': 0
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('has two coupon', () => {
|
||||
wrapper = mount(OrderCouponList, {
|
||||
propsData: {
|
||||
chosenCoupon: -1,
|
||||
coupons: [coupon, discountCoupon],
|
||||
disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
|
||||
}
|
||||
});
|
||||
DOMChecker(wrapper, {
|
||||
count: {
|
||||
'.van-order-coupon-coupon': 4,
|
||||
'.van-order-coupon-coupon--disabled': 2,
|
||||
'.van-order-coupon-list__list h3': 1
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('switch to first coupon', (done) => {
|
||||
wrapper = mount(OrderCouponList, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
show: true,
|
||||
chosenCoupon: -1,
|
||||
coupons: [coupon, discountCoupon],
|
||||
disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$on('change', (index) => {
|
||||
wrapper.vm.chosenCoupon = index;
|
||||
});
|
||||
|
||||
// 弹出 popup
|
||||
setTimeout(() => {
|
||||
expect(wrapper.find('.van-order-coupon-list')[0].hasStyle('display', 'none')).to.equal(false);
|
||||
wrapper.find('.van-order-coupon-coupon')[0].trigger('click');
|
||||
|
||||
setTimeout(() => {
|
||||
expect(wrapper.vm.chosenCoupon).to.equal(0);
|
||||
done();
|
||||
}, 300);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
it('cancel select coupon', (done) => {
|
||||
wrapper = mount(OrderCouponList, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
show: false,
|
||||
chosenCoupon: 0,
|
||||
displayedCouponIndex: 0,
|
||||
coupons: [coupon, discountCoupon],
|
||||
disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.show = true;
|
||||
|
||||
wrapper.vm.$on('change', (index) => {
|
||||
wrapper.vm.chosenCoupon = index;
|
||||
wrapper.vm.displayedCouponIndex = index;
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
wrapper.find('.van-order-coupon-list__close')[0].trigger('click');
|
||||
setTimeout(() => {
|
||||
expect(wrapper.vm.chosenCoupon).to.equal(-1);
|
||||
expect(wrapper.find('.van-order-coupon-list')[0].hasStyle('display', 'none')).to.equal(true);
|
||||
done();
|
||||
}, 500);
|
||||
}, 500);
|
||||
});
|
||||
|
||||
it('denominations format', () => {
|
||||
wrapper = mount(OrderCouponList, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
coupons: [coupon, {
|
||||
...coupon,
|
||||
denominations: 10
|
||||
}, {
|
||||
...coupon,
|
||||
denominations: 100
|
||||
}, {
|
||||
...coupon,
|
||||
denominations: 135
|
||||
}, {
|
||||
...coupon,
|
||||
denominations: 0
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-order-coupon-coupon__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-order-coupon-coupon__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-order-coupon-coupon__gradient h2')[4].text()).to.equal('');
|
||||
});
|
||||
|
||||
it('discount format', () => {
|
||||
wrapper = mount(OrderCouponList, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
coupons: [discountCoupon, {
|
||||
...discountCoupon,
|
||||
discount: 10
|
||||
}, {
|
||||
...discountCoupon,
|
||||
discount: 0
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-order-coupon-coupon__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-order-coupon-coupon__gradient h2')[2].text()).to.equal('');
|
||||
});
|
||||
|
||||
it('add coupon', (done) => {
|
||||
wrapper = mount(OrderCouponList, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
show: true,
|
||||
chosenCoupon: 0,
|
||||
coupons: [coupon, discountCoupon, emptyCoupon],
|
||||
disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
|
||||
}
|
||||
});
|
||||
|
||||
const code = '123123';
|
||||
|
||||
wrapper.vm.$on('exchange', (code) => {
|
||||
expect(code).to.equal(code);
|
||||
wrapper.vm.coupons.push(coupon);
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
DOMChecker(wrapper, {
|
||||
count: {
|
||||
'.van-button--disabled': 1
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.find('.van-field__control')[0].element.value = code;
|
||||
wrapper.find('.van-field__control')[0].trigger('input');
|
||||
|
||||
setTimeout(() => {
|
||||
wrapper.find('.van-order-coupon-list__exchange')[0].trigger('click');
|
||||
DOMChecker(wrapper, {
|
||||
count: {
|
||||
'.van-button--disabled': 0
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
expect(wrapper.find('.van-order-coupon-list')[0].hasStyle('display', 'none')).to.equal(false);
|
||||
DOMChecker(wrapper, {
|
||||
count: {
|
||||
'.van-button--disabled': 1,
|
||||
'.van-order-coupon-coupon': 6,
|
||||
'.van-order-coupon-coupon--disabled': 2
|
||||
}
|
||||
});
|
||||
done();
|
||||
}, 300);
|
||||
}, 300);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
it('displayedCouponIndex out of range', (done) => {
|
||||
wrapper = mount(OrderCouponList, {
|
||||
propsData: {
|
||||
show: true,
|
||||
displayedCouponIndex: -100,
|
||||
coupons: [coupon, discountCoupon, emptyCoupon]
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.chosenCoupon).to.equal(-1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -7800,9 +7800,9 @@ yeast@0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
|
||||
|
||||
zan-doc@^0.2.10:
|
||||
version "0.2.10"
|
||||
resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.10.tgz#eb08f72100a873dd8ae0b2eb7f7454d3ff256322"
|
||||
zan-doc@^0.2.11:
|
||||
version "0.2.11"
|
||||
resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.11.tgz#dab35d0c0fa10fc91a28129b6ca026f62e3da78d"
|
||||
dependencies:
|
||||
cheerio "0.22.0"
|
||||
decamelize "^1.2.0"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user