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

// 服务列表
var serviceList = [
    {
        name: '优惠商品',
        subTitle: '超级会员专享',
        pcIcon:'/img/member/pc-cm-svip-icon1.png',
        h5Icon:'/img/member/h5-cm-svip-icon1.png'
    },
    {
        name: '专属优惠券',
        subTitle: '每季度可领',
        pcIcon:'/img/member/pc-cm-svip-icon2.png',
        h5Icon:'/img/member/h5-cm-svip-icon2.png'
    },
    {
        name: '免运费',
        subTitle: '下单全包邮',
        pcIcon:'/img/member/pc-cm-svip-icon8.png',
        h5Icon:'/img/member/h5-cm-svip-icon8.png'
    },
    {
        name: '采美豆翻倍',
        subTitle: '下单返采美豆',
        pcIcon:'/img/member/pc-cm-svip-icon3.png',
        h5Icon:'/img/member/h5-cm-svip-icon3.png'
    },
    {
        name: '专属客服',
        subTitle: '一对一',
        pcIcon:'/img/member/pc-cm-svip-icon4.png',
        h5Icon:'/img/member/h5-cm-svip-icon4.png'
    },
    {
        name: '专属销售顾问',
        subTitle: '一对一',
        pcIcon:'/img/member/pc-cm-svip-icon5.png',
        h5Icon:'/img/member/h5-cm-svip-icon5.png'
    },
    {
        name: '新品试用',
        subTitle: '新品可优先试用',
        pcIcon:'/img/member/pc-cm-svip-icon6.png',
        h5Icon:'/img/member/h5-cm-svip-icon6.png'
    },
    {
        name: '售后服务',
        subTitle: '会员加速',
        pcIcon:'/img/member/pc-cm-svip-icon7.png',
        h5Icon:'/img/member/h5-cm-svip-icon7.png'
    }

];
var memberPage = new Vue({
    el: '#memberPage',
    mixins: [cmSysVitaMixins],
    data: {
        serviceList: serviceList, // 服务列表
        serviceList2: [
            {
                name: '分期付',
                subTitle: '热门商品分期付',
                pcIcon:'/img/member/pc-cm-svip-icon8.png',
                h5Icon:'/img/member/h5-cm-svip-icon8.png'
            }
        ], // 服务列表
        comboInfo: [], // svip套餐信息
        showMask: false, // 遮罩层
        showRenewPopup: false, // 续费弹窗
        showConfirmPopup: false, // 支付确认弹窗
        showBottomBtns: false,
        // 优惠券列表
        couponList: [],
        comboCurrent: 0,  // 当前选择的套餐
        vipInfo: {}, // 用户svip信息
        currentIndex: 0,
        productList: [],
        listQuery: {
            userId: GLOBAL_USER_ID,
            source: 1,
            pageNum: 1,
            pageSize: 6
        },
        payType: 1, // 1：RMB支付  2：采美豆抵扣
        payBtnType: 1, // 1: 支付/抵扣按钮1， 2： 支付/抵扣按钮2   3：续费
    },
    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>'
            }
        },
    },
    mounted: function () {
        this.fetchSuperPackage();
        this.initCenter();
        this.getSvipProductList();
        this.setBottomBtnsVisiable();

    },
    methods: {
        // 是否显示vip标签价格
        showVipPriceTag: function(product){
            return (product.priceFlag !== 1 && product.svipProductFlag === 1 && ((GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG === 1) || GLOBAL_USER_IDENTITY === 2));
        },

        // 初始化会员中心
        initCenter: function () {
            var _self = this;
            UserApi.GetSuperCenterInfo({userId: GLOBAL_USER_ID, source: 1}, function (res) {
                if (res.code === 0) {
                    _self.vipInfo = res.data.vip;
                    window.localStorage.setItem('vipInfo', JSON.stringify(_self.vipInfo));
                    _self.couponList = _self.initCouponInfo(res.data.coupon.splice(0, 4));
                } else {
                    CAIMEI.Alert(response.msg, '确定', false);
                    _self.isRequset = false;
                }
            })
        },
        //选择套餐
        chooseCombo: function (index) {
            this.currentIndex = index
        },
        //支付会员
        payAction: function (type, payBtnType) {
            this.payBtnType = payBtnType;
            // RMB支付
            switch (type) {
                case 1: // RMB支付
                    this.payByRMB();
                    break;
                case 2: // 采美豆支付
                    this.payByBeans();
                    break;
                default:
                    return;
            }
        },
        // RMB支付
        payByRMB: function (packageId) {
            console.log('RMB支付');
            var currentCombo = this.comboInfo[this.currentIndex];
            var _self = this;
            UserApi.RegisterSuperPay({userId: GLOBAL_USER_ID, packageId: currentCombo.id}, function (response) {
                if (response.code === 0) {
                    console.log(response);
                    //本地保存一下选中的会员套餐信息
                    window.localStorage.setItem('comboInfo', JSON.stringify(currentCombo));
                    window.open('/pay/caimei-hlbpay.html?pageType=2&vipRecordId=' + response.data);
                    _self.showRenewPopup = false;
                    _self.showMask = false;
                    // this.showConfirmPopup = true;
                } else {
                    CAIMEI.dialog(response.data, false);
                }
            });
        },
        // 采美豆支付
        payByBeans: function (packageId) {
            var _self = this;
            var currentPackage = _self.comboInfo[this.currentIndex];
            var popupParams = {
                content: '确认使用' + (currentPackage.price * currentPackage.proportion) + '采美豆开通' + (currentPackage.duration) + '个月会员？',
                confitmBtnText: '确认开通',
                cancelBtnText: '取消',
                closeIcon:true
            };
            CAIMEI.Popup(popupParams, function () {
                console.log('采美豆支付');
                var params = {
                    userId: GLOBAL_USER_ID,
                    packageId: currentPackage.id
                };
                UserApi.RegisterSuperByBeans(params, function (res) {
                    if (res.code) {
                        CAIMEI.dialog(res.msg, false);
                        _self._czcPushHandle(true);
                    } else {
                        CAIMEI.dialog('开通会员成功', true, function () {
                            var userInfo = JSON.parse(localStorage.getItem('userInfo'));
                            userInfo.vipFlag = 1;
                            window.localStorage.setItem('userInfo', JSON.stringify(userInfo));
                            window.location.reload();
                        })
                    }
                    _self.handleCloseRenewPopup()
                })
            },function(){
                _self._czcPushHandle(false);
            });
        },
        // 本页面友盟统计 flag 确认/取消
        _czcPushHandle: function (flag = true) {
            var arg1 = ''; // 事件类别
            var arg2 = '超级会员'; // 分类
            var arg3 = ''; // 说明
            var eventName = '';
            // 配置参数
            if(this.payBtnType === 1){
                arg1 = '开通超级会员';
                arg3 = '采美豆抵扣1';
                eventName = 'RegisterSuperPayOne';
            }else if(this.payBtnType === 2){
                arg1 = '开通超级会员';
                arg3 = '采美豆抵扣2';
                eventName = 'RegisterSuperPayTwo';
            }else{
                arg1 = '续费超级会员';
                arg3 = '采美豆抵扣';
                eventName = 'RenewSuperPay';
            }
            // 确认 or 取消
            if(flag){
                eventName += 'Confirm';
                arg3 += '-确认抵扣'
            }else{
                eventName += 'Cancel';
                arg3 += '-取消'
            }
            var pushParamsList = ['_trackEvent', arg1, arg2, arg3, '', 'Um_Event_' + eventName];
            _czc.push(pushParamsList);
            // console.log(pushParamsList); for debugger
        },

        fetchSuperPackage: function () {
            var _self = this;
            UserApi.FetchSuperPackage({}, function (response) {
                if (response.code === 0) {
                    _self.comboInfo = response.data;
                }
            })
        },
        // 初始化优惠券信息
        initCouponInfo: function (couponList) {
            var typeText = {
                0: '活动券',
                1: '品类券',
                2: '用户专享券',
                3: '店铺券',
                4: '新用户券'
            };
            return couponList.map(function (item, index) {
                item.typeText = typeText[item.couponType];
                return item;
            })
        },
        // 点击去使用跳转路由处理
        toUseCoupon: function (coupon) {
            var resultUrl = '';
            switch (coupon.couponType) {
                case 0:// 活动券跳转到商城首页 / 或者活动页（看是否指定了商品）
                    if (coupon.productType === 1) {
                        resultUrl = '/index.html';
                    } else {
                        resultUrl = '/product/product-coupon.html?couponId=' + coupon.couponId;
                    }
                    break;
                case 1:// 品类券：跳转到产品 / 仪器页
                    if (coupon.categoryType === 1) {
                        resultUrl = '/product/type-287.html';
                    } else {
                        resultUrl = '/product/type-286.html';
                    }
                    break;
                case 2:// 专享券：跳转到商城首页
                    resultUrl = '/index.html';
                    break;
                case 3:// 店铺券：跳转到店铺首页
                    resultUrl = '/supplier-' + coupon.shopId + '.html';
                debugger
                    break;
                case 4:// 新用户券：跳转到商城首页
                    resultUrl = '/index.html';
                    break;
            }
            window.open(resultUrl, '_blank');
        },

        // 领取专属优惠券
        receiveCoupon: function (id) {
            var _self = this;
            if(_self.vipInfo.vipFlag !== 1){
               return CAIMEI.dialog('您还未开通超级会员，不能领取', false);
            }
            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 () {
            if(this.comboInfo.length === 0){
                return CAIMEI.dialog('暂无可选套餐~', false);
            }
            this.fetchSuperPackage();
            this.currentIndex = 0;
            this.showMask = true;
            this.showRenewPopup = true;
        },
        // 关闭续费弹窗
        handleCloseRenewPopup: function () {
            this.showMask = false;
            this.showRenewPopup = false;
        },
        // 获取页面优惠商品
        getSvipProductList: function () {
            var _self = this;
            ProductApi.GetSvipProductList(this.listQuery, function (res) {
                if (res.code) return;
                var resultData = res.data;
                if (isPC) {
                    _self.productList = resultData.svipProductPage.results.splice(0, 5);
                } else {
                    _self.productList = resultData.svipProductPage.results.splice(0, 6);
                }
                setTimeout(function () {
                    $("img[data-original]").lazyload();
                });
            })
        },
        makePrice: function (product) {
            if (!product) return;
            // 普通商品
            var priceFlag = parseInt(product.priceFlag);  //商品可见度 0公开价格 1不公开价格 2仅对会员机构公开
            var userIdentity = parseInt(product.userIdentity);  //用户身份 0、个人  1、协销 2、资质机构 3、供应商 4,个人机构
            var shopID = parseInt(product.shopID); // 所属供应商id
            var originalPrice = parseFloat(product.originalPrice).toFixed(2);  //商品原价
            var price = parseFloat(product.price).toFixed(2); // 商品价格
            var priceGrade = parseInt(product.priceGrade); // 价格等级

            // 二手商品价格标识 2 ：价格详聊
            var detailTalkFlag = parseInt(detailTalkFlag);

            // 标签
            var promotions = product.promotions; // 促销标签内容
            var svipProductFlag = product.svipProductFlag; // SVIP标识 1 是 2 不是
            var isSvip = true;

            if (product.productCategory === '1') {
                // 登录后查看
                if (!GLOBAL_USER_ID) {
                    return '￥登录后查看'
                }
                if (priceFlag === 1) {
                    return '￥价格未公开'
                }
                if ((priceFlag === 2 && GLOBAL_USER_IDENTITY === 4) && GLOBAL_VIP_FLAG !== 1) {
                    return '￥会员可见'
                }
                if ((priceFlag === 3 && GLOBAL_USER_IDENTITY === 2 && GLOBAL_CLUB_TYPE!=1) || (priceFlag === 3 && GLOBAL_USER_IDENTITY === 4)) {
                    return '￥仅医美机构可见'
                }
                // 价格可见
                if ((priceFlag === 0 && userIdentity !== 3) || (GLOBAL_USER_IDENTITY === 2) || (userIdentity === 3 && GLOBAL_SHOP_ID === shopID) || GLOBAL_VIP_FLAG === 1) {
                    if (promotions || (svipProductFlag === 1 && GLOBAL_VIP_FLAG === 1)) {
                        return '<del>￥' + originalPrice + '</del>'
                    }
                    return '￥' + price;
                }
                return '<span>￥</span><span class=\"p-icon i' + priceGrade + '\"></span>'
            } else {
                // 二手商品
                if (detailTalkFlag === 2) {
                    return '￥价格详聊'
                }
                return '￥' + price;
            }
        },

        setBottomBtnsVisiable: function () {
            var _self = this;
            setTimeout(function () {
                if (isPC && _self.comboInfo.length > 0 && _self.vipInfo.vipFlag !== 1) {
                    $(window).scroll(function () {
                        var vipPackage = document.querySelector('#vipPackage').getBoundingClientRect();
                        var memberPage = document.querySelector('#memberPage').getBoundingClientRect();
                        var clientHeight = $(window).height();
                        if(vipPackage.bottom < 185 ){
                            _self.showBottomBtns = true;
                        }
                        if (clientHeight - memberPage.bottom > 104) {
                            _self.showBottomBtns = true;
                            $('#pay-amount-bottom').addClass('absolute');
                        } else {
                            $('#pay-amount-bottom').removeClass('absolute');
                            if (vipPackage.bottom > 185) {
                                _self.showBottomBtns = false;
                            }
                        }
                    })
                }
            },200)
        }
    }
});