Blame view

public/js/home/family.page.js 12.7 KB
1 2 3 4
import 'home/family.page.css';
import $ from 'yoho-jquery';
import Page from 'yoho-page';
import tip from 'plugin/tip';
zhangxiaoru authored
5 6
import yoho from 'yoho-app';
import integral from 'home/integral-paradise.hbs';
zhangxiaoru authored
7
import vipDetailInfo from 'home/vip-detail.hbs';
8
import downLoadInfo from 'home/down-load-detail.hbs';
zhangxiaoru authored
9
10
const Swiper = require('yoho-swiper2');
zhangxiaoru authored
11 12 13
const echarts = require('echarts/lib/echarts');

require('echarts/lib/chart/pie');
14 15 16 17 18 19

class FamilyIndex extends Page {
    constructor() {
        super();

        this.selector = {
zhangxiaoru authored
20
            $diaC: $('.dia-c'),
21 22 23 24
            $userAvatar: $('.user-avatar'),
            $codeSet: $('.code-set'),
            $invition: $('.invition'),
            $invitonSet: $('.inviton-set'),
zhangxiaoru authored
25 26 27
            $textarea: $('textarea'),
            integralCh: echarts.init(document.getElementById('charts')),
            chartWidth: $('.charts').width(),
zhangxiaoru authored
28 29 30
            $integralContent: $('.integral-content'),
            $contentItem: $('.content-item'),
            $close: $('.close'),
31 32 33
            $userName: $('.user-name'),
            $trendWord: $('.trend-word'),
            $wordOuter: $('.word-outer'),
34
            $bannerCenterSwiper: $('.banner-center-swiper'),
zhangxiaoru authored
35
            $back: $('.back'),
zhangxiaoru authored
36
            $vipMore: $('more'),
zhangxiaoru authored
37 38
            $trendCode: $('.trend-code'),
            $popover: $('.popover')
zhangxiaoru authored
39 40 41
        };

        this.view = {
zhangxiaoru authored
42
            integral,
43 44
            vipDetailInfo,
            downLoadInfo
45 46
        };
zhangxiaoru authored
47 48
        this.vipInfo;
49 50 51 52 53
        this.init();
    }

    init() {
        this.headIco();
zhangxiaoru authored
54
        this.integralCharts();
zhangxiaoru authored
55
        this.bindEvents();
zhangxiaoru authored
56
        this.viewVipInfo();
57 58 59
        this.initTrend();
        this.trendWordMarquee();
        this.resources();
60
        this.downLoadInfo();
张孝茹 authored
61
        this.refreshUserInfo();
zhangxiaoru authored
62 63 64 65 66 67
    }

