fe / yoho-app-web · Commits

Go to a project

Authored by htoooth
Commit 410c4565239d490229c31a1badd74db7a5defbc9 1 parent c1e2d195

add coupon

Inline Side-by-side
Showing 9 changed files with 233 additions and 68 deletions
1 const config = { 1 const config = {
2 development: { 2 development: {
3 - axiosBaseUrl: process.env.VUE_ENV === 'server' ? 'http://localhost:6004/' : '//m.yohoblk.com/', 3 + axiosBaseUrl: process.env.VUE_ENV === 'server' ? 'http://localhost:6004/' : '//m.yohobuy.com/',
4 axiosResponseType: 'json', 4 axiosResponseType: 'json',
5 }, 5 },
6 production: { 6 production: {
7 - axiosBaseUrl: process.env.VUE_ENV === 'server' ? 'http://localhost:6004/' : '//m.yohoblk.com/', 7 + axiosBaseUrl: process.env.VUE_ENV === 'server' ? 'http://localhost:6004/' : '//m.yohobuy.com/',
8 axiosResponseType: 'json', 8 axiosResponseType: 'json',
9 } 9 }
10 }; 10 };
1 <template> 1 <template>
2 - <div></div> 2 + <div class="filter-item">
  3 + <template v-for="(item, index) in list">
  4 + <button>{{item.filter_name}}</button>
  5 + </template>
  6 + </div>
3 </template> 7 </template>
4 8
5 <script> 9 <script>
6 export default { 10 export default {
7 - name: 'FilterBar' 11 + name: 'FilterBar',
  12 + props: {
  13 + list: {
  14 + type: Array,
  15 + default() {
  16 + return [];
  17 + }
  18 + }
  19 + },
  20 + methods: {
  21 +
  22 + },
8 } 23 }
9 </script> 24 </script>
10 25
11 -<style> 26 +<style lang="scss" scoped>
  27 + .filter-item {
  28 + display: flex;
  29 + width: 100%;
  30 + height: 130px;
  31 + justify-content: space-around;
  32 + align-items: center;
  33 + background-color: #fff;
  34 + position: fixed;
  35 + top: 182px;
  36 + left: 0;
  37 + z-index: 3;
  38 +
  39 + button {
  40 + width: 150px;
  41 + height: 70px;
  42 + background-color: #fff;
  43 + color: #444;
  44 + font-size: 28px;
  45 + border: 1px solid #e0e0e0;
  46 + border-radius: 4px;
12 47
  48 + &.active {
  49 + background-color: #444;
  50 + color: #fff;
  51 + border: 1px solid transparent;
  52 + }
  53 + }
  54 + }
13 </style> 55 </style>
  56 +
@@ -121,6 +121,7 @@ $yoho-tab: yoho-tab; @@ -121,6 +121,7 @@ $yoho-tab: yoho-tab;
121 flex: 1; 121 flex: 1;
122 line-height: 60px; 122 line-height: 60px;
123 text-align: center; 123 text-align: center;
  124 + font-size: 28px;
124 color: #b0b0b0; 125 color: #b0b0b0;
125 border-right: 1px solid #e0e0e0; 126 border-right: 1px solid #e0e0e0;
126 } 127 }
1 <template> 1 <template>
2 <LayoutApp> 2 <LayoutApp>
  3 + <!--<div class="mask"></div>-->
