book_admin/application/admin/view/templatemessage/add.html

<style type="text/css">
	#toast-container{
		z-index: 999999999999;
	}
	.ntmw_head_box{
		height: 32px;
		margin: 0 0 10px;
	}
	.ntmw_head_select{
		float: left;
		position: relative;
		left: 0;
		top: 0;
		z-index: 100;
        padding: 0 10px;
        margin: 0 5px 0 0;
		height: 32px;
		border: 1px solid #d9d9d9;
		box-sizing: border-box;
		border-radius: 3px;
	}
	.ntmw_head_select strong{
		display: block;
		height: 100%;
		padding: 0 10px;
		overflow: hidden;
		font-weight: normal;
		font-size: 14px;
		color: #666;
		line-height: 30px;
		cursor: pointer;
	}
	.ntmw_head_select:hover ul{
		display: block;		
	}
	.ntmw_head_select ul{
		display: none;
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 31px;
		z-index: 10;
		list-style: none;
		margin: 0;
		padding: 0;
		width: 100%;
		background-color: #fff;
    	box-shadow: 0 1px 6px rgba(0,0,0,.2);
		border-radius: 3px;
	}
	.ntmw_head_select ul li{
		overflow:hidden;
		padding: 7px 8px;
		height: 30px;
		border-bottom: 1px solid #f7f7f7;
		font-size: 14px;
		color: #666;
		line-height: 16px;
		cursor: pointer;
        white-space:nowrap;
	}
	.ntmw_head_select ul li:hover,
	.ntmw_head_select ul li.hover{
		font-weight: bold;
		background-color: #f7f7f7;
	}
	.ntmw_head_select i{
		position: absolute;
		right: 10px;
		top: 10px;
		width: 10px;
		color: #666;
	}
	.ntmw_but{
		float: left;
		padding: 0 10px;
		height: 32px;
		background-color: #f5a623;
		font-size: 14px;
		color: #fff;
		cursor: pointer;
		text-align: center;
		line-height: 32px;
		border-radius: 3px;
	}
	.ntmw_main_box{
		overflow: hidden;
		padding: 20px 10px 20px 20px;
		background-color: #f7f7f7;
		border: 1px dashed #ddd;
		border-radius: 6px;
	}
	.ntmw_main_box h3{
		margin: 0;
		padding: 0;
		height: 32px;
		font-size: 16px;
		color: #666;
		line-height: 32px;
	}
	.ntmw_main_box ul{
		overflow: hidden;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.ntmw_main_box ul li{
		margin: 5px 0;
		overflow: hidden;
	}
	.ntmw_main_box ul i,
	.ntmw_main_box ul span{
		display: inline;
		vertical-align: middle;
	}
	.ntmw_main_box ul span{
		line-height: 30px;
	}
	.ntmw_main_box ul i{
		margin: 0 5px 0 0;
		font-size: 16px;
		color: #1581ff;
		cursor: pointer;
	}
	.ntmw_main_box ul strong,
	.ntmw_edit_textarea strong,
	.ntmw_edit_word_box strong,
	.ntmw_question_li span{
		padding: 2px 3px;
		font-size: 12px;
		font-weight: normal;
		border-radius: 2px;
		border: 1px solid #ffe9a7;
		background: #fffaeb;
		vertical-align: middle;
		font-family: 'PingFangSC-Regular','Microsoft YaHei',sans-serif;
	}
	.ntmw_pop_box,
	.ntmw_question_box{
		overflow: hidden;
		padding: 20px 20px 0;
	}
	.ntmw_edit_textarea_box{
		position: relative;
		overflow: hidden;
		max-width: 510px;
		height: 100px;
		border-bottom: 1px solid #e9e9e9;
		margin-bottom: 10px;
	}
	.ntmw_edit_textarea{
		height: 100px;
		line-height: 30px;
		resize: none;
		outline: none;
		border: none;
		overflow-x: hidden;
		overflow-y: auto;
		cursor: auto;
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		user-select: text;
		white-space: normal;
	}
	.nice-validator [contenteditable]{
		display: inline;
	}
	
	::-webkit-scrollbar {
		width: 5px;
		background-color: transparent
	}

	::-webkit-scrollbar-thumb {
		border-radius: 2px;
		background-color: #e1e3e4
	}

	::-webkit-scrollbar-thumb:hover {
		background-color: #e1e3e4
	}

	::-webkit-scrollbar-buttond {
		display: none
	}
	.ntmw_edit_color_box,
	.ntmw_edit_word_box{
		overflow: hidden;
		margin: 10px 0;
	}
	.ntmw_edit_color_box strong{
		font-size: 14px;
		color: #666;
		font-weight: normal;
		vertical-align:middle;
		line-height: 20px;
	}
	.ntmw_edit_color_box span{
		position: relative;
		display: inline-block;
		vertical-align: middle;
		width: 16px;
		height: 16px;
		border-radius: 4px;
		margin-right: 10px;
		cursor: pointer;
		text-align: center;
		overflow: hidden;
	}
	.ntmw_edit_word_box{
		line-height: 26px;
	}
	.ntmw_edit_word_box span,
	.ntmw_edit_word_box strong{
		font-weight: normal;
		vertical-align: middle;
		color: #666;
	}
	.ntmw_edit_word_box strong{
		margin-left: 6px;
		cursor: pointer;
	}
	.ntmw_edit_word_box i{
		margin-left: 4px;
		color: #bbb;
		font-size: 16px;
		cursor: pointer;
	}
	.ntmw_question_li{
		overflow: hidden;	
		font-size: 12px;
		color: #666;
		line-height: 26px;
	}
	.ntmw_question_box{
		border-bottom: 1px solid #e9e9e9;
	}
	.ntmw_edit_color_box .active:before{
		display: inline-block;
		font: normal normal normal 14px/1 FontAwesome;
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		content: "\f00c";
		font-size: 12px;
		color: #fff;
		text-align: center;
		line-height: 16px;
	}
	#f_url{
		width: 60%;
		display: inline-block;
		color: #1581ff;
	}
	.f_url_i_but{
		margin-left: 6px;
		display: inline-block;
		vertical-align: middle;
	}
	
	.f_url_i_but i{
		display: inline-block;
		height: 22px;
		width: 22px;
		background-color: #3292e0;
		text-align: center;
		color: #fff;
		cursor: pointer;
		line-height: 22px;
	}
	.img_txt_edit_url {
		margin-left: 6px;
	}
	.n-default .f_url .n-right{
		margin-top: 0;
		vertical-align:middle;
	}
	.n-default .f_url .msg-wrap{
		position: static;
	}
	.s_tag_footer span{
		margin-right: 20px;
	}
	a{
		opacity: .8;
	}
	a:hover{
		color: #fff;
		opacity: 1;
	}
	
	.s_tag_fans_num{
		display: inline-block;
		padding: 0 10px;
		height: 24px;
		font-size: 12px;
		color: #fff;
		background-color: #f0a233;
		border-radius: 2px;
	}
	a:active,
	a:focus {
	  outline: none;
	  text-decoration: none;
	  color: #fff;
	}
	.s_tag_fans_show .s_tag_fans_allowed{
		display: inline-block;
	}
	.s_tag_fans_show .s_tag_fans_num{
		display: none;
	}
	.s_tag_fans_allowed{
		display: none;
		padding: 0 10px;
		height: 24px;
		font-size: 12px;
		color: #fff;
		background-color: #ddd;
		cursor: not-allowed;
		border-radius: 2px;
	}
    #time_div1, #time_div2 {
        position: static !important;
    }
