fe / yoho-app-web · Commits

Go to a project

Authored by htoooth
Commit 8d263683d8e3200ff2237131e2868b25a5e80afb 1 parent c06269c5

action change

Inline Side-by-side
Showing 8 changed files with 200 additions and 160 deletions
1 <template> 1 <template>
2 <div class="exchange-box"> 2 <div class="exchange-box">
3 - <input type="text" name="couponCodeInput" placeholder="请输入优惠券码" v-model="code"> 3 + <div class="input-wrapper">
  4 + <input type="text" name="couponCodeInput" placeholder="请输入优惠券码" v-model="code">
  5 + </div>
4 <button :class="btnCls" @click="onClick">兑换</button> 6 <button :class="btnCls" @click="onClick">兑换</button>
5 </div> 7 </div>
6 </template> 8 </template>
7 9
8 -  
9 -  
10 <script> 10 <script>
11 export default { 11 export default {
12 name: 'ExchangeBox', 12 name: 'ExchangeBox',
@@ -18,7 +18,7 @@ export default { @@ -18,7 +18,7 @@ export default {
18 methods: { 18 methods: {
19 onClick() { 19 onClick() {
20 this.$emit('click'); 20 this.$emit('click');
21 - }, 21 + }
22 }, 22 },
23 computed: { 23 computed: {
24 btnCls() { 24 btnCls() {
@@ -30,6 +30,9 @@ export default { @@ -30,6 +30,9 @@ export default {
30 watch: { 30 watch: {
31 code() { 31 code() {
32 this.$emit('input', this.code); 32 this.$emit('input', this.code);
  33 + },
  34 + value(val) {
  35 + this.code = val;
33 } 36 }
34 } 37 }
35 }; 38 };
@@ -45,6 +48,11 @@ export default { @@ -45,6 +48,11 @@ export default {
45 left: 0; 48 left: 0;
46 z-index: 2; 49 z-index: 2;
47 50
  51 + .input-wrapper {
  52 + display: inline-block;
  53 + position: relative;
  54 + }
  55 +
48 input { 56 input {
49 width: 570px; 57 width: 570px;
50 height: 60px; 58 height: 60px;
  1 +
  2 +import ScrollView from './scroll-view';
  3 +
  4 +export default ScrollView;
  1 +<template>
  2 + <Scroll ref="scroll" :options="options" @pulling-up="reachBottom" :data="data">
  3 + <slot></slot>
  4 + </Scroll>
  5 +</template>
  6 +
  7 +<script>
  8 +
  9 +import {Scroll} from 'cube-ui';
  10 +
  11 +export default {
  12 + name: 'yoho-scroll-view',
  13 + props: {
  14 + options: {
  15 + type: Object,
  16 + default() {
  17 + return {};
  18 + }
  19 + },
  20 + reachBottom: {
  21 + type: Function,
  22 + default() {
  23 + return {};
  24 + }
  25 + },
  26 + data: {
  27 + type: Array,
  28 + default() {
  29 + return [];
  30 + }
  31 + }
  32 + },
  33 + methods: {
  34 + forceUpdate() {
  35 + this.$refs.scroll.forceUpdate();
  36 + }
  37 + },
  38 + components: {
  39 + Scroll
  40 + }
  41 +};
  42 +
  43 +</script>
  44 +
  45 +<style lang="scss" scoped>
  46 +</style>
@@ -2,9 +2,9 @@ @@ -2,9 +2,9 @@
2 <div style="height: 100%;"> 2 <div style="height: 100%;">
3 <div style="background-color: #f0f0f0;height: 100%;"> 3 <div style="background-color: #f0f0f0;height: 100%;">
4 <div class="head"></div> 4 <div class="head"></div>
5 - <Scroll :data="ufoList" :options="scrollOptions" v-if="ufoList.length"> 5 + <ScrollView :data="ufoList" :options="scrollOptions" v-if="ufoList.length">
6 <CouponItem :item="item" v-for="(item, index) in ufoList" :key ="index"></CouponItem> 6 <CouponItem :item="item" v-for="(item, index) in ufoList" :key ="index"></CouponItem>
7 - </Scroll> 7 + </ScrollView>
8 <Empty v-else></Empty> 8 <Empty v-else></Empty>
9 </div> 9 </div>
10 </div> 10 </div>
@@ -17,17 +17,16 @@ const {mapState} = createNamespacedHelpers('coupon/yoho'); @@ -17,17 +17,16 @@ const {mapState} = createNamespacedHelpers('coupon/yoho');
17 17
18 import CouponItem from '../components/coupon-item'; 18 import CouponItem from '../components/coupon-item';
19 import Empty from '../components/empty'; 19 import Empty from '../components/empty';
20 -  
21 -import {Scroll} from 'cube-ui'; 20 +import ScrollView from '../components/scroll-view';
22 21
23 export default { 22 export default {
24 name: 'UfoCouponListPage', 23 name: 'UfoCouponListPage',
25 computed: { 24 computed: {
26 ...mapState(['ufoList']), 25 ...mapState(['ufoList']),
27 }, 26 },
28 - asyncData({store, router}) { 27 + asyncData({store}) {
29 return store.dispatch('coupon/yoho/fetchUfoList', { 28 return store.dispatch('coupon/yoho/fetchUfoList', {
30 - limit: 20, 29 + limit: 100,
31 page: 1 30 page: 1
32 }); 31 });
33 }, 32 },
@@ -45,7 +44,7 @@ export default { @@ -45,7 +44,7 @@ export default {
45 methods: { 44 methods: {
46 }, 45 },
47 components: { 46 components: {
48 - Scroll, 47 + ScrollView,
49 CouponItem, 48 CouponItem,
50 Empty 49 Empty
51 } 50 }
@@ -56,70 +55,4 @@ export default { @@ -56,70 +55,4 @@ export default {
56 .head { 55 .head {
57 height: 90px; 56 height: 90px;
58 } 57 }
59 -  
60 - .coupon-wrapper {  
61 - height: 200px;  
62 - padding-top: 20px;  
63 - padding-left: 20px;  
64 - padding-right: 20px;  
65 - background: #f0f0f0;  
66 - box-sizing: content-box;  
67 - }  
68 -  
69 - .coupon-item {  
70 - width: 100%;  
71 - height: 100%;  
72 - background: white;  
73 - border-radius: 10px;  
74 - }  
75 -  
76 - .mask {  
77 - width: 100%;  
78 - height: 100%;  
79 - position: absolute;  
80 - background: rgba(0, 0, 0, 0.4);  
81 - }  
82 -  
83 - .list-wrapper {  
84 - overflow: hidden;  
85 -  
86 - li {  
87 - padding: 15px 10px;  
88 - background-color: white;  
89 - border-radius: 10px;  
90 - }  
91 - }  
92 -  
93 - .tab-slide-container {  
94 - /*position: fixed;*/  
95 - /*left: 0;*/  
96 - /*right: 0;*/  
97 - /*bottom: 0;*/  
98 - height: 100%;  
99 - }  
100 -  
101 - .tab-container {  
102 - height: 90px;  
103 - background-color: white;  
104 - border-bottom: 1px solid #e0e0e0;  
105 - }  
106 -  
107 - .tab-item {  
108 - line-height: 60px;  
109 - text-align: center;  
110 - font-size: 28px;  
111 - color: #b0b0b0;  
112 - }  
113 -  
114 - .tab-item + .tab-item {  
115 - border-left: 1px solid #e0e0e0;  
116 - }  
117 -  
118 - .cube-tab_active {  
119 - color: #444 !important;  
120 - }  
121 -  
122 - .cube-scroll-wrapper {  
123 - padding-top: 20px;  
124 - }  
125 </style> 58 </style>
1 <template> 1 <template>
2 - <div style="height: 100%;">  
3 - <div class="head"></div>  
4 - <ClassicTabs ref="tabs" v-model="selectLabel" :data="tabLabels" @on-filter-change="onFilterChange"></ClassicTabs>  
5 -  
6 - <div class="tab-slide-container">  
7 - <Slide  
8 - ref="slide"  
9 - :loop="false"  
10 - :auto-play="false"  
11 - :show-dots="false"  
12 - :initial-index="initialIndex"  
13 - :options="slideOptions"  
14 - @scroll="scroll"  
15 - @change="changePage"  
16 - >  
17 - <SlideItem style="background-color: #f0f0f0;">  
18 - <ExchangeBox v-model="inputCouponCode" @click="onSubmitCode"></ExchangeBox>  
19 -  
20 - <div class="filter-wrapper" v-if="showFilter">  
21 - <div class="filter-mask" @click="onMaskClick"></div>  
22 - <FilterBar :list="filterList" v-model="selectFilterId" class="filter"></FilterBar>  
23 - </div>  
24 -  
25 - <div class="head"></div>  
26 -  
27 - <Scroll :data="yohoList.notuse" :options="scrollOptions" v-if="yohoList.notuse.length">  
28 - <CouponItem :item="item" v-for="(item, index) in yohoList.notuse" :key ="index"></CouponItem>  
29 - </Scroll>  
30 - <Empty v-else></Empty>  
31 - </SlideItem>  
32 -  
33 - <SlideItem style="background-color: #f0f0f0;">  
34 - <Scroll :data="yohoList.use" :options="scrollOptions" v-if="yohoList.use.length">  
35 - <CouponItem :item="item" v-for="(item, index) in yohoList.use" :key ="index" v-if="yohoList.use.length"></CouponItem>  
36 - </Scroll>  
37 - <Empty v-else></Empty>  
38 - </SlideItem>  
39 -  
40 - <SlideItem style="background-color: #f0f0f0;">  
41 - <Scroll :data="yohoList.overtime" :options="scrollOptions" v-if="yohoList.overtime.length">  
42 - <CouponItem :item="item" v-for="(item, index) in yohoList.overtime" :key ="index" v-if="yohoList.overtime.length"></CouponItem>  
43 - </Scroll>  
44 - <Empty v-else></Empty>  
45 - </SlideItem>  
46 - </Slide> 2 + <div style="height: 100%;">
  3 + <div class="head"></div>
  4 + <ClassicTabs ref="tabs" v-model="selectLabel" :data="tabLabels" @on-filter-change="onFilterChange"></ClassicTabs>
  5 +
  6 + <div class="tab-slide-container">
  7 + <Slide
  8 + ref="slide"
  9 + :loop="false"
  10 + :auto-play="false"
  11 + :show-dots="false"
  12 + :initial-index="initialIndex"
  13 + :options="slideOptions"
  14 + @scroll="scroll"
  15 + @change="changePage"
  16 + >
  17 + <SlideItem style="background-color: #f0f0f0;">
  18 + <ExchangeBox v-model="inputCouponCode" @click="onSubmitCode"></ExchangeBox>
  19 +
  20 + <div class="filter-wrapper" v-if="showFilter">
  21 + <div class="filter-mask" @click="onMaskClick"></div>
  22 + <FilterBar :list="filterList" v-model="selectFilterId" class="filter"></FilterBar>
47 </div> 23 </div>
  24 +
  25 + <div class="head"></div>
  26 +
  27 + <ScrollView ref="notuse" :data="getNotUseList" :options="scrollOptions" v-if="getNotUseList.length" :reach-bottom="reachBottom">
  28 + <CouponItem :item="item" v-for="(item, index) in getNotUseList" :key="index"></CouponItem>
  29 + </ScrollView>
  30 + <Empty v-else></Empty>
  31 + </SlideItem>
  32 +
  33 + <SlideItem style="background-color: #f0f0f0;">
  34 + <ScrollView ref="use" :data="getUseList" :options="scrollOptions" v-if="getUseList.length" :reach-bottom="reachBottom">
  35 + <CouponItem :item="item" v-for="(item, index) in getUseList" :key="index"></CouponItem>
  36 + </ScrollView>
  37 + <Empty v-else></Empty>
  38 + </SlideItem>
  39 +
  40 + <SlideItem style="background-color: #f0f0f0;">
  41 + <ScrollView ref="overtime" :data="getOvertimeList" options="scrollOptions" v-if="getOvertimeList.length" :reach-bottom="reachBottom">
  42 + <CouponItem :item="item" v-for="(item, index) in getOvertimeList" :key="index"></CouponItem>
  43 + </ScrollView>
  44 + <Empty v-else></Empty>
  45 + </SlideItem>
  46 + </Slide>
48 </div> 47 </div>
  48 + </div>
49 </template> 49 </template>
50 50
51 <script> 51 <script>
52 import {createNamespacedHelpers} from 'vuex'; 52 import {createNamespacedHelpers} from 'vuex';
53 53
54 -const {mapState, mapActions} = createNamespacedHelpers('coupon/yoho'); 54 +const {mapState, mapActions, mapGetters} = createNamespacedHelpers('coupon/yoho');
55 55
56 import Tabs from '../components/tabs'; 56 import Tabs from '../components/tabs';
57 import FilterBar from '../components/filter-bar'; 57 import FilterBar from '../components/filter-bar';
58 import ExchangeBox from '../components/exchange-box'; 58 import ExchangeBox from '../components/exchange-box';
59 import CouponItem from '../components/coupon-item'; 59 import CouponItem from '../components/coupon-item';
60 import Empty from '../components/empty'; 60 import Empty from '../components/empty';
  61 +import ScrollView from '../components/scroll-view';
61 62
62 -import {Slide, Scroll} from 'cube-ui'; 63 +import {Slide} from 'cube-ui';
63 64
64 const TYPE = {notuse: 'notuse', use: 'use', overtime: 'overtime'}; 65 const TYPE = {notuse: 'notuse', use: 'use', overtime: 'overtime'};
65 66
66 export default { 67 export default {
67 name: 'YohoCouponListPage', 68 name: 'YohoCouponListPage',
68 asyncData({store}) { 69 asyncData({store}) {
69 - return store.dispatch('coupon/yoho/fetchYohoList', { 70 + return Promise.all([
  71 + store.dispatch('coupon/yoho/fetchYohoList', {
70 type: TYPE.notuse, 72 type: TYPE.notuse,
71 - filter: 0,  
72 - limit: 20,  
73 - page: 1  
74 - }); 73 + }),
  74 + store.dispatch('coupon/yoho/fetchYohoList', {
  75 + type: TYPE.use,
  76 + }),
  77 + store.dispatch('coupon/yoho/fetchYohoList', {
  78 + type: TYPE.overtime,
  79 + })
  80 + ]);
75 }, 81 },
76 data() { 82 data() {
77 return { 83 return {
78 selectLabel: '未使用', 84 selectLabel: '未使用',
  85 + selectType: TYPE.notuse,
79 showFilter: false, 86 showFilter: false,
80 selectFilterId: 0, 87 selectFilterId: 0,
81 inputCouponCode: '', 88 inputCouponCode: '',
@@ -99,6 +106,13 @@ export default { @@ -99,6 +106,13 @@ export default {
99 ], 106 ],
100 scrollOptions: { 107 scrollOptions: {
101 directionLockThreshold: 0, 108 directionLockThreshold: 0,
  109 + pullUpLoad: {
  110 + threshold: 0,
  111 + txt: {
  112 + more: '加载更多',
  113 + noMore: '以上是最新的内容'
  114 + }
  115 + }
102 }, 116 },
103 slideOptions: { 117 slideOptions: {
104 listenScroll: true, 118 listenScroll: true,
@@ -109,7 +123,8 @@ export default { @@ -109,7 +123,8 @@ export default {
109 }; 123 };
110 }, 124 },
111 computed: { 125 computed: {
112 - ...mapState(['yohoList', 'filterList']), 126 + ...mapState(['filterList']),
  127 + ...mapGetters(['getNotUseList', 'getUseList', 'getOvertimeList']),
113 initialIndex() { 128 initialIndex() {
114 let index = 0; 129 let index = 0;
115 130
@@ -120,28 +135,17 @@ export default { @@ -120,28 +135,17 @@ export default {
120 created() { 135 created() {
121 }, 136 },
122 mounted() { 137 mounted() {
123 - this.getNum(); 138 + this.fetchYohoNum();
124 }, 139 },
125 methods: { 140 methods: {
126 - ...mapActions(['getCouponCode']), 141 + ...mapActions(['getCouponCode', 'fetchYohoList', 'fetchYohoNum']),
127 changePage(current) { 142 changePage(current) {
128 - const tab = this.tabLabels[current];  
129 -  
130 this.selectLabel = this.tabLabels[current].label; 143 this.selectLabel = this.tabLabels[current].label;
131 -  
132 - this.$store.dispatch('coupon/yoho/fetchYohoList', {  
133 - type: tab.type,  
134 - filter: tab.selectFilterId,  
135 - limit: 20,  
136 - page: 1  
137 - }); 144 + this.selectType = this.tabLabels[current].type;
138 }, 145 },
139 scroll() { 146 scroll() {
140 147
141 }, 148 },
142 - getNum() {  
143 - return this.$store.dispatch('coupon/yoho/fetchYohoNum', {});  
144 - },  
145 onFilterChange(show) { 149 onFilterChange(show) {
146 this.showFilter = show; 150 this.showFilter = show;
147 }, 151 },
@@ -152,17 +156,21 @@ export default { @@ -152,17 +156,21 @@ export default {
152 onSubmitCode() { 156 onSubmitCode() {
153 this.getCouponCode({code: this.inputCouponCode}).then(result => { 157 this.getCouponCode({code: this.inputCouponCode}).then(result => {
154 if (result.code === 200) { 158 if (result.code === 200) {
  159 + this.inputCouponCode = '';
155 this.$createToast({ 160 this.$createToast({
156 txt: result.message, 161 txt: result.message,
157 type: 'correct' 162 type: 'correct'
158 - }); 163 + }).show();
159 } else { 164 } else {
160 this.$createToast({ 165 this.$createToast({
161 txt: result.message, 166 txt: result.message,
162 type: 'error' 167 type: 'error'
163 - }); 168 + }).show();
164 } 169 }
165 }); 170 });
  171 + },
  172 + reachBottom() {
  173 + this.fetchYohoList({type: this.selectType});
166 } 174 }
167 }, 175 },
168 watch: { 176 watch: {
@@ -178,9 +186,9 @@ export default { @@ -178,9 +186,9 @@ export default {
178 ExchangeBox, 186 ExchangeBox,
179 Slide, 187 Slide,
180 SlideItem: Slide.Item, 188 SlideItem: Slide.Item,
181 - Scroll,  
182 CouponItem, 189 CouponItem,
183 - Empty 190 + Empty,
  191 + ScrollView
184 } 192 }
185 }; 193 };
186 </script> 194 </script>
@@ -194,10 +202,6 @@ export default { @@ -194,10 +202,6 @@ export default {
194 height: 100%; 202 height: 100%;
195 } 203 }
196 204
197 - .cube-scroll-wrapper {  
198 - padding-top: 20px;  
199 - }  
200 -  
201 .filter-wrapper { 205 .filter-wrapper {
202 width: calc(100% / 3); 206 width: calc(100% / 3);
203 height: 100%; 207 height: 100%;
@@ -23,17 +23,26 @@ function _handleUfoCoupon(item) { @@ -23,17 +23,26 @@ function _handleUfoCoupon(item) {
23 } 23 }
24 24
25 export default { 25 export default {
26 - async fetchYohoList({commit}, {type, filter, limit, page}) { 26 + async fetchYohoList({commit, state}, {type, filter = 0}) {
27 commit(Types.FETCH_YOHO_COUPON_REQUEST); 27 commit(Types.FETCH_YOHO_COUPON_REQUEST);
28 28
29 - const result = await this.$api.get('/api/coupon/yoho/list', {type, filter, limit, page}); 29 + if (state.yohoList[type].page > state.yohoList[type].pageNum) {
  30 + return;
  31 + }
  32 +
  33 + const result = await this.$api.get('/api/coupon/yoho/list', {type, filter, limit: 10, page: state.yohoList[type].page + 1});
30 34
31 if (result && result.code === 200) { 35 if (result && result.code === 200) {
32 const data = { 36 const data = {
33 type, 37 type,
34 - list: result.data.couponList.map(_handleCoupon), 38 + couponList: result.data.couponList.map((i) => _handleCoupon(i, type)),
  39 + pageNum: result.data.pageNum,
  40 + pageSize: result.data.pageSize,
  41 + total: result.data.total
35 }; 42 };
36 43
  44 + console.log(data);
  45 +
37 if (type === TYPE.notuse) { 46 if (type === TYPE.notuse) {
38 data.filter = result.data.filters; 47 data.filter = result.data.filters;
39 } 48 }
@@ -42,6 +51,8 @@ export default { @@ -42,6 +51,8 @@ export default {
42 } else { 51 } else {
43 commit(Types.FETCH_YOHO_COUPON_FAILED); 52 commit(Types.FETCH_YOHO_COUPON_FAILED);
44 } 53 }
  54 +
  55 + return result.data.couponList ? result.data.couponList.length !== 0 : false;
45 }, 56 },
46 57
47 async fetchYohoNum({commit}) { 58 async fetchYohoNum({commit}) {
@@ -11,9 +11,27 @@ export default function() { @@ -11,9 +11,27 @@ export default function() {
11 state: { 11 state: {
12 fetching: false, 12 fetching: false,
13 yohoList: { 13 yohoList: {
14 - notuse: [],  
15 - use: [],  
16 - overtime: [] 14 + notuse: {
  15 + couponList: [],
  16 + pageNum: 0,
  17 + pageSize: 10,
  18 + total: 0,
  19 + page: 0,
  20 + },
  21 + use: {
  22 + couponList: [],
  23 + pageNum: 0,
  24 + pageSize: 10,
  25 + total: 0,
  26 + page: 0,
  27 + },
  28 + overtime: {
  29 + couponList: [],
  30 + pageNum: 0,
  31 + pageSize: 10,
  32 + total: 0,
  33 + page: 0
  34 + }
17 }, 35 },
18 num: { 36 num: {
19 notuse: 0, 37 notuse: 0,
@@ -29,6 +47,15 @@ export default function() { @@ -29,6 +47,15 @@ export default function() {
29 getNum(state) { 47 getNum(state) {
30 return [handleNum(state.num.notuse), handleNum(state.num.use), handleNum(state.num.overtime)]; 48 return [handleNum(state.num.notuse), handleNum(state.num.use), handleNum(state.num.overtime)];
31 }, 49 },
  50 + getNotUseList(state) {
  51 + return state.yohoList.notuse.couponList;
  52 + },
  53 + getUseList(state) {
  54 + return state.yohoList.use.couponList;
  55 + },
  56 + getOvertimeList(state) {
  57 + return state.yohoList.overtime.couponList;
  58 + },
32 } 59 }
33 }; 60 };
34 } 61 }
@@ -4,9 +4,16 @@ export default { @@ -4,9 +4,16 @@ export default {
4 [Types.FETCH_YOHO_COUPON_REQUEST](state) { 4 [Types.FETCH_YOHO_COUPON_REQUEST](state) {
5 state.fetching = true; 5 state.fetching = true;
6 }, 6 },
7 - [Types.FETCH_YOHO_COUPON_SUCCESS](state, {list, filter, type}) { 7 + [Types.FETCH_YOHO_COUPON_SUCCESS](state, {couponList, filter, type, pageNum, pageSize, total}) {
8 state.fetching = false; 8 state.fetching = false;
9 - state.yohoList[type] = list; 9 +
  10 + const list = state.yohoList[type].couponList;
  11 +
  12 + state.yohoList[type].couponList = list.concat(couponList);
  13 + state.yohoList[type].pageNum = pageNum;
  14 + state.yohoList[type].pageSize = pageSize;
  15 + state.yohoList[type].total = total;
  16 + state.yohoList[type].page += 1;
10 17
11 if (filter) { 18 if (filter) {
12 state.filterList = filter; 19 state.filterList = filter;