接口调用

src/main/resources/static/js/user-center/member/memberPage.js

@@ -61,36 +61,7 @@ var memberPage = new Vue({
         showRenewPopup: false, // 续费弹窗
         showConfirmPopup: false, // 支付确认弹窗
         // 优惠券列表
-        couponList: [
-            {
-                type: 1,
-                amount: 1000,
-                condition1: '满5000可用',
-                condition2: '全商城商品通用',
-                received: false,
-            },
-            {
-                type: 2,
-                amount: 1000,
-                condition1: '满5000可用',
-                condition2: '全商城商品通用',
-                received: false,
-            },
-            {
-                type: 2,
-                amount: 1000,
-                condition1: '满5000可用',
-                condition2: '全商城商品通用',
-                received: false,
-            },
-            {
-                type: 2,
-                amount: 1000,
-                condition1: '满5000可用',
-                condition2: '全商城商品通用',
-                received: true,
-            }
-        ],
+        couponList: [],
         comboCurrent: 0,  // 当前选择的套餐
         vipInfo: {}, // 用户svip信息
         currentIndex: 1,
@@ -128,7 +99,8 @@ var memberPage = new Vue({
                 if (res.code === 0) {
                     _self.vipInfo = res.data.vip;
                     window.localStorage.setItem('vipInfo', JSON.stringify(_self.vipInfo));
-                    _self.couponList = res.data
+                    _self.couponList = _self.initCouponInfo(res.data.coupon.splice(0,4));
+                    console.log(_self.couponList);
                 } else {
                     CAIMEI.Alert(response.msg, '确定', false);
                     _self.isRequset = false;
@@ -203,11 +175,38 @@ var memberPage = new Vue({
                 }
             })
         },
+        // 初始化优惠券信息
+        initCouponInfo: function(couponList){
+            var typeText = {
+                0: '活动券',
+                1: '品类券',
+                2: '用户专享券',
+                3: '店铺券',
+                4: '新用户券'
+            };
+            return couponList.map(function(item, index){
+                item.typeText = typeText[item.couponType];
+                return item;
+            })
+        },
         // 领取专属优惠券
         receiveCoupon: function(id){
-           ProductApi.ReceiveCoupon({},function(response){
-
-           })
+            var _self = this;
+            ProductApi.ReceiveCoupon({
+                userId: GLOBAL_USER_ID,
+                couponId: id,
+                source: 1
+            }, function (response) {
+                if (!response.code) {
+                    _self.couponList = _self.couponList.map(function (item, i) {
+                        if (item.couponId === id) {
+                            item.getFlag = 1
+                        }
+                        return item;
+                    });
+                    CAIMEI.dialog(response.data,false);
+                }
+            })
         },
         // 续费弹窗
         handleShowRenewPopup: function(){

src/main/resources/templates/user-center/member/member.html

@@ -81,12 +81,12 @@
                     <div class="section-title">专属特权<span>每月可领4个</span></div>
                     <div class="content coupon-list">
                         <template v-for="(item, index) in couponList">
-                            <div :key="index" :class="{'un-received': !item.received}">
-                                <span class="type">{{ item.type === 1 ? '新人券' : '活动券'}}</span>
-                                <div class="amount"><i>￥</i>{{ item.amount }}</div>
-                                <div class="condition" v-html="item.condition1"></div>
-                                <div class="condition" v-html="item.condition2"></div>
-                                <div class="receive-btn" v-if="!item.received">立即领取</div>
+                            <div :key="index" :class="{'un-received': !item.getFlag}">
+                                <span class="type" v-html="item.typeText"></span>
+                                <div class="amount"><i>￥</i>{{ item.couponAmount }}</div>
+                                <div class="condition">满{{ item.touchPrice }}可用</div>
+                                <div class="condition" v-html="item.productType === 1 ? '全商城商品通用' : '指定商品可用'"></div>
+                                <div class="receive-btn" v-if="!item.getFlag" @click="receiveCoupon(item.couponId)">立即领取</div>
                                 <div class="receive-btn" v-else>已领取</div>
                             </div>
                         </template>