</style>

<form id="add-form" class="form-horizontal form-ajax" role="form" data-toggle="validator" method="POST" action="">
	<input type="hidden" name="row[id]" class="img_txt_hidde_input" value="" id="select_msg_id" />
    <div class="form-group">
        <label for="module" class="control-label col-xs-12 col-sm-2">任务名称:</label>
        <div class="col-xs-12 col-sm-8">
            <input type="text" class="form-control" id="title" name="row[title]" maxlength="20" value="" data-rule="required" />
        </div>
    </div>

    <div class="form-group group-type">
        <input type="hidden" name="row[message_html]" class="img_txt_hidde_input" value="" id="select_ntmw" />
        <input type="hidden" name="row[tpid]" class="img_txt_hidde_input" value="" id="select_ntmw_id" />
        <input type="hidden" name="row[template_id]" class="img_txt_hidde_input" value="" id="select_template_id" />
        <input type="hidden" name="row[tpname]" class="img_txt_hidde_input" value="" id="select_tpname" />
        <label class="control-label col-xs-12 col-sm-2">选择模板:</label>
        <div class="col-xs-12 col-sm-8 ">
            <div class="ntmw_head_box">
			
				<div class="ntmw_head_select">
					<i class="fa fa-angle-down"></i>
					<strong data-value="0"></strong>
					<ul>
					</ul>
				</div>
				<div class="ntmw_but">刷新模板列表</div>
				
			</div>
            <div class="s_time_txt" style="color: red">提示：模板消息同步成功后，请确保模板id和微信公众平台的模板id一致，如果不一致，请再次同步或联系商务！</div>
			<!--ntmw_head_box-->
			
			<div class="ntmw_main_box">
				<h3></h3>
				<ul>
				</ul>
			</div>
        </div>
    </div>
    <!--消息内容 end-->
	
	<div class="form-group">
        <label for="module" class="control-label col-xs-12 col-sm-2">*跳转链接:</label>
        <div class="col-xs-12 col-sm-8 f_url">
            <input type="text" class="form-control" id="f_url" name="row[url]" maxlength="250" value="" data-rule="required" />
			<div class="f_url_i_but">
				<i class="fa fa-book img_txt_edit_book"></i>
				<i class="fa fa-chain img_txt_edit_url"></i>
			</div>
        </div>
    </div>
	

    <div class="form-group">
        <label for="c-sendtime" class="control-label col-xs-12 col-sm-2">{:__('Sendtime')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-sendtime" data-rule="required" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[sendtime]" type="text" value="{:date('Y-m-d H:i:s')}">
            <div class="s_time_box">
                <span stime="600000">10分钟后</span>
                <span stime="1800000">30分钟后</span>
                <span stime="3600000">1小时后</span>
            </div>
            <div class="s_time_txt">模板消息发送对象与时间关系较大，若发送时间较晚，则可能预估送达偏差较大</div>
        </div>
    </div>

    <div class="form-group">
        <label for="status" class="control-label col-xs-12 col-sm-2">接收用户:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
                <label for="type-tag"><input id="type-tag" checked name="row[type]" type="radio" value="tag"> 按标签选择</label>
                <label for="type-all"><input id="type-all" name="row[type]" type="radio" value="all"> 全部用户</label></div>
        </div>
    </div>

    <div class="form-group group-tag-type" id="group-tag-type-tag">
        <input type="hidden"  id="usercondition" name="row[user_json]" class="img_txt_hidde_input_no" />
        <label for="c-text-content" class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">

            <div class="s_tag_box">
                <div class="s_tag_li">
                    <strong>性别：</strong>
                    <div id="sex" class="s_tag_li_list">
                        <span data-sex="-1" class="s_s_tag">不限</span>
                        <span data-sex="1">男</span>
                        <span data-sex="2">女</span>
                        <span data-sex="0">保密</span>
                    </div>
                </div>

                <div class="s_tag_li">
                    <strong>手机系统：</strong>
                    <div id="mobile_system" class="s_tag_li_list">
                        <span data-mobile_system="0" class="s_s_tag">不限</span>
                        <span data-mobile_system="1">Android系统</span>
                        <span data-mobile_system="2">iOS系统</span>
                    </div>
                    <span style="margin-left: 100px;display: block;color: grey;font-size: 12px;">*手机系统筛选条件仅针对老用户生效，新用户暂不支持该筛选条件</span>
                    <span style="margin-left: 100px;display: block;color: grey;font-size: 12px;">如客服消息针对新用户的按条件筛选发送，则手机系统筛选条件需选择不限</span>
                </div>

                <div class="s_tag_li">
                    <strong>标签：</strong>
                    <div id="ctag" class="s_tag_li_list">
                        <span data-cid="-1" class="s_s_tag">不限</span>
                    </div>
                </div>

                <div class="s_tag_li">
                    <strong>消费情况：</strong>
                    <div id="consume" class="s_tag_li_list">
                        <span data-fee="-1" class="s_s_tag">不限</span>
                        <span data-fee="1">未付费</span>
                        <span data-fee="4">已付费</span>
                        <span data-fee="2">普通付费</span>
                        <span data-fee="3">年费会员</span>
                    </div>
                </div>

                <div class="s_tag_li">
                    <strong>书币剩余：</strong>
                    <div id="kandian" class="s_tag_li_list">
                        <span data-kandian="-1"  class="s_s_tag">不限</span>
                        <span data-kandian="1">低于500</span>
                        <span data-kandian="2">低于2000</span>
                        <span data-kandian="3">2000以上</span>
                    </div>
                </div>

                <div class="s_tag_li">
                    <strong>关注时间：</strong>
<!--                    <div id="subTime" class="s_tag_li_list">-->
<!--                        <span data-week="-1" class="s_s_tag">不限</span>-->
<!--                        <span data-week="1">1周内</span>-->
<!--                        <span data-week="2">2周内</span>-->
<!--                        <span data-week="3">1月内</span>-->
<!--                        <span data-week="4">2月内</span>-->
<!--                        <span data-week="5">更早</span>-->
<!--                    </div>-->
                    <div id="subscribe_time1" class="s_tag_li_list" style="overflow: visible;height: 50px;">
                        <span data-fee="-1" class="s_s_tag">不限</span>
                        <span data-fee="6">12小时</span>
                        <span data-fee="7">24小时</span>
                        <span data-fee="8">48小时</span>
                        <span data-fee="9">7天</span>
                        <span data-fee="10">15天</span>
                        <span data-fee="">自定义时间</span><br>
                    </div>
                    <div id="subscribe_time2" class="" style="margin-bottom: 10px;display: none;">
                        <div id="time_div1" style="width: 200px;display: inline-block;"><input id="cdstarttime" data-rule="" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[sub_from]" type="text"></div>
                        <div style="display: inline-block;">~</div>
                        <div id="time_div2" style="width: 200px;display: inline-block;position: static !important"><input id="cdendtime" data-rule="" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[sub_to]" type="text"></div>
                    </div>
                </div>

                <!--<div class="s_tag_footer">-->
                    <!--<strong>符合条件的人数：</strong>-->
					<!--<span id="mustbe">约&#45;&#45;人</span>-->
					<!--<a href="javascript:;" class="s_tag_fans_num">查看粉丝数</a>-->
					<!--<div class="s_tag_fans_allowed">查看粉丝数</div>-->
                <!--</div>-->
            </div>

        </div>
    </div>
    <!-- 按标签选择 -->


    <div class="form-group">
        <label for="module" class="control-label col-xs-12 col-sm-2">测试粉丝ID:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="admin_id" type="hidden" name="row[admin_id]" value="{$admin_id}" />
            <div class="test_fans_input"><input type="text" id="userId" placeholder="请输入粉丝id" /></div>
            <a href="javascript:;" class="test_fans_but">测试粉丝</a>
            <div class="s_time_txt">设置完后，您必须先测试发送，确认ok后才能保存<br>用测试粉丝账号进入服务号菜单中的用户中心-个人中心，填写完整粉丝数字ID
                <!--<br>测试ID，需与本服务号有过48小时互动-->
            </div>
        </div>
    </div>

    <div class="form-group {:input('get.callback')?'':'hidden layer-footer'}">
        <div class="col-xs-2"></div>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">提交</button>
            <span class="s_time_txt" style="color: red">提示：必须先测试粉丝，才能够保存模板消息</span>
        </div>
    </div>
</form>
<style type="text/css">

    ::-webkit-input-placeholder{
        color:#d2d2d2;
    }
    :-moz-placeholder{
        color:#d2d2d2;
    }
    ::-moz-placeholder{
        color:#d2d2d2;
    }
    :-ms-input-placeholder{
        color:#d2d2d2;
    }


    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0;
    }

    .test_fans_input{
        float: left;
        padding: 6px 10px;
        height: 30px;
        width: 30%;
        border: 1px solid #ddd;
        box-sizing: border-box;
    }
    .test_fans_input input{
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        border: 0;
        color: #666;
        font-size: 14px;
        outline: none;
    }
    .test_fans_but{
        display: block;
        margin: 0 0 10px 32%;
        height: 30px;
        width: 90px;
        background-color: #f0a233;
        font-size: 14px;
        color: #fff;
        text-align: center;
        line-height: 30px;
    }


    .s_time_box{
        overflow: hidden;
    }
    .s_time_box span{
        float: left;
        margin: 6px 10px 6px 0;
        height: 24px;
        font-size: 14px;
        line-height: 24px;
        cursor: pointer;
        color: #1581ff;
    }
    .s_time_txt{
        overflow: hidden;
        margin: 0 0 10px;
        font-size: 14px;
        color: #666;
        line-height: 24px;
    }

    .s_tag_box{
        overflow: hidden;
        padding: 20px 20px 0;
        background-color: #f1f1f1;
    }
    .s_tag_li,
    .s_tag_footer{
        overflow: hidden;
    }

    .s_tag_li strong{
        float: left;
        height: 36px;
        width: 90px;
        font-size: 14px;
        color: #666;
        text-align: right;
        font-weight: normal;
        line-height: 36px;
    }
    .s_tag_li_list{
        margin-left: 100px;
        overflow: hidden;
    }

    .s_tag_li_list span{
        overflow: hidden;
        float: left;
        margin: 6px 10px 6px 0;
        padding: 0 6px;
        height: 24px;
        color: #666;
        cursor: pointer;
        line-height: 24px;
        border-radius: 2px;
    }
    .s_tag_li_list .s_s_tag{
        background-color: #1581ff;
        color: #fff;
    }

    .s_tag_footer{
        margin-top: 10px;
        padding: 10px 0;
        border-top: 1px solid #ddd;
        line-height: 24px;
    }
    .s_tag_footer strong,
    .s_tag_footer span{
        display: inline;
        height: 24px;
        width: 90px;
        font-size: 14px;
        color: #666;
        text-align: right;
        font-weight: normal;
        line-height: 36px;
    }





    .img_txt_box{
        padding: 20px;
        width: 380px;
        background-color: #f1f1f1;
        box-sizing: border-box;
    }
    .img_txt_list{
        padding: 10px 0;
        background-color: #fff;
    }
    .img_txt_list > div:last-child{
        border-bottom: 0;
    }
    .img_txt_one{
        padding: 0 20px 10px;
        border-bottom: 1px solid #e9e9e9;
    }
    .img_txt_one_tit{
        overflow: hidden;
        margin-bottom: 10px;
        border-bottom: 1px solid #e9e9e9;
        cursor: pointer;
    }
    .img_txt_one_tit i,
    .img_txt_li_txt i{
        float: right;
        height: 22px;
        width: 22px;
        background-color: #3292e0;
        text-align: center;
        color: #fff;
        cursor: pointer;
        line-height: 22px;
    }
    .img_txt_one_h3,
    .img_txt_li_h3,
    .img_txt_one_url,
    .img_txt_li_url{
        overflow: hidden;
        margin: 0 26px 0 0;
        padding: 0 0 4px 0;
        font-size: 14px;
        color: rgba(0,0,0,0.6);
        line-height: 22px;
    }
    .img_txt_one_url,
    .img_txt_li_url{
        margin: 0 60px 0 0;
    }
    .img_txt_edit_url{
        margin-left: 6px;
    }
    .img_txt_li_h3{
        margin-bottom: 8px;
        height: 44px;
    }
    .img_txt_one_h3 input,
    .img_txt_li_h3 input,
    .img_txt_one_url input,
    .img_txt_li_url input{
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        width: 100%;
        height: 22px;
        font-size: 14px;
        color: rgba(0,0,0,0.6);
        outline: none;
    }
    .img_txt_one_url input,
    .img_txt_li_url input{
        color: #1581ff;
    }
    .img_txt_one_img{
        overflow: hidden;
        cursor: pointer;
    }
    .img_txt_one_img img{
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        width:100%;
    }

    .img_txt_li{
        position: relative;
        left: 0;
        top: 0;
        overflow: hidden;
        padding: 10px 20px;
        border-bottom: 1px solid #e9e9e9;
    }
    .img_txt_li_img{
        overflow: hidden;
        float: right;
        height: 78px;
        width: 78px;
    }
    .img_txt_li_img img{
        display: block;
        width: 78px;
        height: 78px;
    }
    .img_txt_li_txt{
        position: relative;
        left: 0;
        top: 0;
        margin: 0 88px 0 0;
        overflow: hidden;
    }
    .img_txt_li_txt a,
    .img_txt_one_tit a{
        display: block;
        overflow: hidden;
        padding: 3px 0;
        height: 26px;
        font-size: 14px;
        color: #1581ff;
        line-height: 20px;
        white-space: normal;
        word-break: break-all;
        word-wrap: break-word;
        box-sizing: border-box;
    }

    .img_txt_add_but{
        display: block;
        margin-top: 20px;
        height: 40px;
        font-size: 16px;
        color: #1581ff;
        text-align: center;
        line-height: 40px;
    }
    .img_txt_add_but i{
        font-size: 16px;
        vertical-align: middle;
    }
    .img_txt_remvoe{
        display: none;
        position: absolute;
        right: 0;
        bottom: 0;
        height: 36px;
        width: 36px;
        cursor: pointer;
    }
    .img_txt_li:hover .img_txt_remvoe{
        display: block;
    }
    .img_txt_remvoe:before {
        content: "";
        width: 0;
        height: 0;
        overflow: hidden;
        border: 18px solid transparent;
        border-bottom-color: #d0021b;
        border-right-color: #d0021b;
        _border-bottom-style: solid;
        _border-right-style: solid;
        position: absolute;
        left: 0;
        top: 0;
    }
    .img_txt_remvoe:after {
        content: "\f1f8";
        position: absolute;
        right: 2px;
        bottom: 2px;
        color: #fff;
        font-size: 16px;
    }
</style>
<script>
    var datas = {};
	var canedit = false;
</script>