add ufo coupon

 <template>
-  <div class="coupon-secion">
+  <div class="coupon-section">
     <div :class="classes">
+      <div :class="contentClass">
+        <p class="value"><span>{{item.coupon_value_str}}</span></p>
+        <p class="threshold" v-if="item.use_rule">{{item.use_rule}}</p>
+      </div>
+
+      <div class="coupon-right">
+        <p class="title">
+          <span :class="typeClass"> [{{item.catalog_name}}] </span>
+          {{item.coupon_name}}
+        </p>
+
+        <p class="time">{{item.coupon_validity}}</p>
+
+        <p class="use-intro" v-if="item.notes" @click="onClickTip">
+          <span class="show-intro-btn">使用说明</span>
+          <span :class="introClass"></span>
+        </p>
 
+        <span class="tip"></span>
       </div>
+
+      <template v-if="item.usedOvertimeOrInValid">
+        <div class="stamp overtime-stamp" v-if="item.is_overtime === 'Y'"></div>
+        <div class="stamp invalid-stamp" v-if="item.is_invalid === 'Y'"></div>
+        <div class="stamp used-stamp" v-if="item.is_used"></div>
+      </template>
+
+      <template v-else>
+        <a :href="item.useNowLink" class="use-now">立即使用</a>
+        <span class="top-tip" v-if="item.is_overdue_soon === 'Y'"></span>
+      </template>
+    </div>
+
+    <ul class="coupon-intro" v-if="show">
+      <li v-for="(it, index) in item.notes" :key="index">{{it}}</li>
+    </ul>
   </div>
 </template>
 
