onepage/tm/template_dir/events_turntable.html

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

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

<div class="wrapper clear">    
    
    
    <div class="v_hd_title clear">
        <div class="article_title center"><{$turntableData.events.events_name}></div>
        
        <!--抽奖活动内容 begin-->
        <{if !$eventsStatus}>
        <div class="luck_show" id="luck_show">        
            <div class="article_content"><{$turntableData.events.events_tips}></div>
            <div class="ac_btn_box center"><a class="submit_btn_style" id="award_btn">开始抽奖</a></div>
        </div>
        <{/if}>
        <!--抽奖活动内容 end-->
        
        <!--活动已结束提示 begin-->
        <{if $eventsStatus}>
        <div class="luck_result luck_end_tips">
            <div><img src="<{$web_cfg.cdn}>/public/static/img/error_icon.png"></div>
            <div>活动已结束！</div>
        </div>
        <{/if}>
        <!--活动已结束提示 end-->
        
        <!--抽奖loading begin-->
        <div class="luck_loading" id="luck_loading">
            <div class="luck_load_icon">
                <div class="loading_img"></div>
            </div>
        </div>
        <!--抽奖loading end-->
        
        <!--抽奖结果 begin-->
        <div class="luck_result" id="luck_result">
            <div><img src="<{$web_cfg.cdn}>/public/static/img/error_icon.png"></div>
            <div>未中奖，感谢参与</div>
        </div>
        <!--抽奖结果 end-->
    </div>
    
    <div class="v_box_w clear">
    	<{if $turntableData.events.events_hd_tips}>
        <div class="h3_title"><{$turntableData.events.events_hd_tips}></div>
        <{/if}>
        
        <div class="pro_list_box">
        	<{foreach from=$turntableData.prize item=prize name=turntable}>
        	<{if $prize.display == 1}>
        	<dl>
            	<dt>
                    <img src="<{$web_cfg.cdn}>/public/static/img/item_img.jpg">
                    <p class="img_cover" style="background-image:url(<{$prize.img_url}>);"></p>
                </dt>
                <dd>
                	<p class="pro_name"><{$prize.prize_name}></p>
                	<p class="pro_num"><{$prize.prize_num}>份</p>
                </dd>
            </dl>
            <{/if}>
            <{/foreach}>
        </div>
        
        <{if $turntableData.events.operationt_tips}>
        <div class="h3_title"><{$turntableData.events.operationt_tips}></div>
        <{/if}>
        <div class="activity_des">            
            <{$turntableData.events.events_rules}>
        </div>
        
    </div>
    
</div>
<!---->


<!--遮罩层-->
<div class="a_cover"></div>

<!--====================提示层样式5种，分别选择使用 begin===========================-->
<!--通用文字提示层-->
<div class="v_tips_box" id="vtips_1">
	<div class="v_close_btn"></div>
    <p>{{message}}</p>    
</div>

<!--通用文字提示层+按钮-->
<div class="v_tips_box v_tips_box2" id="vtips_2">
	<div class="v_close_btn"></div>
	<p>{{message}}</p>
    <p><a href="<{$listUrl}>" class="submit_btn_style">返回列表</a></p>
</div>

<!--活动结束提示+按钮-->
<div class="v_tips_box v_tips_box2" id="vtips_3">
	<div class="v_close_btn"></div>
	<p>活动已结束！</p>
    <p><a href="<{$listUrl}>" class="submit_btn_style">其它活动</a></p>
</div>


<!--领取奖品提示层+按钮-->
<div class="v_tips_box v_tips_box3" id="vtips_4">
	<div class="v_close_btn close_btn_href" url="<{$giftsUrl}>"></div>
    <div class="pro_list_box pro_list_box2 pro_list_box3">
        <dl>
            <dt>
                <img src="<{$web_cfg.cdn}>/public/static/img/item_img.jpg">
                <p class="img_cover" style="background-image:url({{img_url}});"></p>
            </dt>
            <dd>
                <p class="pro_name">{{prize_name}}</p>
            </dd>
        </dl>
    </div>
	<p class="v_gray">请点击领取奖品，并填写配送地址</p>
    <p><a class="submit_btn_style" href="<{$web_cfg.domain}>/?c=Express&lottery_data_id={{lottery_data_id}}">领取奖品</a></p>
