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

<link rel="stylesheet" href="/assets/libs/element-ui/index.css">
<link rel="stylesheet" href="/assets/dist/component/main.css">
<link rel="stylesheet" href="/assets/css/tuwen.css" />
<style type="text/css">
	.img_txt_add_but:hover,.img_txt_add_but:active,.img_txt_add_but:focus,
	.textarea_txt_add_but:hover,.textarea_txt_add_but:active,.textarea_txt_add_but:focus{
		color: #1581ff
	}
	.textarea_txt_main,
	.textarea_txt_box{
		overflow: hidden;
	}
	.textarea_txt_box{
	}
	.textarea_txt_box textarea{
		display: block;
		margin: 0;
		padding: 10px;
		width: 100%;
		height: 200px;
		font-size: 14px;
		line-height: 1.4;
		outline: none;
		border: 1px solid #ccc;
		resize: none;
	}
	.textarea_txt_but_box{
		overflow: hidden;
		padding: 10px 0;
	}

	.textarea_txt_but_box a{
		float: left;
		padding:  0 8px;
		margin-right: 10px;
		height: 30px;
		background-color: #f60;
		font-size: 14px;
		color: #fff;
		line-height: 30px;
	}
	.textarea_txt_error{
		overflow: hidden;
		padding: 10px 0 0;
	}
	.textarea_txt_error strong{
		float: left;
		height: 24px;
		color: #f60;
		font-size: 14px;
		font-weight: normal;
		line-height: 24px;
	}
	.textarea_txt_error span{
		float: right;
		height: 24px;
		color: #f60;
		font-size: 14px;
		font-weight: normal;
		line-height: 24px;
	}
	.switch_txt_but{
		display: block;
		height: 40px;
		width: 180px;
		background-color: #f60;
		color: #fff;
		font-size: 14px;
		text-align: center;
		line-height: 40px;
		border-radius: 3px;
	}
	.img_txt_url{
		overflow: hidden;
		padding: 20px 0;
		background-color: #fff;
	}
	.img_txt_url ul{
		display: block;
	}
	.img_txt_url li{
		position: relative;
		left: 0;
		top: 0;
		height: 50px;
	}
	.img_txt_url p{
		overflow: hidden;
		padding: 0 20px;
		height: 50px;
		font-size: 14px;
		text-align: left;
		color: #3292e0;
		line-height: 50px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.img_txt_tip_box{
		visibility: hidden;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		padding: 15px 0;
		background-color: rgba(0,0,0,.6);
		text-align: center;
	}
	.img_txt_url li:hover .img_txt_tip_box{
		visibility: visible;
	}
	.img_txt_tip_box i{
		overflow: hidden;
		display: inline-block;
		margin: 0 10px;
		height: 20px;
		width: 20px;
		font-size: 14px;
		color: #fff;
		text-align: center;
		line-height: 20px;
		border-radius: 20px;
		cursor: pointer;
	}
	.img_txt_tip_box i:hover{
		background-color: #1581ff;
	}
	.anticon_edit_box{
		overflow: hidden;
		padding: 20px;
		width: 520px;
		height: 120px;
	}
	.anticon_edit_select_tit_box,
	.anticon_edit_input_tit_box{
		margin: 10px 0;
		height: 30px;
	}

	.anticon_edit_select_tit_box strong,
	.anticon_edit_input_tit_box strong{
		float: left;
		height: 30px;
		margin-right: 10px;
		white-space: nowrap;
		font-weight: normal;
		font-size: 14px;
		color: #666;
		line-height: 30px;
	}
	.anticon_edit_select_tit_box p{
		overflow: hidden;
		float: left;
		margin-right: 20px;
		height: 30px;
		width: 250px;
		font-size: 14px;
		color: #666;
		line-height: 30px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.anticon_edit_select_tit_box a{
		overflow: hidden;
		float: left;
		margin-top: 4px;
		width: 22px;
		height: 22px;
		background-color: #f60;
		color: #fff;
		font-size: 14px;
		text-align: center;
		line-height: 22px;
		border-radius: 2px;
	}
	.anticon_edit_input_tit{
		overflow: hidden;
		padding: 4px 10px;
		float: left;
		height: 30px;
		border: 1px solid #ccc;
		width: 360px;
		box-sizing: border-box;
		border-radius: 2px;
	}
	.anticon_edit_input_tit input{
		margin: 0;
		padding: 0;
		border: 0;
		outline: none;
		display: block;
		height: 20px;
		width: 100%;
		font-size: 14px;
		color: #666;
	}
	.wxb-card-item{
		padding-bottom: 0;
	}
	.layui-layer-fast .layui-layer-btn .layui-layer-btn0{
		background-color: red!important;
		border-color: red!important;
	}
	.layui_txt{
		padding:20px;
		height:100%;
		width:100%;
		color:#000;
		text-align: left;
		line-height: 24px;
	}
	#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="">
    <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" id="group-type-news" {if condition="$addtype != 'typeimg' "}style="display: none"{/if}>
			<label class="control-label col-xs-12 col-sm-2">消息内容:</label>
			<div class="col-sm-5 new-template-wrap">
				<div class="img_txt_box">
					<div class="img_txt_list">
						<div class="wxb-card-list-scroll"></div>
					</div>
					<a href="javascript:;" class="img_txt_add_but"><i class="fa fa-plus-square-o"></i> 添加图文</a>
					<input type="hidden" name="row[message_json]" class="img_txt_hidden_input">
				</div>
			</div>
		</div>
		<!--图文消息列表  end-->
		<div class="form-group group-type" id="group-type-news_txt" {if condition="$addtype == 'typeimg' "}style="display: none"{/if}>
			<label class="control-label col-xs-12 col-sm-2">消息内容:</label>
			<div class="col-sm-5 new-template-wrap">
				<div class="img_txt_box">
					<div class="img_txt_list">
					</div>
					<a href="javascript:;" class="textarea_txt_add_but"><i class="fa fa-plus-square-o"></i> 添加消息</a>
					<input type="hidden" name="row[message_text]" class="textarea_txt_hidden_input">
				</div>
			</div>
		</div>
		<input type="hidden" name="row[message_type]" class="msg_type" {if condition="$addtype == 'typeimg' "} value="0" {else} value="1" {/if}>
		<!--文本消息框 end-->
	<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="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>
	<input type="hidden" name="row[is_save_media]" class="js_is_save_media">

    <div class="form-group" style="padding-bottom: 80px;">
        <div class="col-xs-2"></div>
        <div class="col-xs-12 col-sm-8 btn_save_media_but">
            <button type="button" class="btn" onclick="window.history.go(-1)">取消</button>
            <button type="submit" class="btn btn-success btn-info" data-save-val="0">仅发送</button>
            <!--<button type="submit" class="btn btn-success btn-danger" data-save-val="1">发送且保存至素材库</button>-->
        </div>
    </div>
</form>
<div id="title-select">
	<title-select :select="select" title="选择标题" bind=".anticon_edit_select_tit_box_in"></title-select>
</div>
<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{
		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{
		margin-bottom: 20px;
		padding: 20px;
		width: 320px;
		background-color: #f1f1f1;
		box-sizing: border-box;
	}
	.img_txt_box *,
	.img_txt_box{
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.img_txt_list{
	}
	.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,
	.img_txt_edit_book,
	.img_txt_edit_card_o,
	.img_txt_edit_bookmark_o{
		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,
	.textarea_txt_add_but{
		display: block;
		height: 40px;
		font-size: 16px;
		color: #1581ff;
		text-align: center;
		line-height: 40px;
	}
	.img_txt_add_but i,
	.textarea_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;
	}
	.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;
	}
</style>
<script>
	var canedit = false;
    var datas = {};
</script>