搜索

 <template>
-
+  <LayoutApp>
+    <div class="tab">
+      <div class="item right-line" :class="type ==='unused' ?  'item-selected' : 'item-default'"
+           @click="onChangeList('unused')">未使用{{unused.length && '('+ unused.length + ')'}}
+      </div>
+      <div class="item right-line" :class="type ==='used' ?  'item-selected' : 'item-default'"
+           @click="onChangeList('used')">已使用{{used.length && '('+ used.length + ')'}}
+      </div>
+      <div class="item" :class="type ==='overtime' ?  'item-selected' : 'item-default'"
+           @click="onChangeList('overtime')">已失效{{overtime.length && '('+ overtime.length + ')'}}
+      </div>
+    </div>
+    <Scroll class="coupon-list"
+    :options="scrollOptions"
+    :data="list"
+    @pulling-up="onPullingUp">
+      <div class="item" v-for="(item,index) in list">
+        <div :class="type === 'unused' ? 'item-bg' : 'item-gray-bg'">
+          <div class="item-left">
+            <div class="item-price" :class="type !== 'unused' && 'gray'">{{item.coupon_value}}</div>
+            <div class="item-rule" v-if="item.use_rule" :class="type !== 'unused' && 'gray'">{{item.use_rule}}</div>
+          </div>
+          <div class="item-right">
+            <div class="item-name" :class="type !== 'unused' && 'gray'">
+              <span class="item-type" :class="type !== 'unused' && 'gray'">[{{item.coupon_type_name}}]</span>
+              {{item.coupon_name}}
+            </div>
+            <div class="item-time" :class="type !== 'unused' && 'gray'">{{item.coupon_validity}}</div>
+            <div class="item-desc-btn" :class="type !== 'unused' && 'gray'">使用说明</div>
+            <div class="time-up" v-if="item.is_expired_soon === 'Y'"></div>
+            <div class="item-used-flag" v-if="type === 'used'"></div>
+            <div class="item-overtime-flag"  v-if="type === 'overtime'"></div>
+          </div>
+        </div>
+      </div>
+    </Scroll>
+  </LayoutApp>
 </template>
 
 <script>
