接口调用

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

@@ -307,5 +307,15 @@ var UserApi = {
                 callback(res)
             });
         },
-
+        GetSuperCenterInfo: function (params, callback) {//会员中心数据
+            Http.AjaxService({
+                url: '/user/super/center',
+                type:'get',
+                data:params,
+                json:false,
+                isHost:true
+            }).then(function (res) {
+                callback(res);
+            });
+        },
 };

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

@@ -32,13 +32,34 @@ var serviceList = [
         subTitle: '更多特权'
     }
 ];
+// 会员套餐
+var comboInfo = [
+    {
+        id: 1,
+        durationTime: 12,
+        price: 4800,
+        recommend: false,
+    }, {
+        id: 2,
+        durationTime: 3,
+        price: 1500,
+        recommend: true,
+    }, {
+        id: 3,
+        durationTime: 1,
+        price: 600,
+        recommend: false,
+    }
+];
+
 var memberPage = new Vue({
     el: '#memberPage',
     data: {
+        serviceList: serviceList, // 服务列表
+        comboInfo: comboInfo, // svip套餐信息
         showMask: false, // 遮罩层
         showRenewPopup: false, // 续费弹窗
         showConfirmPopup: false, // 支付确认弹窗
-        serviceList: serviceList, // 服务列表
         // 优惠券列表
         couponList: [
             {
@@ -71,7 +92,66 @@ var memberPage = new Vue({
             }
         ],
         comboCurrent: 0,  // 当前选择的套餐
-        comboInfo: [] // svip套餐信息
+        vipInfo: [], // 用户svip信息
+        currentIndex: 1
+    },
+    computed: {
+        svipTips: function () {
+            var vipFlag = this.vipInfo.vipFlag;
+            var endTime = moment(this.vipInfo.endTime).format('yyyy.MM.DD');
+            if (vipFlag === 1) {
+                return '<span>已开通采美超级会员</span><span class="time">有效期至' + endTime + '</span>'
+            } else if (vipFlag === -1) {
+                return '<span class="error">采美·超级会员已过期</span><span class="time">有效期至' + endTime + '</span>';
+            } else {
+                return '<span>采美·超级会员</span><span>享专属特权</span>'
+            }
+        },
     },
-    methods: {}
+    mounted: function () {
+        this.initCenter()
+    },
+    methods: {
+        // 初始化会员中心
+        initCenter: function () {
+            var _self = this;
+            UserApi.GetSuperCenterInfo({userId: GLOBAL_USER_ID, source: 1}, function (res) {
+                if (res.code === 0) {
+                    _self.vipInfo = res.data.vip;
+                } else {
+                    CAIMEI.Alert(response.msg, '确定', false);
+                    _self.isRequset = false;
+                }
+            })
+        },
+        //选择套餐
+        chooseCombo: function (index) {
+            this.currentIndex = index
+        },
+        //支付会员
+        payAction: function (type) {
+            // RMB支付
+            switch (type) {
+                case 1: // RMB支付
+                    this.payByRMB();
+                    break;
+                case 2: // 采美豆支付
+                    this.payByBeans();
+                    break;
+                default:
+                    return;
+            }
+        },
+        // RMB支付
+        payByRMB: function (packageId) {
+            console.log('RMB支付');
+            //本地保存一下选中的会员套餐信息
+            window.localStorage.setItem('comboInfo', comboInfo[this.currentIndex]);
+            window.open('/pay/caimei-paycash.html?payname=svip')
+        },
+        // 采美豆支付
+        payByBeans: function (packageId) {
+            console.log('采美豆支付');
+        }
+    }
 });

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

@@ -39,7 +39,6 @@ var memberProduct = new Vue({
                 $("img[data-original]").lazyload();
             });
         });