</div>


<!--查看奖品提示层+按钮-->
<div class="v_tips_box v_tips_box3" id="vtips_5">
	<div class="v_close_btn close_btn_href"  url="<{$giftsUrl}>"></div>
    <div class="pro_list_box tips_list_box pro_list_box3">
        <dl>
            <dt><img src="{{img_url}}"></dt>
            <dd>
                <p class="pro_name">{{prize_name}}</p>
                <p class="pro_num">{{virtual_data}}</p>
            </dd>
        </dl>
    </div>
    <p><a class="submit_btn_style" href="<{$giftsUrl}>">查看奖品</a></p>
</div>

<!--====================提示层样式5种，分别选择使用 end===========================-->

<!-- 显示 -->
<div class="v_tips_box v_tips_box3" id="ks-tips"></div>

<script>

$("#award_btn").on('click', function(){
	var time = 2000;//设置抽奖loading时间
	$("#luck_show").hide();
	$("#luck_loading").show()/*.delay(time).fadeOut(0)*/;
	//$(".loading_img").css({height:"0px"}).animate({height:"70px"},time);
});

//通用弹出提示层
function v_tips_show(){
	$(".v_tips_box").fadeIn(200);
	$(".a_cover").fadeIn(200);
}

//点击关闭提示层---通用
$(".v_close_btn").live('click', function() {
	$(".v_tips_box").fadeOut(.2);
	$(".a_cover").fadeOut(.2);
});

// 点击关闭按钮
$(".close_btn_href").live('click', function() {
	var url =  $(this).attr('url');
	location.href = url;
});

KISSY.use('node, io, xtemplate, anim', function (S, Node, IO, XTemplate, Anim) {
	var $ = S.all;
	
	//视频自适应
	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);
	});
	
	var drawResult = {};
	var drawAnim = new Anim(".loading_img", {'height':'70px'}, {
		duration: 2,
		complete: function () {
			var id = setInterval(function () {
				if (!S.isUndefined(drawResult.ok)) {
					run_result_anim(drawResult);
					clearInterval(id);
				}
			}, 100);
		}
	});
	
	//点击抽奖按钮切换抽奖效果
	$("#award_btn").on('click', function () {
		drawAnim.run();
		new IO({
			type: "get"
			, url: '<{$web_cfg.domain}>/?c=EventsTurntable&a=Rotation'
			, data: {events_id: '<{$turntableData.events.id}>'}
			, success: function (data) {
				drawResult = data;
				return false;
			}
			, error: function (NULL, textStatus) {
				alert("请求服务器失败，原因:"+textStatus);
			}
			, dataType: "json"
		});
	});
	
	function run_result_anim(data) {
		if (data.ok) { //ok
			if(data.msg == 'NoPrize'){
				$("#luck_loading").hide();
				$("#luck_result").show();
			} else {
				if(data.msg.express == 1){//领奖
					var tpl = $("#vtips_4").html();
				} else {//查看奖品
					var tpl = $("#vtips_5").html();
				}
				
				var render = new XTemplate(tpl).render(data.msg);
				$("#ks-tips").html(render).fadeIn(.2);
				$(".a_cover").fadeIn(.2);
			}
			
		} else {
			if(data.msg == 'NoPrize'){
				$("#luck_loading").hide();
				$("#luck_result").show();
			} else {
				var tpl = $("#vtips_2").html();
				var render = new XTemplate(tpl).render({'message':data.msg});
				$("#ks-tips").html(render).fadeIn(.2);
				$(".a_cover").fadeIn(.2);
				$(".v_close_btn").on('click', function() {
					$(".v_tips_box").hide();
					$(".a_cover").hide();
				});
			}
		}
	}
});

//有产品列表时添加整体body背景色
$(body).addClass("bg_white");


</script>



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