audio_detail.html 24.5 KB

原文件审查历史永久链接

<!DOCTYPE html>
<html lang="en">

{include file="public/head"/}
<link rel="stylesheet" href="__CDN__/assets/advertising/css/advDetail.css">
<style>
    .btn {
        margin-top: 0.64rem
    }
    .detail_top{
        margin-bottom: 0 !important;
    }
    .error_input{
        border: 1px solid #D12324;
        color: #D12324;
    }
    .choice_ans_error{
        color: #D12324;
    }
    body,html{
        background-color: #fff;
    }
    .detail_qust{
        background: #fff;
    }
</style>
<body>
<!-- 弹窗 -->
<div class="submit_modal"></div>
<!-- 弹窗内容 -->
<div class="submit_modal_box layout align_center justify_center">
    <!-- 提交 -->
    <div class="submit_either">
        <div class="submit_either_wrap">
            <div class="submit_wrap_title">
                提示
            </div>
            <!-- 是否提交 -->
            <div class="is_submit" style="display: none;">
                <div class="submit_sure">确认提交问题答案</div>
                <div class="submit_btn_group layout align_center justify flex_row">
                    <div class="submit_btn_cancle submit_btn_all">取消</div>
                    <div class="submit_btn_sure submit_btn_all">确认</div>
                </div>
            </div>
            <!-- 答题成功 -->
            <div class="is_success" style="display: none;">
                <div class="submit_suc">
                    <div class="submit_succ">答题成功</div>
                    <div class="submit_succ">恭喜您答对了全部题目</div>
                </div>
                <div class="submit_coupon">获得红包劵：<span class="exp">800</span></div>
                <div class="submit_more" onclick="window.location.href='{:url('home/index/index')}'">查看更多</div>
            </div>
            <!-- 答题失败 -->
            <div class="is_error" style="display: none;">
                <div class="submit_suc">
                    <div class="submit_succ">答题失败</div>
                    <div class="submit_succ">很遗憾您未能正确回答全部题目</div>
                </div>
                <div class="submit_more" onclick="window.location.href='{:url('home/index/index')}'">查看更多</div>
            </div>
        </div>
    </div>
