|
|
|
<template>
|
|
|
|
<LayoutApp>
|
|
|
|
<!--<div class="mask"></div>-->
|
|
|
|
<Tabs>
|
|
|
|
<template slot="panes">
|
|
|
|
<div class="head"></div>
|
|
|
|
<TabPane label="有货优惠券">
|
|
|
|
|
|
|
|
<TabBar
|
|
|
|
v-model="selectLabel"
|
|
|
|
show-slider
|
|
|
|
:data="tabLabels"
|
|
|
|
ref="tabNav"
|
|
|
|
<div style="height: 100%">
|
|
|
|
<div class="head"></div>
|
|
|
|
<TabBar class="tab-container"
|
|
|
|
v-model="selectLabel"
|
|
|
|
ref="tabNav"
|
|
|
|
>
|
|
|
|
|
|
|
|
<Tab class="tab-item" v-for="(item, index) in tabLabels" :label="item.label" :key="item.label"></Tab>
|
|
|
|
</TabBar>
|
|
|
|
|
|
|
|
<div class="tab-side-container">
|
|
|
|
<div class="tab-slide-container">
|
|
|
|
<Slide
|
|
|
|
ref="slide"
|
|
|
|
:loop="false"
|
|
...
|
...
|
@@ -26,64 +19,53 @@ |
|
|
|
@scroll="scroll"
|
|
|
|
@change="changePage"
|
|
|
|
>
|
|
|
|
<SlideItem>
|
|
|
|
<!--<FilterBar v-if="showFilter" :list="filterList"></FilterBar>-->
|
|
|
|
<!--<div class="head"></div>-->
|
|
|
|
<Scroll :data="yohoList.notuse" :options="scrollOptions">
|
|
|
|
<div class="coupon-wrapper" v-for="(item, index) in yohoList.notuse" :key="index">
|
|
|
|
<div class="coupon-item">{{item.coupon_name}}</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<SlideItem style="background-color: #F0F0F0;">
|
|
|
|
<ExchangeBox></ExchangeBox>
|
|
|
|
<div class="head"></div>
|
|
|
|
<Scroll :data="yohoList.notuse" :options="scrollOptions" v-if="yohoList.notuse.length" style="padding: 20px">
|
|
|
|
<CouponItem :item="item" v-for="(item, index) in yohoList.notuse" :key ="index"></CouponItem>
|
|
|
|
</Scroll>
|
|
|
|
<Empty v-else></Empty>
|
|
|
|
</SlideItem>
|
|
|
|
|
|
|
|
<SlideItem>
|
|
|
|
<Scroll :data="yohoList.use" :options="scrollOptions">
|
|
|
|
<div class="coupon-wrapper" v-for="(item, index) in yohoList.use" :key="index">
|
|
|
|
<div class="coupon-item">{{item.coupon_name}}</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<SlideItem style="background-color: #F0F0F0;">
|
|
|
|
<Scroll :data="yohoList.use" :options="scrollOptions" v-if="yohoList.use.length">
|
|
|
|
<CouponItem :item="item" v-for="(item, index) in yohoList.use" :key ="index" v-if="yohoList.use.length"></CouponItem>
|
|
|
|
</Scroll>
|
|
|
|
<Empty v-else></Empty>
|
|
|
|
</SlideItem>
|
|
|
|
|
|
|
|
<SlideItem>
|
|
|
|
<Scroll :data="yohoList.overtime" :options="scrollOptions">
|
|
|
|
<div class="coupon-wrapper" v-for="(item, index) in yohoList.overtime" :key="index">
|
|
|
|
<div class="coupon-item">{{item.coupon_name}}</div>
|
|
|
|
</div>
|
|
|
|
<SlideItem style="background-color: #F0F0F0;">
|
|
|
|
<Scroll :data="yohoList.overtime" :options="scrollOptions" v-if="yohoList.overtime.length">
|
|
|
|
<CouponItem :item="item" v-for="(item, index) in yohoList.overtime" :key ="index" v-if="yohoList.overtime.length"></CouponItem>
|
|
|
|
</Scroll>
|
|
|
|
<Empty v-else></Empty>
|
|
|
|
</SlideItem>
|
|
|
|
</Slide>
|
|
|
|
</div>
|
|
|
|
</TabPane>
|
|
|
|
|
|
|
|
<TabPane label="UFO优惠券">
|
|
|
|
<div class="coupon-wrapper">
|
|
|
|
<div class="coupon-item">huangtao2;</div>
|
|
|
|
</div>
|
|
|
|
</TabPane>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
</Tabs>
|
|
|
|
</LayoutApp>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import {createNamespacedHelpers} from 'vuex';
|
|
|
|
|
|
|
|
const {mapState, mapActions} = createNamespacedHelpers('coupon/yoho');
|
|
|
|
const {mapState, mapActions, mapGetters} = createNamespacedHelpers('coupon/yoho');
|
|
|
|
|
|
|
|
import Tabs from '../components/tabs';
|
|
|
|
import FilterBar from '../components/filter-bar';
|
|
|
|
import ExchangeBox from '../components/exchange-box';
|
|
|
|
import CouponItem from '../components/coupon-item';
|
|
|
|
import Empty from '../components/empty';
|
|
|
|
|
|
|
|
import {TabBar, Slide, Scroll} from 'cube-ui';
|
|
|
|
|
|
|
|
const type = {notuse: 'notuse', use: 'use', overtime: 'overtime'};
|
|
|
|
const TYPE = {notuse: 'notuse', use: 'use', overtime: 'overtime'};
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'YohoCouponListPage',
|
|
|
|
computed: {
|
|
|
|
...mapState(['yohoList', 'filterList', 'showFilter']),
|
|
|
|
...mapGetters(['getNotUseNum', 'getUseNum', 'getOvertime']),
|
|
|
|
initialIndex() {
|
|
|
|
let index = 0;
|
|
|
|
|
|
...
|
...
|
@@ -93,7 +75,7 @@ export default { |
|
|
|
},
|
|
|
|
asyncData({store, router}) {
|
|
|
|
return store.dispatch('coupon/yoho/fetchYohoList', {
|
|
|
|
type: type.notuse,
|
|
|
|
type: TYPE.notuse,
|
|
|
|
filter: 0,
|
|
|
|
limit: 20,
|
|
|
|
page: 1
|
|
...
|
...
|
@@ -102,18 +84,18 @@ export default { |
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
selectLabel: '未使用',
|
|
|
|
selectType: type.notuse,
|
|
|
|
selectType: TYPE.notuse,
|
|
|
|
selectFilter: 0,
|
|
|
|
tabLabels: [
|
|
|
|
{
|
|
|
|
label: '未使用',
|
|
|
|
type: type.notuse
|
|
|
|
type: TYPE.notuse
|
|
|
|
}, {
|
|
|
|
label: '已使用',
|
|
|
|
type: type.use
|
|
|
|
type: TYPE.use
|
|
|
|
}, {
|
|
|
|
label: '已失效',
|
|
|
|
type: type.overtime
|
|
|
|
type: TYPE.overtime
|
|
|
|
}
|
|
|
|
],
|
|
|
|
scrollOptions: {
|
|
...
|
...
|
@@ -129,6 +111,7 @@ export default { |
|
|
|
created() {
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.getNum();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
tabCls(item) {
|
|
...
|
...
|
@@ -145,14 +128,18 @@ export default { |
|
|
|
changePage(current) {
|
|
|
|
this.selectLabel = this.tabLabels[current].label;
|
|
|
|
this.selectType = this.tabLabels[current].type;
|
|
|
|
console.log(current, 'index', this.selectType, this.selectLabel);
|
|
|
|
|
|
|
|
console.log(this.$store);
|
|
|
|
return this.$store.dispatch('coupon/yoho/fetchYohoList', {
|
|
|
|
type: this.selectType,
|
|
|
|
filter: this.selectFilter,
|
|
|
|
limit: 20,
|
|
|
|
page: 1
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
getNum() {
|
|
|
|
return this.$store.dispatch('coupon/yoho/fetchYohoNum', {});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {
|
|
...
|
...
|
@@ -162,9 +149,12 @@ export default { |
|
|
|
ClassicTabs: Tabs.ClassicTabs,
|
|
|
|
ExchangeBox,
|
|
|
|
TabBar,
|
|
|
|
Tab: TabBar.Tab,
|
|
|
|
Slide,
|
|
|
|
SlideItem: Slide,
|
|
|
|
Scroll
|
|
|
|
SlideItem: Slide.Item,
|
|
|
|
Scroll,
|
|
|
|
CouponItem,
|
|
|
|
Empty
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
...
|
...
|
@@ -208,10 +198,35 @@ export default { |
|
|
|
}
|
|
|
|
|
|
|
|
.tab-slide-container {
|
|
|
|
position: fixed;
|
|
|
|
top: 74px;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
/*position: fixed;*/
|
|
|
|
/*left: 0;*/
|
|
|
|
/*right: 0;*/
|
|
|
|
/*bottom: 0;*/
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab-container {
|
|
|
|
height: 90px;
|
|
|
|
background-color: white;
|
|
|
|
border-bottom: 1px solid #e0e0e0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab-item {
|
|
|
|
line-height: 60px;
|
|
|
|
text-align: center;
|
|
|
|
font-size: 28px;
|
|
|
|
color: #b0b0b0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab-item + .tab-item {
|
|
|
|
border-left: 1px solid #e0e0e0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.cube-tab_active {
|
|
|
|
color: #444 !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.cube-scroll-wrapper {
|
|
|
|
padding-top: 20px;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
