fe / yoho-app-web · Commits

Go to a project

Authored by htoooth
Commit 4a739ac8d34844055fdcb0d26ce90aea1d7389c4 1 parent 9b9b9447

add ufo coupon

Inline Side-by-side
Showing 3 changed files with 82 additions and 144 deletions
... ... @@ -6,94 +6,79 @@
v-for="(item, index) in navList"
@click="handleChange(index)"
:key="index"
>{{item.label}}</div>
>{{item.label}}
<span v-if="getNum[index]">({{getNum[index]}})</span>
<span :class="filterClass" v-if="item.filter"></span>
</div>
<div :class="contentClasses" :style="contentStyle" ref="panes">
<slot name="panes"></slot>
</div>
</div>
</template>
<script>
import {createNamespacedHelpers} from 'vuex';
const {mapGetters} = createNamespacedHelpers('coupon/yoho');
export default {
name: "ClassicTabs",
name: 'ClassicTabs',
props: {
value: {
type: [String, Number]
},
data: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
prefixCls: "yoho-tabs",
navList: [],
activeKey: this.value
prefixCls: 'yoho-tabs',
navList: this.data,
activeKey: this.value,
show: false
};
},
computed: {
classes() {
return [`${this.prefixCls}`];
},
contentClasses() {
return [`yoho-tabs-pane`];
},
contentStyle() {
return [];
filterClass() {
if (this.show) {
return ['iconfont', 'icon-up'];
} else {
return ['iconfont', 'icon-downn'];
}
},
methods: {
updateNav() {
this.navList = [];
this.getTabs().forEach((pane, index) => {
this.navList.push({
label: pane.label,
name: pane.currentName || index,
disabled: pane.disabled
});
if (!pane.currentName) pane.currentName = index;
if (index === 0) {
if (!this.activeKey) {
this.activeKey = pane.currentName || index;
}
}
});
this.updateStatus();
},
getTabs() {
return this.$children.filter(item => item.$options.name === "TabPane");
},
updateStatus() {
const tabs = this.getTabs();
tabs.forEach(tab => (tab.show = tab.currentName === this.activeKey));
...mapGetters(['getNum'])
},
methods: {
handleChange(index) {
const nav = this.navList[index];
this.activeKey = nav.name;
this.$emit("input", nav.name);
if (this.activeKey === nav.label) {
this.show = !this.show;
this.$emit('filter', this.show);
return;
}
this.activeKey = nav.label;
this.$emit('input', nav.label);
},
tabCls(item) {
return [
"filter-btn-box",
'filter-btn-box',
{
active: item.name === this.activeKey
active: item.label === this.activeKey
}
];
}
},
watch: {
activeKey(val) {
this.updateStatus();
},
watch: {
value(val) {
this.activeKey = val;
}
},
created() {
// this.updateNav();
}
};
</script>
... ... @@ -103,7 +88,6 @@ $yoho-tab: yoho-tab;
.#{$yoho-tab}s {
width: 100%;
height: 100%;
}
.yoho-coupon-filter-bar {
... ... @@ -113,9 +97,9 @@ $yoho-tab: yoho-tab;
padding: 14px 0;
box-shadow: 0 0 16px 0 #eee;
background-color: #fff;
position: fixed;
left: 0;
z-index: 3;
border-bottom: 1px solid #e0e0e0;
.filter-btn-box {
flex: 1;
... ...
<template>
<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>
<ClassicTabs v-model="selectLabel" :data="tabLabels" @filter="onFilterChange"></ClassicTabs>
<div class="tab-slide-container">
<Slide
... ... @@ -19,23 +14,30 @@
@scroll="scroll"
@change="changePage"
>
<SlideItem style="background-color: #F0F0F0;">
<SlideItem style="background-color: #f0f0f0;">
<ExchangeBox></ExchangeBox>
<div class="filter-wrapper" v-if="show">
<div class="filter-mask"></div>
<FilterBar :list="filterList" class="filter"></FilterBar>
</div>
<div class="head"></div>
<Scroll :data="yohoList.notuse" :options="scrollOptions" v-if="yohoList.notuse.length" style="padding: 20px">
<Scroll :data="yohoList.notuse" :options="scrollOptions" v-if="yohoList.notuse.length">
<CouponItem :item="item" v-for="(item, index) in yohoList.notuse" :key ="index"></CouponItem>
</Scroll>
<Empty v-else></Empty>
</SlideItem>
<SlideItem style="background-color: #F0F0F0;">
<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 style="background-color: #F0F0F0;">
<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>
... ... @@ -89,13 +91,16 @@ export default {
tabLabels: [
{
label: '未使用',
type: TYPE.notuse
type: TYPE.notuse,
filter: true
}, {
label: '已使用',
type: TYPE.use
type: TYPE.use,
filter: false
}, {
label: '已失效',
type: TYPE.overtime
type: TYPE.overtime,
filter: false
}
],
scrollOptions: {
... ... @@ -105,7 +110,8 @@ export default {
listenScroll: true,
probeType: 3,
directionLockThreshold: 0
}
},
show: false
};
},
created() {
... ... @@ -114,17 +120,6 @@ export default {
this.getNum();
},
methods: {
tabCls(item) {
return ['filter-btn-box'];
},
scroll(pos) {
// const x = Math.abs(pos.x)
// const tabItemWidth = this.$refs.tabNav.$el.clientWidth
// const slideScrollerWidth = this.$refs.slide.slide.scrollerWidth
// const deltaX = x / slideScrollerWidth * tabItemWidth
// this.$refs.tabNav.setSliderTransform(deltaX);
},
changePage(current) {
this.selectLabel = this.tabLabels[current].label;
this.selectType = this.tabLabels[current].type;
... ... @@ -137,9 +132,15 @@ export default {
page: 1
});
},
scroll() {
},
getNum() {
return this.$store.dispatch('coupon/yoho/fetchYohoNum', {});
},
onFilterChange(show) {
this.show = show;
}
},
components: {
... ... @@ -164,69 +165,28 @@ export default {
height: 90px;
}
.coupon-wrapper {
height: 200px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
background: #f0f0f0;
box-sizing: content-box;
}
.coupon-item {
width: 100%;
height: 100%;
background: white;
border-radius: 10px;
}
.mask {
width: 100%;
height: 100%;
position: absolute;
background: rgba(0, 0, 0, 0.4);
}
.list-wrapper {
overflow: hidden;
li {
padding: 15px 10px;
background-color: white;
border-radius: 10px;
}
}
.tab-slide-container {
/*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;
.cube-scroll-wrapper {
padding-top: 20px;
}
.tab-item + .tab-item {
border-left: 1px solid #e0e0e0;
.filter-wrapper {
width: calc(100% / 3);
height: 100%;
position: fixed;
z-index: 4;
}
.cube-tab_active {
color: #444 !important;
.filter {
position: absolute;
top: 0;
}
.cube-scroll-wrapper {
padding-top: 20px;
.filter-mask {
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
</style>
... ...
... ... @@ -16,26 +16,20 @@ export default function() {
overtime: []
},
num: {
notuse: 0,
use: 0,
overtime: 0
notuse: 20,
use: 100,
overtime: 1000
},
ufoList: [],
filterList: [],
showFilter: true
showFilter: true,
},
actions,
mutations,
getters: {
getNotUseNum(state) {
return handleNum(state.num.notuse);
getNum(state) {
return [handleNum(state.num.notuse), handleNum(state.num.use), handleNum(state.num.overtime)];
},
getUseNum(state) {
return handleNum(state.num.use);
},
getOvertime(state) {
return handleNum(state.num.overtime);
}
}
};
}
... ...