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 46 additions and 30 deletions
1 <template> 1 <template>
2 - <div>  
3 - <div :class="classes"> 2 + <div class="classic-tabs">
4 <div class="yoho-coupon-filter-bar"> 3 <div class="yoho-coupon-filter-bar">
5 <div 4 <div
6 :class="tabCls(item)" 5 :class="tabCls(item)"
@@ -13,7 +12,6 @@ @@ -13,7 +12,6 @@
13 <span :class="filterClass" v-if="item.filter"></span> 12 <span :class="filterClass" v-if="item.filter"></span>
14 </div> 13 </div>
15 </div> 14 </div>
16 - </div>  
17 <div class="filter-wrapper" v-if="showFilter && filterList.length"> 15 <div class="filter-wrapper" v-if="showFilter && filterList.length">
18 <div class="filter-mask" @click="onMaskClick"></div> 16 <div class="filter-mask" @click="onMaskClick"></div>
19 <FilterBar :list="filterList" v-model="selectFilterId" class="filter"></FilterBar> 17 <FilterBar :list="filterList" v-model="selectFilterId" class="filter"></FilterBar>
@@ -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 4 <Slide
  5 + class="slide-box"
7 ref="slide" 6 ref="slide"
8 :loop="false" 7 :loop="false"
9 :auto-play="false" 8 :auto-play="false"
@@ -13,31 +12,29 @@ @@ -13,31 +12,29 @@
13 @scroll="scroll" 12 @scroll="scroll"
14 @change="changePage" 13 @change="changePage"
15 > 14 >
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"> 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">
20 <CouponItem :item="item" v-for="(item, index) in getNotUseList" :key="index + '' + item.coupon_id"></CouponItem> 18 <CouponItem :item="item" v-for="(item, index) in getNotUseList" :key="index + '' + item.coupon_id"></CouponItem>
21 </ScrollView> 19 </ScrollView>
22 <Empty v-else></Empty> 20 <Empty v-else></Empty>
23 </SlideItem> 21 </SlideItem>
24 22
25 - <SlideItem style="background-color: #f0f0f0;">  
26 - <ScrollView class="scroll-view2" ref="use" :data="getUseList" :options="scrollOptions" v-if="getUseList.length" :reach-bottom="reachBottom"> 23 + <SlideItem class="slide-item">
  24 + <ScrollView class="scroll-view" 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> 25 <CouponItem :item="item" v-for="(item, index) in getUseList" :key="index + '' + item.coupon_id"></CouponItem>
28 </ScrollView> 26 </ScrollView>
29 <Empty v-else></Empty> 27 <Empty v-else></Empty>
30 </SlideItem> 28 </SlideItem>
31 29
32 - <SlideItem style="background-color: #f0f0f0;">  
33 - <ScrollView class="scroll-view2" ref="overtime" :data="getOvertimeList" :options="scrollOptions" v-if="getOvertimeList.length" :reach-bottom="reachBottom"> 30 + <SlideItem class="slide-item">
  31 + <ScrollView class="scroll-view" 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> 32 <CouponItem :item="item" v-for="(item, index) in getOvertimeList" :key="index + '' + item.coupon_id"></CouponItem>
35 </ScrollView> 33 </ScrollView>
36 <Empty v-else></Empty> 34 <Empty v-else></Empty>
37 </SlideItem> 35 </SlideItem>
38 </Slide> 36 </Slide>
39 </div> 37 </div>
40 - </div>  
41 </template> 38 </template>
42 39
43 <script> 40 <script>
@@ -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 { 189 +.coupon-page {
  190 + width: 100%;
  191 + height: 100%;
  192 + display: flex;
  193 + flex-direction: column;
  194 +}
  195 +
  196 +.slide-box {
  197 + flex: 1;
  198 +}
  199 +
  200 +.page-wrapper {
193 height: calc(100% - 90px); 201 height: calc(100% - 90px);
194 - } 202 +}
195 203
196 - .tab-slide-container {  
197 - height: 100%;  
198 - } 204 +.slide-item {
  205 + display: flex;
  206 + flex-direction: column;
199 207
200 - .scroll-view1 {  
201 - height: calc(100% - 270px); 208 + .scroll-view {
  209 + flex: 1;
202 } 210 }
  211 +}
203 212
204 - .scroll-view2 {  
205 - height: calc(100% - 180px);  
206 - } 213 +.tab-slide-container {
  214 + height: 100%;
  215 +}
207 </style> 216 </style>