-    export default {
-        name: "list"
-    }
+
+import {Scroll} from 'cube-ui';
+import {createNamespacedHelpers} from 'vuex';
+
+const {mapState, mapActions} = createNamespacedHelpers('home/coupon');
+
+export default {
+  name: 'Coupon',
+  components: {Scroll},
+  activated: function() {
+    this.fetchCouponList({type: 'unused', isReset: true}).then(r => {
+      this.list = r;
+    });
+    this.fetchCouponList({type: 'used', isReset: true});
+    this.fetchCouponList({type: 'overtime', isReset: true});
+  },
+  data() {
+    return {
+      scrollOptions: {
+        bounce: {
+          top: false
+        },
+        pullUpLoad: true
+      },
+      type: 'unused',
+      list: []
+    };
+  },
+  methods: {
+    ...mapActions(['fetchCouponList']),
+
+    onChangeList(type) {
+      // 切换tab
+      this.type = type;
+
+      // 切换list
+      this.list = this[type].list;
+    },
+
+    async onPullingUp() {
+      this.list = await this.fetchCouponList({type: this.type});
+    },
+
+  },
+  computed: {
+    ...mapState(['unused', 'used', 'overtime']),
+  },
+};
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  .tab {
+    display: flex;
+    width: 100%;
+    height: 88px;
+    padding: 14px 0;
+    align-items: center;
+
+    .item {
+      font-size: 28px;
+      flex: 1;
+      height: 60px;
+      text-align: center;
+      line-height: 60px;
+    }
+
+    .right-line {
+      border-left: 1px solid #E0E0E0;
+    }
+
+    .item-default {
+      color: #B0B0B0;
+    }
+
+    .item-selected {
+      color: #444444;
+    }
+  }
+
+  .coupon-list {
+    background: #f5f5f5;
+
+    .item {
+      width: 100%;
+      margin-top: 20px;
+    }
+
+    .item-bg {
+      background: url(~statics/image/coupon/bg@3x.png) no-repeat;
+      width: 710px;
+      height: 200px;
+      background-size: cover;
+      margin: 0 auto;
+      display: flex;
+      position: relative;
+    }
+
+    .item-left {
+      width: 230px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      .item-price {
+        font-size: 72px;
+        color: #002B47;
+      }
+
+      .item-rule {
+        font-size: 24px;
+        margin-top: 4px;
+        color: #002B47;
+      }
+    }
+
+    .item-right {
+      margin-left: 6px;
+
+      .item-name {
+        font-size: 24px;
+        color: #222;
+        margin-top: 22px;
+      }
+
+      .item-type {
+        color: #002B47;
+      }
 
+      .item-time {
+        margin-top: 36px;
+        font-size: 22px;
+        color: #999;
+      }
+
+      .item-desc-btn{
+        margin-top: 26px;
+        font-size: 22px;
+        color: #999;
+      }
+
+      .time-up {
+        background: url(~statics/image/coupon/time-up@3x.png) no-repeat;
+        background-size: cover;
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 80px;
+        height: 80px;
+      }
+
+      .item-used-flag {
+        background: url(~statics/image/coupon/used@3x.png) no-repeat;
+        background-size: cover;
+        position: absolute;
+        right: 30px;
+        width: 130px;
+        height: 130px;
+        top: 30px;
+      }
+
+      .item-overtime-flag {
+        background: url(~statics/image/coupon/overtime@3x.png) no-repeat;
+        background-size: cover;
+        position: absolute;
+        right: 30px;
+        width: 130px;
+        height: 130px;
+        top: 30px;
+      }
+    }
+
+    .gray {
+      color: #ccc;
+    }
+
+    .item-gray-bg {
+      background: url(~statics/image/coupon/bg-gray@3x.png) no-repeat;
+      width: 710px;
+      height: 200px;
+      background-size: cover;
+      margin: 0 auto;
+      display: flex;
+      position: relative;
+    }
+  }
 </style>

@@ -3,6 +3,8 @@ import Trade from './tradeIncome';
 import Favorite from './favorite';
 import news from './news';
 import Income from './income';
+import Coupon from './coupon';
+
 export default [
   {
     name: 'channel',
@@ -13,5 +15,6 @@ export default [
   ...Mine,
   ...Trade,
   ...Favorite,
-  ...Income
+  ...Income,
+  ...Coupon
 ];

@@ -54,7 +54,7 @@ export default function() {
         let params = {
           page: couponData.page,
           limit: couponData.limit,
-          type: couponData.limit,
+          type: couponData.type,
         };
 
         if (param.isReset) {
@@ -63,7 +63,7 @@ export default function() {
           params.page += 1;
         }
         params.uid = uid;
-        let result = await this.$api.get('api/ufo/coupon/list', {...params});
+        let result = await this.$api.get('/api/ufo/coupon/list', {...params});
 
         if (result.code === 200) {
           let data = result.data;
@@ -82,7 +82,7 @@ export default function() {
             commit('addList', { data: couponData });
           }
         }
-        return result.data || [];
+        return couponData.list || [];
       },
     },
   };

@@ -107,16 +107,15 @@ module.exports = {
       uid: { type: Number },
     },
   },
-  'api/ufo/coupon/list': {
+  '/api/ufo/coupon/list': {
     ufo: true,
-
-    // auth: true,
+    path: '/ufo-gateway/coupon',
     api: 'ufo.coupons.list',
     param: {
-      uid: { type: Number },
       page: {type: Number},
       limit: {type: Number},
-      type: {type: Number}
+      type: {type: String},
+      uid: { type: Number },
     }
   },
 };