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
1 <template> 1 <template>
2 - <div>  
3 - <div :class="classes">  
4 - <div class="yoho-coupon-filter-bar">  
5 - <div  
6 - :class="tabCls(item)"  
7 - v-for="(item, index) in navList"  
8 - @click="handleChange(index)"  
9 - :key="index"  
10 - >{{item.label}}  
11 -  
12 - <span v-if="getNum[index]">({{getNum[index]}})</span>  
13 - <span :class="filterClass" v-if="item.filter"></span>  
14 - </div> 2 + <div class="classic-tabs">
  3 + <div class="yoho-coupon-filter-bar">
  4 + <div
  5 + :class="tabCls(item)"
  6 + v-for="(item, index) in navList"
  7 + @click="handleChange(index)"
  8 + :key="index"
  9 + >{{item.label}}
  10 +
  11 + <span v-if="getNum[index]">({{getNum[index]}})</span>
  12 + <span :class="filterClass" v-if="item.filter"></span>
15 </div> 13 </div>
16 </div> 14 </div>
17 <div class="filter-wrapper" v-if="showFilter && filterList.length"> 15 <div class="filter-wrapper" v-if="showFilter && filterList.length">
@@ -114,14 +112,15 @@ export default { @@ -114,14 +112,15 @@ export default {
114 <style lang="scss" scoped> 112 <style lang="scss" scoped>
115 $yoho-tab: yoho-tab; 113 $yoho-tab: yoho-tab;
116 114
117 -.#{$yoho-tab}s { 115 +.classic-tabs {
118 width: 100%; 116 width: 100%;
119 - position: relative; 117 + height: 90px;
120 } 118 }
121 119
122 .yoho-coupon-filter-bar { 120 .yoho-coupon-filter-bar {
  121 + position: relative;
123 width: 100%; 122 width: 100%;
124 - height: 90px; 123 + height: 100%;
125 display: flex; 124 display: flex;
126 padding: 14px 0; 125 padding: 14px 0;
127 background-color: #fff; 126 background-color: #fff;
@@ -123,6 +123,14 @@ $yoho-tab: yoho-tab; @@ -123,6 +123,14 @@ $yoho-tab: yoho-tab;
123 .#{$yoho-tab}s { 123 .#{$yoho-tab}s {
124 width: 100%; 124 width: 100%;
125 height: 100%; 125 height: 100%;
  126 + position: absolute;
  127 + top: 0;
  128 + left: 0;
  129 + right: 0;
  130 + bottom: 0;
  131 + display: flex;
  132 + flex-direction: column;
  133 + overflow: hidden;
126 } 134 }
127 135
128 .#{$yoho-tab} { 136 .#{$yoho-tab} {
@@ -158,8 +166,8 @@ $yoho-tab: yoho-tab; @@ -158,8 +166,8 @@ $yoho-tab: yoho-tab;
158 } 166 }
159 167
160 .#{$yoho-tab}s-pane { 168 .#{$yoho-tab}s-pane {
161 - width: 100%;  
162 - height: 100%; 169 + flex: 1;
  170 + overflow: hidden;
