Merge branch 'feature/ufo' of http://git.yoho.cn/fe/yoho-app-web into feature/ufo

@@ -39,7 +39,7 @@ const request = async({url, method, reqParams = {}, context}) => {
       cache: cache,
       code: 200,
       headers
-    }).catch(console.log);
+    });
   } else if (apiInfo.ufo) {
     return await ufoAPI[method](`${apiInfo.path || ''}`, params, {
       cache: cache,
@@ -51,7 +51,7 @@ const request = async({url, method, reqParams = {}, context}) => {
       code: 200,
       cache: cache,
       headers
-    }).catch(console.log);
+    });
   }
 };
 

@@ -29,7 +29,7 @@
       </template>
 
       <template v-else>
-        <a :href="item.useNowLink" class="use-now">立即使用</a>
+        <a :href="item.useNowLink" v-if="item.useNowLink" class="use-now">立即使用</a>
         <span class="top-tip" v-if="item.is_overdue_soon === 'Y'"></span>
       </template>
     </div>
@@ -52,7 +52,6 @@ export default {
     }
   },
   mounted() {
-    console.log(this.item);
   },
   data() {
     return {
@@ -80,6 +79,7 @@ export default {
           'coupon-left-shop': this.item.catalog === 100,
           'coupon-left-activity': this.item.catalog === 200,
           'coupon-left-freight': this.item.catalog === 300,
+          'coupon-left-ufo': this.item.catalog === 'UFO',
         }];
       }
     },
@@ -88,6 +88,7 @@ export default {
         'type-shop': this.item.catalog === 100,
         'type-activity': this.item.catalog === 200,
         'type-freight': this.item.catalog === 300,
+        'type-ufo': this.item.catalog === 'UFO',
       }];
     },
     introClass() {
@@ -160,6 +161,14 @@ export default {
       }
     }
 
+    .coupon-left-ufo {
+      background-image: url("~statics/image/coupon/ufo.png");
+
+      > p {
+        color: #002b47;
+      }
+    }
+
     .coupon-right {
       width: 510px;
       height: 200px;
@@ -191,6 +200,10 @@ export default {
         color: #222;
       }
 
+      .type-ufo {
+        color: #002b47;
+      }
+
       .title {
         width: 370px;
         font-size: 24px;

 <template>
   <div class="exchange-box">
-    <input type="text" name="couponCodeInput" placeholder="请输入优惠券码">
-    <button id="exchangeCouponBtn" class="exchange-coupon-btn">兑换</button>
+    <input type="text" name="couponCodeInput" placeholder="请输入优惠券码" :value="code" @input="onCodeInput">
+    <button :class="btnCls" @click="onClick">兑换</button>
   </div>
 </template>
 
 <script>
 export default {
-  name: "ExchangeBox"
+  name: 'ExchangeBox',
+  data() {
+    return {
+      code: ''
+    };
+  },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+    onCodeInput(e) {
+      this.code += e.data;
+      this.$emit('input', this.code);
+    }
+  },
+  computed: {
+    btnCls() {
+      return ['exchange-coupon-btn', {
+        active: this.code !== ''
+      }];
+    }
+  }
 };
 </script>
 

 <template>
   <div class="filter-item">
     <template v-for="(item, index) in list">
-      <button @click="onClick(item)">{{item.filter_name}}</button>
+      <button :class="btnCls(item)" @click="onClick(item)" :key="item.filter_id">{{item.filter_name}}</button>
     </template>
   </div>
 </template>
@@ -17,23 +17,31 @@ export default {
       }
     },
     value: {
-      type: String,
+      type: Number,
       default() {
-        return '';
+        return 0;
       }
     }
   },
   data() {
     return {
+      clickFilterId: this.value
     };
   },
   methods: {
-    onClick() {
+    onClick(item) {
+      this.clickFilterId = item.filter_id;
+      this.$emit('input', item.filter_id);
+    },
+    btnCls(item) {
+      if (item.filter_id === this.clickFilterId) {
+        return ['active'];
+      }
 
+      return [];
     }
   },
 }
-
 </script>
 
 <style lang="scss" scoped>