3 <Tabs> 4 <Tabs>
4 <template slot="panes"> 5 <template slot="panes">
5 <div class="head"></div> 6 <div class="head"></div>
6 <TabPane label="有货优惠券"> 7 <TabPane label="有货优惠券">
7 8
8 - <ClassicTabs>  
9 - <template slot="panes">  
10 - <div class="head"></div>  
11 - <TabPane label="未使用">  
12 - <ExchangeBox></ExchangeBox>  
13 - <FilterBar></FilterBar>  
14 -  
15 - <div class="head"></div>  
16 -  
17 - <div class="coupon-wrapper">  
18 - <div class="coupon-item">huangtao;</div>  
19 - </div>  
20 -  
21 - <div class="coupon-wrapper">  
22 - <div class="coupon-item">huangtao23;</div>  
23 - </div>  
24 -  
25 - </TabPane>  
26 -  
27 - <TabPane label="已使用"></TabPane>  
28 -  
29 - <TabPane label="已失效"></TabPane>  
30 - </template>  
31 -  
32 - </ClassicTabs> 9 + <TabBar
  10 + v-model="selectLabel"
  11 + show-slider
  12 + :data="tabLabels"
  13 + ref="tabNav"
  14 + >
  15 +
  16 + </TabBar>
  17 +
  18 + <div class="tab-side-container">
  19 + <Slide
  20 + ref="slide"
  21 + :loop="false"
  22 + :auto-play="false"
  23 + :show-dots="false"
  24 + :initial-index="initialIndex"
  25 + :options="slideOptions"
  26 + @scroll="scroll"
  27 + @change="changePage"
  28 + >
  29 + <SlideItem>
  30 + <!--<FilterBar v-if="showFilter" :list="filterList"></FilterBar>-->
  31 + <!--<div class="head"></div>-->
  32 + <Scroll :data="yohoList.notuse" :options="scrollOptions">
  33 + <div class="coupon-wrapper" v-for="(item, index) in yohoList.notuse" :key="index">
  34 + <div class="coupon-item">{{item.coupon_name}}</div>
  35 + </div>
  36 +
  37 + </Scroll>
  38 + </SlideItem>
  39 +
  40 + <SlideItem>
  41 + <Scroll :data="yohoList.use" :options="scrollOptions">
  42 + <div class="coupon-wrapper" v-for="(item, index) in yohoList.use" :key="index">
  43 + <div class="coupon-item">{{item.coupon_name}}</div>
  44 + </div>
  45 +
  46 + </Scroll>
  47 + </SlideItem>
  48 +
  49 + <SlideItem>
  50 + <Scroll :data="yohoList.overtime" :options="scrollOptions">
  51 + <div class="coupon-wrapper" v-for="(item, index) in yohoList.overtime" :key="index">
  52 + <div class="coupon-item">{{item.coupon_name}}</div>
  53 + </div>
  54 + </Scroll>
  55 + </SlideItem>
  56 + </Slide>
  57 + </div>
33 </TabPane> 58 </TabPane>
34 59
35 <TabPane label="UFO优惠券"> 60 <TabPane label="UFO优惠券">
@@ -37,39 +62,97 @@ @@ -37,39 +62,97 @@
37 <div class="coupon-item">huangtao2;</div> 62 <div class="coupon-item">huangtao2;</div>
38 </div> 63 </div>
39 </TabPane> 64 </TabPane>
  65 +
40 </template> 66 </template>
41 </Tabs> 67 </Tabs>
42 </LayoutApp> 68 </LayoutApp>
43 </template> 69 </template>
44 70
45 <script> 71 <script>
46 -import { createNamespacedHelpers } from 'vuex'; 72 +import {createNamespacedHelpers} from 'vuex';
47 73
48 -const { mapState, mapActions } = createNamespacedHelpers('coupon/yoho'); 74 +const {mapState, mapActions} = createNamespacedHelpers('coupon/yoho');
49 75
50 import Tabs from '../components/tabs'; 76 import Tabs from '../components/tabs';
51 import FilterBar from '../components/filter-bar'; 77 import FilterBar from '../components/filter-bar';
52 import ExchangeBox from '../components/exchange-box'; 78 import ExchangeBox from '../components/exchange-box';
  79 +import {TabBar, Slide, Scroll} from 'cube-ui';
  80 +
  81 +const type = {notuse: 'notuse', use: 'use', overtime: 'overtime'};
