fe / yoho-app-web · Commits

Go to a project

Authored by 陈峰
Commit f91fe6fc2029743c03f4ce36fbc1e4111a4a10d2 1 parent bbf70a7d

commit

Inline Side-by-side
Showing 3 changed files with 82 additions and 66 deletions
<template>
<div>
<div :class="classes">
<div class="yoho-coupon-filter-bar">
<div
:class="tabCls(item)"
v-for="(item, index) in navList"
@click="handleChange(index)"
:key="index"
>{{item.label}}
<span v-if="getNum[index]">({{getNum[index]}})</span>
<span :class="filterClass" v-if="item.filter"></span>
</div>
<div class="classic-tabs">
<div class="yoho-coupon-filter-bar">
<div
:class="tabCls(item)"
v-for="(item, index) in navList"
@click="handleChange(index)"
:key="index"
>{{item.label}}
<span v-if="getNum[index]">({{getNum[index]}})</span>
<span :class="filterClass" v-if="item.filter"></span>
</div>
</div>
<div class="filter-wrapper" v-if="showFilter && filterList.length">
... ... @@ -114,14 +112,15 @@ export default {
<style lang="scss" scoped>
$yoho-tab: yoho-tab;
.#{$yoho-tab}s {
.classic-tabs {
width: 100%;
position: relative;
height: 90px;
}
.yoho-coupon-filter-bar {
position: relative;
width: 100%;
height: 90px;
height: 100%;
display: flex;
padding: 14px 0;
background-color: #fff;
... ...
... ... @@ -123,6 +123,14 @@ $yoho-tab: yoho-tab;
.#{$yoho-tab}s {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.#{$yoho-tab} {
... ... @@ -158,8 +166,8 @@ $yoho-tab: yoho-tab;
}
.#{$yoho-tab}s-pane {
width: 100%;
height: 100%;
flex: 1;
overflow: hidden;
}
.fontcls {
... ...
<template>
<div style="height: 100%;">
<div class="coupon-page">
<ClassicTabs ref="tabs" v-model="selectLabel" :data="tabLabels" :filterId.sync="selectFilterId"></ClassicTabs>
<div class="tab-slide-container">
<Slide
ref="slide"
:loop="false"
:auto-play="false"
:show-dots="false"
:initial-index="initialIndex"
:options="slideOptions"
@scroll="scroll"
@change="changePage"
>
<SlideItem style="background-color: #f0f0f0;">
<ExchangeBox v-model="inputCouponCode" @click="onSubmitCode"></ExchangeBox>
<ScrollView class="scroll-view1" ref="notuse" :data="getNotUseList" :options="scrollOptions" v-if="getNotUseList.length" :reach-bottom="reachBottom">
<CouponItem :item="item" v-for="(item, index) in getNotUseList" :key="index + '' + item.coupon_id"></CouponItem>
</ScrollView>
<Empty v-else></Empty>
</SlideItem>
<SlideItem style="background-color: #f0f0f0;">
<ScrollView class="scroll-view2" ref="use" :data="getUseList" :options="scrollOptions" v-if="getUseList.length" :reach-bottom="reachBottom">
<CouponItem :item="item" v-for="(item, index) in getUseList" :key="index + '' + item.coupon_id"></CouponItem>
</ScrollView>
<Empty v-else></Empty>
</SlideItem>
<SlideItem style="background-color: #f0f0f0;">
<ScrollView class="scroll-view2" ref="overtime" :data="getOvertimeList" :options="scrollOptions" v-if="getOvertimeList.length" :reach-bottom="reachBottom">
<CouponItem :item="item" v-for="(item, index) in getOvertimeList" :key="index + '' + item.coupon_id"></CouponItem>
</ScrollView>
<Empty v-else></Empty>
</SlideItem>
</Slide>
</div>
<Slide
class="slide-box"
ref="slide"
:loop="false"
:auto-play="false"
:show-dots="false"
:initial-index="initialIndex"
:options="slideOptions"
@scroll="scroll"
@change="changePage"
>
<SlideItem class="slide-item">
<ExchangeBox class="" v-model="inputCouponCode" @click="onSubmitCode"></ExchangeBox>
<ScrollView class="scroll-view" ref="notuse" :data="getNotUseList" :options="scrollOptions" v-if="getNotUseList.length" :reach-bottom="reachBottom">
<CouponItem :item="item" v-for="(item, index) in getNotUseList" :key="index + '' + item.coupon_id"></CouponItem>
</ScrollView>
<Empty v-else></Empty>
</SlideItem>
<SlideItem class="slide-item">
<ScrollView class="scroll-view" ref="use" :data="getUseList" :options="scrollOptions" v-if="getUseList.length" :reach-bottom="reachBottom">
<CouponItem :item="item" v-for="(item, index) in getUseList" :key="index + '' + item.coupon_id"></CouponItem>
</ScrollView>
<Empty v-else></Empty>
</SlideItem>
<SlideItem class="slide-item">
<ScrollView class="scroll-view" ref="overtime" :data="getOvertimeList" :options="scrollOptions" v-if="getOvertimeList.length" :reach-bottom="reachBottom">
<CouponItem :item="item" v-for="(item, index) in getOvertimeList" :key="index + '' + item.coupon_id"></CouponItem>
</ScrollView>
<Empty v-else></Empty>
</SlideItem>
</Slide>
</div>
</template>
... ... @@ -189,19 +186,31 @@ export default {
<style lang="scss" scoped>
.page-wrapper {
height: calc(100% - 90px);
}
.coupon-page {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.tab-slide-container {
height: 100%;
}
.slide-box {
flex: 1;
}
.scroll-view1 {
height: calc(100% - 270px);
}
.page-wrapper {
height: calc(100% - 90px);
}
.slide-item {
display: flex;
flex-direction: column;
.scroll-view2 {
height: calc(100% - 180px);
.scroll-view {
flex: 1;
}
}
.tab-slide-container {
height: 100%;
}
</style>
... ...