|
|
<template>
|
|
|
<div style="height: 100%">
|
|
|
<div style="height: 100%;">
|
|
|
<div class="head"></div>
|
|
|
<ClassicTabs v-model="selectLabel" :data="tabLabels" @filter="onFilterChange"></ClassicTabs>
|
|
|
<ClassicTabs ref="tabs" v-model="selectLabel" :data="tabLabels" @on-filter-change="onFilterChange"></ClassicTabs>
|
|
|
|
|
|
<div class="tab-slide-container">
|
|
|
<Slide
|
...
|
...
|
@@ -15,11 +15,11 @@ |
|
|
@change="changePage"
|
|
|
>
|
|
|
<SlideItem style="background-color: #f0f0f0;">
|
|
|
<ExchangeBox></ExchangeBox>
|
|
|
<ExchangeBox v-model="inputCouponCode" @click="onSubmitCode"></ExchangeBox>
|
|
|
|
|
|
<div class="filter-wrapper" v-if="show">
|
|
|
<div class="filter-mask"></div>
|
|
|
<FilterBar :list="filterList" class="filter"></FilterBar>
|
|
|
<div class="filter-wrapper" v-if="showFilter">
|
|
|
<div class="filter-mask" @click="onMaskClick"></div>
|
|
|
<FilterBar :list="filterList" v-model="selectFilterId" class="filter"></FilterBar>
|
|
|
</div>
|
|
|
|
|
|
<div class="head"></div>
|
...
|
...
|
@@ -51,7 +51,7 @@ |
|
|
<script>
|
|
|
import {createNamespacedHelpers} from 'vuex';
|
|
|
|
|
|
const {mapState, mapActions, mapGetters} = createNamespacedHelpers('coupon/yoho');
|
|
|
const {mapState} = createNamespacedHelpers('coupon/yoho');
|
|
|
|
|
|
import Tabs from '../components/tabs';
|
|
|
import FilterBar from '../components/filter-bar';
|
...
|
...
|
@@ -59,23 +59,13 @@ import ExchangeBox from '../components/exchange-box'; |
|
|
import CouponItem from '../components/coupon-item';
|
|
|
import Empty from '../components/empty';
|
|
|
|
|
|
import {TabBar, Slide, Scroll} from 'cube-ui';
|
|
|
import {Slide, Scroll} from 'cube-ui';
|
|
|
|
|
|
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;
|
|
|
|
|
|
index = this.tabLabels.findIndex(i => i.label === this.selectLabel);
|
|
|
return index;
|
|
|
}
|
|
|
},
|
|
|
asyncData({store, router}) {
|
|
|
asyncData({store}) {
|
|
|
return store.dispatch('coupon/yoho/fetchYohoList', {
|
|
|
type: TYPE.notuse,
|
|
|
filter: 0,
|
...
|
...
|
@@ -86,35 +76,47 @@ export default { |
|
|
data() {
|
|
|
return {
|
|
|
selectLabel: '未使用',
|
|
|
selectType: TYPE.notuse,
|
|
|
selectFilter: 0,
|
|
|
showFilter: false,
|
|
|
selectFilterId: 0,
|
|
|
inputCouponCode: '',
|
|
|
tabLabels: [
|
|
|
{
|
|
|
label: '未使用',
|
|
|
type: TYPE.notuse,
|
|
|
filter: true
|
|
|
filter: true,
|
|
|
selectFilterId: 0,
|
|
|
}, {
|
|
|
label: '已使用',
|
|
|
type: TYPE.use,
|
|
|
filter: false
|
|
|
filter: false,
|
|
|
selectFilterId: 0,
|
|
|
}, {
|
|
|
label: '已失效',
|
|
|
type: TYPE.overtime,
|
|
|
filter: false
|
|
|
filter: false,
|
|
|
selectFilterId: 0,
|
|
|
}
|
|
|
],
|
|
|
scrollOptions: {
|
|
|
directionLockThreshold: 0,
|
|
|
stopPropagation: true
|
|
|
directionLockThreshold: 0
|
|
|
},
|
|
|
slideOptions: {
|
|
|
listenScroll: true,
|
|
|
click: false,
|
|
|
probeType: 3,
|
|
|
directionLockThreshold: 0
|
|
|
},
|
|
|
show: false
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState(['yohoList', 'filterList']),
|
|
|
initialIndex() {
|
|
|
let index = 0;
|
|
|
|
|
|
index = this.tabLabels.findIndex(i => i.label === this.selectLabel);
|
|
|
return index;
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
},
|
|
|
mounted() {
|
...
|
...
|
@@ -122,13 +124,13 @@ export default { |
|
|
},
|
|
|
methods: {
|
|
|
changePage(current) {
|
|
|
const tab = this.tabLabels[current];
|
|
|
|
|
|
this.selectLabel = this.tabLabels[current].label;
|
|
|
this.selectType = this.tabLabels[current].type;
|
|
|
console.log(current, 'index', this.selectType, this.selectLabel);
|
|
|
|
|
|
return this.$store.dispatch('coupon/yoho/fetchYohoList', {
|
|
|
type: this.selectType,
|
|
|
filter: this.selectFilter,
|
|
|
this.$store.dispatch('coupon/yoho/fetchYohoList', {
|
|
|
type: tab.type,
|
|
|
filter: tab.selectFilterId,
|
|
|
limit: 20,
|
|
|
page: 1
|
|
|
});
|
...
|
...
|
@@ -139,19 +141,28 @@ export default { |
|
|
getNum() {
|
|
|
return this.$store.dispatch('coupon/yoho/fetchYohoNum', {});
|
|
|
},
|
|
|
|
|
|
onFilterChange(show) {
|
|
|
this.show = show;
|
|
|
this.showFilter = show;
|
|
|
},
|
|
|
onMaskClick() {
|
|
|
this.showFilter = false;
|
|
|
this.$refs.tabs.showFilter = false;
|
|
|
},
|
|
|
onSubmitCode() {
|
|
|
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
selectFilterId(val) {
|
|
|
this.tabLabels[0].selectFilterId = val;
|
|
|
this.onMaskClick();
|
|
|
return this.changePage(0);
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
Tabs,
|
|
|
TabPane: Tabs.Pane,
|
|
|
FilterBar,
|
|
|
ClassicTabs: Tabs.ClassicTabs,
|
|
|
ExchangeBox,
|
|
|
TabBar,
|
|
|
Tab: TabBar.Tab,
|
|
|
Slide,
|
|
|
SlideItem: Slide.Item,
|
|
|
Scroll,
|
...
|
...
|
|