@@ -37,7 +37,7 @@ export default {
       prefixCls: 'yoho-tabs',
       navList: this.data,
       activeKey: this.value,
-      show: false
+      showFilter: false
     };
   },
   computed: {
@@ -45,7 +45,7 @@ export default {
       return [`${this.prefixCls}`];
     },
     filterClass() {
-      if (this.show) {
+      if (this.showFilter) {
         return ['iconfont', 'icon-up'];
       } else {
         return ['iconfont', 'icon-downn'];
@@ -58,8 +58,8 @@ export default {
       const nav = this.navList[index];
 
       if (this.activeKey === nav.label) {
-        this.show = !this.show;
-        this.$emit('filter', this.show);
+        this.showFilter = !this.showFilter;
+        this.$emit('on-filter-change', this.showFilter);
         return;
       }
 

 <template>
-    <div style="height: 100%">
+    <div style="height: 100%;">
           <div class="head"></div>
-          <ClassicTabs v-model="selectLabel" :data="tabLabels" @filter="onFilterChange"></ClassicTabs>
+          <ClassicTabs ref="tabs" v-model="selectLabel" :data="tabLabels" @on-filter-change="onFilterChange"></ClassicTabs>
 
           <div class="tab-slide-container">
             <Slide
@@ -15,11 +15,11 @@
               @change="changePage"
             >
               <SlideItem style="background-color: #f0f0f0;">
-                <ExchangeBox></ExchangeBox>
+                <ExchangeBox v-model="inputCouponCode" @click="onSubmitCode"></ExchangeBox>
 
-                <div class="filter-wrapper" v-if="show">
-                  <div class="filter-mask"></div>
-                  <FilterBar :list="filterList" class="filter"></FilterBar>
+                <div class="filter-wrapper" v-if="showFilter">
+                  <div class="filter-mask" @click="onMaskClick"></div>
+                  <FilterBar :list="filterList" v-model="selectFilterId" class="filter"></FilterBar>
                 </div>
 
                 <div class="head"></div>
@@ -51,7 +51,7 @@
 <script>
 import {createNamespacedHelpers} from 'vuex';
 
-const {mapState, mapActions, mapGetters} = createNamespacedHelpers('coupon/yoho');
+const {mapState} = createNamespacedHelpers('coupon/yoho');
 
 import Tabs from '../components/tabs';
 import FilterBar from '../components/filter-bar';
@@ -59,23 +59,13 @@ import ExchangeBox from '../components/exchange-box';
 import CouponItem from '../components/coupon-item';
 import Empty from '../components/empty';
 
-import {TabBar, Slide, Scroll} from 'cube-ui';
+import {Slide, Scroll} from 'cube-ui';
 
 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;
-
-      index = this.tabLabels.findIndex(i => i.label === this.selectLabel);
-      return index;
-    }
-  },
-  asyncData({store, router}) {
+  asyncData({store}) {
     return store.dispatch('coupon/yoho/fetchYohoList', {
       type: TYPE.notuse,
       filter: 0,
@@ -86,35 +76,47 @@ export default {
   data() {
     return {
       selectLabel: '未使用',
-      selectType: TYPE.notuse,
-      selectFilter: 0,
+      showFilter: false,
+      selectFilterId: 0,
+      inputCouponCode: '',
       tabLabels: [
         {
           label: '未使用',
           type: TYPE.notuse,
-          filter: true
+          filter: true,
+          selectFilterId: 0,
         }, {
           label: '已使用',
           type: TYPE.use,
-          filter: false
+          filter: false,
+          selectFilterId: 0,
         }, {
           label: '已失效',
           type: TYPE.overtime,
-          filter: false
+          filter: false,
+          selectFilterId: 0,
         }
       ],
       scrollOptions: {
-        directionLockThreshold: 0,
-        stopPropagation: true
+        directionLockThreshold: 0
       },
       slideOptions: {
         listenScroll: true,
+        click: false,
         probeType: 3,
         directionLockThreshold: 0
       },
-      show: false
     };
   },
+  computed: {
+    ...mapState(['yohoList', 'filterList']),
+    initialIndex() {
+      let index = 0;
+
+      index = this.tabLabels.findIndex(i => i.label === this.selectLabel);
+      return index;
+    }
+  },
   created() {
   },
   mounted() {
@@ -122,13 +124,13 @@ export default {
   },
   methods: {
     changePage(current) {
+      const tab = this.tabLabels[current];
+
       this.selectLabel = this.tabLabels[current].label;
-      this.selectType = this.tabLabels[current].type;
-      console.log(current, 'index', this.selectType, this.selectLabel);
 
-      return this.$store.dispatch('coupon/yoho/fetchYohoList', {
-        type: this.selectType,
-        filter: this.selectFilter,
+      this.$store.dispatch('coupon/yoho/fetchYohoList', {
+        type: tab.type,
+        filter: tab.selectFilterId,
         limit: 20,
         page: 1
       });
@@ -139,19 +141,28 @@ export default {
     getNum() {
       return this.$store.dispatch('coupon/yoho/fetchYohoNum', {});
     },
-
     onFilterChange(show) {
-      this.show = show;
+      this.showFilter = show;
+    },
+    onMaskClick() {
+      this.showFilter = false;
+      this.$refs.tabs.showFilter = false;
+    },
+    onSubmitCode() {
+
+    }
+  },
+  watch: {
+    selectFilterId(val) {
+      this.tabLabels[0].selectFilterId = val;
+      this.onMaskClick();
+      return this.changePage(0);
     }
   },
   components: {
-    Tabs,
-    TabPane: Tabs.Pane,
     FilterBar,
     ClassicTabs: Tabs.ClassicTabs,
     ExchangeBox,
-    TabBar,
-    Tab: TabBar.Tab,
     Slide,
     SlideItem: Slide.Item,
     Scroll,

@@ -15,6 +15,13 @@ function _handleCoupon(item, type) {
   return item;
 }
 
+function _handleUfoCoupon(item) {
+  item.coupon_value_str = item.coupon_value;
+  item.catalog_name = 'UFO';
+  item.catalog = 'UFO';
+  return item;
+}
+
 export default {
   async fetchYohoList({commit}, {type, filter, limit, page}) {
     commit(Types.FETCH_YOHO_COUPON_REQUEST);
@@ -22,11 +29,16 @@ export default {
     const result = await this.$api.get('/api/coupon/yoho/list', {type, filter, limit, page});
 
     if (result && result.code === 200) {
-      commit(Types.FETCH_YOHO_COUPON_SUCCESS, {
+      const data = {
         type,
         list: result.data.couponList.map(_handleCoupon),
-        filter: result.data.filters
-      });
+      };
+
+      if (type === TYPE.notuse) {
+        data.filter = result.data.filters;
+      }
+
+      commit(Types.FETCH_YOHO_COUPON_SUCCESS, data);
     } else {
       commit(Types.FETCH_YOHO_COUPON_FAILED);
     }
@@ -51,7 +63,7 @@ export default {
 
     if (result && result.code === 200) {
       commit(Types.FETCH_UFO_COUPON_SUCCESS, {
-        list: []
+        list: result.data.map(_handleUfoCoupon)
       });
     } else {
       commit(Types.FETCH_YOHO_COUPON_FAILED);

@@ -22,7 +22,6 @@ export default function() {
       },
       ufoList: [],
       filterList: [],
-      showFilter: true,
     },
     actions,
     mutations,

@@ -7,7 +7,10 @@ export default {
   [Types.FETCH_YOHO_COUPON_SUCCESS](state, {list, filter, type}) {
     state.fetching = false;
     state.yohoList[type] = list;
-    state.filterList = filter;
+
+    if (filter) {
+      state.filterList = filter;
+    }
   },
   [Types.FETCH_YOHO_COUPON_FAILED](state) {
     state.fetching = false;
@@ -19,5 +22,5 @@ export default {
   [Types.FETCH_UFO_COUPON_SUCCESS](state, {list = []}) {
     state.fetching = false;
     state.ufoList = list;
-  },
+  }
 };

@@ -2,5 +2,6 @@ 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_YOHO_COUPON_CODE_SUCCESS = 'FETCH_YOHO_COUPON_NUM_SUCCESS';
 export const FETCH_UFO_COUPON_SUCCESS = 'FETCH_UFO_COUPON_SUCCESS';
 

@@ -20,6 +20,12 @@ module.exports = {
     api: 'app.coupons.getCouponNums',
     params: {}
   },
+  '/api/coupon/yoho/getcoupon': {
+    api: 'app.Buynow.useCoupon',
+    params: {
+      coupon_code: {type: String}
+    }
+  },
   '/api/coupon/ufo/list': {
     api: 'ufo.coupons.get',
     path: 'coupon',