lolbox.duowan.com/pcbox/frontend/js/achievement.js

/*
  @ 个人成就页面拆分逻辑 by zengfukun@foxmail.com
  @ 2016/7/29
*/

var App = {
	init: function() {
		var self = this;

		// 初始化数据
		self.yyuid	  = $.cookie('yyuid');
		self.userId   = self.Kit.getArgs('userId');
		self.zone	  = self.Kit.getArgs('gameZone');
		self.Services = 'http://api.lolbox.duowan.com/api/v2/player/'+ self.zone +'/'+ self.userId +'/achievements/';

		// 业务初始化
		self.getUserAchievement();
		self.bindEvent();
	},

	// 事件绑定
	bindEvent: function() {
		var self = this;

		// 设置称号
		$(document).on('click', '.lock-wrap li', function() {
			var id 	     = $(this).index();
			var isFinish = $(this).hasClass('finish');
			var isActive = $(this).hasClass('active');

			if ( isFinish && !isActive ) {

				// 防刷过滤
				if ( self.waiting ) return false;

				self.setUserTag(id);
			}
		})
	},

	// 获取用户个人成就
	getUserAchievement: function() {
		var self = this;

		$.ajax({
			url: self.Services,
			dataType: 'jsonp',
			data: {
				'action': 'achievement'
			},
			success: function(o,status) {
				if ( status == 'success' ) {
					var result = o.personal_achievement;

					// 模板渲染
					var template = _.template($("#achievement-tpl").html());
					$(".mod-tabs-bd").html(template({
						data: result
					}));

					// 饼图初始化
					self.renderEchart(result);
				}
			}
		});		
	},

	// 设置称号
	setUserTag: function(id) {
		var self = this; 

		// 防刷加锁
		self.waiting = true;

		$.ajax({
			url: self.Services,
			dataType: 'jsonp',
			data: { 
				'action'		: 'display',
				'display_title' : id + 1 // 后端默认0位空
			},
			success: function(o, status) {
				if ( status == 'success' ) {

					// 勋章显示
					var medalSrc = $('.lock-wrap li').eq(id).find('img').attr('src');
					$('.userMedal').attr('src', medalSrc);

					$('.lock-wrap li')
						.removeClass('active')
						.eq(id).addClass('active');

					alert('称号设置成功');

					// 防刷解锁
					setTimeout(function() {
						self.waiting = false;
					}, 2*1000);
				}else{
					alert('称号设置失败');
				}
			}
		});
	},

	// 渲染饼图
	renderEchart: function(data) {
		var self = this;

		// 三杀
		var dp1 = calcRate(data.triple_kill, data.display_num);
		$('#threeKillContainer').highcharts($.extend({}, self.highchartsOpts, {
			colors: self.defaultColors,
			series: [{
			    colorByPoint: true,
			    data: [{
			        y: dp1.all
			    }, {
			        y: dp1.num
			    }]
			}]
		}));

		// 五杀
		var dp2 = calcRate(data.penta_kill, data.display_num);
		$('#fiveKillContainer').highcharts($.extend({}, self.highchartsOpts, {
			colors: self.defaultColors,
			series: [{
			    colorByPoint: true,
			    data: [{
			        y: dp2.all
			    }, {
			        y: dp2.num
			    }]
			}]
		}));

		// 超神
		var dp3 = calcRate(data.god_like, data.display_num);
		$('#superGodContainer').highcharts($.extend({}, self.highchartsOpts, {
			colors: self.defaultColors,
			series: [{
			    colorByPoint: true,
			    data: [{
			        y: dp3.all
			    }, {
			        y: dp3.num
			    }]
			}]
		}));

		// CARRY
		var dp4 = calcRate(data.carry_num, data.display_num);
		$('#carryContainer').highcharts($.extend({}, self.highchartsOpts, {
			colors: self.defaultColors,
			series: [{
			    colorByPoint: true,
			    data: [{
			        y: dp4.all
			    }, {
			        y: dp4.num
			    }]
			}]
		}));

		// MVP
		var dp5 = calcRate(data.mvp_num, data.display_num);
		$('#mvpContainer').highcharts($.extend({}, self.highchartsOpts, {
			colors: self.defaultColors,
			series: [{
			    colorByPoint: true,
			    data: [{
			        y: dp5.all
			    }, {
			        y: dp5.num
			    }]
			}]
		}));

		// 比例换算	- 包装返回数据	
		function calcRate(num, all) {
			return {
				num: (num / all)*100 > 100 ? 100 : (num / all)*100,
				all: (num / all)*100 > 100 ? 0   : ( 100 - (num / all)*100 )
			}
		}
	}
}

// 工具箱
App.Kit = {
	getArgs: function(key) {
	    var value = location.search.match(new RegExp("[?&]" + key + "=([^&]*)(&?)", "i"));
	    return value ? decodeURIComponent(value[1]) : value;
	}
}

App.init();