onepage/tm/template_dir/events_vote.html

<{include file="header.html"}>

<!--公用标题居中显示-->
<{include file="common_header.html"}>

<!---->
<div class="wrapper" data-total-vote-num="<{$voteInfo.total_vote_num}>">
    
    
    <div class="article_title center"><{$voteInfo.events_name}></div>
    <!--公用活动说明样式-->
    <div class="article_content"><{$voteInfo.events_tips}></div>
    
    
    
    <div class="v_box_w clear">
    
        <{if $eventsStatus && $eventsStatus!='STATUS_LIMITATIONS'}>
        <{if $voteInfo.events_hd_tips}>
        <div class="h3_title"><{$voteInfo.events_hd_tips}></div>
        <{/if}>
        <!--公用活动结束提示 begin-->
        <div class="v_end_com_box">
            <div class="v_end_txt_com center">活动已结束！</div>
            <div class="center"><a href="<{$listUrl}>" class="submit_btn_style">参与更多特权活动</a></div>
        </div>
        <{/if}>
        
        <{if $voteInfo.events_hd_tips}>
        <div class="h3_title"><{$voteInfo.events_hd_tips}></div>
        <{/if}>
        
        <{if $voteInfo.vote_type == 1}>
       
        <!--<div class="vote_show_box2" id="vote_show_box2">
            <{foreach from=$voteInfo.vote item=vote}>
            <div class="radio_cell" data-voteid="<{$vote.id}>">
            <label for="radio-2-<{$vote.id}>" class="lable_div" data-voteid="<{$vote.id}>" >
                <div class="data_cell_box vote_box" data-voteid="<{$vote.id}>" >
                    <p class="dv_title dv_title_default"><{$vote.title}></p>
                    <{assign var=total_num value=$vote.num+$vote.add_num}>
                    <p class="data_show_cell"><em style="width:0px;" data-num="<{$total_num}>"></em><b><{$vote.per_num}>%</b></p>
                </div>
            </label>
            </div>
            <{/foreach}>
        </div>-->
        
        <div class="vote_txt_box clear">
        	<{foreach from=$voteInfo.vote item=vote name=votebox}>
            <div class="radio_cell" data-voteid="<{$vote.id}>">
                <label for="radio-2-<{$vote.id}>" class="lable_div" data-voteid="<{$vote.id}>" >
                <div class="vt_cell vote_box" data-voteid="<{$vote.id}>">
                    <div class="vt_index"><span class="vt_num"><em><{$smarty.foreach.votebox.iteration}></em></span></div>
                    <div class="vt_title"><span><{$vote.title}></span></div>
                    <{assign var=total_num value=$vote.num+$vote.add_num}>
                    <p class="data_show_cell vt_total_bg"><em style="width:0px;" class="vt_total_line bg_color" data-num="<{$total_num}>"></em></p>
                    <div class="vt_total_num font_color"><{$vote.per_num}>%</div>
                </div>
                </label>
            </div>
            <{/foreach}>
        </div>
        
        
        <{else}>
        <div class="vote_show_box">
            <div class="vote_cell_row clear">
            	<div class="vote_item_show clear">
                    <{foreach from=$voteInfo.vote item=vote}>
                    <dl class="vote_item">
                        <dt>
                            <img src="<{$web_cfg.cdn}>/public/static/img/vote_img_bg.jpg">
                            <div class="vote_img_thumb" style="background-image:url(<{$vote.img_url}>);"></div>
                            <{assign var=total_num value=$vote.num+$vote.add_num}>
                            <div class="vote_btn bg_color" data-voteid="<{$vote.id}>" data-num="<{$total_num}>"><span <{if  $eventsStatus=='STATUS_LIMITATIONS' || $eventsStatus=='STATUS_HAS_END'}>class="h_selected" <{/if}>></span><p class="total_num_show"><{$total_num}></p></div>
                        </dt>
                        <dd>
                            <p class="vote_name"><{$vote.title}></p>
                        </dd>
                    </dl>
                    <{/foreach}>
                </div>
            </div>
        </div>
        <{/if}>
        
        <{if $voteInfo.operationt_tips}>
        <div class="h3_title"><span><{$voteInfo.operationt_tips}></span></div>
        <{/if}>
        <!--公用活动规则样式-->
        <div class="activity_des">
            <{$voteInfo.events_rules}>
        </div>
        
        <div class="clear"></div>
        
    </div>
    
       
</div>

<!--公用提示背景遮罩层-->
<div class="a_cover"></div>

<!--vote_tips begin-->
<div class="v_tips_box" id="vote_tips_box">
    <div class="v_close_btn" id="tips_close_btn"></div>
    <p class="vote_result">投票成功</p>
</div>
<!--vote_tips end-->

<script>
var seconds = 1000;
var goUrl = '';
function go_page(){
	location.href = goUrl;
}
function authorizeRun(data_msg_url){
	$(".vote_result").html('本活动需登录后才可以参与');
	$('.tips_close_btn').show();
	$('.v_tips_box, .a_cover').fadeIn();
	goUrl= '<{$loginUrl}>';
	setInterval("go_page();",seconds+100);
}

function Percentage(num, total) { 
    return Math.round(num / total * 100);// 小数点后两位百分比
}

$("#tips_close_btn").on('click', function(){
	$(".v_tips_box,.a_cover").hide();
	if(goUrl){
		go_page();
	}
});