53 82
54 export default { 83 export default {
55 name: 'YohoCouponListPage', 84 name: 'YohoCouponListPage',
56 computed: { 85 computed: {
57 - ...mapState(['yohoList']) 86 + ...mapState(['yohoList', 'filterList', 'showFilter']),
  87 + initialIndex() {
  88 + let index = 0;
  89 +
  90 + index = this.tabLabels.findIndex(i => i.label === this.selectLabel);
  91 + return index;
  92 + }
58 }, 93 },
59 - asyncData({ store, router }) { 94 + asyncData({store, router}) {
60 return store.dispatch('coupon/yoho/fetchYohoList', { 95 return store.dispatch('coupon/yoho/fetchYohoList', {
61 - type: 'notuse', 96 + type: type.notuse,
62 filter: 0, 97 filter: 0,
63 limit: 20, 98 limit: 20,
64 page: 1 99 page: 1
65 }); 100 });
66 }, 101 },
67 - created() {}, 102 + data() {
  103 + return {
  104 + selectLabel: '未使用',
  105 + selectType: type.notuse,
  106 + selectFilter: 0,
  107 + tabLabels: [
  108 + {
  109 + label: '未使用',
  110 + type: type.notuse
  111 + }, {
  112 + label: '已使用',
  113 + type: type.use
  114 + }, {
  115 + label: '已失效',
  116 + type: type.overtime
  117 + }
  118 + ],
  119 + scrollOptions: {
  120 + directionLockThreshold: 0
  121 + },
  122 + slideOptions: {
  123 + listenScroll: true,
  124 + probeType: 3,
  125 + directionLockThreshold: 0
  126 + }
  127 + };
  128 + },
  129 + created() {
  130 + },
68 mounted() { 131 mounted() {
69 }, 132 },
70 methods: { 133 methods: {
71 - tabCls(item) { 134 + tabCls(item) {
72 return ['filter-btn-box']; 135 return ['filter-btn-box'];
  136 + },
  137 + scroll(pos) {
  138 + // const x = Math.abs(pos.x)
  139 + // const tabItemWidth = this.$refs.tabNav.$el.clientWidth
  140 + // const slideScrollerWidth = this.$refs.slide.slide.scrollerWidth
  141 + // const deltaX = x / slideScrollerWidth * tabItemWidth
  142 + // this.$refs.tabNav.setSliderTransform(deltaX);
  143 + },
  144 +
  145 + changePage(current) {
  146 + this.selectLabel = this.tabLabels[current].label;
  147 + this.selectType = this.tabLabels[current].type;
  148 +
  149 + console.log(this.$store);
  150 + return this.$store.dispatch('coupon/yoho/fetchYohoList', {
  151 + type: this.selectType,
  152 + filter: this.selectFilter,
  153 + limit: 20,
  154 + page: 1
  155 + });
73 } 156 }
74 }, 157 },
75 components: { 158 components: {
@@ -77,29 +160,58 @@ export default { @@ -77,29 +160,58 @@ export default {
77 TabPane: Tabs.Pane, 160 TabPane: Tabs.Pane,
78 FilterBar, 161 FilterBar,
79 ClassicTabs: Tabs.ClassicTabs, 162 ClassicTabs: Tabs.ClassicTabs,
80 - ExchangeBox 163 + ExchangeBox,
  164 + TabBar,
  165 + Slide,
  166 + SlideItem: Slide,
  167 + Scroll
81 } 168 }
82 }; 169 };
83 </script> 170 </script>
84 171
85 <style lang="scss" scoped> 172 <style lang="scss" scoped>
86 -.head {  
87 - height: 90px;  
88 -}  
89 -  
90 -.coupon-wrapper {  
91 - height: 200px;  
92 - padding-top: 20px;  
93 - padding-left: 20px;  
94 - padding-right: 20px;  
95 - background: #f0f0f0;  
96 - box-sizing: content-box;  
97 -}  
98 -  
99 -.coupon-item {  
100 - width: 100%;  
101 - height: 100%;  
102 - background: white;  
103 - border-radius: 10px;  
104 -} 173 + .head {
  174 + height: 90px;
  175 + }
  176 +
  177 + .coupon-wrapper {
  178 + height: 200px;
  179 + padding-top: 20px;
  180 + padding-left: 20px;
  181 + padding-right: 20px;
  182 + background: #f0f0f0;
  183 + box-sizing: content-box;
  184 + }
  185 +
  186 + .coupon-item {
  187 + width: 100%;
  188 + height: 100%;
  189 + background: white;
  190 + border-radius: 10px;
  191 + }
  192 +
  193 + .mask {
  194 + width: 100%;
  195 + height: 100%;
  196 + position: absolute;
  197 + background: rgba(0, 0, 0, 0.4);
  198 + }
  199 +
  200 + .list-wrapper {
  201 + overflow: hidden;
  202 +
  203 + li {
  204 + padding: 15px 10px;
  205 + background-color: white;
  206 + border-radius: 10px;
  207 + }
  208 + }
  209 +
  210 + .tab-slide-container {
  211 + position: fixed;
  212 + top: 74px;
  213 + left: 0;
  214 + right: 0;
  215 + bottom: 0;
  216 + }
105 </style> 217 </style>
@@ -9,7 +9,9 @@ export default { @@ -9,7 +9,9 @@ export default {
9 if (result && result.code === 200) { 9 if (result && result.code === 200) {
10 console.log(result); 10 console.log(result);
11 commit(Types.FETCH_YOHO_COUPON_SUCCESS, { 11 commit(Types.FETCH_YOHO_COUPON_SUCCESS, {
12 - list: result.data 12 + type,
  13 + list: result.data.couponList,
  14 + filter: result.data.filters
13 }); 15 });
14 } else { 16 } else {
15 commit(Types.FETCH_YOHO_COUPON_FAILED); 17 commit(Types.FETCH_YOHO_COUPON_FAILED);
@@ -6,7 +6,13 @@ export default function() { @@ -6,7 +6,13 @@ export default function() {
6 namespaced: true, 6 namespaced: true,
7 state: { 7 state: {
8 fetching: false, 8 fetching: false,
9 - yohoList: [], 9 + yohoList: {
  10 + notuse: [],
  11 + use: [],
  12 + overtime: []
  13 + },
  14 + filterList: [],
  15 + showFilter: false
10 }, 16 },
11 actions, 17 actions,
12 mutations 18 mutations
@@ -4,9 +4,10 @@ export default { @@ -4,9 +4,10 @@ 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}) { 7 + [Types.FETCH_YOHO_COUPON_SUCCESS](state, {list, filter, type}) {
8 state.fetching = false; 8 state.fetching = false;
9 - state.yohoList = list; 9 + state.yohoList[type] = list;
  10 + state.filterList = filter;
10 }, 11 },
11 [Types.FETCH_YOHO_COUPON_FAILED](state) { 12 [Types.FETCH_YOHO_COUPON_FAILED](state) {
12 state.fetching = false; 13 state.fetching = false;
@@ -11,7 +11,7 @@ module.exports = { @@ -11,7 +11,7 @@ module.exports = {
11 api: 'app.coupons.get', 11 api: 'app.coupons.get',
12 params: { 12 params: {
13 type: {type: String}, 13 type: {type: String},
14 - filter: {type: Number}, 14 + filter: {type: String},
15 limit: {type: Number}, 15 limit: {type: Number},
16 page: {type: Number} 16 page: {type: Number}
17 } 17 }
@@ -11,8 +11,8 @@ const isTest = process.env.NODE_ENV === 'test3'; @@ -11,8 +11,8 @@ const isTest = process.env.NODE_ENV === 'test3';
11 11
12 const domains = { 12 const domains = {
13 13
14 - // api: 'http://api.yoho.cn/',  
15 - // service: 'http://service.yoho.cn/', 14 + api: 'http://api.yoho.cn/',
  15 + service: 'http://service.yoho.cn/',
16 16
17 // liveApi: 'http://testapi.live.yohops.com:9999/', 17 // liveApi: 'http://testapi.live.yohops.com:9999/',
18 // singleApi: 'http://api-test3.yohops.com:9999/', 18 // singleApi: 'http://api-test3.yohops.com:9999/',
@@ -23,16 +23,16 @@ const domains = { @@ -23,16 +23,16 @@ const domains = {
23 23
24 // platformApi: 'http://172.16.6.210:8088/', 24 // platformApi: 'http://172.16.6.210:8088/',
25 25
26 - api: 'http://api-test3.dev.yohocorp.com/',  
27 - service: 'http://api-test3.dev.yohocorp.com/',  
28 - ufo: 'http://java-yohoufo-fore.test3.ingress.dev.yohocorp.com/ufo-gateway/', 26 + // api: 'http://api-test3.dev.yohocorp.com/',
  27 + // service: 'http://api-test3.dev.yohocorp.com/',
  28 + // ufo: 'http://java-yohoufo-fore.test3.ingress.dev.yohocorp.com/ufo-gateway/',
29 }; 29 };
30 30
31 module.exports = { 31 module.exports = {
32 app: 'h5', 32 app: 'h5',
33 appVersion: '6.6.0', // 调用api的版本 33 appVersion: '6.6.0', // 调用api的版本
34 appName: 'yohoapp-node', 34 appName: 'yohoapp-node',
35 - port: 6001, 35 + port: 6003,
36 siteUrl: '//m.yohobuy.com', 36 siteUrl: '//m.yohobuy.com',
37 assetUrl: '//localhost:5001/yohoapp-node/', 37 assetUrl: '//localhost:5001/yohoapp-node/',
38 testCode: 'yoho4946abcdef#$%&!@', 38 testCode: 'yoho4946abcdef#$%&!@',