代码优化

src/main/resources/static/js/common/serviceapi/user.service.js

@@ -341,7 +341,7 @@ var UserApi = {
             });
         },
         // user/super/package
-        FetchSuperPackage: function (params, callback) {//会员开通记录
+        FetchSuperPackage: function (params, callback) {//获取会员套餐
             Http.AjaxService({
                 url: '/user/super/package',
                 type:'get',
@@ -352,4 +352,15 @@ var UserApi = {
                 callback(res);
             });
         },
+        RegisterSuperPay: function(params, callback){ // 在线支付超级会员预处理
+            Http.AjaxService({
+                url: '/user/register/super/pay',
+                type: 'get',
+                data: params,
+                json: false,
+                isHost: true
+            }).then(function (res) {
+                callback(res);
+            });
+        }
 };

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

@@ -32,31 +32,11 @@ var serviceList = [
         subTitle: '更多特权'
     }
 ];
-// 会员套餐
-var comboInfo = [
-    {
-        id: 1,
-        duration: 12,
-        price: 4800,
-        recommend: false,
-    }, {
-        id: 2,
-        duration: 3,
-        price: 1500,
-        recommend: true,
-    }, {
-        id: 3,
-        duration: 1,
-        price: 600,
-        recommend: false,
-    }
-];
-
 var memberPage = new Vue({
     el: '#memberPage',
     data: {
         serviceList: serviceList, // 服务列表
-        comboInfo: comboInfo, // svip套餐信息
+        comboInfo: [], // svip套餐信息
         showMask: false, // 遮罩层
         showRenewPopup: false, // 续费弹窗
         showConfirmPopup: false, // 支付确认弹窗
@@ -135,12 +115,21 @@ var memberPage = new Vue({
         // RMB支付
         payByRMB: function (packageId) {
             console.log('RMB支付');
-            //本地保存一下选中的会员套餐信息
-            window.localStorage.setItem('comboInfo', JSON.stringify(this.comboInfo[this.currentIndex]));
-            window.open('/pay/caimei-paycash.html?pageType=2');
-            this.showRenewPopup = false;
-            this.showMask = false;
-            // this.showConfirmPopup = true;
+            var currentCombo = this.comboInfo[this.currentIndex];
+            var _self = this;
+            UserApi.RegisterSuperPay({userId: GLOBAL_USER_ID, packageId: currentCombo.id}, function (response) {
+                if (response === 0) {
+                    console.log(response);
+                    //本地保存一下选中的会员套餐信息
+                    window.localStorage.setItem('comboInfo', JSON.stringify(currentCombo));
+                    window.open('/pay/caimei-paycash.html?pageType=2');
+                    _self.showRenewPopup = false;
+                    _self.showMask = false;
+                    // this.showConfirmPopup = true;
+                } else {
+                    CAIMEI.dialog(response.data, false);
+                }
+            });
         },
         // 采美豆支付
         payByBeans: function (packageId) {
@@ -251,6 +240,9 @@ var memberPage = new Vue({
         },
         // 续费弹窗
         handleShowRenewPopup: function () {
+            if(this.comboInfo.length === 0){
+                return CAIMEI.dialog('暂无可选套餐~', false);
+            }
             this.fetchSuperPackage();
             this.currentIndex = 1;
             this.showMask = true;
@@ -339,6 +331,5 @@ var memberPage = new Vue({
                 })
             }
         }
-
     }
 });

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

@@ -31,7 +31,8 @@ var memberRecord = new Vue({
         totalPage: 0,
         jumpPageSize: 1,
         total: 0,
-        recordList: []
+        recordList: [],
+        comboInfo: []
     },
     computed: {
         pagination: function () {
@@ -64,6 +65,7 @@ var memberRecord = new Vue({
     },
     mounted: function(){
         this.vipInfo = JSON.parse(window.localStorage.getItem('vipInfo'));
+        this.fetchSuperPackage();
         this.getHistoryList();
     },
     methods: {
@@ -92,9 +94,18 @@ var memberRecord = new Vue({
                 }
             })
         },
+        // 获取套餐
+        fetchSuperPackage: function () {
+            var _self = this;
+            UserApi.FetchSuperPackage({}, function (response) {
+                if (response.code === 0) {
+                    _self.comboInfo = response.data;
+                }
+            })
+        },
         duration: function(id){
             var duration = 0;
-            comboInfo.forEach(function(item){
+            this.comboInfo.forEach(function(item){
                 if(id === item.id){
                     return duration = item.duration;
                 }

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

@@ -38,28 +38,31 @@
                 <div class="section" v-if="vipInfo.vipFlag !== 1">
                     <div class="section-title">超级会员套餐</div>
                     <div class="content combo-list">
-                        <div>
-                            <template v-for="(item, index) in comboInfo">
-                                <div class="combo" :class="{active: index === currentIndex,recommend: item.recommend}"
-                                     :key="index" @click="chooseCombo(index)">
-                                    <div class="how-mounts">{{ item.duration }}个月</div>
-                                    <div class="price"><i>￥</i>{{ item.price }}</div>
-                                    <div class="average">{{ item.price / item.duration }}元/月</div>
-                                </div>
-                            </template>
-                        </div>
-                        <div>
-                            <div class="pay-btn">
-                                <a href="javascript:void(0);" @click="payAction(1)">
-                                    立即支付{{ comboInfo[currentIndex].price }}元开通
-                                </a>
+                        <template v-if="comboInfo.length > 0">
+                            <div>
+                                <template v-for="(item, index) in comboInfo">
+                                    <div class="combo" :class="{active: index === currentIndex,recommend: item.recommend}"
+                                         :key="index" @click="chooseCombo(index)">
+                                        <div class="how-mounts">{{ item.duration }}个月</div>
+                                        <div class="price"><i>￥</i>{{ item.price }}</div>
+                                        <div class="average">{{ item.price / item.duration }}元/月</div>
+                                    </div>
+                                </template>
                             </div>
-                            <div class="pay-btn plain">
-                                <a href="javascript:void(0);" @click="payAction(2)">
-                                    抵扣{{ comboInfo[currentIndex].price * comboInfo[currentIndex].proportion }}个采美豆开通
-                                </a>
+                            <div>
+                                <div class="pay-btn">
+                                    <a href="javascript:void(0);" @click="payAction(1)">
+                                        立即支付{{ comboInfo[currentIndex].price }}元开通
+                                    </a>
+                                </div>
+                                <div class="pay-btn plain">
+                                    <a href="javascript:void(0);" @click="payAction(2)">
+                                        抵扣{{ comboInfo[currentIndex].price * comboInfo[currentIndex].proportion }}个采美豆开通
+                                    </a>
+                                </div>
                             </div>
-                        </div>
+                        </template>
+                        <span v-else>暂无可选套餐~</span>
                     </div>
                 </div>
                 <!--服务列表-->
@@ -95,7 +98,7 @@
 
                 </div>
                 <!--优惠商品-->
-                <div class="section">
+                <div class="section" v-if="productList.length > 0">
                     <div class="section-title clear">优惠商品<a href="/user/member-product.html">查看更多&gt;</a></div>
                     <div class="content goods-list">
                         <div class="goods" v-for="(product, index) in productList" :key="index">
@@ -123,11 +126,11 @@
         </div>
     </div>
     <!--底部支付按钮 仅未开通和到期显示-->
-    <div class="pay-amount-bottom" v-if="vipInfo.vipFlag !== 1 && showBottomBtns">
+    <div class="pay-amount-bottom" v-if="comboInfo.length > 0 && vipInfo.vipFlag !== 1 && showBottomBtns">
         <div>
             <div class="pay-btn plain">
                 <a href="javascript:void(0);" @click="payAction(1)">
-                    抵扣{{ comboInfo[currentIndex].price * 100 }}个采美豆开通
+                    抵扣{{ comboInfo[currentIndex].price * comboInfo[currentIndex].proportion }}个采美豆开通
                 </a>
             </div>
             <div class="pay-btn">
@@ -143,28 +146,31 @@
     <div class="renew-popup" v-if="showRenewPopup">
         <div class="popup-title">续费超级会员套餐<span class="close" @click="handleCloseRenewPopup">&times;</span></div>
         <div class="content combo-list">
-            <div>
-                <template v-for="(item, index) in comboInfo">
-                    <div class="combo" :class="{active: index === currentIndex,recommend: item.recommend}"
-                         :key="index" @click="chooseCombo(index)">
-                        <div class="how-mounts">{{ item.duration }}个月</div>
-                        <div class="price"><i>￥</i>{{ item.price }}</div>
-                        <div class="average">{{ item.price / item.duration }}元/月</div>
-                    </div>
-                </template>
-            </div>
-            <div>
-                <div class="pay-btn">
-                    <a href="javascript:void(0);" @click="payAction(1)">
-                        立即支付{{ comboInfo[currentIndex].price }}元开通
-                    </a>
+            <template v-if="comboInfo.length > 0">
+                <div>
+                    <template v-for="(item, index) in comboInfo">
+                        <div class="combo" :class="{active: index === currentIndex,recommend: item.recommend}"
+                             :key="index" @click="chooseCombo(index)">
+                            <div class="how-mounts">{{ item.duration }}个月</div>
+                            <div class="price"><i>￥</i>{{ item.price }}</div>
+                            <div class="average">{{ item.price / item.duration }}元/月</div>
+                        </div>
+                    </template>
                 </div>
-                <div class="pay-btn plain">
-                    <a href="javascript:void(0);" @click="payAction(2)">
-                        抵扣{{ comboInfo[currentIndex].price * comboInfo[currentIndex].proportion }}个采美豆开通
-                    </a>
+                <div>
+                    <div class="pay-btn">
+                        <a href="javascript:void(0);" @click="payAction(1)">
+                            立即支付{{ comboInfo[currentIndex].price }}元开通
+                        </a>
+                    </div>
+                    <div class="pay-btn plain">
+                        <a href="javascript:void(0);" @click="payAction(2)">
+                            抵扣{{ comboInfo[currentIndex].price * comboInfo[currentIndex].proportion }}个采美豆开通
+                        </a>
+                    </div>
                 </div>
-            </div>
+            </template>
+            <span v-else>暂无可选套餐~</span>
         </div>
     </div>
     <!--立即支付弹窗-->