<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>广告投放</title>
<link rel="stylesheet" href="../../assets/css/css.css">
<link rel="stylesheet" href="../../assets/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../../assets/css/font-awesome.min.css"/>
<link rel="stylesheet" href="../../assets/css/base.min.css"/>
<link rel="stylesheet" href="../../assets/css/platform/iconfont.css"/>
<link rel="stylesheet" href="../../assets/css/weui_toast.min.css"/>
<link rel="stylesheet" href="../../assets/lib/daterangepicker/daterangepicker.css"/>
<link rel="stylesheet" href="../../assets/theme/default/theme.min.css"/>
<link rel="stylesheet" href="../../assets/css/main.min.css"/>
<link rel="stylesheet" href="../../assets/css/viewPeriod.css"/>
<style>
#rightCon{
width:100%;
}
.table>tbody>tr>td{
border:0px;vertical-align:middle;
}
.dropdown-menu{
min-width: 295px;
}
.form-inline .form-control{
width: 150px;
}
.nav>li>a{
padding: 10px 12px;
color: #26b273;
}
.nav>li>a:hover{
color:#b6dfc9;
}
.table>thead>tr>th{
background: #f4f4f4;
border-bottom-width: 1px;
}
.btn-select{
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
.close-btn{
cursor: pointer;
}
.dropdown-menu{
max-height: 200px;
overflow: auto;
}
#category_label_list{
border: 1px solid #ddd;
font-size: 12px;
}
#category_panels .table tbody td{
overflow: visible;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
vertical-align: middle;
}
.strategy_item{
font-size: 12px;
}
.modal-label{
padding: 20px 30px;
border: 1px solid #e1e1e1;
margin-left: 102px;
margin-bottom: 20px;
display: none;
}
.pop_materiel{
background-color: #fff;
height: 40px;
line-height: 40px;
font-size: 18px;
border-bottom: 1px solid #e1e1e1;
}
.modal-dialog{
border-radius: 5px;
}
.close{
font-size: 32px;
color: #000;
cursor: pointer;
margin-right: 13px;
margin-top: 4px;
}
label{vertical-align: bottom;}
</style>
</head>
<body style="">
<div id="rightCon">
<ol class="site">
<li>营销案管理</li>
<li>新建营销案</li>
<li>新建投放任务-广告投放</li>
</ol>
<h3>广告投放</h3>
<div id="content" class="clearfix">
<form id="newAdvertiseTaskForm">
<p>
<label>任务名称：</label>
<input type="text" class="w415 caseInfo disable" disabled="disabled" id="task_name" placeholder="5万理财产品推荐用户" data-title="任务名称" maxlength="20">
</p>
<p class="mb-25">
<label>投放方式：</label>
<input type="text" class="w415 caseInfo disable" disabled="disabled" id="task_name" placeholder="广告投放" data-title="任务名称" maxlength="20">
</p>
<h4>完善投放信息</h4>
<p class="joldy mt-25 clearfix">
<label class="pull-left"><span class="star">*</span>选择触点：</label>
<input type="text" class="ft_FC w322 pull-left ml-5" readonly="readonly" id="advertiseName" placeholder="选择要投放广告的触点">
<input type="hidden" id="channel_name_val_id" data-title="投放触点">
<input type="hidden" id="channel_id">
<input type="hidden" id="appplatform">
<span class="pull-left btn-blue-noBg ml-10" data-dialog="addchannel" id="btn-addchannel">选择触点</span>
<span class="font-ze ml-10" data-toggle="modal" data-target="#myModal">查看排期</span>
<span class="font-ze ml-10 none" data-toggle="modal" data-target="#myModal">查看排期</span>
</p>
<div class="mt-25 form-group form-group-sm form-inline">
<label><span class="star">*</span>发送时间：</label>
<span id="activity-date-range" class="date-range-wrap valign-middle">
<input class="form-control" name="startTime" id="startDate" readonly="readonly"> 至
<input class="form-control" name="endTime" id="endDate" readonly="readonly">
</span>
</div>
<p class="mt-25 clearfix">
<label class="pull-left"><span class="star">*</span>圈选用户：</label>
<label class="my-radio"><input type="radio" name="a"><i></i><span>所有用户</span></label>
<label class="my-radio"><input type="radio" name="a" id="label-user1"><i></i><span>标签用户</span></label>
<label class="font-ze ml-10">计算所圈选人数</label>
</p>
<!--标签用户-->
<div class="modal-label">
<div class="">
<label class="text-left">已选标签 </label>
<div class="table-responsive" id="selected_area">
</div>
</div>
<div class="mt-20">
<ul class="nav nav-tabs mt-10" role="tablist" id="category_label_list">
</ul>
<div class="tab-content" id="category_panels">
</div>
</div>
</div>
<!--圈选用户-->
<div id="">
<div class="userLabelBox mt-20" id="userLabelBox">
<div class="labelSelectedBox">
<table>
<tbody>
<tr>
<th>
<li class="labelType"><font>已选标签:</font></li>
</th>
<td id="labelInBox">
<li class="labelNotice" style="display: inline-block;">最多选择5个系统默认标签或1个自定义标签</li>
<!--<li class="labelShow">频率1<font class='closeLabel'>x</font></li>-->
</td>
</tr>
<tr id="setCalculate">
<th></th>
<td>
<div class="calculate">计算</div>
</td>
</tr>
<tr id="selectUserNumber">
<th>
<li class="labelType"><font>圈定用户:</font></li>
</th>
<td><font class="userNumber">0</font></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--圈选结束-->
<p class="mt-25 po-re">
<div class="form-group form-group-sm form-inline mt-30">
<label><span class="star">*</span>上传物料：</label>
<div class="btn-group btn-group-sm">
<input name="" class="searchItem" style="width: 0; height: 0;padding: 0; opacity: 0;">
<button type="button" class="btn btn-default btn-select w270 ft_FC">请选择已添加物料</button>
<button type="button" class="btn btn-default dropdown-toggle btn-select-color" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li data-value="0" data-limit="1080*220"><a href="javascript:;">11111</a></li>
<li data-value="1" data-limit="842*896"><a href="javascript:;">22222</a></li>
<li data-value="2" data-limit="1080*1920"><a href="javascript:;">33333</a></li>
<li data-value="3" data-limit="1080*494"><a href="javascript:;">44444</a></li>
</ul>
<span class="btn-blue-noBg ml-10"><a class="CR_green" id="new-materiel">新建物料</a></span>
</div>
</div>
</p>
<p class="mt-25">
<label></label>
<a class="btn-green" id="saveTask" data-dialog="confirmDia">保存信息</a>
<a class="btn-blue-noBg-100 ml-30" href="javascript:;">取 消</a>
</p>
</form>
</div>
</div>
<div class="popBox" id="addchannel">
<div class="dialog-title"><label class="titleTag">选择触点</label><i class="closeMe">×</i></div>
<div class="dialogContent">
<table class="table mt-20">
<thead>
<tr>
<td width="220">触点名称</td>
<td width="70">触点类型</td>
<td>所属应用</td>
<td>创建时间</td>
</tr>
</thead>
<tbody>
<tr>
<td align="left"><label class="my-radio"><input type="radio" name="a"><i></i><span>APP-悟空分析-轮播位</span></label></td>
<td>轮播位(banner位)</td>
<td>浙江手厅</td>
<td>2016/06/11 20:25:47</td>
</tr>
<tr>
<td align="left"><label class="my-radio"><input type="radio" name="a"><i></i><span>APP-浙江手厅-开机广告</span></label></td>
<td>开机广告</td>
<td>浙江手厅</td>
<td>2016/06/11 20:25:47</td>
</tr>
</tbody>
</table>
</div>
<div class="handlerBox"><button class="ui-okBtn">确定</button> <button class="ui-cancel closeMe">取消</button></div>
</div>
<!--the popup viewPeriod-->
<div class="viewPeriod">
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title text-center" style="color: #222;">触点名称XXX排期表</h4>
</div>
<div class="modal-body">
<div class="viewPeriod">
<div class="leftBar">
<!-- <div class="up">
<em></em><span></span>
</div> -->
<div class="pointUp">
<i class="no"></i>
</div>
<ul class="lbWrap">
<div class="lbInner">
<ul class="firstLevel">
<!-- <li><span>杭研智投_Android_innersss</span></li>
<li><span>杭研智投_Android_fs</span></li>
<li><span>杭研智投_Android_fs</span></li>
<li><span>杭研智投_Android_fs</span></li>
<li><span>杭研智投_Android_fs</span></li>
<li><span>杭研智投_Android_fs</span></li>
<li><span>杭研智投_Android_fs</span></li>
<li><span>杭研智投_Android_fs</span></li>
<li><span>杭研智投_Android_fs</span></li> -->
</ul>
</div>
</ul>
<div class="pointDown">
<i class="no"></i>
</div>
<!-- <div class="down">
<em></em><span></span>
</div> -->
</div>
<div class="dateWrap">
</div>
<div class="pushArea">
<ul>
<li><i class="endIcon"></i><span>投放结束</span></li>
<li><i class="pushingIcon"></i><span>投放中</span></li>
<li>
<i class="readyIcon">
<span class="readtIcon_icon"></span>
<span class="readtIcon_text">预投放</span>
</i>
</li>
</ul>
</div>
</div>
</div>
<div class="modal-footer" style="text-align: center;">
<button type="button" class="btn btn-green" data-dismiss="modal">确认</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div>
<!---->
<div id="popMateriel" class="modal fade text-center" data-backdrop="static">
<div class="modal-dialog" style="height: 590px;">
<div class="pop_materiel">
新建物料<i class="close">×</i>
</div>
<iframe id="materiel_frame" src="materiel_add.html?shouldback=true" style="width: 100%; height: 100%;" frameborder="no"
scrolling="no"></iframe>
</div>
</div>
<script src="../../assets/lib/require.js"></script>
<script src="../../assets/dist/config.js"></script>
<script src="../../assets/lib/jquery-1.11.3.min.js"></script>
<script>require(['../../assets/js/advertising'])</script>
<script>
setInterval(function(){
if($('#label-user1').prop('checked')){
$('.modal-label')[0].style.display = 'block';
}else{
$('.modal-label')[0].style.display = 'none';
}
},500);
$('#new-materiel').on("click",function(){
$('#popMateriel').modal('show');
})
$('.close').on("click",function(){
$('#popMateriel').modal('hide');
})
</script>
<script>
require(["react","react-dom","../js/listData","MessageBox","common","bootstrap","daterangepicker"], function(React, ReactDOM,ListData,MessageBox){
var ctx = "http://192.168.170.16:8415/mock/datePicker/";
var pushEnd;
var pushing;
var pushReady;
var push = [];
var _getPushDatePicker = function(attr){
$.ajax({
url: ctx + attr,
type: 'post',
data: '' 
