[Improvement] Coupon: upgrade style (#1636)
This commit is contained in:
neverland
@@ -1,25 +1,23 @@
|
||||
<template>
|
||||
<div :class="b({ disabled })">
|
||||
<div :class="b('head')">
|
||||
<div :class="b('lines')" />
|
||||
<div :class="b('gradient')">
|
||||
<div :class="b('content')">
|
||||
<div :class="b('head')">
|
||||
<h2 v-html="faceAmount" />
|
||||
<p>{{ conditionMessage }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="b('body')">
|
||||
<h2>{{ data.name }}</h2>
|
||||
<span>{{ validPeriod }}</span>
|
||||
<p v-if="disabled && data.reason">{{ data.reason }}</p>
|
||||
<div v-if="chosen" :class="b('corner')" >
|
||||
<icon name="success" />
|
||||
<div :class="b('body')">
|
||||
<h2>{{ data.name }}</h2>
|
||||
<p>{{ validPeriod }}</p>
|
||||
<checkbox v-if="chosen" :class="b('corner')" :value="true" />
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="disabled && data.reason" :class="b('reason')">{{ data.reason }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import create from '../utils/create';
|
||||
import Checkbox from '../checkbox';
|
||||
|
||||
export default create({
|
||||
name: 'coupon-item',
|
||||
@@ -30,9 +28,13 @@ export default create({
|
||||
disabled: Boolean
|
||||
},
|
||||
|
||||
components: {
|
||||
Checkbox
|
||||
},
|
||||
|
||||
computed: {
|
||||
validPeriod() {
|
||||
return `${this.getDate(this.data.start_at)}-${this.getDate(this.data.end_at)}`;
|
||||
return `${this.$t('valid')}：${this.getDate(this.data.start_at)} - ${this.getDate(this.data.end_at)}`;
|
||||
},
|
||||
|
||||
faceAmount() {
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
@click="showList = true"
|
||||
/>
|
||||
|
||||
<van-popup v-model="showList" position="bottom" :lazy-render="false">
|
||||
<van-popup v-model="showList" position="bottom">
|
||||
<van-coupon-list
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
<template>
|
||||
<div :class="b()">
|
||||
<cell-group v-if="showExchangeBar" :class="b('top')">
|
||||
<field
|
||||
v-model="currentCode"
|
||||
clearable
|
||||
:class="b('field')"
|
||||
class="van-hairline--surround"
|
||||
:placeholder="inputPlaceholder || $t('placeholder')"
|
||||
:maxlength="20"
|
||||
/>
|
||||
<field
|
||||
v-if="showExchangeBar"
|
||||
v-model="currentCode"
|
||||
clearable
|
||||
:border="false"
|
||||
:class="b('field')"
|
||||
:placeholder="inputPlaceholder || $t('placeholder')"
|
||||
:maxlength="20"
|
||||
>
|
||||
<van-button
|
||||
slot="button"
|
||||
size="small"
|
||||
type="danger"
|
||||
:class="b('exchange')"
|
||||
@@ -18,33 +19,44 @@
|
||||
:disabled="buttonDisabled"
|
||||
@click="onClickExchangeButton"
|
||||
/>
|
||||
</cell-group>
|
||||
<div :class="b('list', { 'with-exchange': showExchangeBar })" ref="list">
|
||||
<coupon-item
|
||||
ref="card"
|
||||
v-for="(item, index) in coupons"
|
||||
:key="item.id || item.name"
|
||||
:data="item"
|
||||
:chosen="index === chosenCoupon"
|
||||
@click.native="$emit('change', index)"
|
||||
/>
|
||||
<h3 v-if="disabledCoupons.length">{{ disabledListTitle || $t('disabled') }}</h3>
|
||||
<coupon-item
|
||||
disabled
|
||||
v-for="item in disabledCoupons"
|
||||
:key="item.id || item.name"
|
||||
:data="item"
|
||||
/>
|
||||
<div v-if="!coupons.length && !disabledCoupons.length" :class="b('empty')">
|
||||
<img src="https://img.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png" >
|
||||
<p>{{ $t('empty') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
</field>
|
||||
<tabs v-model="tab" :class="b('tab')" :line-width="120">
|
||||
<tab :title="title">
|
||||
<div :class="b('list')" :style="listStyle">
|
||||
<coupon-item
|
||||
ref="card"
|
||||
v-for="(item, index) in coupons"
|
||||
:key="item.id || item.name"
|
||||
:data="item"
|
||||
:chosen="index === chosenCoupon"
|
||||
@click.native="$emit('change', index)"
|
||||
/>
|
||||
<div v-if="!coupons.length" :class="b('empty')">
|
||||
<img src="https://img.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png" >
|
||||
<p>{{ $t('empty') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</tab>
|
||||
<tab :title="disabledTitle">
|
||||
<div :class="b('list')" :style="listStyle">
|
||||
<coupon-item
|
||||
disabled
|
||||
v-for="item in disabledCoupons"
|
||||
:key="item.id || item.name"
|
||||
:data="item"
|
||||
/>
|
||||
<div v-if="!disabledCoupons.length" :class="b('empty')">
|
||||
<img src="https://img.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png" >
|
||||
<p>{{ $t('empty') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</tab>
|
||||
</tabs>
|
||||
<van-button
|
||||
v-show="showCloseButton"
|
||||
v-text="closeButtonText || $t('close')"
|
||||
size="large"
|
||||
:class="b('close')"
|
||||
class="van-hairline--top"
|
||||
:text="closeButtonText || $t('close')"
|
||||
@click="$emit('change', -1)"
|
||||
/>
|
||||
</div>
|
||||
@@ -55,13 +67,17 @@ import create from '../utils/create';
|
||||
import CouponItem from './Item';
|
||||
import Field from '../field';
|
||||
import VanButton from '../button';
|
||||
import Tab from '../tab';
|
||||
import Tabs from '../tabs';
|
||||
|
||||
export default create({
|
||||
name: 'coupon-list',
|
||||
|
||||
components: {
|
||||
VanButton,
|
||||
Tab,
|
||||
Tabs,
|
||||
Field,
|
||||
VanButton,
|
||||
CouponItem
|
||||
},
|
||||
|
||||
@@ -109,6 +125,8 @@ export default create({
|
||||
|
||||
data() {
|
||||
return {
|
||||
tab: 0,
|
||||
winHeight: window.innerHeight,
|
||||
currentCode: this.code || ''
|
||||
};
|
||||
},
|
||||
@@ -120,6 +138,20 @@ export default create({
|
||||
(this.exchangeButtonDisabled ||
|
||||
this.currentCode.length < this.exchangeMinLength)
|
||||
);
|
||||
},
|
||||
|
||||
title() {
|
||||
return `${this.$t('enable')} (${this.coupons.length})`;
|
||||
},
|
||||
|
||||
disabledTitle() {
|
||||
return `${this.$t('disabled')} (${this.disabledCoupons.length})`;
|
||||
},
|
||||
|
||||
listStyle() {
|
||||
return {
|
||||
height: this.winHeight - (this.showExchangeBar ? 140 : 94) + 'px'
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -10,94 +10,12 @@ exports[`renders demo correctly 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value"><span>您有 2 个可用优惠</span></div>
|
||||
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;size:undefined;">
|
||||
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
|
||||
<div class="van-coupon-list">
|
||||
<div class="van-cell-group van-hairline--top-bottom van-coupon-list__top">
|
||||
<div placeholder="请输入优惠码" maxlength="20" class="van-hairline--surround van-cell van-hairline van-field van-coupon-list__field">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-field__body">
|
||||
<input type="text" placeholder="请输入优惠码" maxlength="20" value="" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<button disabled="disabled" class="van-button van-button--danger van-button--small van-button--disabled van-button--unclickable van-coupon-list__exchange">
|
||||
<!----><span class="van-button__text">兑换</span></button>
|
||||
</div>
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-exchange">
|
||||
<div class="van-coupon-item">
|
||||
<div class="van-coupon-item__head">
|
||||
<div class="van-coupon-item__lines"></div>
|
||||
<div class="van-coupon-item__gradient">
|
||||
<h2><span>¥</span> 1.5</h2>
|
||||
<p>无使用门槛</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-coupon-item__body">
|
||||
<h2>优惠券名称</h2> <span>2017.03.10-2017.12.30</span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-coupon-item">
|
||||
<div class="van-coupon-item__head">
|
||||
<div class="van-coupon-item__lines"></div>
|
||||
<div class="van-coupon-item__gradient">
|
||||
<h2>8.8折</h2>
|
||||
<p>满0.50元可用</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-coupon-item__body">
|
||||
<h2>优惠券名称</h2> <span>2017.03.10-2017.12.30</span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<h3>不可用优惠</h3>
|
||||
<div class="van-coupon-item van-coupon-item--disabled">
|
||||
<div class="van-coupon-item__head">
|
||||
<div class="van-coupon-item__lines"></div>
|
||||
<div class="van-coupon-item__gradient">
|
||||
<h2><span>¥</span> 1.5</h2>
|
||||
<p>无使用门槛</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-coupon-item__body">
|
||||
<h2>优惠券名称</h2> <span>2017.03.10-2017.12.30</span>
|
||||
<p>优惠券不可用原因</p>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-coupon-item van-coupon-item--disabled">
|
||||
<div class="van-coupon-item__head">
|
||||
<div class="van-coupon-item__lines"></div>
|
||||
<div class="van-coupon-item__gradient">
|
||||
<h2>1折</h2>
|
||||
<p>满0.50元可用</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-coupon-item__body">
|
||||
<h2>优惠券名称</h2> <span>2017.03.10-2017.12.30</span>
|
||||
<p>优惠券不可用原因</p>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-hairline--top van-coupon-list__close">不使用优惠</div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user