</div>
    <div class="adv_detail clearfix">
        <!-- 详情内容 -->
        <div class="detail_top">
            <!-- 标题 -->
            <div class="detail_title">{$data.goods_name}</div>
            <!-- 日期 -->
            <div class="detail_date">截止日期：<i class="end_day">{:date('Y/m/d',$data['end_time']);}</i></div>
            <!-- 音频 -->
            {foreach name="$data.voice" item="v"}
            <div class="detail_audio_wrap">
                <div class="audio_single flex_row align_center layout">
                    <div class="audio_style">
                        <audio src="{$v}" class="audio"></audio>
                    </div>
                    <div class="audio_play">
                        <b class="b1"></b>
                        <b class="b2"></b>
                        <b class="b3"></b>
                        <b class="b4"></b>
                        <b class="b5"></b>
                    </div>
                    <div class="audio_time"></div>
                </div>
            </div>
            {/foreach}
        </div>
        <!-- 答题 -->
        <div class="detail_qust "><!--{if condition='$data.is_correct eq 0 && $data.is_answer eq 1 && $data.time > 0'}{else/}quest_ans{/if}-->
            <div class="quest_box quest_ans" style="{if condition='$data.is_correct eq 0 && $data.is_answer eq 1 && $data.time > 0'}display: block;{/if}">
                <div class="quest_title">题目</div>
                {foreach name="$data.question" item="q"}
                {if condition="$q['question_type'] eq 2"}
                <div class="quest_single question_{$key}" data-type="{$q.question_type}" data-key="{$key}">
                    <div class="question">
                        {$key+1}、{$q.question_name}
                    </div>
                    <div class="answer layout align_center flex_row">
                        {php}$option = explode(',',$q['option']);{/php}
                        {foreach name="$option" item="o"}
                        <div class="layout align_center flex_row ans_single" data-index="1">
                            <div class="ans_img">
                                {if condition="$q.answer.answer eq $o"}
                                {if condition='$q.answer.is_correct eq 0'}
                                <img src="__CDN__/assets/advertising/img/sun_09@2x.png" alt="" class="choice_img">
                                {else/}
                                <img src="__CDN__/assets/advertising/img/sun_07@2x.png" alt="" class="choice_img">
                                {/if}
                                {else/}
                                <img src="__CDN__/assets/advertising/img/sun_06@2x.png" alt="" class="choice_img">
                                {/if}
                            </div>
                            <div class="answer_word {if condition='$q.answer.answer eq $o'}{if condition='$q.answer.is_correct eq 0'}choice_ans_error{else/}choice_ans{/if}{else/}{/if}">{$o}</div>
                        </div>
                        {/foreach}
                    </div>
                </div>
                {else if condition="$q.question_type eq 1"}
                <div class="quest_single question_{$key}" data-type="{$q.question_type}" data-key="{$key}">
                    <div class="question">
                        {$key+1}、{$q.question_name}
                    </div>
                    <div class="answer_fill">答案：{$q.question_answer}</div>
                    <div class="answer_input_box">
                        <input type="text" class="answer_input {if condition='!empty($q.answer) && $q.answer.is_correct eq 0'}error_input{/if}" placeholder="请输入答案" value="{$q.answer.answer}"/>
                    </div>
                </div>
                {/if}
                {/foreach}
                <div class="btn right_btn submit">提交答案</div>
                <div class="btn error_btn" style="display: none;">重新答题（<i class="new_time"></i>）</div>
            </div>
            <!-- 未满足答题条件 -->
            <div class="quest_box {if condition='$user.is_satisfy eq 1'}quest_condition{/if}">
                <div class="quest_title">对不起，您未满足当前题目答题条件</div>
                <div class="btn_group layout align_center flex_row justify">
                    <div class="btn_l {if condition='$user.is_satisfy eq 1'}btn_all{else /}btn_msg{/if}" onclick="window.location.href='{:url('home/member/my_information')}'">完善信息</div>
                    <div class="btn_l btn_more" onclick="window.location.href='{:url('home/index/index')}'">查看更多</div>
                </div>
            </div>
        </div>
        <!-- 底部链接 -->
        <div class="detail_bottom clearfix layout  flex_row">
            <div class="bottom_link layout align_center flex_row justify_center" onclick="Jump()">
                <div class="link_img">
                    <img src="__CDN__/assets/advertising/img/sun_10@2x.png" alt="">
                </div>
                <a class="jump_a">{$data.url}</a>
            </div>
            {if condition="$data.is_collect eq 0"}
            <div class="bottom_collect layout align_center justify_center flex_diection">
                <div class="collect_img">
                    <img src="__CDN__/assets/advertising/img/sun_05@2x.png" alt="" class="collect_img_link">
                </div>
                <div>收藏</div>
            </div>
            {else/}
            <div class="bottom_collect layout align_center justify_center flex_diection" style="color:#FB7A17;">
                <div class="collect_img">
                    <img src="__CDN__/assets/advertising/img/sun_08@2x.png" alt="" class="collect_img_link">
                </div>
                <div>收藏</div>
            </div>
            {/if}
        </div>
    </div>
{include file="public/js" /}
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
    function getDuration(audio,vo) {
        setTimeout(function () {
            var duration = vo.duration;
            console.log(duration);
            if(isNaN(duration)){
                getDuration(audio,vo);
            }else{
                audio.parents('.detail_audio_wrap').find('.audio_time').text(changeTime(duration));
            }
        }, 10);
    }
    $(function(){
        //全局变量
        var goods_id = "{$data.id}";//用户id
        var user_id = "{$user.id}";//广告id
        var is_satisfy = "{$user.is_satisfy}";//是否满足答题条件（用户是否完善信息）
        var is_where_satisfy = '';//是否满足商户条件
        var time = "{$data.time}";//倒计时剩余时间


        var city = '';
        var lat = '';
        var lng = '';

        // 音频
        var audio = $(".audio");
        // 音频时长
        var begin = [];
        $(audio).each(function (key, vo) {
            getDuration(audio.eq(key),vo)
            begin.push(key);
        });
        var over = [];
        $(".audio_style").click(function() {
            var index = $('.audio_style').index(this);
            $(audio).each(function (key, vo) {
                if(key == index){
                    if(vo.currentTime == 0 || vo.currentTime == vo.duration){
                        console.log("开始");
                        audio.eq(key).parents('.detail_audio_wrap').find(".b3").siblings().removeClass("b_stop");
                        vo.play();
                        var audioTime = parseInt(vo.duration);
                        var audioTimer = setInterval(function() {
                            audioTime--;
                            if (audioTime % 2 == 0) {
                                audio.eq(key).parents('.detail_audio_wrap').find(".b3").siblings().removeClass("b_active")
                            } else {
                                audio.eq(key).parents('.detail_audio_wrap').find(".b1").addClass("b_active");
                                audio.eq(key).parents('.detail_audio_wrap').find(".b5").addClass("b_active");
                            }
                            if (audioTime <= 0) {
                                audioTime = parseInt(vo.duration);
                                audio.eq(key).parents('.detail_audio_wrap').find(".b3").siblings().removeClass("b_active");
                                clearInterval(audioTimer);
                            }
                        }, 1000);
                        vo.addEventListener("ended", function() {
                            console.log(over.indexOf(key)+"播放完毕");
                            if(over.indexOf(key) == -1){
                                over.push(key);
                            }
                            console.log(over);
                            if(over.length == begin.length && is_where_satisfy == 1 && is_satisfy == 1){
                                $(".detail_qust").removeClass("quest_ans");
                                $(".quest_box").removeClass("quest_ans");
                                $(".quest_condition").hide();
                                // 重新答题
                                $(".error_btn").hide();
                            }
                        })
                    }else{
                        console.log("暂停");
                        vo.currentTime = 0;
                        vo.pause();
                        vo.removeEventListener("ended",function(){
                            console.log(key+"结束监听");
                        });
                        // clearInterval(eval(audioTimer[key]));
                        audio.eq(key).parents('.detail_audio_wrap').find(".b3").siblings().addClass("b_stop");
                        /*var highestIntervalId = setInterval(";");
                        console.log(highestIntervalId);
                        for (var i = 0 ; i < highestIntervalId ; i++) {
                            clearInterval(i);
                        }*/
                    }
                }else{
                    vo.currentTime = 0;
                    vo.pause();
                    audio.eq(key).parents('.detail_audio_wrap').find(".b3").siblings().addClass("b_stop");
                    // clearInterval(audioTimer[key])
                    // var highestIntervalId = setInterval(";");
                    // for (var i = 0 ; i < highestIntervalId ; i++) {
                    //     clearInterval(i);
                    // }
                }
            });
        });

        //定位当前位置
        /*var geolocation = new qq.maps.Geolocation("JMPBZ-DV7WU-WT4V7-BYCU2-XG3E5-OZB7T", "广告公众号");
        var positionNum = 0;
        var options = {
            timeout: 5000
        };*/
        wx.config(
            {$jssdk}
        );
        wx.ready(function () {
            wx.getLocation({
                success: function (res) {
                    success(res);
                },
                cancel: function (res) {
                    toast('必须同意授权获取地理位置才能获得奖励哦');
                }
            });
        });

        function success(data) {
            lat = data.latitude; //经度
            lng = data.longitude; //纬度
            //保存到用户表
            $.ajax({
                url:"{:url('home/user/location')}",
                type:"POST",
                data:{'user_id':user_id,'longitude':lng,'latitude':lat},
                success:function(res){
                    if(res.code == 1){
                        toast('定位成功');
                    }else{
                        toast('定位失败');
                    }
                },
                error:function(res){
                    toast('与服务器断开连接1')
                }
            });
            //判断商户条件是否满足
            $.ajax({
                url:"{:url('home/index/distance_where')}",
                type:"POST",
                data:{'user_id':user_id,'longitude':lng,'latitude':lat,'goods_id':goods_id},
                success:function(res){
                    console.log("@@@@");
                    if(res.code == 1){
                        is_where_satisfy = res.data.is_where_satisfy;
                        if (is_satisfy == '1' && is_where_satisfy == '1') {
                            init();
                        }else{
                            $(".quest_condition").show();
                        }
                    }else{
                        toast('与服务器断开连接2');
                    }
                },
                error:function(res){
                    console.log("!!!!");
                    // toast('与服务器断开连接3');
                }
            });
        }

        function error() {
            toast('定位失败');
        };
        //倒计时赋值
        if(time > 0){
            checkMore(time);
        }
        //音频是否播放完毕
        function init(){
            if(over.length == begin.length && is_where_satisfy == 1 && is_satisfy == 1){
                $(".detail_qust").removeClass("quest_ans");
                $(".quest_box").removeClass("quest_ans");
                $(".quest_condition").hide();
                // 重新答题
                $(".error_btn").hide();
            }
            // $(".detail_qust").removeClass("quest_ans");
            // $(".quest_box").removeClass("quest_ans");
            /*
            var video = document.getElementById('vide');
            video.addEventListener("ended", function() {
                $(".quest_box").removeClass("quest_ans");
                // 重新答题
                // $(".error_btn").hide();
                // 未满足答题条件
                $(".quest_condition").hide();
                $(".detail_top").css("margin-bottom", "0");
            });
            */
        }

        // 查看更多
        $(".btn_more").click(function() {
            window.location.href = "{:url('home/index/index')}"
        });

        // 选择答案
        $(".ans_single").click(function() {
            $(this).find(".answer_word").addClass("choice_ans");
            $(this).find(".choice_img").attr("src", "__CDN__/assets/advertising/img/sun_07@2x.png");
            $(this).siblings().find(".answer_word").removeClass("choice_ans choice_ans_error");
            $(this).siblings().find(".choice_img").attr("src", "__CDN__/assets/advertising/img/sun_06@2x.png");
        });


        // 提交答案
        $('.submit').click(function(){
            console.log(123);
            var where = 1;
            var question_keys = [];
            var answers = [];
            var question = $('.quest_single');
            $(question).each(function (key, vo) {
                var obj = question.eq(key);
                var question_type = obj.attr('data-type');
                var question_key = obj.attr('data-key');
                question_keys.push(question_key);
                if(question_type == 2){
                    //选择题
                    var option = obj.find('.choice_ans').text() ? obj.find('.choice_ans').text() : '';
                    if(option == ''){
                        toast("请选择问题"+(key+1)+"选项");
                        where = 0;
                        return false;
                    }
                    answers.push(option);
                }else{
                    //填空题
                    var option = obj.find('.answer_input').val() ? obj.find('.answer_input').val() : '';
                    if(option == ''){
                        toast("请输入问题"+(key+1)+"答案");
                        where = 0;
                        return false;
                    }
                    answers.push(option);
                }
            });
            if(where == 1){
                $('body,html').addClass('notScroll');
                $(".submit_modal").show();
                $(".submit_modal_box").show();
                $(".is_submit").show();
                $(".is_success").hide();
                $(".is_error").hide();
            }
        });
        // 取消提交
        $('.submit_btn_cancle').click(function(){
            $('body,html').removeClass('notScroll');
            $(".submit_modal").hide();
            $(".submit_modal_box").hide();
        });
        // 确认提交
        $('.submit_btn_sure').click(function(){
            var where = 1;
            var question_keys = [];
            var answers = [];
            var question = $('.quest_single');
            $(question).each(function (key, vo) {
                var obj = question.eq(key);
                var question_type = obj.attr('data-type');
                var question_key = obj.attr('data-key');
                question_keys.push(question_key);
                if(question_type == 2){
                    //选择题
                    var option = obj.find('.choice_ans').text() ? obj.find('.choice_ans').text() : '';
                    if(option == ''){
                        toast("请选择问题"+(key+1)+"选项");
                        where = 0;
                        return false;
                    }
                    answers.push(option);
                }else{
                    //填空题
                    var option = obj.find('.answer_input').val() ? obj.find('.answer_input').val() : '';
                    if(option == ''){
                        toast("请输入问题"+(key+1)+"答案");
                        where = 0;
                        return false;
                    }
                    answers.push(option);
                }
            });
            if(where == 1){
                $.ajax({
                    url:"{:url('home/question/push_answer')}",
                    type:"POST",
                    data:{'question_keys':question_keys,'answers':answers,'user_id':user_id,'goods_id':goods_id},
                    success:function(res){
                        if(res.code == 1){
                            console.log(res.data.question_error.length);
                            if(res.data.question_error.length != 0){
                                $(res.data.question_error).each(function (key, vo) {
                                    var question = $(".question_"+vo+"");
                                    var question_type = question.attr('data-type');
                                    if(question_type == 2){
                                        question.find('.choice_ans').removeClass('choice_ans').prev().find('img').attr('src',"/assets/advertising/img/sun_09@2x.png");
                                    }else{
                                        question.find('.answer_input').addClass('error_input');
                                    }
                                });
                                // $(".adv_detail").css('height', "100vh");
                                $('body,html').addClass('notScroll');
                                $(".submit_modal").show();
                                $(".submit_modal_box").show();
                                $(".is_submit").hide();
                                $(".is_success").hide();
                                $(".is_error").show();
                                //倒计时
                                checkMore(res.data.resettime);
                            }else{
                                $('.exp').text(res.data.exp);
                                $('body,html').addClass('notScroll');
                                $(".submit_modal").show();
                                $(".submit_modal_box").show();
                                $(".is_submit").hide();
                                $(".is_success").show();
                                $(".is_error").hide();
                            }
                        }else{
                            $('body,html').removeClass('notScroll');
                            $(".submit_modal").hide();
                            $(".submit_modal_box").hide();
                            toast(res.msg);
                        }
                    },
                    error:function(){
                        toast('与服务器断开连接4');
                    }
                });
            }
        });
        // 重新答题倒计时
        function checkMore(newTime=300) {
            let newTimer = setInterval(function() {
                newTime--;
                $('.right_btn').hide();
                $('.error_btn').show();
                $(".new_time").text(changeTime(newTime));
                if (newTime == 0) {
                    clearInterval(newTimer);
                    window.location.reload();
                }
            }, 1000);
        }


        // 底部链接跳转
        function Jump() {
            var webSite = $(".jump_a").text();
            window.location.href = webSite;
        };

        // 是否收藏
        $(".bottom_collect").click(function() {
            var img = $('.collect_img').find('img').attr('src');
            var type = '';
            if(img == '/assets/advertising/img/sun_08@2x.png'){
                //取消收藏操作
                type = 2;
            }else if(img == '/assets/advertising/img/sun_05@2x.png'){
                //收藏操作
                type = 1;
            }
            $.ajax({
                url:"{:url('home/index/collect')}",
                type:"POST",
                data:{'type':type,'goods_id':goods_id,'user_id':user_id},
                success:function(res){
                    if(res.code == 1){
                        toast('操作成功');
                        if (type == 1) {
                            // 收藏
                            let url = "__CDN__/assets/advertising/img/sun_08@2x.png";
                            $(".collect_img_link").attr("src", url);
                            $(".bottom_collect").css("color", "#FB7A17");
                        } else {
                            let url = "__CDN__/assets/advertising/img/sun_05@2x.png";
                            $(".collect_img_link").attr("src", url);
                            $(".bottom_collect").css("color", "#BDC4CE");
                        }
                    }else{
                        toast('与服务器断开连接5');
                    }
                },
                error:function(res){
                    toast('与服务器断开连接6');
                }
            });
        });
    })
</script>
</body>


</html>