fe / yoho-app-web · Commits

Go to a project

Authored by htoooth
Commit 34c8f3d4a9bd3d4ced53202090bcd3de4c6a431d 1 parent 6b77d8e0

fix api error

Inline Side-by-side
Showing 12 changed files with 134 additions and 60 deletions
@@ -40,7 +40,7 @@ const request = async({url, method, reqParams, context}) => { @@ -40,7 +40,7 @@ const request = async({url, method, reqParams, context}) => {
40 cache: cache, 40 cache: cache,
41 code: 200, 41 code: 200,
42 headers 42 headers
43 - }).catch(console.log); 43 + });
44 } else if (apiInfo.ufo) { 44 } else if (apiInfo.ufo) {
45 return await ufoAPI[method](`${apiInfo.path || ''}`, params, { 45 return await ufoAPI[method](`${apiInfo.path || ''}`, params, {
46 cache: cache, 46 cache: cache,
@@ -52,7 +52,7 @@ const request = async({url, method, reqParams, context}) => { @@ -52,7 +52,7 @@ const request = async({url, method, reqParams, context}) => {
52 code: 200, 52 code: 200,
53 cache: cache, 53 cache: cache,
54 headers 54 headers
55 - }).catch(console.log); 55 + });
56 } 56 }
57 }; 57 };
58 58
@@ -29,7 +29,7 @@ @@ -29,7 +29,7 @@
29 </template> 29 </template>
30 30
31 <template v-else> 31 <template v-else>
32 - <a :href="item.useNowLink" class="use-now">立即使用</a> 32 + <a :href="item.useNowLink" v-if="item.useNowLink" class="use-now">立即使用</a>
33 <span class="top-tip" v-if="item.is_overdue_soon === 'Y'"></span> 33 <span class="top-tip" v-if="item.is_overdue_soon === 'Y'"></span>
34 </template> 34 </template>
35 </div> 35 </div>
@@ -52,7 +52,6 @@ export default { @@ -52,7 +52,6 @@ export default {
52 } 52 }
53 }, 53 },
54 mounted() { 54 mounted() {
55 - console.log(this.item);  
56 }, 55 },
57 data() { 56 data() {
58 return { 57 return {
@@ -80,6 +79,7 @@ export default { @@ -80,6 +79,7 @@ export default {
80 'coupon-left-shop': this.item.catalog === 100, 79 'coupon-left-shop': this.item.catalog === 100,
81 'coupon-left-activity': this.item.catalog === 200, 80 'coupon-left-activity': this.item.catalog === 200,
82 'coupon-left-freight': this.item.catalog === 300, 81 'coupon-left-freight': this.item.catalog === 300,
  82 + 'coupon-left-ufo': this.item.catalog === 'UFO',
83 }]; 83 }];
84 } 84 }
85 }, 85 },
@@ -88,6 +88,7 @@ export default { @@ -88,6 +88,7 @@ export default {
88 'type-shop': this.item.catalog === 100, 88 'type-shop': this.item.catalog === 100,
89 'type-activity': this.item.catalog === 200, 89 'type-activity': this.item.catalog === 200,
90 'type-freight': this.item.catalog === 300, 90 'type-freight': this.item.catalog === 300,
  91 + 'type-ufo': this.item.catalog === 'UFO',
91 }]; 92 }];
92 }, 93 },
93 introClass() { 94 introClass() {
@@ -160,6 +161,14 @@ export default { @@ -160,6 +161,14 @@ export default {
160 } 161 }
161 } 162 }
162 163
  164 + .coupon-left-ufo {
  165 + background-image: url("~statics/image/coupon/ufo.png");
  166 +
  167 + > p {
  168 + color: #002b47;
  169 + }
  170 + }
  171 +
