add coupon

 const config = {
   development: {
-    axiosBaseUrl: process.env.VUE_ENV === 'server' ? 'http://localhost:6004/' : '//m.yohoblk.com/',
+    axiosBaseUrl: process.env.VUE_ENV === 'server' ? 'http://localhost:6004/' : '//m.yohobuy.com/',
     axiosResponseType: 'json',
   },
   production: {
-    axiosBaseUrl: process.env.VUE_ENV === 'server' ? 'http://localhost:6004/' : '//m.yohoblk.com/',
+    axiosBaseUrl: process.env.VUE_ENV === 'server' ? 'http://localhost:6004/' : '//m.yohobuy.com/',
     axiosResponseType: 'json',
   }
 };

 <template>
-  <div></div>
+  <div class="filter-item">
+    <template v-for="(item, index) in list">
+      <button>{{item.filter_name}}</button>
+    </template>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'FilterBar'
+  name: 'FilterBar',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  methods: {
+
+  },
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+  .filter-item {
+    display: flex;
+    width: 100%;
+    height: 130px;
+    justify-content: space-around;
+    align-items: center;
+    background-color: #fff;
+    position: fixed;
+    top: 182px;
+    left: 0;
+    z-index: 3;
+
+    button {
+      width: 150px;
+      height: 70px;
+      background-color: #fff;
+      color: #444;
+      font-size: 28px;
+      border: 1px solid #e0e0e0;
+      border-radius: 4px;
 
+      &.active {
+        background-color: #444;
+        color: #fff;
+        border: 1px solid transparent;
+      }
+    }
+  }
 </style>
+

@@ -121,6 +121,7 @@ $yoho-tab: yoho-tab;
     flex: 1;
     line-height: 60px;
     text-align: center;
+    font-size: 28px;
     color: #b0b0b0;
     border-right: 1px solid #e0e0e0;
   }

 <template>
   <LayoutApp>
+    <!--<div class="mask"></div>-->
     <Tabs>
       <template slot="panes">
         <div class="head"></div>
         <TabPane label="有货优惠券">
 
-          <ClassicTabs>
-            <template slot="panes">
-              <div class="head"></div>
-              <TabPane label="未使用">
-                <ExchangeBox></ExchangeBox>
-                <FilterBar></FilterBar>
-
-                <div class="head"></div>
-
-                <div class="coupon-wrapper">
-                  <div class="coupon-item">huangtao;</div>
-                </div>
-
-                <div class="coupon-wrapper">
-                  <div class="coupon-item">huangtao23;</div>
-                </div>
-
-              </TabPane>
-
-              <TabPane label="已使用"></TabPane>
-
-              <TabPane label="已失效"></TabPane>
-            </template>
-
-          </ClassicTabs>
+          <TabBar
+            v-model="selectLabel"
+            show-slider
+            :data="tabLabels"
+            ref="tabNav"
+          >
+
+          </TabBar>
+
+          <div class="tab-side-container">
+            <Slide
+              ref="slide"
+              :loop="false"
+              :auto-play="false"
+              :show-dots="false"
+              :initial-index="initialIndex"
+              :options="slideOptions"
+              @scroll="scroll"
+              @change="changePage"
+            >
+              <SlideItem>
+                <!--<FilterBar v-if="showFilter" :list="filterList"></FilterBar>-->
+                <!--<div class="head"></div>-->
+                <Scroll :data="yohoList.notuse" :options="scrollOptions">
+                  <div class="coupon-wrapper" v-for="(item, index) in yohoList.notuse" :key="index">
+                    <div class="coupon-item">{{item.coupon_name}}</div>
+                  </div>
+
+                </Scroll>
+              </SlideItem>
+
+              <SlideItem>
+                <Scroll :data="yohoList.use" :options="scrollOptions">
+                  <div class="coupon-wrapper" v-for="(item, index) in yohoList.use" :key="index">
+                    <div class="coupon-item">{{item.coupon_name}}</div>
+                  </div>
+
+                </Scroll>
+              </SlideItem>
+
+              <SlideItem>
+                <Scroll :data="yohoList.overtime" :options="scrollOptions">
+                  <div class="coupon-wrapper" v-for="(item, index) in yohoList.overtime" :key="index">
+                    <div class="coupon-item">{{item.coupon_name}}</div>
+                  </div>
+                </Scroll>
+              </SlideItem>
+            </Slide>
+          </div>
         </TabPane>
 
         <TabPane label="UFO优惠券">
