ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-18 09:24:25 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

[new feature] Coupon add 'showExchangeBar' prop && add empty style (#243)

Browse Source 
* [bugfix] Checkbox border render error in weixin browser

* [bugfix] TreeSelect dependency path error

* [bugfix] Swipe should clear autoplay timer when destroyed

* [bugfix] Optimize component dependency analyze when build style entry

* merge

* update yarn.lock

* update README.md

* update README.md

* update README.md

* update README.md

* update README.md

* [Doc] add more badges in README.md

* update README.md

* [bugfix] Address & Contact list style

* fix: contact test cases

* [bugfix] popup style missing when build style entry

* [bugfix] Search: onSearch event arguments missing

* [Doc] add demo pages

* update zan-doc@0.3.7

* fix: build entry error

* [Doc] add goods demo

* [bugfix] button primary background color

* [Doc] update doc detail

* [new feature] Coupon add 'showExchangeBar' prop && add empty style
This commit is contained in:
neverland
2017-10-24 22:19:44 -05:00
committed by GitHub
parent 276042b84c
commit 9178ebab86
7 changed files with 89 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/coupon-list/index.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="van-coupon-list">
<van-cell-group class="van-coupon-list__top">
<van-field v-model="exchangeCode" :placeholder="inputPlaceholder" :maxlength="20" />
<van-cell-group class="van-coupon-list__top" v-if="showExchangeBar">
<van-field class="van-coupon-list__filed van-hairline--surround" v-model="exchangeCode" :placeholder="inputPlaceholder" :maxlength="20" />
<van-button size="small" type="danger" class="van-coupon-list__exchange" :disabled="exchangeButtonDisabled || !exchangeCode.length" @click="onClickExchangeButton">{{ exchangeButtonText }}</van-button>
</van-cell-group>
<div class="van-coupon-list__list" ref="list">
<div :class="['van-coupon-list__list', { 'van-coupon-list--with-exchange': showExchangeBar }]" ref="list">
<van-coupon-item
ref="card"
v-for="(item, index) in coupons"
@@ -20,6 +20,10 @@
:key="item.id || item.name"
:data="item"
/>
<div class="van-coupon-list__empty">
<img src="https://b.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png" >
<p>暂无优惠券</p>
</div>
</div>
<div class="van-coupon-list__close van-hairline--top" @click="onClickNotUse">{{ closeButtonText }}</div>
</div>
@@ -81,6 +85,10 @@ export default {
inputPlaceholder: {
type: String,
default: '请输入优惠码'
},
showExchangeBar: {
type: Boolean,
default: true
}
},

42
packages/vant-css/src/coupon-list.css
View File

@@ -13,20 +13,33 @@
left: 0;
width: 100%;
z-index: 1;
padding-right: 85px;
box-sizing: border-box;
}
&__filed {
margin: 10px 0;
padding: 4px 10px;
&::after {
border-radius: 6px;
border-color: #cacaca;
}
}
&__exchange {
top: 6px;
top: 10px;
right: 15px;
height: 32px;
line-height: 30px;
position: absolute;
border-radius: 2px;
}
&__list {
padding: 60px 0;
max-height: 100%;
overflow-y: auto;
padding: 15px 0 60px;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
@@ -64,6 +77,10 @@
}
}
&--with-exchange {
padding-top: 60px;
}
&__close {
left: 0;
bottom: 0;
@@ -73,6 +90,27 @@
text-align: center;
position: absolute;
background-color: $white;
&:active {
background-color: $active-color;
}
}
&__empty {
padding-top: 100px;
text-align: center;
p {
color: #999;
margin: 15px 0;
font-size: 14px;
line-height: 20px;
}
img {
width: 80px;
height: 84px;
}
}
}