    bindEvents() {
        this.selector.$codeSet.on('click', this.setTrendPop.bind(this));
        this.selector.$textarea.on('blur', this.saveTrendWord.bind(this));
        this.selector.integralCh.on('click', this.jump.bind(this));
68
        this.selector.$contentItem.on('click', this.showInfo.bind(this));
zhangxiaoru authored
69
        this.selector.$diaC.on('click', this.selector.$close, this.hideVipInfo.bind(this));
70
        this.selector.$back.on('click', this.goBack.bind(this));
zhangxiaoru authored
71
        this.selector.$popover.on('mousewheel touchmove', this.banSliding.bind(this));
72 73
    }
张孝茹 authored
74 75 76 77 78 79 80 81 82 83
    refreshUserInfo() {

        //  提供给app更改完个人信息之后刷新
        yoho.ready(function() {
            yoho.addNativeMethod('refreshUserInfomation', function() {
                location.href = location.href;
            });
        });
    }
84 85
    // 头像
    headIco() {
zhangxiaoru authored
86 87 88 89 90 91 92 93
        let myImage = new Image(),
            avatar;

        avatar = this.selector.$userAvatar.data('avatar');
        myImage.src = avatar;
        myImage.onload = () => {
            this.selector.$userAvatar.css('background-image', 'url(' + avatar + ')');
        };
94 95
    }
96 97 98 99 100 101 102 103 104 105 106
    // 潮流口令滚动
    trendWordMarquee() {
        let diff = $('.word-outer').scrollLeft() - $('.trend-word').eq(0).width();

        $('.word-outer').scrollLeft($('.word-outer').scrollLeft() + 1);

        if (diff > 0) {
            $('.word-outer').scrollLeft(Math.abs(diff));
        }
    }
107
    // 潮流口令初始化判断
108 109 110 111 112
    initTrend() {
        if (this.selector.$trendWord.eq(0).width() > parseInt(this.selector.$wordOuter.css('max-width'), 10)) {

            this.selector.$trendWord.width(this.selector.$trendWord.width() + 40);
zhangxiaoru authored
113
            this.selector.$wordOuter.append('<span class="trend-word">' + this.selector.$trendWord.html() + '</span>').css({  // eslint-disable-line
114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132
                width: 2 * this.selector.$trendWord.width()
            });

            this.selector.$trendWord = $('.trend-word');

            this.selector.$trendWord.addClass('rem-lin');

            setInterval(this.trendWordMarquee, 40);
        } else {
            this.selector.$trendWord = $('.trend-word');

            if (this.selector.$trendWord.length > 1) {
                this.selector.$trendWord.eq(1).remove();
            }

            this.selector.$trendWord.removeClass('rem-lin');
        }
    }
zhangxiaoru authored
133 134
    // 积分乐园图表
    integralCharts() {
zhangxiaoru authored
135 136 137 138
        this.ajax({
            type: 'GET',
            url: location.protocol + '//m.yohobuy.com/home/family/integralCharts'
        }).then(result => {
139
            if (result && !$.isEmptyObject(result)) {
zhangxiaoru authored
140 141 142 143 144 145 146 147 148 149
                result.totalHref = location.protocol + '//m.yohobuy.com/home/family/coinDetail?openby:yohobuy={"action":"go.h5","params":{"url":"' + location.protocol + '//m.yohobuy.com/home/family/coinDetail"}}', // eslint-disable-line

                this.selector.$integralContent.append(this.view.integral(result));

                this.selector.integralCh.setOption({
                    calculable: true,
                    color: result.colorList,
                    series: [
                        {
                            type: 'pie',
张孝茹 authored
150
                            radius: [this.selector.chartWidth * 3 / 10, this.selector.chartWidth * 43 / 100],
zhangxiaoru authored
151 152 153 154 155 156 157 158 159
                            roseType: 'radius',
                            center: ['50%', '50%'],
                            label: {
                                normal: false
                            },
                            data: result.list
                        }
                    ]
                });
160 161
            } else {
                $('.integral').hide();
zhangxiaoru authored
162
            }
张孝茹 authored
163
        });
zhangxiaoru authored
164 165
    }
166 167
    // 资源位初始化
    resources() {
张孝茹 authored
168
        if (this.selector.$bannerCenterSwiper.find('li').length > 0) {
169 170 171 172 173 174 175 176 177 178
            new Swiper('.banner-center-swiper', {
                pagination: '.swiper-pagination',
                lazyLoading: true,
                lazyLoadingInPrevNext: true,
                paginationClickable: true,
                autoplay: 3000
            });
        }
    }
zhangxiaoru authored
179 180 181 182 183 184 185 186 187 188 189 190
    // 查看VIP信息
    viewVipInfo() {
        this.ajax({
            type: 'GET',
            url: location.protocol + '//m.yohobuy.com/home/family/vipDetailData'
        }).then(result => {
            this.vipInfo = result;
        }).catch(() => {
            tip.show('服务异常,请稍后重试');
        });
    }
191 192
    // 下载弹窗初始页面渲染
    downLoadInfo() {
193 194 195 196 197 198 199 200 201
        let codeArr = [];

        $('.content-item').each(function() {
            codeArr.push({
                name: $(this).data('name'),
                code: $(this).data('code')
            });
        });
202 203
        this.ajax({
            type: 'GET',
204 205 206 207
            url: location.protocol + '//m.yohobuy.com/home/family/downLoadData',
            data: {
                codeArr: codeArr
            }
208 209 210 211 212 213
        }).then(result => {
            $('.yoho-family-page').append(this.view.downLoadInfo(result));

            this.selector.$downLoadDetail = $('.down-load-detail');
            this.selector.$downClose = $('.down-close');
            this.selector.$downClose.on('click', this.downClose.bind(this));
zhangxiaoru authored
214 215
            this.selector.$popover = $('.popover');
            this.selector.$popover.on('mousewheel touchmove', this.banSliding.bind(this));
张孝茹 authored
216 217
            this.selector.$copyBtn = $('.code-copy');
            this.selector.$copyBtn.on('click', this.goCopy.bind(this));
218 219 220
        });
    }
221 222 223 224 225 226 227 228 229 230 231
    // 设置潮流口令
    setTrendPop() {
        this.selector.$invition.hide();
        this.selector.$invitonSet.show();
        this.selector.$textarea.focus();
    }