@@ -37,39 +62,97 @@
             <div class="coupon-item">huangtao2;</div>
           </div>
         </TabPane>
+
       </template>
     </Tabs>
   </LayoutApp>
 </template>
 
 <script>
-import { createNamespacedHelpers } from 'vuex';
+import {createNamespacedHelpers} from 'vuex';
 
-const { mapState, mapActions } = createNamespacedHelpers('coupon/yoho');
+const {mapState, mapActions} = createNamespacedHelpers('coupon/yoho');
 
 import Tabs from '../components/tabs';
 import FilterBar from '../components/filter-bar';
 import ExchangeBox from '../components/exchange-box';
+import {TabBar, Slide, Scroll} from 'cube-ui';
+
+const type = {notuse: 'notuse', use: 'use', overtime: 'overtime'};
 
 export default {
   name: 'YohoCouponListPage',
   computed: {
-    ...mapState(['yohoList'])
+    ...mapState(['yohoList', 'filterList', 'showFilter']),
+    initialIndex() {
+      let index = 0;
+
+      index = this.tabLabels.findIndex(i => i.label === this.selectLabel);
+      return index;
+    }
   },
-  asyncData({ store, router }) {
+  asyncData({store, router}) {
     return store.dispatch('coupon/yoho/fetchYohoList', {
-      type: 'notuse',
+      type: type.notuse,
       filter: 0,
       limit: 20,
       page: 1
     });
   },
-  created() {},
+  data() {
+    return {
+      selectLabel: '未使用',
+      selectType: type.notuse,
+      selectFilter: 0,
+      tabLabels: [
+        {
+          label: '未使用',
+          type: type.notuse
+        }, {
+          label: '已使用',
+          type: type.use
+        }, {
+          label: '已失效',
+          type: type.overtime
+        }
+      ],
+      scrollOptions: {
+        directionLockThreshold: 0
+      },
+      slideOptions: {
+        listenScroll: true,
+        probeType: 3,
+        directionLockThreshold: 0
+      }
+    };
+  },
+  created() {
+  },
   mounted() {
   },
   methods: {
-     tabCls(item) {
+    tabCls(item) {
       return ['filter-btn-box'];
+    },
+    scroll(pos) {
+      // const x = Math.abs(pos.x)
+      // const tabItemWidth = this.$refs.tabNav.$el.clientWidth
+      // const slideScrollerWidth = this.$refs.slide.slide.scrollerWidth
+      // const deltaX = x / slideScrollerWidth * tabItemWidth
+      // this.$refs.tabNav.setSliderTransform(deltaX);
+    },
+
+    changePage(current) {
+      this.selectLabel = this.tabLabels[current].label;
+      this.selectType = this.tabLabels[current].type;
+
+      console.log(this.$store);
+      return this.$store.dispatch('coupon/yoho/fetchYohoList', {
+        type: this.selectType,
+        filter: this.selectFilter,
+        limit: 20,
+        page: 1
+      });
     }
   },
   components: {
@@ -77,29 +160,58 @@ export default {
     TabPane: Tabs.Pane,
     FilterBar,
     ClassicTabs: Tabs.ClassicTabs,
-    ExchangeBox
+    ExchangeBox,
+    TabBar,
+    Slide,
+    SlideItem: Slide,
+    Scroll
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.head {
-  height: 90px;
-}
-
-.coupon-wrapper {
-  height: 200px;
-  padding-top: 20px;
-  padding-left: 20px;
-  padding-right: 20px;
-  background: #f0f0f0;
-  box-sizing: content-box;
-}
-
-.coupon-item {
-  width: 100%;
-  height: 100%;
-  background: white;
-  border-radius: 10px;
-}
+  .head {
+    height: 90px;
+  }
+
+  .coupon-wrapper {
+    height: 200px;
+    padding-top: 20px;
+    padding-left: 20px;
+    padding-right: 20px;
+    background: #f0f0f0;
+    box-sizing: content-box;
+  }
+
+  .coupon-item {
+    width: 100%;
+    height: 100%;
+    background: white;
+    border-radius: 10px;
+  }
+
+  .mask {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background: rgba(0, 0, 0, 0.4);
+  }
+
+  .list-wrapper {
+    overflow: hidden;
+
+    li {
+      padding: 15px 10px;
+      background-color: white;
+      border-radius: 10px;
+    }
+  }
+
+  .tab-slide-container {
+    position: fixed;
+    top: 74px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
 </style>

@@ -9,7 +9,9 @@ export default {
     if (result && result.code === 200) {
       console.log(result);
       commit(Types.FETCH_YOHO_COUPON_SUCCESS, {
-        list: result.data
+        type,
+        list: result.data.couponList,
+        filter: result.data.filters
       });
     } else {
       commit(Types.FETCH_YOHO_COUPON_FAILED);

@@ -6,7 +6,13 @@ export default function() {
     namespaced: true,
     state: {
       fetching: false,
-      yohoList: [],
+      yohoList: {
+        notuse: [],
+        use: [],
+        overtime: []
+      },
+      filterList: [],
+      showFilter: false
     },
     actions,
     mutations

@@ -4,9 +4,10 @@ export default {
   [Types.FETCH_YOHO_COUPON_REQUEST](state) {
     state.fetching = true;
   },
-  [Types.FETCH_YOHO_COUPON_SUCCESS](state, {list}) {
+  [Types.FETCH_YOHO_COUPON_SUCCESS](state, {list, filter, type}) {
     state.fetching = false;
-    state.yohoList = list;
+    state.yohoList[type] = list;
+    state.filterList = filter;
   },
   [Types.FETCH_YOHO_COUPON_FAILED](state) {
     state.fetching = false;

@@ -11,7 +11,7 @@ module.exports = {
     api: 'app.coupons.get',
     params: {
       type: {type: String},
-      filter: {type: Number},
+      filter: {type: String},
       limit: {type: Number},
       page: {type: Number}
     }

@@ -11,8 +11,8 @@ const isTest = process.env.NODE_ENV === 'test3';
 
 const domains = {
 
-  // api: 'http://api.yoho.cn/',
-  // service: 'http://service.yoho.cn/',
+  api: 'http://api.yoho.cn/',
+  service: 'http://service.yoho.cn/',
 
   // liveApi: 'http://testapi.live.yohops.com:9999/',
   // singleApi: 'http://api-test3.yohops.com:9999/',
@@ -23,16 +23,16 @@ const domains = {
 
   // platformApi: 'http://172.16.6.210:8088/',
 
-  api: 'http://api-test3.dev.yohocorp.com/',
-  service: 'http://api-test3.dev.yohocorp.com/',
-  ufo: 'http://java-yohoufo-fore.test3.ingress.dev.yohocorp.com/ufo-gateway/',
+  // api: 'http://api-test3.dev.yohocorp.com/',
+  // service: 'http://api-test3.dev.yohocorp.com/',
+  // ufo: 'http://java-yohoufo-fore.test3.ingress.dev.yohocorp.com/ufo-gateway/',
 };
 
 module.exports = {
   app: 'h5',
   appVersion: '6.6.0', // 调用api的版本
   appName: 'yohoapp-node',
-  port: 6001,
+  port: 6003,
   siteUrl: '//m.yohobuy.com',
   assetUrl: '//localhost:5001/yohoapp-node/',
   testCode: 'yoho4946abcdef#$%&!@',