lolbox.duowan.com/mbox/page/hero/js/index.js

import Vue from 'vue';
import lib from 'lib';

export default {
    data() {
        return {
            heroData : {},
            heroMetaData:{},
            rolesCH : [],
            heroMetaInfo:{}
        }
    },
    mounted() {
        this.getHeroMetaData();
        this.getHeroData();
    },
    beforeDestroy() {
    },
    methods: {
        /**获取英雄数据 */
        getHeroData(){
            let self = this,
                url =`${lib.apiUrl}/v2/champion/?var=Ashe`;
            
            lib.get(url,ret => {
                if(ret.champion_list&&ret.champion_list[0]){
                    self.heroData = ret.champion_list[0];
                    self.formatHeroData(self.heroData);
                }
            });
        },
        formatHeroData(data){
            let rolesMap = {
                "Marksman" : "射手",
                "Support" : "辅助"
            },
                roles = data.roles;

            roles.forEach(item => {
                this.rolesCH.push(rolesMap[item]);
            })

        },
        /**获取英雄技巧、背景信息 */
        getHeroMetaData(){
             let self = this,
                url =`http://static.lolbox.duowan.com/metas/champions/Ashe.js`;
            
            lib.get(url,ret => {
                if(ret&&ret.data){
                    self.heroMetaData = ret.data;
                    self.heroMetaInfo = ret.data.info;
                }
            })
        },
        /*切换导航栏*/
        switchNav(event) {
            var target = event.currentTarget,
                tab_id = $(target).attr('data-for'),
                toshow_ele = $("#" + tab_id),
                wrap = $("#h-content-wrap");

            if (tab_id == null || toshow_ele == null || $(target).hasClass("active")) return;

            $(target).closest("li").addClass("active")
                .siblings().removeClass("active");

            wrap.children(".content-section.active").removeClass("active");

            toshow_ele.addClass("active");

            this.moveUnderline($(target));
        },
        /*移动下划线至激活nav*/
        moveUnderline($ele) {

            var $underline = $('#nav_underline'),
                underline_width = $underline.width(),
                width = $ele.width(),
                left = $ele.offset().left;

            $underline.css("transform", 'translateX(' + (left + width / 2) + 'px)');

        },

        /*切换技能*/
        switchAblibity(event) {
            var $target = $(event.currentTarget),
                index = $target.index(),
                ability_wrap = $('#ability_wrap');

            if ($target.hasClass("active")) return;

            $target.addClass("active")
                .siblings().removeClass("active");

            ability_wrap.children().eq(index).addClass("active")
                .siblings().removeClass("active");
        },

        /*partenr-counter 查看更多*/
        showMorePC(event) {
            var $ele = $(event.currentTarget),
                ulist = $ele.parent().prev(),
                text = $ele.text();

            switch (text) {
                case "查看更多": ulist.slideDown("fast");
                    $ele.text("隐藏");
                    break;
                case "隐藏": ulist.slideUp("fast");
                    $ele.text("查看更多");
                    break;
                default: return;
            }

        }
    }
}