    // 提交口令
    saveTrendWord() {
        let trendWord = this.selector.$textarea.val();
zhangxiaoru authored
232 233 234 235 236 237
        if (trendWord === '') {
            this.selector.$invition.show();
            this.selector.$invitonSet.hide();
            return;
        }
238 239
        this.ajax({
            type: 'GET',
zhangxiaoru authored
240
            url: location.protocol + '//m.yohobuy.com/home/family/set-trend-word',
241 242 243 244 245 246 247 248 249
            data: {
                trendWord: trendWord
            }
        }).then(result => {
            tip.show(result.message);

            if (result.code === 200) {
                this.selector.$invition.show();
                this.selector.$invitonSet.hide();
zhangxiaoru authored
250 251 252 253 254 255
                if (this.selector.$invition.find('.trend-word') > 0) {
                    this.selector.$invition.find('.trend-word').html(trendWord);
                } else {
                    this.selector.$trendCode.html('# <span class="word-outer"><span class="trend-word">' +
                        trendWord + '</span></span> #');
                }
256 257 258 259 260 261 262
                this.selector.$trendWord.css({
                    width: 'auto'
                });
                this.selector.$wordOuter.css({
                    width: 'auto'
                });
                this.initTrend();
263 264 265 266 267 268 269
            } else {
                this.selector.$textarea.focus();
            }
        }).catch(() => {
            tip.show('服务异常,请稍后重试');
        });
    }
zhangxiaoru authored
270 271 272

