作者 王晓刚
1 个管道 的构建 通过 耗费 1 秒

视频详情

... ... @@ -43,6 +43,11 @@ class Goods extends WechatBase
if(!empty($data['video'])){
$data['video'] = $domain_name.$data['video'];
}
if(!empty($data['voice'])){
foreach($data['voice'] as $key => $v){
$data[$key]['voice'] = $domain_name.$v;
}
}
if(empty($data)){
$this->error('404');
}
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>广告商城</title>
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/advDetail.css">
</head>
{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;
}
</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">康师傅老坛酸菜牛肉面全新上市</div>
<div class="detail_title">{$data.goods_name}</div>
<!-- 日期 -->
<div class="detail_date">截止日期:<i class="end_day">2019/08/16</i></div>
<div class="detail_date">截止日期:<i class="end_day">{:date('Y/m/d',$data['end_time']);}</i></div>
<!-- 音频 -->
<div class="detail_audio_wrap ">
<div class="audio_single flex_row align_center layout">
<div class="audio_style">
<audio src="img/audio.mp3" id="audio1"></audio>
<audio src="__CDN__/assets/advertising/img/audio.mp3" id="audio1"></audio>
</div>
<div class="audio_play">
<b class="b1"></b>
... ... @@ -37,127 +83,55 @@
</div>
<!-- 答题 -->
<div class="detail_qust">
<!-- 单选题 -->
<div class="quest_box">
<div class="quest_title">康师傅答题题目</div>
<div class="quest_single">
<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">
1、方面便是什么味道
{$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="img/sun_07@2x.png" alt="" class="choice_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 choice_ans">老坛酸菜牛肉面</div>
</div>
<div class="layout align_center flex_row ans_single" data-index="2">
<div class="ans_img">
<img src="img/sun_06@2x.png" alt="" class="choice_img">
</div>
<div class="answer_word">红烧牛肉鸡蛋面</div>
</div>
<div class="layout align_center flex_row ans_single" data-index="3">
<div class="ans_img">
<img src="img/sun_06@2x.png" alt="" class="choice_img">
</div>
<div class="answer_word">黑椒牛排酸菜牛肉面</div>
</div>
<div class="layout align_center flex_row ans_single" data-index="4">
<div class="ans_img">
<img src="img/sun_06@2x.png" alt="" class="choice_img">
</div>
<div class="answer_word">牛骨酸菜牛肉面</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>
<div class="quest_single">
{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">
2、方面便是什么味道
{$key+1}、{$q.question_name}
</div>
<div class="answer layout align_center flex_row">
<div class="layout align_center flex_row ans_single" data-index="5">
<div class="ans_img">
<img src="img/sun_07@2x.png" alt="" class="choice_img">
</div>
<div class="answer_word choice_ans">老坛酸菜牛肉面</div>
</div>
<div class="layout align_center flex_row ans_single" data-index="6">
<div class="ans_img">
<img src="img/sun_06@2x.png" alt="" class="choice_img">
</div>
<div class="answer_word">红烧牛肉鸡蛋面</div>
</div>
<div class="layout align_center flex_row ans_single" data-index="7">
<div class="ans_img">
<img src="img/sun_06@2x.png" alt="" class="choice_img">
</div>
<div class="answer_word">黑椒牛排酸菜牛肉面</div>
</div>
<div class="layout align_center flex_row ans_single" data-index="8">
<div class="ans_img">
<img src="img/sun_06@2x.png" alt="" class="choice_img">
</div>
<div class="answer_word">牛骨酸菜牛肉面</div>
</div>
</div>
</div>
<div class="quest_single">
<div class="question">
3、大家好才是()。
</div>
<div class="answer_fill">答案:真的好</div>
<div class="answer_fill">答案:{$q.question_answer}</div>
<div class="answer_input_box">
<input type="text" class="answer_input" placeholder="请输入答案" />
<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>
<div class="btn right_btn" onclick="submit()">提交答案</div>
<div class="btn error_btn">重新答题(<i class="new_time"></i></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 quest_condition">
<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 btn_msg">完善信息</div>
<div class="btn_l btn_more">查看更多</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 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>
... ... @@ -165,71 +139,125 @@
<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="img/sun_10@2x.png" alt="">
<img src="__CDN__/assets/advertising/img/sun_10@2x.png" alt="">
</div>
<a class="jump_a">https://www.baidu.com/</a>
<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="img/sun_05@2x.png" alt="" class="collect_img_link">
<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>
<script src="js/base.js"></script>
<script src="js/jquery.js"></script>
<script src="js/toast.js"></script>
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<script>
// 截止日期
var endDay = 212321312312; //后台时间戳
$(".end_day").text(showYear(endDay));
{include file="public/js" /}
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
$(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 audio1 = document.getElementById("audio1");
// 音频时长
let audioTime = parseInt(audio1.duration);
$(".audio_time").text(changeTime(audioTime));
$(".audio_style").click(function() {
audio1.play();
var audioTimer = setInterval(function() {
audioTime--;
if (audioTime % 2 == 0) {
$(".b3").siblings().removeClass("b_active")
} else {
$(".b1").addClass("b_active");
$(".b5").addClass("b_active");
}
if (audioTime <= 0) {
audioTime = parseInt(audio1.duration);
$(".b3").siblings().removeClass("b_active")
clearInterval(audioTimer)
var city = '';
var lat = '';
var lng = '';
//定位当前位置
/*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) {
alert('必须同意授权获取地理位置才能获得奖励哦');
}
}, 1000);
})
audio1.addEventListener("ended", function() {
$(".detail_qust").show();
$(".quest_box").removeClass("quest_ans");
// 重新答题
$(".error_btn").hide();
})
});
});
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('与服务器断开连接')
}
});
//判断商户条件是否满足
$.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){
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('与服务器断开连接')
}
},
error:function(){
toast('与服务器断开连接');
}
});
}
function showQuest(satisfy) {
// 是否满足答题条件
var satisfy = 2;
if (satisfy == 1) {
// 满足
$(".quest_ans").show()
} else {
$(".quest_condition").show()
}
function error() {
toast('定位失败');
};
//倒计时赋值
if(time > 0){
checkMore(time);
}
//视频是否播放完毕
function init(){
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");
});
}
// 判断是否完善信息
/*// 判断是否完善信息
var either = 1;
if (either == 1) {
// 未完善信息
... ... @@ -237,50 +265,163 @@
window.location.href = "personalMsg.html"
})
} else {
$(".btn_msg").addClass("btn_all")
}
$(".btn_msg").addClass("btn_all");
}*/
// 查看更多 完善信息
// 查看更多
$(".btn_more").click(function() {
window.location.href = "index.html"
window.location.href = "{:url('home/index/index')}"
})
// 选择答案
$(".ans_single").click(function() {
$(this).find(".answer_word").addClass("choice_ans");
$(this).find(".choice_img").attr("src", "img/sun_07@2x.png");
$(this).siblings().find(".answer_word").removeClass("choice_ans");
$(this).siblings().find(".choice_img").attr("src", "img/sun_06@2x.png");
})
$(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");
});
// 提交答案
function submit() {
$(".adv_detail").css('height', "100vh")
$(".submit_modal").show();
$(".submit_modal_box").show();
}
// 查看更多 答题错误
function checkMore() {
// 重新答题倒计时
let newTime = 300;
$('.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('与服务器断开连接');
}
});
}
});
// 重新答题倒计时
function checkMore(newTime=300) {
let newTimer = setInterval(function() {
newTime--;
$('.right_btn').hide();
$('.error_btn').show();
$(".new_time").text(changeTime(newTime));
// 弹窗消失
$(".adv_detail").css('height', "auto");
$(".submit_modal").hide();
$(".submit_modal_box").hide();
// 重新答题
$(".error_btn").show();
$(".right_btn").hide();
if (newTime == 0) {
clearInterval(newTimer);
window.location.reload();
}
}, 1000);
}
... ... @@ -293,52 +434,75 @@
};
// 是否收藏
var isCollect = 2;
$(".bottom_collect").click(function() {
})
if (isCollect == 1) {
// 收藏
let url = "img/sun_08@2x.png";
$(".collect_img_link").attr("src", url);
$(".bottom_collect").css("color", "#FB7A17");
} else {
let url = "img/sun_05@2x.png";
$(".collect_img_link").attr("src", url);
}
</script>
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>
// 地图定位
var geolocation = new qq.maps.Geolocation("LQNBZ-F3L34-EQMUR-DILMD-LBR4Q-GDFOH", "myapp");
var positionNum = 0;
var options = {
timeout: 5000
};
function showPosition(position) {
var city = position.city; //城市
var addr = position.addr; //详细地址
var lat = position.lat; //
var lng = position.lng; //经纬度
}
// 音频
var audio1 = document.getElementById("audio1");
// 音频时长
let audioTime = parseInt(audio1.duration);
$(".audio_time").text(changeTime(audioTime));
$(".audio_style").click(function() {
audio1.play();
var audioTimer = setInterval(function() {
audioTime--;
if (audioTime % 2 == 0) {
$(".b3").siblings().removeClass("b_active")
function showErr() {
Toast.init();
Toast.show('定位失败', 'success', null);
setTimeout(function() {
Toast.hide();
}, 20000);
};
$(function() { //定位
geolocation.getLocation(showPosition, showErr, options);
} else {
$(".b1").addClass("b_active");
$(".b5").addClass("b_active");
}
if (audioTime <= 0) {
audioTime = parseInt(audio1.duration);
$(".b3").siblings().removeClass("b_active")
clearInterval(audioTimer)
}
}, 1000);
});
audio1.addEventListener("ended", function() {
$(".quest_box").removeClass("quest_ans");
// 重新答题
$(".error_btn").hide();
})
</script>
<style>
.btn {
margin-top: 0.64rem
}
</style>
</body>
... ...