content_detail.html 12.6 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
    }
</style>
<body>
    <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>
            <!-- 描述 -->
            <div class="detail_word_wrap">
                {$data.content}
            </div>
        </div>
        <!-- 答题 -->
        <div class="detail_qust">
            <div class="quest_box quest_ans">
                <div class="quest_title">题目</div>
                {php}$question = json_decode($data['question'],true);{/php}
                {foreach name="$question" item="q"}
                    {if condition="$q['question_type'] eq 2"}
                        <div class="quest_single">
                            <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">
                                            <img src="__CDN__/assets/advertising/img/sun_06@2x.png" alt="" class="choice_img">
                                        </div>
                                        <div class="answer_word">{$o}</div>
                                    </div>
                                {/foreach}
                            </div>
                        </div>
                        {else if condition="$q.question_type eq 1"}
                        <div class="quest_single">
                            <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" placeholder="请输入答案" />
                            </div>
                        </div>
                    {/if}
                {/foreach}
                <div class="btn right_btn" onclick="submit()">提交答案</div>
                <div class="btn error_btn">重新答题(<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/index')}'">完善信息</div>
                    <div class="btn_l btn_more" onclick="window.location.href='{:url('home/index/index')}'">查看更多</div>
                </div>
            </div>
        </div>
        <!-- 弹窗 -->
        <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>
                        <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>
                        <div class="submit_suc">
                            <div class="submit_succ">答题成功</div>
                            <div class="submit_succ">恭喜您答对了全部题目</div>
                        </div>
                        <div class="submit_coupon">获得红包劵:800</div>
                        <div class="submit_more">查看更多</div>
                    </div> -->
                    <!-- 答题失败 -->
                    <div>
                        <div class="submit_suc">
                            <div class="submit_succ">答题失败</div>
                            <div class="submit_succ">很遗憾您未能正确回答全部题目</div>
                        </div>
                        <div class="submit_more" onclick="checkMore()">查看更多</div>
                    </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>
        //全局变量
        var goods_id = "{$data.id}";//用户id
        var user_id = "{$user.id}";//广告id
        var is_satisfy = "{$user.is_satisfy}";//是否满足答题条件(用户是否完善信息)
        var is_where_satisfy = 0;//是否满足商户条件

        // 观看X时间后出现题
        function init(){
            var contenTimer = null;
            let timer = "{$data.view_time*1000}";
            contenTimer = setInterval(function() {
                $(".detail_qust").show();
                $(".quest_box").removeClass("quest_ans");
                // 重新答题
                $(".error_btn").hide();
                // 未满足答题条件
                // $(".quest_condition").hide();
                $(".detail_top").css("margin-bottom", "0");
                clearInterval(contenTimer);
            }, timer);
        }

        function showQuest() {
            // 是否满足答题条件
            var satisfy = 2;
            if (satisfy == 1) {
                // 满足
                $(".quest_ans").show()
            } else {
                $(".quest_condition").show()
            }
        };

        // 判断是否完善信息
        var either = 1;
        if (either == 1) {
            // 未完善信息
            $(".btn_msg").click(function() {
                window.location.href = "personalMsg.html"
            })
        } else {
            $(".btn_msg").addClass("btn_all");
        }

        // 查看更多 完善信息
        $(".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");
            $(this).siblings().find(".choice_img").attr("src", "__CDN__/assets/advertising/img/sun_06@2x.png");
        })



        // 提交答案
        function submit() {
            $(".adv_detail").css('height', "100vh")
            $(".submit_modal").show();
            $(".submit_modal_box").show();
        }
        // 查看更多 答题错误
        function checkMore() {
            // 弹窗消失
            $(".adv_detail").css('height', "auto");
            $(".submit_modal").hide();
            $(".submit_modal_box").hide();
            // 重新答题
            $(".error_btn").show();
            $(".right_btn").hide();
            // 重新答题倒计时
            let newTime = 300;
            let newTimer = setInterval(function() {
                newTime--;
                $(".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('与服务器断开连接');
                    }
                },
                error:function(res){
                    toast('与服务器断开连接');
                }
            });
        });
    </script>
    <script>
        $(function(){
            var city = '';
            var lat = '';
            var lng = '';
            //定位当前位置
            // 地图定位
            var geolocation = new qq.maps.Geolocation("LQNBZ-F3L34-EQMUR-DILMD-LBR4Q-GDFOH", "myapp");
            var positionNum = 0;
            var options = {
                timeout: 5000
            };

            function showPosition(position) {
                alert(JSON.stringify(position));
                city = position.city; //城市
                lat = position.lat; //经度
                lng = position.lng; //纬度
                $.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('与服务器断开连接')
                    }
                })
            }

            function showErr() {
                toast('定位失败');
            };
            $(function() {
                //定位
                geolocation.getLocation(showPosition, showErr, options);
            });
        });
    </script>
</body>


</html>