    // 积分图表点击跳转
    jump(params) {
273
        let href = `${location.protocol}//m.yohobuy.com/home/family/coinDetail?plateType=${params.data.plateType}`;
张孝茹 authored
274
张孝茹 authored
275
        let $linkJump = $('#link-jump');
276
张孝茹 authored
277
        if (yoho.isMarsApp || yoho.isNowApp) {
张孝茹 authored
278 279 280 281 282 283
            if (!$linkJump.length) {
                $('body').append('<a id="link-jump" href="javascript:;" style="display:none !important;"></a>');
                $linkJump = $('#link-jump');
            }

            if (yoho.isMarsApp) {
张孝茹 authored
284
张孝茹 authored
285 286 287 288 289 290 291
                href = href + '&openby:mars=' + (JSON.stringify({
                    action: 'go.h5',
                    params: {
                        url: href
                    }
                }));
            } else {
张孝茹 authored
292 293 294 295 296 297
                href = href + '&openby:yohobuy=' + (JSON.stringify({
                    action: 'go.h5',
                    params: {
                        url: href
                    }
                }));
张孝茹 authored
298 299 300 301
            }

            $linkJump.attr('href', href);
            $linkJump[0].click();
张孝茹 authored
302 303

            return false;
304 305 306
        } else {
            yoho.goH5(href);
        }
zhangxiaoru authored
307
    }
zhangxiaoru authored
308
309 310
    // 点击APP图标显示信息
    showInfo(e) {
zhangxiaoru authored
311 312 313
        let $this = $(e.currentTarget);
        let appType = $this.data('name').toLowerCase();
        let isLogin = $this.data('login');
张孝茹 authored
314
        let isNoOpen = $this.data('noopen');
zhangxiaoru authored
315
张孝茹 authored
316
        if (isLogin && !isNoOpen) {
zhangxiaoru authored
317 318 319 320 321 322 323 324
            if (this.vipInfo[appType]) {
                this.selector.$diaC.append(this.view.vipDetailInfo(this.vipInfo[appType]));
            } else {
                this.viewVipInfo();

                this.selector.$diaC.append(this.view.vipDetailInfo(this.vipInfo[appType]));
            }
325 326
            $('.vip-detail').addClass(appType);
zhangxiaoru authored
327 328 329 330 331 332 333
            if (this.selector.$userAvatar.data('avatar')) {
                $('.base .pic').css('background-image', 'url(' + this.selector.$userAvatar.data('avatar') + ')');
            }

            if (this.selector.$userName.text() !== '') {
                $('.intro .name span').text($('.user-name').text() + ',');
            }
334 335 336 337 338
        } else {
            this.selector.$downLoadDetail.removeClass('hide');

            this.selector.$downLoadDetail.find('.detail-content .' + appType).removeClass('hide');
            this.selector.$downLoadDetail.find('.detail-content .' + appType).siblings().addClass('hide');
zhangxiaoru authored
339 340 341 342 343 344
        }
    }

    // 点击关闭会员信息弹框
    hideVipInfo() {
        $('.vip-detail').remove();
张孝茹 authored
345
        $('body,.main').css({
张孝茹 authored
346 347 348 349 350 351
            'overflow-y': 'auto',
            position: 'static'
        });

        $('body').css({
            position: 'static'
张孝茹 authored
352
        });
zhangxiaoru authored
353
    }
354 355 356 357 358 359 360 361

    // 返回上一页
    goBack() {
        if (yoho.isApp) {
            yoho.invokeMethod('go.back');
        }
    }
zhangxiaoru authored
362
    // 关闭下载弹窗
363 364
    downClose() {
        this.selector.$downLoadDetail.addClass('hide');
张孝茹 authored
365
        $('body,.main').css({
张孝茹 authored
366 367
            'overflow-y': 'auto',
            position: 'static'
张孝茹 authored
368
        });
369
    }
zhangxiaoru authored
370 371

    // 弹窗出现禁止滑动
张孝茹 authored
372 373 374 375
    banSliding() {
        $('body,.main').css({
            'overflow-y': 'hidden'
        });
张孝茹 authored
376 377 378 379

        $('body').css({
            position: 'fixed'
        });
zhangxiaoru authored
380
    }
张孝茹 authored
381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397

    // 复制公众号
    goCopy(e) {
        let $this = $(e.currentTarget);

        if (yoho && yoho.isApp) {
            if (yoho.isYohoApp) {
                let href = location.protocol + '//m.yohobuy.com/';

                yoho.goH5(href, JSON.stringify({
                    action: 'go.copy',
                    params: {
                        text: $this.data('text'),
                        message: '复制成功'
                    }
                }));
            } else {
张孝茹 authored
398
                yoho.invokeMethod('go.copy', {text: $this.data('text'), message: '复制成功'});
张孝茹 authored
399 400 401
            }
        }
    }
402 403 404 405
}

$(() => {
    new FamilyIndex();
张孝茹 authored
406 407 408

    // 加载完 调用APP的方法 隐藏头部
    if (yoho && yoho.isApp) {
张孝茹 authored
409 410 411
        yoho.ready(function() {
            yoho.invokeMethod('yohofamily.page_success');
        });
张孝茹 authored
412
    }
413
});