163 .coupon-right { 172 .coupon-right {
164 width: 510px; 173 width: 510px;
165 height: 200px; 174 height: 200px;
@@ -191,6 +200,10 @@ export default { @@ -191,6 +200,10 @@ export default {
191 color: #222; 200 color: #222;
192 } 201 }
193 202
  203 + .type-ufo {
  204 + color: #002b47;
  205 + }
  206 +
194 .title { 207 .title {
195 width: 370px; 208 width: 370px;
196 font-size: 24px; 209 font-size: 24px;
1 <template> 1 <template>
2 <div class="exchange-box"> 2 <div class="exchange-box">
3 - <input type="text" name="couponCodeInput" placeholder="请输入优惠券码">  
4 - <button id="exchangeCouponBtn" class="exchange-coupon-btn">兑换</button> 3 + <input type="text" name="couponCodeInput" placeholder="请输入优惠券码" :value="code" @input="onCodeInput">
  4 + <button :class="btnCls" @click="onClick">兑换</button>
5 </div> 5 </div>
6 </template> 6 </template>
7 7
8 <script> 8 <script>
9 export default { 9 export default {
10 - name: "ExchangeBox" 10 + name: 'ExchangeBox',
  11 + data() {
  12 + return {
  13 + code: ''
  14 + };
  15 + },
  16 + methods: {
  17 + onClick() {
  18 + this.$emit('click');
  19 + },
  20 + onCodeInput(e) {
  21 + this.code += e.data;
  22 + this.$emit('input', this.code);
  23 + }
  24 + },
  25 + computed: {
  26 + btnCls() {
  27 + return ['exchange-coupon-btn', {
  28 + active: this.code !== ''
  29 + }];
  30 + }
  31 + }
11 }; 32 };
12 </script> 33 </script>
13 34
1 <template> 1 <template>
2 <div class="filter-item"> 2 <div class="filter-item">
3 <template v-for="(item, index) in list"> 3 <template v-for="(item, index) in list">
4 - <button @click="onClick(item)">{{item.filter_name}}</button> 4 + <button :class="btnCls(item)" @click="onClick(item)" :key="item.filter_id">{{item.filter_name}}</button>
5 </template> 5 </template>
6 </div> 6 </div>
7 </template> 7 </template>
@@ -17,23 +17,31 @@ export default { @@ -17,23 +17,31 @@ export default {
17 } 17 }
18 }, 18 },
19 value: { 19 value: {
20 - type: String, 20 + type: Number,
21 default() { 21 default() {
22 - return ''; 22 + return 0;
23 } 23 }
24 } 24 }
25 }, 25 },
26 data() { 26 data() {
27 return { 27 return {
  28 + clickFilterId: this.value
28 }; 29 };
29 }, 30 },
30 methods: { 31 methods: {
31 - onClick() { 32 + onClick(item) {
  33 + this.clickFilterId = item.filter_id;
  34 + this.$emit('input', item.filter_id);
  35 + },
  36 + btnCls(item) {
  37 + if (item.filter_id === this.clickFilterId) {
  38 + return ['active'];
  39 + }
32 40
  41 + return [];
33 } 42 }
34 }, 43 },
35 } 44 }
36 -  
37 </script> 45 </script>
38 46
39 <style lang="scss" scoped> 47 <style lang="scss" scoped>
@@ -37,7 +37,7 @@ export default { @@ -37,7 +37,7 @@ export default {
37 prefixCls: 'yoho-tabs', 37 prefixCls: 'yoho-tabs',
38 navList: this.data, 38 navList: this.data,
39 activeKey: this.value, 39 activeKey: this.value,
40 - show: false 40 + showFilter: false
41 }; 41 };
42 }, 42 },
43 computed: { 43 computed: {
@@ -45,7 +45,7 @@ export default { @@ -45,7 +45,7 @@ export default {
45 return [`${this.prefixCls}`]; 45 return [`${this.prefixCls}`];
46 }, 46 },
47 filterClass() { 47 filterClass() {
48 - if (this.show) { 48 + if (this.showFilter) {
49 return ['iconfont', 'icon-up']; 49 return ['iconfont', 'icon-up'];
50 } else { 50 } else {
51 return ['iconfont', 'icon-downn']; 51 return ['iconfont', 'icon-downn'];
@@ -58,8 +58,8 @@ export default { @@ -58,8 +58,8 @@ export default {
58 const nav = this.navList[index]; 58 const nav = this.navList[index];
59 59
60 if (this.activeKey === nav.label) { 60 if (this.activeKey === nav.label) {
61 - this.show = !this.show;  
62 - this.$emit('filter', this.show); 61 + this.showFilter = !this.showFilter;
  62 + this.$emit('on-filter-change', this.showFilter);
63 return; 63 return;
64 } 64 }
65 65
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 - <ClassicTabs v-model="selectLabel" :data="tabLabels" @filter="onFilterChange"></ClassicTabs> 4 + <ClassicTabs ref="tabs" v-model="selectLabel" :data="tabLabels" @on-filter-change="onFilterChange"></ClassicTabs>
5 5
6 <div class="tab-slide-container"> 6 <div class="tab-slide-container">
7 <Slide 7 <Slide
@@ -15,11 +15,11 @@ @@ -15,11 +15,11 @@
15 @change="changePage" 15 @change="changePage"
16 > 16 >
17 <SlideItem style="background-color: #f0f0f0;"> 17 <SlideItem style="background-color: #f0f0f0;">
18 - <ExchangeBox></ExchangeBox> 18 + <ExchangeBox v-model="inputCouponCode" @click="onSubmitCode"></ExchangeBox>
19 19
20 - <div class="filter-wrapper" v-if="show">  
21 - <div class="filter-mask"></div>  
22 - <FilterBar :list="filterList" class="filter"></FilterBar> 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> 23 </div>
24 24
25 <div class="head"></div> 25 <div class="head"></div>
@@ -51,7 +51,7 @@ @@ -51,7 +51,7 @@
51 <script> 51 <script>
52 import {createNamespacedHelpers} from 'vuex'; 52 import {createNamespacedHelpers} from 'vuex';
53 53
54 -const {mapState, mapActions, mapGetters} = createNamespacedHelpers('coupon/yoho'); 54 +const {mapState} = 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';
@@ -59,23 +59,13 @@ import ExchangeBox from '../components/exchange-box'; @@ -59,23 +59,13 @@ 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 61
62 -import {TabBar, Slide, Scroll} from 'cube-ui'; 62 +import {Slide, Scroll} from 'cube-ui';
63 63
64 const TYPE = {notuse: 'notuse', use: 'use', overtime: 'overtime'}; 64 const TYPE = {notuse: 'notuse', use: 'use', overtime: 'overtime'};
65 65
66 export default { 66 export default {
67 name: 'YohoCouponListPage', 67 name: 'YohoCouponListPage',
68 - computed: {  
69 - ...mapState(['yohoList', 'filterList', 'showFilter']),  
70 - ...mapGetters(['getNotUseNum', 'getUseNum', 'getOvertime']),  
71 - initialIndex() {  
72 - let index = 0;  
73 -  
74 - index = this.tabLabels.findIndex(i => i.label === this.selectLabel);  
75 - return index;  
76 - }  
77 - },  
78 - asyncData({store, router}) { 68 + asyncData({store}) {
79 return store.dispatch('coupon/yoho/fetchYohoList', { 69 return store.dispatch('coupon/yoho/fetchYohoList', {
80 type: TYPE.notuse, 70 type: TYPE.notuse,
81 filter: 0, 71 filter: 0,
@@ -86,35 +76,47 @@ export default { @@ -86,35 +76,47 @@ export default {
86 data() { 76 data() {
87 return { 77 return {
88 selectLabel: '未使用', 78 selectLabel: '未使用',
89 - selectType: TYPE.notuse,  
90 - selectFilter: 0, 79 + showFilter: false,
  80 + selectFilterId: 0,
  81 + inputCouponCode: '',
91 tabLabels: [ 82 tabLabels: [
92 { 83 {
93 label: '未使用', 84 label: '未使用',
94 type: TYPE.notuse, 85 type: TYPE.notuse,
95 - filter: true 86 + filter: true,
  87 + selectFilterId: 0,
96 }, { 88 }, {
97 label: '已使用', 89 label: '已使用',
98 type: TYPE.use, 90 type: TYPE.use,
99 - filter: false 91 + filter: false,
  92 + selectFilterId: 0,
100 }, { 93 }, {
101 label: '已失效', 94 label: '已失效',
102 type: TYPE.overtime, 95 type: TYPE.overtime,
103 - filter: false 96 + filter: false,
  97 + selectFilterId: 0,
104 } 98 }
105 ], 99 ],
106 scrollOptions: { 100 scrollOptions: {
107 - directionLockThreshold: 0,  
108 - stopPropagation: true 101 + directionLockThreshold: 0
109 }, 102 },
110 slideOptions: { 103 slideOptions: {
111 listenScroll: true, 104 listenScroll: true,
  105 + click: false,
112 probeType: 3, 106 probeType: 3,
113 directionLockThreshold: 0 107 directionLockThreshold: 0
114 }, 108 },
115 - show: false  
116 }; 109 };
117 }, 110 },
  111 + computed: {
  112 + ...mapState(['yohoList', 'filterList']),
  113 + initialIndex() {
  114 + let index = 0;
  115 +
  116 + index = this.tabLabels.findIndex(i => i.label === this.selectLabel);
  117 + return index;
  118 + }
  119 + },
118 created() { 120 created() {
119 }, 121 },
120 mounted() { 122 mounted() {
@@ -122,13 +124,13 @@ export default { @@ -122,13 +124,13 @@ export default {
122 }, 124 },
123 methods: { 125 methods: {
124 changePage(current) { 126 changePage(current) {
  127 + const tab = this.tabLabels[current];
  128 +
125 this.selectLabel = this.tabLabels[current].label; 129 this.selectLabel = this.tabLabels[current].label;
126 - this.selectType = this.tabLabels[current].type;  
127 - console.log(current, 'index', this.selectType, this.selectLabel);  
128 130
129 - return this.$store.dispatch('coupon/yoho/fetchYohoList', {  
130 - type: this.selectType,  
131 - filter: this.selectFilter, 131 + this.$store.dispatch('coupon/yoho/fetchYohoList', {
  132 + type: tab.type,
  133 + filter: tab.selectFilterId,
132 limit: 20, 134 limit: 20,
133 page: 1 135 page: 1
134 }); 136 });
@@ -139,19 +141,28 @@ export default { @@ -139,19 +141,28 @@ export default {
139 getNum() { 141 getNum() {
140 return this.$store.dispatch('coupon/yoho/fetchYohoNum', {}); 142 return this.$store.dispatch('coupon/yoho/fetchYohoNum', {});
141 }, 143 },
142 -  
143 onFilterChange(show) { 144 onFilterChange(show) {
144 - this.show = show; 145 + this.showFilter = show;
  146 + },
  147 + onMaskClick() {
  148 + this.showFilter = false;
  149 + this.$refs.tabs.showFilter = false;
  150 + },
  151 + onSubmitCode() {
  152 +
  153 + }
  154 + },
  155 + watch: {
  156 + selectFilterId(val) {
  157 + this.tabLabels[0].selectFilterId = val;
  158 + this.onMaskClick();
  159 + return this.changePage(0);
145 } 160 }
146 }, 161 },
147 components: { 162 components: {
148 - Tabs,  
149 - TabPane: Tabs.Pane,  
150 FilterBar, 163 FilterBar,
151 ClassicTabs: Tabs.ClassicTabs, 164 ClassicTabs: Tabs.ClassicTabs,
152 ExchangeBox, 165 ExchangeBox,
153 - TabBar,  
154 - Tab: TabBar.Tab,  
155 Slide, 166 Slide,
156 SlideItem: Slide.Item, 167 SlideItem: Slide.Item,
157 Scroll, 168 Scroll,
@@ -15,6 +15,13 @@ function _handleCoupon(item, type) { @@ -15,6 +15,13 @@ function _handleCoupon(item, type) {
15 return item; 15 return item;
16 } 16 }
17 17
  18 +function _handleUfoCoupon(item) {
  19 + item.coupon_value_str = item.coupon_value;
  20 + item.catalog_name = 'UFO';
  21 + item.catalog = 'UFO';
  22 + return item;
  23 +}
  24 +
18 export default { 25 export default {
19 async fetchYohoList({commit}, {type, filter, limit, page}) { 26 async fetchYohoList({commit}, {type, filter, limit, page}) {
20 commit(Types.FETCH_YOHO_COUPON_REQUEST); 27 commit(Types.FETCH_YOHO_COUPON_REQUEST);
@@ -22,11 +29,16 @@ export default { @@ -22,11 +29,16 @@ export default {
22 const result = await this.$api.get('/api/coupon/yoho/list', {type, filter, limit, page}); 29 const result = await this.$api.get('/api/coupon/yoho/list', {type, filter, limit, page});
23 30
24 if (result && result.code === 200) { 31 if (result && result.code === 200) {
25 - commit(Types.FETCH_YOHO_COUPON_SUCCESS, { 32 + const data = {
26 type, 33 type,
27 list: result.data.couponList.map(_handleCoupon), 34 list: result.data.couponList.map(_handleCoupon),
28 - filter: result.data.filters  
29 - }); 35 + };
  36 +
  37 + if (type === TYPE.notuse) {
  38 + data.filter = result.data.filters;
  39 + }
  40 +
  41 + commit(Types.FETCH_YOHO_COUPON_SUCCESS, data);
30 } else { 42 } else {
31 commit(Types.FETCH_YOHO_COUPON_FAILED); 43 commit(Types.FETCH_YOHO_COUPON_FAILED);
32 } 44 }
@@ -51,7 +63,7 @@ export default { @@ -51,7 +63,7 @@ export default {
51 63
52 if (result && result.code === 200) { 64 if (result && result.code === 200) {
53 commit(Types.FETCH_UFO_COUPON_SUCCESS, { 65 commit(Types.FETCH_UFO_COUPON_SUCCESS, {
54 - list: [] 66 + list: result.data.map(_handleUfoCoupon)
55 }); 67 });
56 } else { 68 } else {
57 commit(Types.FETCH_YOHO_COUPON_FAILED); 69 commit(Types.FETCH_YOHO_COUPON_FAILED);
@@ -22,7 +22,6 @@ export default function() { @@ -22,7 +22,6 @@ export default function() {
22 }, 22 },
23 ufoList: [], 23 ufoList: [],
24 filterList: [], 24 filterList: [],
25 - showFilter: true,  
26 }, 25 },
27 actions, 26 actions,
28 mutations, 27 mutations,
@@ -7,7 +7,10 @@ export default { @@ -7,7 +7,10 @@ export default {
7 [Types.FETCH_YOHO_COUPON_SUCCESS](state, {list, filter, type}) { 7 [Types.FETCH_YOHO_COUPON_SUCCESS](state, {list, filter, type}) {
8 state.fetching = false; 8 state.fetching = false;
9 state.yohoList[type] = list; 9 state.yohoList[type] = list;
  10 +
  11 + if (filter) {
10 state.filterList = filter; 12 state.filterList = filter;
  13 + }
11 }, 14 },
12 [Types.FETCH_YOHO_COUPON_FAILED](state) { 15 [Types.FETCH_YOHO_COUPON_FAILED](state) {
13 state.fetching = false; 16 state.fetching = false;
@@ -19,5 +22,5 @@ export default { @@ -19,5 +22,5 @@ export default {
19 [Types.FETCH_UFO_COUPON_SUCCESS](state, {list = []}) { 22 [Types.FETCH_UFO_COUPON_SUCCESS](state, {list = []}) {
20 state.fetching = false; 23 state.fetching = false;
21 state.ufoList = list; 24 state.ufoList = list;
22 - }, 25 + }
23 }; 26 };
@@ -2,5 +2,6 @@ export const FETCH_YOHO_COUPON_REQUEST = 'FETCH_YOHO_COUPON_REQUEST'; @@ -2,5 +2,6 @@ export const FETCH_YOHO_COUPON_REQUEST = 'FETCH_YOHO_COUPON_REQUEST';
2 export const FETCH_YOHO_COUPON_FAILED = 'FETCH_YOHO_COUPON_FAILED'; 2 export const FETCH_YOHO_COUPON_FAILED = 'FETCH_YOHO_COUPON_FAILED';
3 export const FETCH_YOHO_COUPON_SUCCESS = 'FETCH_YOHO_COUPON_SUCCESS'; 3 export const FETCH_YOHO_COUPON_SUCCESS = 'FETCH_YOHO_COUPON_SUCCESS';
4 export const FETCH_YOHO_COUPON_NUM_SUCCESS = 'FETCH_YOHO_COUPON_NUM_SUCCESS'; 4 export const FETCH_YOHO_COUPON_NUM_SUCCESS = 'FETCH_YOHO_COUPON_NUM_SUCCESS';
  5 +export const FETCH_YOHO_COUPON_CODE_SUCCESS = 'FETCH_YOHO_COUPON_NUM_SUCCESS';
5 export const FETCH_UFO_COUPON_SUCCESS = 'FETCH_UFO_COUPON_SUCCESS'; 6 export const FETCH_UFO_COUPON_SUCCESS = 'FETCH_UFO_COUPON_SUCCESS';
6 7
@@ -20,6 +20,12 @@ module.exports = { @@ -20,6 +20,12 @@ module.exports = {
20 api: 'app.coupons.getCouponNums', 20 api: 'app.coupons.getCouponNums',
21 params: {} 21 params: {}
22 }, 22 },
  23 + '/api/coupon/yoho/getcoupon': {
  24 + api: 'app.Buynow.useCoupon',
  25 + params: {
  26 + coupon_code: {type: String}
  27 + }
  28 + },
23 '/api/coupon/ufo/list': { 29 '/api/coupon/ufo/list': {
24 api: 'ufo.coupons.get', 30 api: 'ufo.coupons.get',
25 path: 'coupon', 31 path: 'coupon',