-        this.makePrice()
     },
     methods: {
         // 获取商品列表
@@ -92,7 +91,6 @@ var memberProduct = new Vue({
                 // 价格可见
                 if ((priceFlag === 0 && userIdentity !== 3) || (GLOBAL_USER_IDENTITY === 2) || (userIdentity === 3 && GLOBAL_SHOP_ID === shopID)) {
                     if (promotions || (svipProductFlag === 1 && GLOBAL_VIP_FLAG === 1)) {
-                        // return '<span>￥</span><span class=\"p-icon i'+ priceGrade + '\"></span>'
                         return '<del>￥' + originalPrice + '</del>'
                     }
                     return '￥' + price;

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

@@ -26,45 +26,39 @@
             <div class="right">
                 <!--会员信息-->
                 <div class="vip-bar">
-                    <div class="left-box row1">
-                        <!--未开通-->
-                        <template v-if="true">
-                            <span>采美·超级会员</span>
-                            <span>享专属特权</span>
-                        </template>
-                        <!-- 已开通 未过期 -->
-                        <template v-if="false">
-                            <span>采美·超级会员</span>
-                            <span>有效期：2021-10-01</span>
-                        </template>
-                        <!-- 已过期 -->
-                        <template v-if="false">
-                            <span class="error">采美·超级会员已过期</span>
-                            <span>有效期：2021-10-01</span>
-                        </template>
-                    </div>
+                    <div class="left-box" :class="isPC ? 'row1' : 'row2'" v-html="svipTips"></div>
                     <div class="right-box">
-                        <template v-if="false">
+                        <template v-if="vipInfo.vipFlag !== 0">
                             <a href="" class="link">购买记录</a>
                             <a href="" class="btn">续费</a>
                         </template>
                     </div>
                 </div>
                 <!--套餐价格 仅未开通和到期显示-->
-                <div class="section">
+                <div class="section" v-if="vipInfo.vipFlag === 0">
                     <div class="section-title">超级会员套餐</div>
                     <div class="content combo-list">
                         <div>
-                            <div class="combo" :class="{active: index === 1,recommend: index === 1}"
-                                 v-for="(i, index) in 3" :key="index">
-                                <div class="how-mounts">12个月</div>
-                                <div class="price"><i>￥</i>4800</div>
-                                <div class="average">400元/月</div>
-                            </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.durationTime }}个月</div>
+                                    <div class="price"><i>￥</i>{{ item.price }}</div>
+                                    <div class="average">{{ item.price / item.durationTime }}元/月</div>
+                                </div>
+                            </template>
                         </div>
                         <div>
-                            <div class="pay-btn"><a href="">立即支付4800元开通</a></div>
-                            <div class="pay-btn plain"><a href="">抵扣480000个采美豆开通</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 * 100 }}个采美豆开通
+                                </a>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -188,8 +182,16 @@
     <!--底部支付按钮 仅未开通和到期显示-->
     <div class="pay-amount-bottom">
         <div>
-            <div class="pay-btn plain"><a href="">抵扣480000个采美豆开通</a></div>
-            <div class="pay-btn"><a href="">立即支付4800元开通</a></div>
+            <div class="pay-btn plain">
+                <a href="javascript:void(0);" @click="payAction(1)">
+                    抵扣{{ comboInfo[currentIndex].price * 100 }}个采美豆开通
+                </a>
+            </div>
+            <div class="pay-btn">
+                <a href="javascript:void(0);" @click="payAction(2)">
+                    立即支付{{ comboInfo[currentIndex].price }}元开通
+                </a>
+            </div>
         </div>
     </div>
     <!--遮罩-->
@@ -199,16 +201,28 @@
         <div class="popup-title">超级会员套餐<span class="close">&times;</span></div>
         <div class="content combo-list">
             <div>
-                <div class="combo" :class="{active: index === 1,recommend: index === 1}"
-                     v-for="(i, index) in 3" :key="index">
-                    <div class="how-mounts">12个月</div>
-                    <div class="price"><i>￥</i>4800</div>
-                    <div class="average">400元/月</div>
+                <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.durationTime }}个月</div>
+                            <div class="price"><i>￥</i>{{ item.price }}</div>
+                            <div class="average">{{ item.price / item.durationTime }}元/月</div>
+                        </div>
+                    </template>
                 </div>
             </div>
             <div>
-                <div class="pay-btn"><a href="">立即支付4800元开通</a></div>
-                <div class="pay-btn plain"><a href="">抵扣480000个采美豆开通</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 * 100 }}个采美豆开通
+                    </a>
+                </div>
             </div>
         </div>
     </div>
@@ -218,12 +232,12 @@
         <div class="content">完成付款后请点击下面的按钮</div>
         <div class="popup-btn"><a href="" class="confirm-btn">已完成支付</a></div>
     </div>
-
 </div>
 
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" src="/lib/datapicker/moment-2.29.min.js"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/member/memberPage.js(v=${version})}"></script>