@@ -10,45 +44,79 @@
 export default {
   name: 'CouponItem',
   props: {
-
+    item: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  mounted() {
+    console.log(this.item);
   },
   data() {
     return {
-
+      show: false
     };
   },
   methods: {
-
+    onClickTip() {
+      this.show = !this.show;
+    }
   },
   computed: {
     classes() {
       return ['coupon', {
-        'coupon-overtime': 1,
-        'coupon-used': 1,
-        'coupon-invalid': 1
+        'coupon-overtime': this.item.is_overtime === 'Y',
+        'coupon-invalid': this.item.is_invalid === 'Y',
+        'coupon-used': this.item.is_used
+      }];
+    },
+    contentClass() {
+      if (this.item.usedOvertimeOrInValid) {
+        return ['coupon-left'];
+      } else {
+        return ['coupon-left', {
+          'coupon-left-shop': this.item.catalog === 100,
+          'coupon-left-activity': this.item.catalog === 200,
+          'coupon-left-freight': this.item.catalog === 300,
         }];
       }
     },
-  watch: {
-
+    typeClass() {
+      return [{
+        'type-shop': this.item.catalog === 100,
+        'type-activity': this.item.catalog === 200,
+        'type-freight': this.item.catalog === 300,
+      }];
+    },
+    introClass() {
+      if (this.show) {
+        return ['iconfont', 'icon-up'];
+      } else {
+        return ['iconfont', 'icon-downn'];
+      }
+    }
   },
+  watch: {},
 };
 </script>
 
 <style lang="scss" scoped>
-.coupon-section {
+  .coupon-section {
     margin-bottom: 20px;
-}
+  }
 
-.coupon {
+  .coupon {
     position: relative;
     width: 710px;
     height: 200px;
+    margin: 0 auto;
 
     .coupon-left {
       width: 200px;
       height: 200px;
-    background-image: url("~image/coupon/overtime.png");
+      background-image: url("~statics/image/coupon/overtime.png");
       background-size: 100% 100%;
       float: left;
       display: flex;
@@ -68,11 +136,11 @@ export default {
     }
 
     .coupon-left-activity {
-    background-image: url("~image/coupon/activity.png");
+      background-image: url("~statics/image/coupon/activity.png");
     }
 
     .coupon-left-freight {
-    background-image: url("~image/coupon/freight.png");
+      background-image: url("~statics/image/coupon/freight.png");
 
       > p {
         color: #000;
@@ -85,7 +153,7 @@ export default {
     }
 
     .coupon-left-shop {
-    background-image: url("~image/home/coupon/shop.png");
+      background-image: url("~statics/image/coupon/shop.png");
 
       > p {
         color: #ffa72e;
@@ -176,37 +244,37 @@ export default {
     }
 
     .overtime-stamp {
-    background-image: url("~image/coupon/timeout.png");
+      background-image: url("~statics/image/coupon/timeout.png");
     }
 
     .used-stamp {
-    background-image: url("~image/coupon/used.png");
+      background-image: url("~statics/image/coupon/used.png");
     }
 
     .invalid-stamp {
-    background-image: url("~image/coupon/invalid.png");
+      background-image: url("~statics/image/coupon/invalid.png");
     }
 
     .top-tip {
       width: 84px;
       height: 84px;
-    background-image: url("~image/coupon/top-tip.png");
+      background-image: url("~statics/image/coupon/top-tip.png");
       background-size: 100% 100%;
       position: absolute;
       top: 0;
       right: 0;
     }
-}
+  }
 
-.freight-coupon {
+  .freight-coupon {
     > .coupon-left {
       font-size: 48px;
     }
-}
+  }
 
-.coupon-invalid,
-.coupon-used,
-.coupon-overtime {
+  .coupon-invalid,
+  .coupon-used,
+  .coupon-overtime {
     > .coupon-left > p {
       color: #b0b0b0;
     }
@@ -226,20 +294,21 @@ export default {
         color: #b0b0b0;
       }
     }
-}
+  }
 
-.coupon-intro {
+  .coupon-intro {
     background: rgba(255, 255, 255, 0.7);
-  margin-top: -12px;
+    margin: -12px auto 0;
     padding: 36px 22px 22px;
+    width: 710px;
 
     li {
       font-size: 22px;
       color: #444;
     }
-}
+  }
 
-.no-conpon-now {
+  .no-conpon-now {
     text-align: center;
     padding-top: 262px;
     color: #b0b0b0;
@@ -247,7 +316,7 @@ export default {
     .icon-not {
       width: 208px;
       height: 130px;
-    background-image: url("~image/coupon/not.png");
+      background-image: url("~statics/image/coupon/not.png");
       background-size: 100% 100%;
       margin: auto auto 30px;
     }
@@ -255,9 +324,9 @@ export default {
     p {
       font-size: 28px;
     }
-}
+  }
 
-.used-tip {
+  .used-tip {
     display: flex;
 
     span {
@@ -270,10 +339,10 @@ export default {
       border: none;
       border-bottom: 1px solid #e0e0e0;
     }
-}
+  }
 
-.hide {
+  .hide {
     display: none;
-}
+  }
 </style>
 

+<template>
+  <div class="no-conpon-now">
+    <div class="icon-not"></div>
+    <p>暂无优惠券</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EmptyComp'
+};
+</script>
+
+<style lang="scss" scoped>
+  .no-conpon-now {
+    text-align: center;
+    padding-top: 262px;
+    color: #b0b0b0;
+
+    .icon-not {
+      width: 208px;
+      height: 130px;
+      background-image: url("~statics/image/coupon/not.png");
+      background-size: 100% 100%;
+      margin: auto auto 30px;
+    }
+
+    p {
+      font-size: 28px;
+    }
+  }
+</style>
+
+

+
+
+import Empty from './empty';
+
+export default Empty;

@@ -17,6 +17,7 @@ export default {
   padding: 16px 20px;
   background-color: #fff;
   position: fixed;
+  top: 0;
   left: 0;
   z-index: 2;
 

@@ -32,7 +32,6 @@ export default {
     align-items: center;
     background-color: #fff;
     position: fixed;
-    top: 182px;
     left: 0;
     z-index: 3;
 

+<template>
+  <LayoutApp>
+  <div :class="classes">
+      <div :class="[prefixCls + '-bar']">
+        <span class="back">
+          <i class="iconfont fontcls">&#xe763;</i>
+        </span>
+        <span class="help">
+          <i class="iconfont fontcls">&#xe630;</i>
+        </span>
+        <div>
+          <router-link class="yoho-tab" :to="{name: 'couponYoho'}" active-class="yoho-tab-active">有货优惠券</router-link><router-link  class="yoho-tab" :to="{name: 'couponUfo'}" active-class="yoho-tab-active" >UFO优惠券</router-link>
+        </div>
+      </div>
+
+      <router-view></router-view>
+  </div>
+  </LayoutApp>
+</template>
+
+<script>
+export default {
+  name: 'Headers',
+  props: {
+    type: {
+      type: [String, Number]
+    },
+    navList: []
+  },
+  data() {
+    return {
+      prefixCls: 'yoho-tabs',
+      activeKey: this.type
+    };
+  },
+  computed: {
+    classes() {
+      return [`${this.prefixCls}`];
+    },
+  },
+  methods: {
+    updateNav() {
+      this.navList.forEach((pane, index) => {
+        this.navList.push({
+          label: pane.label,
+          name: pane.currentName || index,
+          disabled: pane.disabled
+        });
+
+        if (!pane.currentName) {
+          pane.currentName = index;
+        }
+
+        if (index === 0) {
+          if (!this.activeKey) {
+            this.activeKey = pane.currentName || index;
+          }
+        }
+      });
+
+      this.updateStatus();
+    },
+    updateStatus() {
+      const tabs = this.getTabs();
+
+      tabs.forEach(tab => (tab.show = tab.currentName === this.activeKey));
+    },
+    handleChange(index) {
+      const nav = this.navList[index];
+
+      this.activeKey = nav.name;
+      this.$emit('input', nav.name);
+    },
+    tabCls(item) {
+      return [
+        'yoho-tab',
+        {
+          ['yoho-tab-active']: item.name === this.activeKey
+        }
+      ];
+    }
+  },
+  watch: {
+    activeKey(val) {
+      this.updateStatus();
+    },
+    value(val) {
+      this.activeKey = val;
+    }
+  },
+  created() {
+    // this.updateNav();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  $yoho-tab: yoho-tab;
+
+  .#{$yoho-tab}s {
+    width: 100%;
+    height: 100%;
+  }
+
+  .#{$yoho-tab} {
+    display: inline-block;
+    width: 200px;
+    height: 56px;
+    font-size: 12px;
+    color: white;
+    border: 1px solid white;
+    box-sizing: border-box;
+    background: #3a3a3a;
+    text-align: center;
+    line-height: 56px;
+  }
+
+  .#{$yoho-tab} + .#{$yoho-tab} {
+    border-left: none;
+  }
+
+  .#{$yoho-tab}s-bar {
+    width: 100%;
+    height: 90px;
+    display: flex;
+    background: #3a3a3a;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    z-index: 4;
+  }
+
+  .#{$yoho-tab}-active {
+    color: #444444;
+    background-color: white;
+  }
+
+  .#{$yoho-tab}s-pane {
+    width: 100%;
+    height: 100%;
+  }
+
+  .fontcls {
+    color: white;
+    font-size: 45px;
+  }
+
+  .back {
+    position: absolute;
+    left: 20px;
+  }
+
+  .help {
+    position: absolute;
+    right: 20px;
+  }
+</style>

+
+import Header from './header';
+
+export default Header;

 import Ufo from './ufo';
 import Yoho from './yoho';
+import Header from './components/header';
 
-export default [...Ufo, ...Yoho];
+export default [{
+  path: '/coupon',
+  component: Header,
+  children: [Ufo, Yoho]
+}];

-export default [{
-  path: '/coupon/ufo',
-  name: 'ufolist',
+export default {
+  path: 'ufo',
+  name: 'couponUfo',
   component: () => import(/* webpackChunkName: "coupon" */ './list')
-}];
+};

 <template>
-  <LayoutApp>
-    <div class="order-page">
-      <div class="title">出售中</div>
-      <div class="product">
-        <p class="name">{{orderProduct}}</p>
-        <p>{{orderDetail}}</p>
+  <div style="height: 100%;">
+    <div style="background-color: #f0f0f0;height: 100%;">
+      <div class="head"></div>
+      <Scroll :data="ufoList" :options="scrollOptions" v-if="ufoList.length">
+        <CouponItem :item="item" v-for="(item, index) in ufoList" :key ="index"></CouponItem>
+      </Scroll>
+      <Empty v-else></Empty>
     </div>
   </div>
-  </LayoutApp>
 </template>
 
 <script>
 import {createNamespacedHelpers} from 'vuex';
 
-const {mapState, mapActions} = createNamespacedHelpers('ufo/order');
+const {mapState} = createNamespacedHelpers('coupon/yoho');
+
+import CouponItem from '../components/coupon-item';
+import Empty from '../components/empty';
+
+import {Scroll} from 'cube-ui';
 
 export default {
   name: 'UfoCouponListPage',
   computed: {
-    ...mapState(['orderProduct', 'orderDetail'])
+    ...mapState(['ufoList']),
   },
   asyncData({store, router}) {
-    return store.dispatch('ufo/order/fetchProduct', {orderId: router.params.orderId});
+    return store.dispatch('coupon/yoho/fetchUfoList', {
+      limit: 20,
+      page: 1
+    });
+  },
+  data() {
+    return {
+      scrollOptions: {
+        directionLockThreshold: 0
+      }
+    };
   },
   created() {
-
   },
   mounted() {
-    this.fetchOrderDetail({orderId: this.$route.params.orderId});
   },
   methods: {
-    ...mapActions(['fetchOrderDetail'])
+  },
+  components: {
+    Scroll,
+    CouponItem,
+    Empty
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.title {
+  .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;*/
+    /*left: 0;*/
+    /*right: 0;*/
+    /*bottom: 0;*/
+    height: 100%;
+  }
+
+  .tab-container {
+    height: 90px;
+    background-color: white;
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  .tab-item {
+    line-height: 60px;
     text-align: center;
-  font-size: 70px;
-  line-height: 200px;
-}
+    font-size: 28px;
+    color: #b0b0b0;
+  }
+
+  .tab-item + .tab-item {
+    border-left: 1px solid #e0e0e0;
+  }
+
+  .cube-tab_active {
+    color: #444 !important;
+  }
+
+  .cube-scroll-wrapper {
+    padding-top: 20px;
+  }
 </style>

-export default [{
-  path: '/coupon/yoho',
-  name: 'yoholist',
+export default {
+  path: 'yoho',
+  name: 'couponYoho',
   component: () => import(/* webpackChunkName: "coupon" */ './list')
-}];
+};

 <template>
-  <LayoutApp>
-    <!--<div class="mask"></div>-->
-    <Tabs>
-      <template slot="panes">
+    <div style="height: 100%">
           <div class="head"></div>
-        <TabPane label="有货优惠券">
-
-          <TabBar
+          <TabBar class="tab-container"
                   v-model="selectLabel"
-            show-slider
-            :data="tabLabels"
                   ref="tabNav"
           >
-
+            <Tab class="tab-item" v-for="(item, index) in tabLabels" :label="item.label" :key="item.label"></Tab>
           </TabBar>
 
-          <div class="tab-side-container">
+          <div class="tab-slide-container">
             <Slide
               ref="slide"
               :loop="false"
@@ -26,64 +19,53 @@
               @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>
-
+              <SlideItem style="background-color: #F0F0F0;">
+                <ExchangeBox></ExchangeBox>
+                <div class="head"></div>
+                <Scroll :data="yohoList.notuse" :options="scrollOptions" v-if="yohoList.notuse.length" style="padding: 20px">
+                  <CouponItem :item="item" v-for="(item, index) in yohoList.notuse" :key ="index"></CouponItem>
                 </Scroll>
+                <Empty v-else></Empty>
               </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>
-
+              <SlideItem style="background-color: #F0F0F0;">
+                <Scroll :data="yohoList.use" :options="scrollOptions" v-if="yohoList.use.length">
+                  <CouponItem :item="item" v-for="(item, index) in yohoList.use" :key ="index" v-if="yohoList.use.length"></CouponItem>
                 </Scroll>
+                <Empty v-else></Empty>
               </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>
+              <SlideItem style="background-color: #F0F0F0;">
+                <Scroll :data="yohoList.overtime" :options="scrollOptions" v-if="yohoList.overtime.length">
+                  <CouponItem :item="item" v-for="(item, index) in yohoList.overtime" :key ="index" v-if="yohoList.overtime.length"></CouponItem>
                 </Scroll>
+                <Empty v-else></Empty>
               </SlideItem>
             </Slide>
           </div>
-        </TabPane>
-
-        <TabPane label="UFO优惠券">
-          <div class="coupon-wrapper">
-            <div class="coupon-item">huangtao2;</div>
     </div>
-        </TabPane>
-
-      </template>
-    </Tabs>
-  </LayoutApp>
 </template>
 
 <script>
 import {createNamespacedHelpers} from 'vuex';
 
-const {mapState, mapActions} = createNamespacedHelpers('coupon/yoho');
+const {mapState, mapActions, mapGetters} = createNamespacedHelpers('coupon/yoho');
 
 import Tabs from '../components/tabs';
 import FilterBar from '../components/filter-bar';
 import ExchangeBox from '../components/exchange-box';
+import CouponItem from '../components/coupon-item';
+import Empty from '../components/empty';
+
 import {TabBar, Slide, Scroll} from 'cube-ui';
 
-const type = {notuse: 'notuse', use: 'use', overtime: 'overtime'};
+const TYPE = {notuse: 'notuse', use: 'use', overtime: 'overtime'};
 
 export default {
   name: 'YohoCouponListPage',
   computed: {
     ...mapState(['yohoList', 'filterList', 'showFilter']),
+    ...mapGetters(['getNotUseNum', 'getUseNum', 'getOvertime']),
     initialIndex() {
       let index = 0;
 
@@ -93,7 +75,7 @@ export default {
   },
   asyncData({store, router}) {
     return store.dispatch('coupon/yoho/fetchYohoList', {
-      type: type.notuse,
+      type: TYPE.notuse,
       filter: 0,
       limit: 20,
       page: 1
@@ -102,18 +84,18 @@ export default {
   data() {
     return {
       selectLabel: '未使用',
-      selectType: type.notuse,
+      selectType: TYPE.notuse,
       selectFilter: 0,
       tabLabels: [
         {
           label: '未使用',
-          type: type.notuse
+          type: TYPE.notuse
         }, {
           label: '已使用',
-          type: type.use
+          type: TYPE.use
         }, {
           label: '已失效',
-          type: type.overtime
+          type: TYPE.overtime
         }
       ],
       scrollOptions: {
@@ -129,6 +111,7 @@ export default {
   created() {
   },
   mounted() {
+    this.getNum();
   },
   methods: {
     tabCls(item) {
@@ -145,14 +128,18 @@ export default {
     changePage(current) {
       this.selectLabel = this.tabLabels[current].label;
       this.selectType = this.tabLabels[current].type;
+      console.log(current, 'index', this.selectType, this.selectLabel);
 
-      console.log(this.$store);
       return this.$store.dispatch('coupon/yoho/fetchYohoList', {
         type: this.selectType,
         filter: this.selectFilter,
         limit: 20,
         page: 1
       });
+    },
+
+    getNum() {
+      return this.$store.dispatch('coupon/yoho/fetchYohoNum', {});
     }
   },
   components: {
@@ -162,9 +149,12 @@ export default {
     ClassicTabs: Tabs.ClassicTabs,
     ExchangeBox,
     TabBar,
+    Tab: TabBar.Tab,
     Slide,
-    SlideItem: Slide,
-    Scroll
+    SlideItem: Slide.Item,
+    Scroll,
+    CouponItem,
+    Empty
   }
 };
 </script>
@@ -208,10 +198,35 @@ export default {
   }
 
   .tab-slide-container {
-    position: fixed;
-    top: 74px;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    /*position: fixed;*/
+    /*left: 0;*/
+    /*right: 0;*/
+    /*bottom: 0;*/
+    height: 100%;
+  }
+
+  .tab-container {
+    height: 90px;
+    background-color: white;
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  .tab-item {
+    line-height: 60px;
+    text-align: center;
+    font-size: 28px;
+    color: #b0b0b0;
+  }
+
+  .tab-item + .tab-item {
+    border-left: 1px solid #e0e0e0;
+  }
+
+  .cube-tab_active {
+    color: #444 !important;
+  }
+
+  .cube-scroll-wrapper {
+    padding-top: 20px;
   }
 </style>

 
 @font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1545212285943'); /* IE9*/
-  src: url('iconfont.eot?t=1545212285943#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
-  url('iconfont.ttf?t=1545212285943') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('iconfont.svg?t=1545212285943#iconfont') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1545459019848'); /* IE9*/
+  src: url('iconfont.eot?t=1545459019848#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
+  url('iconfont.ttf?t=1545459019848') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('iconfont.svg?t=1545459019848#iconfont') format('svg'); /* iOS 4.1- */
 }
 
 .iconfont {
@@ -17,6 +17,10 @@
 
 .icon-info:before { content: "\e6e5"; }
 
+.icon-up:before { content: "\e608"; }
+
+.icon-downn:before { content: "\e609"; }
+
 .icon-i-add:before { content: "\e618"; }
 
 .icon-question1:before { content: "\e630"; }
@@ -25,7 +29,3 @@
 
 .icon-back:before { content: "\e763"; }
 
-.icon-sort-down:before { content: "\e77a"; }
-
-.icon-sort-up:before { content: "\e77b"; }
-

@@ -23,22 +23,22 @@ Created by iconfont
     <glyph glyph-name="info" unicode="&#59109;" d="M512-62.016C266.08-62.016 65.984 138.048 65.984 384 65.984 629.92 266.08 830.016 512 830.016c245.952 0 446.016-200.064 446.016-446.016C958.016 138.048 757.952-62.016 512-62.016zM512 766.016C301.344 766.016 129.984 594.656 129.984 384c0-210.624 171.36-382.016 382.016-382.016 210.624 0 382.016 171.36 382.016 382.016C894.016 594.656 722.624 766.016 512 766.016zM512 592m-48 0a1.5 1.5 0 1 0 96 0 1.5 1.5 0 1 0-96 0ZM512 128c-17.664 0-32 14.304-32 32l0 288c0 17.664 14.336 32 32 32s32-14.336 32-32l0-288C544 142.304 529.664 128 512 128z"  horiz-adv-x="1024" />
 
     
-    <glyph glyph-name="i-add" unicode="&#58904;" d="M910.509 405.585h-378.843v376.925c0 11.2-9.427 20.281-20.626 20.281s-20.626-9.080-20.626-20.281v-376.925h-376.925c-11.2 0-20.281-9.426-20.281-20.626s9.080-20.626 20.281-20.626h376.925v-378.844c0-11.199 9.427-20.281 20.626-20.281s20.626 9.081 20.626 20.281v378.844h378.843c11.199 0 20.281 9.426 20.281 20.626s-9.081 20.626-20.281 20.626z"  horiz-adv-x="1024" />
+    <glyph glyph-name="up" unicode="&#58888;" d="M930.25 230.898l0 0c-18.573-17.814-48.653-17.814-67.227 0l-251.664 241.674c-18.573 17.814-18.573 46.717 0 64.529 18.498 17.814 48.616 17.814 67.19 0l251.702-241.674c18.535-17.814 18.535-46.718 0-64.529zM359.621 230.898l0 0c-18.535 17.814-18.535 46.717 0 64.529l251.739 241.674c18.498 17.814 48.616 17.814 67.19 0 18.535-17.814 18.535-46.718 0-64.529l-251.701-241.674c-18.573-17.814-48.653-17.814-67.227 0z"  horiz-adv-x="1821" />
 
     
-    <glyph glyph-name="question1" unicode="&#58928;" d="M463.99957 111.647789c0-26.509985 21.490445-48.00043 48.00043-48.00043s48.00043 21.490445 48.00043 48.00043c0 26.509985-21.490445 48.00043-48.00043 48.00043S463.99957 138.157774 463.99957 111.647789zM512-64c-247.039484 0-448 200.960516-448 448S264.960516 832 512 832 960 631.039484 960 384 759.039484-64 512-64zM512 767.712727c-211.584464 0-383.712727-172.128262-383.712727-383.712727 0-211.551781 172.128262-383.712727 383.712727-383.712727 211.551781 0 383.712727 172.159226 383.712727 383.712727C895.712727 595.584464 723.551781 767.712727 512 767.712727zM512 222.304744c-17.664722 0-32.00086 14.336138-32.00086 31.99914l0 54.112297c0 52.352533 39.999785 92.352318 75.32751 127.647359 25.887273 25.919957 52.67249 52.67249 52.67249 74.016718 0 53.343368-43.07206 96.735385-95.99914 96.735385-53.823303 0-95.99914-41.535923-95.99914-94.559333 0-17.664722-14.336138-31.99914-32.00086-31.99914s-32.00086 14.336138-32.00086 31.99914c0 87.423948 71.775299 158.559333 160.00086 158.559333s160.00086-72.095256 160.00086-160.735385c0-47.904099-36.32028-84.191695-71.424378-119.295794-27.839699-27.776052-56.575622-56.511974-56.575622-82.3356l0-54.112297C544.00086 236.671845 529.664722 222.304744 512 222.304744z"  horiz-adv-x="1024" />
+    <glyph glyph-name="downn" unicode="&#58889;" d="M930.25 472.573l-251.701-241.674c-18.573-17.814-48.693-17.814-67.19 0-18.573 17.814-18.573 46.718 0 64.529l251.664 241.674c18.573 17.814 48.653 17.814 67.227 0 18.535-17.814 18.535-46.717 0-64.529zM426.847 537.102l251.701-241.674c18.535-17.814 18.535-46.717 0-64.529-18.573-17.814-48.693-17.814-67.189 0l-251.739 241.674c-18.535 17.814-18.535 46.718 0 64.529 18.573 17.814 48.654 17.814 67.227 0z"  horiz-adv-x="1821" />
 
     
-    <glyph glyph-name="plus-minus" unicode="&#59176;" d="M934.4 358.4h-844.8c-14.080 0-25.6 11.52-25.6 25.6v0c0 14.080 11.52 25.6 25.6 25.6h844.8c14.080 0 25.6-11.52 25.6-25.6v0c0-14.080-11.52-25.6-25.6-25.6z"  horiz-adv-x="1024" />
+    <glyph glyph-name="i-add" unicode="&#58904;" d="M910.509 405.585h-378.843v376.925c0 11.2-9.427 20.281-20.626 20.281s-20.626-9.080-20.626-20.281v-376.925h-376.925c-11.2 0-20.281-9.426-20.281-20.626s9.080-20.626 20.281-20.626h376.925v-378.844c0-11.199 9.427-20.281 20.626-20.281s20.626 9.081 20.626 20.281v378.844h378.843c11.199 0 20.281 9.426 20.281 20.626s-9.081 20.626-20.281 20.626z"  horiz-adv-x="1024" />
 
     
-    <glyph glyph-name="back" unicode="&#59235;" d="M718.08-122.464L208 386.016 718.016 896.032l67.36-67.36-442.56-442.56 442.496-441.12-67.264-67.456z"  horiz-adv-x="1024" />
+    <glyph glyph-name="question1" unicode="&#58928;" d="M463.99957 111.647789c0-26.509985 21.490445-48.00043 48.00043-48.00043s48.00043 21.490445 48.00043 48.00043c0 26.509985-21.490445 48.00043-48.00043 48.00043S463.99957 138.157774 463.99957 111.647789zM512-64c-247.039484 0-448 200.960516-448 448S264.960516 832 512 832 960 631.039484 960 384 759.039484-64 512-64zM512 767.712727c-211.584464 0-383.712727-172.128262-383.712727-383.712727 0-211.551781 172.128262-383.712727 383.712727-383.712727 211.551781 0 383.712727 172.159226 383.712727 383.712727C895.712727 595.584464 723.551781 767.712727 512 767.712727zM512 222.304744c-17.664722 0-32.00086 14.336138-32.00086 31.99914l0 54.112297c0 52.352533 39.999785 92.352318 75.32751 127.647359 25.887273 25.919957 52.67249 52.67249 52.67249 74.016718 0 53.343368-43.07206 96.735385-95.99914 96.735385-53.823303 0-95.99914-41.535923-95.99914-94.559333 0-17.664722-14.336138-31.99914-32.00086-31.99914s-32.00086 14.336138-32.00086 31.99914c0 87.423948 71.775299 158.559333 160.00086 158.559333s160.00086-72.095256 160.00086-160.735385c0-47.904099-36.32028-84.191695-71.424378-119.295794-27.839699-27.776052-56.575622-56.511974-56.575622-82.3356l0-54.112297C544.00086 236.671845 529.664722 222.304744 512 222.304744z"  horiz-adv-x="1024" />
 
     
-    <glyph glyph-name="sort-down" unicode="&#59258;" d="M514.016-128L175.36 202.592l60.48 60.48 278.176-274.144 274.144 278.176 60.48-60.48L514.016-128z"  horiz-adv-x="1024" />
+    <glyph glyph-name="plus-minus" unicode="&#59176;" d="M934.4 358.4h-844.8c-14.080 0-25.6 11.52-25.6 25.6v0c0 14.080 11.52 25.6 25.6 25.6h844.8c14.080 0 25.6-11.52 25.6-25.6v0c0-14.080-11.52-25.6-25.6-25.6z"  horiz-adv-x="1024" />
 
     
-    <glyph glyph-name="sort-up" unicode="&#59259;" d="M509.984 896L848.64 565.408l-60.48-60.48-278.176 274.144-274.144-278.176L175.36 561.376 509.984 896z"  horiz-adv-x="1024" />
+    <glyph glyph-name="back" unicode="&#59235;" d="M718.08-122.464L208 386.016 718.016 896.032l67.36-67.36-442.56-442.56 442.496-441.12-67.264-67.456z"  horiz-adv-x="1024" />
 
     
 

 import * as Types from './types';
 
+const TYPE = {notuse: 'notuse', use: 'use', overtime: 'overtime'};
+
+function _handleCoupon(item, type) {
+  if (type === TYPE.use) {
+    item.is_used = true;
+  }
+
+  if (type === TYPE.use || item.is_overtime === 'Y' || item.is_invalid === 'Y') {
+    item.usedOvertimeOrInValid = true;
+  }
+
+  item.useNowLink = 'fdsafdsa';
+  return item;
+}
+
 export default {
   async fetchYohoList({commit}, {type, filter, limit, page}) {
     commit(Types.FETCH_YOHO_COUPON_REQUEST);
@@ -7,14 +22,39 @@ export default {
     const result = await this.$api.get('/api/coupon/yoho/list', {type, filter, limit, page});
 
     if (result && result.code === 200) {
-      console.log(result);
       commit(Types.FETCH_YOHO_COUPON_SUCCESS, {
         type,
-        list: result.data.couponList,
+        list: result.data.couponList.map(_handleCoupon),
         filter: result.data.filters
       });
     } else {
       commit(Types.FETCH_YOHO_COUPON_FAILED);
     }
   },
+
+  async fetchYohoNum({commit}) {
+    commit(Types.FETCH_YOHO_COUPON_REQUEST);
+
+    const result = await this.$api.get('/api/coupon/yoho/num', {});
+
+    if (result && result.code === 200) {
+      commit(Types.FETCH_YOHO_COUPON_NUM_SUCCESS, result.data);
+    } else {
+      commit(Types.FETCH_YOHO_COUPON_FAILED);
+    }
+  },
+
+  async fetchUfoList({commit}, {limit, page}) {
+    commit(Types.FETCH_YOHO_COUPON_REQUEST);
+
+    const result = await this.$api.get('/api/coupon/ufo/list', {limit: 20, page: 1});
+
+    if (result && result.code === 200) {
+      commit(Types.FETCH_UFO_COUPON_SUCCESS, {
+        list: result.data.couponList.map(_handleCoupon),
+      });
+    } else {
+      commit(Types.FETCH_YOHO_COUPON_FAILED);
+    }
+  },
 };

 import actions from './actions';
 import mutations from './mutations';
 
+function handleNum(n) {
+  return n > 99 ? '99+' : n;
+}
+
 export default function() {
   return {
     namespaced: true,
@@ -11,10 +15,27 @@ export default function() {
         use: [],
         overtime: []
       },
+      num: {
+        notuse: 0,
+        use: 0,
+        overtime: 0
+      },
+      ufoList: [],
       filterList: [],
-      showFilter: false
+      showFilter: true
     },
     actions,
-    mutations
+    mutations,
+    getters: {
+      getNotUseNum(state) {
+        return handleNum(state.num.notuse);
+      },
+      getUseNum(state) {
+        return handleNum(state.num.use);
+      },
+      getOvertime(state) {
+        return handleNum(state.num.overtime);
+      }
+    }
   };
 }

@@ -12,4 +12,12 @@ export default {
   [Types.FETCH_YOHO_COUPON_FAILED](state) {
     state.fetching = false;
   },
+
+  [Types.FETCH_YOHO_COUPON_NUM_SUCCESS](state, data) {
+    state.num = data;
+  },
+  [Types.FETCH_UFO_COUPON_SUCCESS](state, {list}) {
+    state.fetching = false;
+    state.ufoList = list;
+  },
 };

 export const FETCH_YOHO_COUPON_REQUEST = 'FETCH_YOHO_COUPON_REQUEST';
 export const FETCH_YOHO_COUPON_FAILED = 'FETCH_YOHO_COUPON_FAILED';
 export const FETCH_YOHO_COUPON_SUCCESS = 'FETCH_YOHO_COUPON_SUCCESS';
+export const FETCH_YOHO_COUPON_NUM_SUCCESS = 'FETCH_YOHO_COUPON_NUM_SUCCESS';
+export const FETCH_UFO_COUPON_SUCCESS = 'FETCH_UFO_COUPON_SUCCESS';
+

@@ -11,7 +11,7 @@ module.exports = {
     api: 'app.coupons.get',
     params: {
       type: {type: String},
-      filter: {type: String},
+      filter: {type: Number},
       limit: {type: Number},
       page: {type: Number}
     }
@@ -21,6 +21,10 @@ module.exports = {
     params: {}
   },
   '/api/coupon/ufo/list': {
-
+    api: 'app.coupons.get',
+    params: {
+      limit: {type: Number},
+      page: {type: Number}
+    }
   }
 };

@@ -32,7 +32,7 @@ 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#$%&!@',