KISSY.use('node, io, json', function (S, Node, IO, JSON) {
	var cell_colors = JSON.parse('<{$cell_colors}>');
	
	//视频自适应
	var screenWidth = $(window).width();
	var baseWidth = 510;
	var video_scale = screenWidth / baseWidth;
	$(".video_iframe").each(function () {
		var new_width = $(this).width() * video_scale;
		$(this).width(new_width - 20);
		var new_height = $(this).height() * video_scale;
		$(this).height(new_height - 20);
	});
	
<{if $voteInfo.vote_type == 1}>
	<{if $eventsStatus}> <{*活动结束时*}>
	refreshVoteBox(false);
	
	<{else}>
	
	
	
	
	$(".lable_div").on('click', function () {
		
		var _self = $(this);
		var voteid = $(this).data('voteid');
		var total_vote_num = $('.wrapper').attr('data-total-vote-num');
		if (!voteid) {
			return false
		}
		
		IO.on("send",function(){
			showLoading();
		});
		
		IO.get('<{$web_cfg.domain}>/?c=eventsVote&a=vote'
			, {
				events_id: '<{$voteInfo.id}>',
				voteid: voteid
			}
			, function (data) {
				goUrl = '';
				if (data.ok) {
					showMsg('投票成功', function () {
						var addNum = _self.find('em').data('num') + 1;
						_self.find('em').data('num', addNum);
						total_vote_num = Number(total_vote_num) + 1;
						$('.wrapper').attr('data-total-vote-num', total_vote_num);
						refreshVoteBox(true);
					});
				} else {
					if(data.msg.url){
						authorizeRun(data.msg.url);
						return false;
					}
					showMsg(data.msg, null, function () {
						refreshVoteBox(false);
					});
				}
			}
			, 'json'
		);
	});
	
	$(".vote_btn").click(function(){
		$(this).find("span").addClass("h_selected");
		$(".vote_btn p").each(function(){
			$(this).show(600);//右侧推出显示投票数，速度可控制
		});
	});
	<{/if}>
<{else}>
	<{if $eventsStatus}> <{*活动结束时*}>
	$(".vote_btn p").each(function(){
		$(this).show(600);//右侧推出显示投票数，速度可控制
	});
	<{else}>
	$(".vote_btn").click(function () {
		
		var _self = $(this);
		var voteid = $(this).data('voteid');
		S.log(voteid);
		if (voteid == '') {
			return false
		}
		
		IO.on("send",function(){
			showLoading();
		});
		
		IO.get('<{$web_cfg.domain}>/?c=eventsVote&a=vote'
			, {
				events_id: '<{$voteInfo.id}>',
				voteid: voteid
			}
			, function (data) {
				goUrl = '';
				if (data.ok) {
					showMsg('投票成功', function () {
						_self.find("span").addClass("h_selected");
						var addNum = _self.data('num') + 1;
						_self.data('num', addNum);
						_self.find('p').text(addNum);
						$(this).find("span").addClass("h_selected");
						$(".vote_btn p").each(function(){
							$(this).show(600);//右侧推出显示投票数，速度可控制
						});
					});
				} else {
					if(data.msg.url){
						authorizeRun(data.msg.url);
						return false;
					}
					
					
					showMsg(data.msg, function () {
						$(this).find("span").addClass("h_selected");
						$(".vote_btn p").each(function(){
							$(this).show(600);//右侧推出显示投票数，速度可控制
						});
					});
				}
			}
			, 'json'
		);
	});
	<{/if}>
<{/if}>
	
	
	
	
	

	function refreshVoteBox(isHide) {
		// 隐藏cell
		if (isHide) {
			$(".data_show_cell").fadeOut();
			$(".data_show_cell em").css({width:"0px"});
		}
		
		var cell_lens = {};
		var total = 0;
		
		$(".vt_cell .vt_num").removeClass("vt_num");
		$(".vt_cell").addClass("vt_result_cell");
		
		$(".dv_title").addClass("dv_title_after");//增加投票选项点击后的样式
		$(".data_show_cell em").each(function (i) {
			var num = $(this).data('num');
			cell_lens[i] = num;
			total += num;
		});
		
		var total_vote_num = $('.wrapper').attr('data-total-vote-num');
		
		$(".data_show_cell").fadeIn();
		$(".data_show_cell em").each(function (i) {
			var perNum = Percentage(cell_lens[i], total_vote_num);
			//$(this).parent().find('b').text(perNum+'%');
			
			$(this).parent().addClass(cell_colors[i-1]);
			var len_num = (cell_lens[i] / total) * 200;
			$(this).animate({width:len_num+"px"},1000);
		});
	}
	
	function showMsg($msg, $callback) {
		$('.tips_close_btn').show();
		$('.vote_result').html($msg);
		$('.a_cover').fadeIn().delay(seconds).fadeOut();
		$('.v_tips_box').fadeIn().delay(seconds).fadeOut(function () {
			if ($callback) $callback();
		});
	}
	
	
	function showLoading() {
		$('.tips_close_btn').hide();
		$('.vote_result').html('加载中..');
		$('.v_tips_box, .a_cover').fadeIn();
	}
	
	$(".tips_close_btn").on('click', function(){
		$(".v_tips_box, .a_cover").hide();
	});
	
	//判断当前页图片加载完成loading消失
	$(".vote_show_box dl dt img").each(function(){
		$(this).load(function(){
			$(this).parent().css("background","none");
		})
	});
	
});
</script>
<{include file="bottom.html"}>