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 @@ @@ -6,94 +6,79 @@
6 v-for="(item, index) in navList" 6 v-for="(item, index) in navList"
7 @click="handleChange(index)" 7 @click="handleChange(index)"
8 :key="index" 8 :key="index"
9 - >{{item.label}}</div> 9 + >{{item.label}}
  10 +
  11 + <span v-if="getNum[index]">({{getNum[index]}})</span>
  12 + <span :class="filterClass" v-if="item.filter"></span>
10 </div> 13 </div>
11 - <div :class="contentClasses" :style="contentStyle" ref="panes">  
12 - <slot name="panes"></slot>  
13 </div> 14 </div>
14 </div> 15 </div>
15 </template> 16 </template>
16 17
17 <script> 18 <script>
  19 +import {createNamespacedHelpers} from 'vuex';
  20 +const {mapGetters} = createNamespacedHelpers('coupon/yoho');
  21 +
18 export default { 22 export default {
19 - name: "ClassicTabs", 23 + name: 'ClassicTabs',
20 props: { 24 props: {
21 value: { 25 value: {
22 type: [String, Number] 26 type: [String, Number]
  27 + },
  28 + data: {
  29 + type: Array,
  30 + default() {
  31 + return [];
  32 + }
23 } 33 }
24 }, 34 },
25 data() { 35 data() {
26 return { 36 return {
27 - prefixCls: "yoho-tabs",  
28 - navList: [],  
29 - activeKey: this.value 37 + prefixCls: 'yoho-tabs',
  38 + navList: this.data,
  39 + activeKey: this.value,
  40 + show: false
30 }; 41 };
31 }, 42 },
32 computed: { 43 computed: {
33 classes() { 44 classes() {
34 return [`${this.prefixCls}`]; 45 return [`${this.prefixCls}`];
35 }, 46 },
36 - contentClasses() {  
37 - return [`yoho-tabs-pane`];  
38 - },  
39 - contentStyle() {  
40 - return []; 47 + filterClass() {
  48 + if (this.show) {
  49 + return ['iconfont', 'icon-up'];
  50 + } else {
  51 + return ['iconfont', 'icon-downn'];
41 } 52 }
42 }, 53 },
43 - methods: {  
44 - updateNav() {  
45 - this.navList = [];  
46 - this.getTabs().forEach((pane, index) => {  
47 - this.navList.push({  
48 - label: pane.label,  
49 - name: pane.currentName || index,  
50 - disabled: pane.disabled  
51 - });  
52 -  
53 - if (!pane.currentName) pane.currentName = index;  
54 -  
55 - if (index === 0) {  
56 - if (!this.activeKey) {  
57 - this.activeKey = pane.currentName || index;  
58 - }  
59 - }  
60 - });  
61 -  
62 - this.updateStatus();  
63 - },  
64 - getTabs() {  
65 - return this.$children.filter(item => item.$options.name === "TabPane");  
66 - },  
67 - updateStatus() {  
68 - const tabs = this.getTabs();  
69 -  
70 - tabs.forEach(tab => (tab.show = tab.currentName === this.activeKey)); 54 + ...mapGetters(['getNum'])
71 }, 55 },
  56 + methods: {
72 handleChange(index) { 57 handleChange(index) {
73 const nav = this.navList[index]; 58 const nav = this.navList[index];
74 59
75 - this.activeKey = nav.name;  
76 - this.$emit("input", nav.name); 60 + if (this.activeKey === nav.label) {
  61 + this.show = !this.show;
  62 + this.$emit('filter', this.show);
  63 + return;
  64 + }
  65 +
  66 + this.activeKey = nav.label;
  67 + this.$emit('input', nav.label);
77 }, 68 },
78 tabCls(item) { 69 tabCls(item) {
79 return [ 70 return [
80 - "filter-btn-box", 71 + 'filter-btn-box',
81 { 72 {
82 - active: item.name === this.activeKey 73 + active: item.label === this.activeKey
83 } 74 }
84 ]; 75 ];
85 - }  
86 }, 76 },
87 - watch: {  
88 - activeKey(val) {  
89 - this.updateStatus();  
90 }, 77 },
  78 + watch: {
91 value(val) { 79 value(val) {
92 this.activeKey = val; 80 this.activeKey = val;
93 } 81 }
94 - },  
95 - created() {  
96 - // this.updateNav();  
97 } 82 }
98 }; 83 };
99 </script> 84 </script>
@@ -103,7 +88,6 @@ $yoho-tab: yoho-tab; @@ -103,7 +88,6 @@ $yoho-tab: yoho-tab;
103 88
104 .#{$yoho-tab}s { 89 .#{$yoho-tab}s {
105 width: 100%; 90 width: 100%;
106 - height: 100%;  
107 } 91 }
108 92
109 .yoho-coupon-filter-bar { 93 .yoho-coupon-filter-bar {
@@ -113,9 +97,9 @@ $yoho-tab: yoho-tab; @@ -113,9 +97,9 @@ $yoho-tab: yoho-tab;
113 padding: 14px 0; 97 padding: 14px 0;
114 box-shadow: 0 0 16px 0 #eee; 98 box-shadow: 0 0 16px 0 #eee;
115 background-color: #fff; 99 background-color: #fff;
116 - position: fixed;  
117 left: 0; 100 left: 0;
118 z-index: 3; 101 z-index: 3;
  102 + border-bottom: 1px solid #e0e0e0;
119 103
120 .filter-btn-box { 104 .filter-btn-box {
121 flex: 1; 105 flex: 1;
1 <template> 1 <template>
2 <div style="height: 100%"> 2 <div style="height: 100%">
3 <div class="head"></div> 3 <div class="head"></div>
4 - <TabBar class="tab-container"  
5 - v-model="selectLabel"  
6 - ref="tabNav"  
7 - >  
8 - <Tab class="tab-item" v-for="(item, index) in tabLabels" :label="item.label" :key="item.label"></Tab>  
9 - </TabBar> 4 + <ClassicTabs v-model="selectLabel" :data="tabLabels" @filter="onFilterChange"></ClassicTabs>
10 5
11 <div class="tab-slide-container"> 6 <div class="tab-slide-container">
12 <Slide 7 <Slide
@@ -19,23 +14,30 @@ @@ -19,23 +14,30 @@
19 @scroll="scroll" 14 @scroll="scroll"
20 @change="changePage" 15 @change="changePage"
21 > 16 >
22 - <SlideItem style="background-color: #F0F0F0;"> 17 + <SlideItem style="background-color: #f0f0f0;">
23 <ExchangeBox></ExchangeBox> 18 <ExchangeBox></ExchangeBox>
  19 +
  20 + <div class="filter-wrapper" v-if="show">
  21 + <div class="filter-mask"></div>
  22 + <FilterBar :list="filterList" class="filter"></FilterBar>
  23 + </div>
  24 +
24 <div class="head"></div> 25 <div class="head"></div>
25 - <Scroll :data="yohoList.notuse" :options="scrollOptions" v-if="yohoList.notuse.length" style="padding: 20px"> 26 +
  27 + <Scroll :data="yohoList.notuse" :options="scrollOptions" v-if="yohoList.notuse.length">
26 <CouponItem :item="item" v-for="(item, index) in yohoList.notuse" :key ="index"></CouponItem> 28 <CouponItem :item="item" v-for="(item, index) in yohoList.notuse" :key ="index"></CouponItem>
27 </Scroll> 29 </Scroll>
28 <Empty v-else></Empty> 30 <Empty v-else></Empty>
29 </SlideItem> 31 </SlideItem>
30 32
31 - <SlideItem style="background-color: #F0F0F0;"> 33 + <SlideItem style="background-color: #f0f0f0;">
32 <Scroll :data="yohoList.use" :options="scrollOptions" v-if="yohoList.use.length"> 34 <Scroll :data="yohoList.use" :options="scrollOptions" v-if="yohoList.use.length">
33 <CouponItem :item="item" v-for="(item, index) in yohoList.use" :key ="index" v-if="yohoList.use.length"></CouponItem> 35 <CouponItem :item="item" v-for="(item, index) in yohoList.use" :key ="index" v-if="yohoList.use.length"></CouponItem>
34 </Scroll> 36 </Scroll>
35 <Empty v-else></Empty> 37 <Empty v-else></Empty>
36 </SlideItem> 38 </SlideItem>
37 39
38 - <SlideItem style="background-color: #F0F0F0;"> 40 + <SlideItem style="background-color: #f0f0f0;">
39 <Scroll :data="yohoList.overtime" :options="scrollOptions" v-if="yohoList.overtime.length"> 41 <Scroll :data="yohoList.overtime" :options="scrollOptions" v-if="yohoList.overtime.length">
40 <CouponItem :item="item" v-for="(item, index) in yohoList.overtime" :key ="index" v-if="yohoList.overtime.length"></CouponItem> 42 <CouponItem :item="item" v-for="(item, index) in yohoList.overtime" :key ="index" v-if="yohoList.overtime.length"></CouponItem>
41 </Scroll> 43 </Scroll>
@@ -89,13 +91,16 @@ export default { @@ -89,13 +91,16 @@ export default {
89 tabLabels: [ 91 tabLabels: [
90 { 92 {
91 label: '未使用', 93 label: '未使用',
92 - type: TYPE.notuse 94 + type: TYPE.notuse,
  95 + filter: true
93 }, { 96 }, {
94 label: '已使用', 97 label: '已使用',
95 - type: TYPE.use 98 + type: TYPE.use,
  99 + filter: false
96 }, { 100 }, {
97 label: '已失效', 101 label: '已失效',
98 - type: TYPE.overtime 102 + type: TYPE.overtime,
  103 + filter: false
99 } 104 }
100 ], 105 ],
101 scrollOptions: { 106 scrollOptions: {
@@ -105,7 +110,8 @@ export default { @@ -105,7 +110,8 @@ export default {
105 listenScroll: true, 110 listenScroll: true,
106 probeType: 3, 111 probeType: 3,
107 directionLockThreshold: 0 112 directionLockThreshold: 0
108 - } 113 + },
  114 + show: false
109 }; 115 };
110 }, 116 },
111 created() { 117 created() {
@@ -114,17 +120,6 @@ export default { @@ -114,17 +120,6 @@ export default {
114 this.getNum(); 120 this.getNum();
115 }, 121 },
116 methods: { 122 methods: {
117 - tabCls(item) {  
118 - return ['filter-btn-box'];  
119 - },  
120 - scroll(pos) {  
121 - // const x = Math.abs(pos.x)  
122 - // const tabItemWidth = this.$refs.tabNav.$el.clientWidth  
123 - // const slideScrollerWidth = this.$refs.slide.slide.scrollerWidth  
124 - // const deltaX = x / slideScrollerWidth * tabItemWidth  
125 - // this.$refs.tabNav.setSliderTransform(deltaX);  
126 - },  
127 -  
128 changePage(current) { 123 changePage(current) {
129 this.selectLabel = this.tabLabels[current].label; 124 this.selectLabel = this.tabLabels[current].label;
130 this.selectType = this.tabLabels[current].type; 125 this.selectType = this.tabLabels[current].type;
@@ -137,9 +132,15 @@ export default { @@ -137,9 +132,15 @@ export default {
137 page: 1 132 page: 1
138 }); 133 });
139 }, 134 },
  135 + scroll() {
140 136
  137 + },
141 getNum() { 138 getNum() {
142 return this.$store.dispatch('coupon/yoho/fetchYohoNum', {}); 139 return this.$store.dispatch('coupon/yoho/fetchYohoNum', {});
  140 + },
  141 +
  142 + onFilterChange(show) {
  143 + this.show = show;
143 } 144 }
144 }, 145 },
145 components: { 146 components: {
@@ -164,69 +165,28 @@ export default { @@ -164,69 +165,28 @@ export default {
164 height: 90px; 165 height: 90px;
165 } 166 }
166 167
167 - .coupon-wrapper {  
168 - height: 200px;  
169 - padding-top: 20px;  
170 - padding-left: 20px;  
171 - padding-right: 20px;  
172 - background: #f0f0f0;  
173 - box-sizing: content-box;  
174 - }  
175 -  
176 - .coupon-item {  
177 - width: 100%;  
178 - height: 100%;  
179 - background: white;  
180 - border-radius: 10px;  
181 - }  
182 -  
183 - .mask {  
184 - width: 100%;  
185 - height: 100%;  
186 - position: absolute;  
187 - background: rgba(0, 0, 0, 0.4);  
188 - }  
189 -  
190 - .list-wrapper {  
191 - overflow: hidden;  
192 -  
193 - li {  
194 - padding: 15px 10px;  
195 - background-color: white;  
196 - border-radius: 10px;  
197 - }  
198 - }  
199 -  
200 .tab-slide-container { 168 .tab-slide-container {
201 - /*position: fixed;*/  
202 - /*left: 0;*/  
203 - /*right: 0;*/  
204 - /*bottom: 0;*/  
205 height: 100%; 169 height: 100%;
206 } 170 }
207 171
208 - .tab-container {  
209 - height: 90px;  
210 - background-color: white;  
211 - border-bottom: 1px solid #e0e0e0;  
212 - }  
213 -  
214 - .tab-item {  
215 - line-height: 60px;  
216 - text-align: center;  
217 - font-size: 28px;  
218 - color: #b0b0b0; 172 + .cube-scroll-wrapper {
  173 + padding-top: 20px;
219 } 174 }
220 175
221 - .tab-item + .tab-item {  
222 - border-left: 1px solid #e0e0e0; 176 + .filter-wrapper {
  177 + width: calc(100% / 3);
  178 + height: 100%;
  179 + position: fixed;
  180 + z-index: 4;
223 } 181 }
224 182
225 - .cube-tab_active {  
226 - color: #444 !important; 183 + .filter {
  184 + position: absolute;
  185 + top: 0;
227 } 186 }
228 187
229 - .cube-scroll-wrapper {  
230 - padding-top: 20px; 188 + .filter-mask {
  189 + height: 100%;
  190 + background-color: rgba(0, 0, 0, 0.4);
231 } 191 }
232 </style> 192 </style>
@@ -16,26 +16,20 @@ export default function() { @@ -16,26 +16,20 @@ export default function() {
16 overtime: [] 16 overtime: []
17 }, 17 },
18 num: { 18 num: {
19 - notuse: 0,  
20 - use: 0,  
21 - overtime: 0 19 + notuse: 20,
  20 + use: 100,
  21 + overtime: 1000
22 }, 22 },
23 ufoList: [], 23 ufoList: [],
24 filterList: [], 24 filterList: [],
25 - showFilter: true 25 + showFilter: true,
26 }, 26 },
27 actions, 27 actions,
28 mutations, 28 mutations,
29 getters: { 29 getters: {
30 - getNotUseNum(state) {  
31 - return handleNum(state.num.notuse); 30 + getNum(state) {
  31 + return [handleNum(state.num.notuse), handleNum(state.num.use), handleNum(state.num.overtime)];
32 }, 32 },
33 - getUseNum(state) {  
34 - return handleNum(state.num.use);  
35 - },  
36 - getOvertime(state) {  
37 - return handleNum(state.num.overtime);  
38 - }  
39 } 33 }
40 }; 34 };
41 } 35 }