onepage/tm/template_dir/events_survey_underway.html

<{include file="header.html"}>
<{include file="nav.html"}>
<link rel="stylesheet" type="text/css" href="<{$web_cfg.cdn}>/public/static/css/??swiper.min.css,swiper.animate.min.css" />
<script src="<{$web_cfg.cdn}>/public/static/js/??swiper.jquery.min.js,swiper.animate.min.js"></script>

<style>
.mask {background-color: #fff;height: 100%;opacity: 0.5;position: absolute;width: 100%;display:none;
</style>

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

<div class="wrapper clear">
	<div class="v_ques_title">
    	<div class="article_title center"><{$surveyInfo.events_name}></div>
    </div>
    
    <div class="clear">
	
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<{assign var=count value=$surveyInfo.survery_question|@count }>
			<{foreach from=$surveyInfo.survery_question item=survery name=survery}>
			<{if $survery.type == 'img'}>
			<div class="swiper-slide">
				<div class="h3_title"><{$smarty.foreach.survery.iteration}>/<{$count}></div>
				<div class="article_content"><{$survery.question}></div>
				
				
				<div class="vote_show_box ques_img_box clear ques_cell" style="display:block">
				    <div class="vote_cell_row clear">
				        <div class="vote_item_show clear">
				        	<{foreach from=$survery.answer item=answer}>
				            <dl class="vote_item">
				                <dt>
				                    <img src="<{$web_cfg.cdn}>/public/static/img/ques_img_bg.jpg">
				                    <div class="vote_img_thumb" style="background-image:url(<{$answer.img_url}>);"></div>
				                    <div class="curr_icon"></div>
				                </dt>
				                <dd>
				                    <p class="vote_name"><{$answer.answer}></p>
				                </dd>
				            </dl>
				            <{/foreach}>
				        </div>
				    </div>
				    <input name="type" type="hidden" value="img">
			    	<input name="choice" type="hidden" value="<{$survery.choice}>">
			    	<{if $survery.choice}>
				    <div class="vpage_next center"><a class="submit_btn_style next">下一题</a></div>
				    <{/if}>
				</div>
			</div>
			<{else}>
			<div class="swiper-slide">
				<div class="h3_title"><{$smarty.foreach.survery.iteration}>/<{$count}></div>
				<div class="article_content"><{$survery.question}></div>
				<div class="vote_txt_box clear ques_cell" style="display:block">
				    <div class="ques_txt_box">
				    	<{foreach from=$survery.answer item=answer name=answerName}>
				        <div class="vt_cell">
				            <div class="vt_index"><span class="vt_num"><em><{$smarty.foreach.answerName.iteration}></em></span></div>
							<div class="vt_title"><span><{$answer.answer}></span></div>
				            <div class="curr_icon"></div>
				        </div>
				        <{/foreach}>
				    </div>
				    <input name="type" type="hidden" value="txt">
			    	<input name="choice" type="hidden" value="<{$survery.choice}>">
			    	<{if $survery.choice}>
				    <div class="vpage_next center"><a class="submit_btn_style next">下一题</a></div>
				    <{/if}>
				</div>
			</div>
			<{/if}>
			<{/foreach}>
			
			<div class="swiper-slide">
				<div class="ac_content">
					请认真填写您的收货地址，以便获奖后能够及时收到您的奖品，奖品发货后，我们将更新状态在“我的奖品”中。
				</div>
				
				<{include file="event_forms_template.html"}>
			</div>
			<div class="swiper-slide">
				<!--调查完成显示结果 begin-->
				<div class="ques_end_box clear" style="display:block;">
				    <p><img src="<{$web_cfg.cdn}>/public/static/img/right_icon.png"></p>
				    <p>完成<{$surveyInfo.events_name}></p>
				    <p><a href="<{$listUrl}>" class="submit_btn_style">其它活动</a></p>
				</div>
				<!--调查完成显示结果 end-->
			</div>
		</div>
	</div>
</div>

<!--公用提示背景遮罩层-->
<div class="a_cover"></div>
<div class="v_tips_box v_tips_box2" id="error_tips_box">
    <div class="v_close_btn" id="tips_close_btn"></div>
    <p class="tips_msg" id="error_msg">错误信息</p>    
</div>

<script>
var seconds = 2000;
function showErrorMsg(data_msg, isShowClose){
	$('#tips_close_btn').show();
	$('#error_msg').html(data_msg);
	if (typeof(isShowClose) == 'undefined') {
		$('#tips_close_btn').hide();
	} else {
		$('#tips_close_btn').show();
	}
	$('#error_tips_box').fadeIn(200);
    $('.a_cover').fadeIn(200);
}

KISSY.use('node, dom, cookie, json, io', function (S, Node, DOM, Cookie, JSON, IO) {
	var $ = S.all;
	var answer = {};
	//$(".swiper-container").height('100%');
	
	$("#tips_close_btn").on('click', function(){
		$(".v_tips_box,.a_cover").hide();
	});
	
	var swiper = new Swiper('.swiper-container', {
		direction : 'horizontal'
		, speed: 200
	});
	swiper.lockSwipes();
	
	// 点击文字选项
	$(".ques_txt_box .vt_cell").on('click', function () {
		var choice = $(swiper.slides[swiper.activeIndex]).all('input[name=choice]').val();
		if (choice == 1) { //多选
            if (!$(this).hasClass('vt_cell_curr')) {
                $(this).addClass('vt_cell_curr');
            } else {
                $(this).removeClass('vt_cell_curr');
            }
        } else { //单选
        	$(".ques_txt_box .vt_cell").removeClass('vt_cell_curr');
            $(this).addClass('vt_cell_curr');
            var ans = $(this).index() + 1;
            answer[swiper.activeIndex + 1] = ans;
            swiper.slideNext();
        }
	});
	
	// 点击图文选项
	$(".ques_img_box .vote_item").on('click', function () {
        var choice = $(swiper.slides[swiper.activeIndex]).all('input[name=choice]').val();
        if (choice == 1) { //多选
        	if (!$(this).hasClass('vt_cell_curr')) {
                $(this).addClass('vt_cell_curr');
            } else {
                $(this).removeClass('vt_cell_curr');
            }
        } else { //单选
        	$(".ques_img_box .vote_item").removeClass('vt_cell_curr');
        	$(this).addClass('vt_cell_curr');
            var ans = $(this).index() + 1;
            answer[swiper.activeIndex + 1] = ans;
            swiper.slideNext();
        }
    });
	
	$(".next").on('click', function () {
		var slide = $(swiper.slides[swiper.activeIndex]);
		var type = slide.all('input[name=type]').val();
		if (type == 'txt') {
			$(".ques_txt_box .vt_cell", slide).each(function (item, index) {
				if ($(item).hasClass('vt_cell_curr')) {
					var ans = index + 1;
					answer[swiper.activeIndex + 1] = !S.isUndefined(answer[swiper.activeIndex + 1]) ? answer[swiper.activeIndex + 1] + ans+',' : ans+',';
				}
			});
		}
		if (type == 'img') {
			$(".ques_img_box .vote_item", slide).each(function (item, index) {
                if ($(item).hasClass('vt_cell_curr')) {
                    var ans = index + 1;
                    answer[swiper.activeIndex + 1] = !S.isUndefined(answer[swiper.activeIndex + 1]) ? answer[swiper.activeIndex + 1] + ans+',' : ans+',';
                }
            });
		}
		swiper.slideNext();
	});
	
	IO.on("send",function(){
		showErrorMsg('<i class="fa fa-spinner fa-pulse"></i>');
		$('.a_cover').fadeIn();
	});
	IO.on("complete",function(){
		//$("#error_tips_box").stop().hide();
	});
	
	$('#common_submit_btn').on('click', function () { 
		var formData = IO.serialize('#ff');
		IO.post('<{$web_cfg.domain}>/?c=EventsSurvey&a=Submit&events_id=<{$surveyInfo.id}>&answer='+JSON.stringify(answer)
			, formData
			, function (data) {
				if (data.ok) {
					 swiper.slideNext();
					 $(".v_tips_box,.a_cover").hide();
				} else {
					showErrorMsg(data.msg, true);
				}
			}
			, 'json'
		);
		
		Cookie.remove('SURVEY_IS_UNDERWAY', null, '/');
		Cookie.remove('SURVEY_ANSWER', null, '/');
		return false;
	});
	
	//swiper.slidePrev();
	//swiper.slideNext();
});
</script>