163 } 171 }
164 172
165 .fontcls { 173 .fontcls {
1 <template> 1 <template>
2 - <div style="height: 100%;"> 2 + <div class="coupon-page">
3 <ClassicTabs ref="tabs" v-model="selectLabel" :data="tabLabels" :filterId.sync="selectFilterId"></ClassicTabs> 3 <ClassicTabs ref="tabs" v-model="selectLabel" :data="tabLabels" :filterId.sync="selectFilterId"></ClassicTabs>
4 -  
5 - <div class="tab-slide-container">  
6 - <Slide  
7 - ref="slide"  
8 - :loop="false"  
9 - :auto-play="false"  
10 - :show-dots="false"  
11 - :initial-index="initialIndex"  
12 - :options="slideOptions"  
13 - @scroll="scroll"  
14 - @change="changePage"  
15 - >  
16 - <SlideItem style="background-color: #f0f0f0;">  
17 - <ExchangeBox v-model="inputCouponCode" @click="onSubmitCode"></ExchangeBox>  
18 -  
19 - <ScrollView class="scroll-view1" ref="notuse" :data="getNotUseList" :options="scrollOptions" v-if="getNotUseList.length" :reach-bottom="reachBottom">  
20 - <CouponItem :item="item" v-for="(item, index) in getNotUseList" :key="index + '' + item.coupon_id"></CouponItem>  
21 - </ScrollView>  
22 - <Empty v-else></Empty>  
23 - </SlideItem>  
24 -  
25 - <SlideItem style="background-color: #f0f0f0;">  
26 - <ScrollView class="scroll-view2" ref="use" :data="getUseList" :options="scrollOptions" v-if="getUseList.length" :reach-bottom="reachBottom">  
27 - <CouponItem :item="item" v-for="(item, index) in getUseList" :key="index + '' + item.coupon_id"></CouponItem>  
28 - </ScrollView>  
29 - <Empty v-else></Empty>  
30 - </SlideItem>  
31 -  
32 - <SlideItem style="background-color: #f0f0f0;">  
33 - <ScrollView class="scroll-view2" ref="overtime" :data="getOvertimeList" :options="scrollOptions" v-if="getOvertimeList.length" :reach-bottom="reachBottom">  
34 - <CouponItem :item="item" v-for="(item, index) in getOvertimeList" :key="index + '' + item.coupon_id"></CouponItem>  
35 - </ScrollView>  
36 - <Empty v-else></Empty>  
37 - </SlideItem>  
38 - </Slide>  
39 - </div> 4 + <Slide
  5 + class="slide-box"
  6 + ref="slide"
  7 + :loop="false"
  8 + :auto-play="false"
  9 + :show-dots="false"
  10 + :initial-index="initialIndex"
  11 + :options="slideOptions"
  12 + @scroll="scroll"
  13 + @change="changePage"
  14 + >
  15 + <SlideItem class="slide-item">
  16 + <ExchangeBox class="" v-model="inputCouponCode" @click="onSubmitCode"></ExchangeBox>
  17 + <ScrollView class="scroll-view" ref="notuse" :data="getNotUseList" :options="scrollOptions" v-if="getNotUseList.length" :reach-bottom="reachBottom">
  18 + <CouponItem :item="item" v-for="(item, index) in getNotUseList" :key="index + '' + item.coupon_id"></CouponItem>
  19 + </ScrollView>
  20 + <Empty v-else></Empty>
  21 + </SlideItem>
  22 +
  23 + <SlideItem class="slide-item">
  24 + <ScrollView class="scroll-view" ref="use" :data="getUseList" :options="scrollOptions" v-if="getUseList.length" :reach-bottom="reachBottom">
  25 + <CouponItem :item="item" v-for="(item, index) in getUseList" :key="index + '' + item.coupon_id"></CouponItem>
  26 + </ScrollView>
  27 + <Empty v-else></Empty>
  28 + </SlideItem>
  29 +
  30 + <SlideItem class="slide-item">
  31 + <ScrollView class="scroll-view" ref="overtime" :data="getOvertimeList" :options="scrollOptions" v-if="getOvertimeList.length" :reach-bottom="reachBottom">
  32 + <CouponItem :item="item" v-for="(item, index) in getOvertimeList" :key="index + '' + item.coupon_id"></CouponItem>
  33 + </ScrollView>
  34 + <Empty v-else></Empty>
  35 + </SlideItem>
  36 + </Slide>
40 </div> 37 </div>
41 </template> 38 </template>
42 39
@@ -189,19 +186,31 @@ export default { @@ -189,19 +186,31 @@ export default {
189 186
190 <style lang="scss" scoped> 187 <style lang="scss" scoped>
191 188
192 - .page-wrapper {  
193 - height: calc(100% - 90px);  
194 - } 189 +.coupon-page {
  190 + width: 100%;
  191 + height: 100%;
  192 + display: flex;
  193 + flex-direction: column;
  194 +}
195 195
196 - .tab-slide-container {  
197 - height: 100%;  
198 - } 196 +.slide-box {
  197 + flex: 1;
  198 +}
199 199
200 - .scroll-view1 {  
201 - height: calc(100% - 270px);  
202 - } 200 +.page-wrapper {
  201 + height: calc(100% - 90px);
  202 +}
  203 +
  204 +.slide-item {
  205 + display: flex;
  206 + flex-direction: column;
203 207
204 - .scroll-view2 {  
205 - height: calc(100% - 180px); 208 + .scroll-view {
  209 + flex: 1;
206 } 210 }
  211 +}
  212 +
  213 +.tab-slide-container {
  214 + height: 100%;
  215 +}
207 </style> 216 </style>