crm/app/sys/view/spellgroup/set.html

{extend name="public/layout"/} {block name="title"}拼团设置{/block} {block name="body"}
<link rel="stylesheet" href="__STATIC__/css/csspc.css">
<link rel="stylesheet" href="__STATIC__/css/font.css">
<style>
    *{box-sizing: initial;}
    .font16{font-size: 16px !important;}
    html{min-width:1100px;margin:0 auto;width:100%;height: 100%;}
    body{background: #EEEEEE;height: 100%;width:100%;color:#333;}
	.layui-fluid {
		display: block;
		box-shadow: 0 0 4px 0 #B6CADE;
		border-radius: 5px;
		margin: 15px;
		background-color: #ffffff;
	}
    .layui-card{background: #fff;}
    .rst_box_top{background: #fff;padding:0px 0px 1px;border-radius: 8px;}
    .mdt20{margin-top:20px;}
    .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after{border-bottom:4px solid #28A1FF !important;}
	.layui-card .layui-tab-brief .layui-tab-title li.layui-this {color: #28A1FF;}
    .Impact{font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;}
    .huise333{color:#333;}
    .layui-card .layui-tab-brief .layui-tab-content{padding: 0;}
    .rst_box_b_left{background: #fff;border-radius: 8px;overflow: hidden;}
    .rst_box_b_left_X{width:4px;height:18px;background: #28A1FF;border-radius: 2px;overflow: hidden;}
        
    .layui-form-item{margin-bottom:0;clear:initial;}
    input{font-size: 14px !important;}
    .mdl01_5{margin-left:1.5%;}
    .layui-form-label{width:auto;padding:5px 2px;}
    .huise999{color:#999 !important;}
    .lanse{color:#28A1FF;}
    .huise999{color:#999;}
    .rst_box_b_right_top{background: #fff;padding: 25px;overflow: hidden;border-radius: 8px;}
    @media only screen and (max-width: 1750px) {
    	.rst_box_b_left_input{width:23.5%;}
    }
    .baise{color: #fff;}
    .height28{height: 28px;}
    /*.after_x:after{content: '';width: 90%;border-top:1px dashed #87B9E0;position: absolute;top:14px;right:0;letter-spacing: 2px;opacity: .5;}*/
	.width210{width:210px;}
	.width90{width:90px;height: 40px;}
	.layui-form-label{padding: 0;}
	.sjsselect{width:100%;height:40px;}
	.label_input{text-align: right; font-size: 16px;width:210px;line-height: 46px;float:left;}
	.layui-input:focus,.layui-textarea:focus{border:1px solid #CCCCCC !important;}
	.layui-input-block input,.layui-upload-drag,.sjsselect,.layui-input:hover, .layui-textarea:hover{border:1px solid #CCCCCC !important;}
	.addImages {display: inline-block;width: 136px !important;height:136px !important;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;border: 1px dashed darkgray;background: #f8f8f8;position: relative;overflow: hidden;}
	.addImages .upload_ico{font-size: 50px;color:#28A1FF;margin-top: 25px;display: inline-block;}
	.imageDiv div {width: 100%;height: 100%;position: absolute;top: 0px;background-color: #e6e6e600;}
	.imageDiv div:hover {background-color: #e6e6e680;}
	.imageDiv div:hover i {display: block;cursor: pointer;}
	.text-detail{text-align: center;}
	.imageDiv div i{display: none;	font-size: 31px;line-height: 136px;text-align: center;}
	.radio_input{width:22px;height: 22px;vertical-align: -28%;}
	.radio_inputs{width:22px;height: 22px;vertical-align: -28%;}
	.layui-input, .layui-select{height: 40px;}
	.rst_box_b{background: #fff;border-radius: 8px;padding: 25px 0;}
	.rst_k{width:17px;height: 17px;vertical-align: -5%;}
	.rst_k01{background: #28A1FF;}
	.rst_k02{background: #ECECEC;}
	.rst_box_b_left_input{width:290px;height:38px;border:1px solid #ECECEC;}
    .rst_box_b_left_input select{display: block;height:46px;width: 100%;box-sizing: border-box;}
    .keywords{width:100%;height: 100%;}
    .searchIco{right:5%;font-size:24px;color:#28A1FF;top:8%; text-align: center;line-height: 38px;cursor: pointer;}
    .layui-progress-big, .layui-progress-big .layui-progress-bar{height: 12px;line-height: 12px;}
    .jctext{bottom:-15px;right:0;color:#28A1FF;}
    .layui-table-cell{height: 36px;line-height: 36px;}
    .zjctext{top:0;right:-20px;color:#999;}
    .h40{height: 40px;}
    .jl_input{display: none;}
    .layui-tab-title .layui-this:after{width: 60%;left:20%;}
</style>
<body> 
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title rst_box_top">
                    <li class="layui-this font14">进行中的团</li>
					{auth:check name="spellgroup/addSave"}
                    <li class="font14 layui-tjbtn">拼团设置</li>
					{/auth:check}
                </ul>
                <div class="layui-tab-content mdt20">
                    <div class="layui-tab-item layui-show">
                        <div class="rst_box_b mdt20">
                            <div class="width96_ wauto">
                            	<div class="layui-form">
                            		<div class="width100_">
                            			<div class="wleft lh46">
                            				<p class="rst_k01 rst_k ids"></p>
                            				<p class="font16 ids mdl03 huise999" >拼团人数</p>
                            				<p class="rst_k02 mdl20 rst_k ids"></p>
                            				<p class="font16 ids mdl03 huise999">成团人数</p>
                            			</div>
                            			<div class="wright width70_">
                            				<div class="layui-form-item wright mdl01_5 wpsr rst_box_b_left_input">
									            <div class="layui-input-block mdl0 pdl12 height100_">
									              <input style="border:0 !important;padding-left: 0;" type="text" name="keyword" required placeholder="请输入关键字" autocomplete="off" class="layui-input keywords"  id="keyword">
									            </div>
									            <i class="fa fa-search searchIco wpsa ds" aria-hidden="true" lay-submit lay-filter="LAY-user-front-search"></i>
									        </div>
                            				<div class="layui-form-item" style="width: 200px;float: right;">
									            <div class="layui-input-block mdl0">
									                <select name="team_num" class="pdl12" id='designer_id'>
									                    <option value="">请选择团队类型</option>
			                                    		<option value="2">2人团</option>
			                                    		<option value="3">3人团</option>
			                                    		<option value="4">4人团</option>
			                                    		<option value="5">5人团</option>
									                </select> 
									            </div>
									        </div>
                            			</div>
                            		</div>
                            		<div class="clear"></div>
                            	</div>
                            	
                            	<!--2-->
                            	<div class="mdt20">
                            		<table id="spellgroup" lay-filter="spellgroup"></table>
                            	</div>
                            	<!--2-->
                            </div>
                        </div>

                    </div>
                    <div class="layui-tab-item" style="height:90vh;">
            			<div class="rst_box_b_left width100_ pdtb25">
                            <div class="width96_ wauto">
                            	<div class="woverflow lh28 wpsr after_x">
                                    <p class="rst_box_b_left_X mdt06 wleft"></p>
                                    <p class="wleft font18 lanse textb mdl10">基础设置：</p>
                                </div>
                            	<div class="mdt30">
                            		<form action="">
	                            		<div class="layui-form-item woverflow">
											<label class="layui-form-label label_input"><i style="color:red;">*</i> 客户拼团拉人时长：</label>
								            <div class="layui-input-block wleft mdl20">
								              <input type="number" name="hour" required  lay-verify="required" value="{$data.hour}" autocomplete="off" min="1" max="9999" class="layui-input wleft width90">
								              <p class="wleft mdl10 lh46 font20 huise333">小时</p>
								            </div>
										</div>
										<div class="layui-form-item mdt30 woverflow">
											<label class="layui-form-label label_input"><i style="color:red;">*</i> 拼团上限：</label>
											<div class="layui-input-block wleft mdl20" style="width:290px;">
												<select name="number" class="sjsselect">
													<option value="2" {eq name="$data.number" value="2"}selected{/eq}>2人</option>
													<option value="3" {eq name="$data.number" value="3"}selected{/eq}>3人</option>
													<option value="4" {eq name="$data.number" value="4"}selected{/eq}>4人</option>
													<option value="5" {eq name="$data.number" value="5"}selected{/eq}>5人</option>
												</select>
											</div>
										</div>
										<div class="layui-form-item woverflow mdt30">
								            <label for="title" class="layui-form-label label_input"><i style="color:red;">*</i> 小程序卡片图设置：</label>
								            <div class="layui-input-block mdl20 wleft">
								                <div class="layui-input-inline addImages" id="anlicoverimg">
													{if condition="$data.cover neq ''"}
													<img src="{:$data['cover']}?x-oss-process=image/resize,l_125" class="layui-upload-img" width="100%" height="100%">
													{else /}
														<div class="text-detail" style="width: 100%;">
															<i class="layui-icon upload_ico">&#xe681;</i>
															{if condition="$data.cover eq ''"}
															<p>上传封面</p>
															{else /}
															<p>修改封面</p>
															{/if}
														</div>
													{/if}
								                </div>
								            </div>
								            <p class="wleft wpsr width15_" style="color:red;height: 136px;">
								            	<span class="wpsa font14 bottom0 left0">注：不支持拖拽文件</span>
								            </p>
								        </div>
										<div class="layui-form-item">
											<label for="title" class="layui-form-label label_input"></label>
											<div style="margin-left: 220px;margin-top: 10px;"><i style="color: red;margin-right: 5px;">*</i>建议上传封面图宽高比例5:3，图片大小不超过1M</div>
										</div>
										<div class="layui-form-item woverflow mdt30">
											<label class="layui-form-label label_input"><i style="color:red;">*</i> 小程序分享图：</label>
											<div class="layui-input-block mdl20 width70_ wleft">
												<textarea name="content" id="content" rows="10" autocomplete="off" class="width100_ pdtb15" style="width:100%;height: 500px;">{$data.content}</textarea>
											</div>
										</div>
										<!--2-->
										<div class="woverflow lh28 wpsr mdt50">
		                                    <p class="rst_box_b_left_X mdt06 wleft"></p>
		                                    <p class="wleft font18 lanse textb mdl10">奖励设置：</p>
		                                </div>	
											
										<div class="layui-form-item woverflow mdt20">
											<label class="layui-form-label label_input"><i style="color:red;">*</i> 成团后团长获得：</label>
								            <div class="layui-input-block lh45 width50_ wleft mdl20">
								            	<label for="1">
								            		<input type="radio" id="1" class="radio_input" checked name="heads_reward_type" value="1" title="减少工程尾款" {eq name="$data.heads_reward_type" value="1"}checked=""{/eq}> 减少工程尾款
								            	</label>
								            	<label for="2" class="mdl20">
								            		<input type="radio" id="2" class="radio_input" name="heads_reward_type" value="2" title="自定义奖励" {eq name="$data.heads_reward_type" value="2"}checked=""{/eq}> 自定义奖励
								            	</label>
								            	<input type="text" class="ids width40_ jl_input mdl20 h40" name="heads_reward_cont2" value="{$data.heads_reward_cont}" placeholder="请输入奖励内容" />
								            	<div class="mdt15 jl_input2">
								            		<p class="ids font16 huise999">每位成员均可为团长砍掉</p> 
								            		<input type="number" name="heads_reward_cont1" id="" value="{$data.heads_reward_cont|default='1500'}" class="layui-input width90 ids"/> 
								            		<p class="ids font16 huise999">元工程款</p>
								            	</div>
								            </div>
										</div>	
										
										<div class="layui-form-item woverflow mdt30">
											<label class="layui-form-label label_input"><i style="color:red;">*</i> 成团后队员获得：</label>
								            <div class="layui-input-block width30_ wleft mdl20">
								              <input type="text" name="team_member_cont" required  lay-verify="required" value="{$data.team_member_cont}" autocomplete="off" class="layui-input wleft">
								            </div>
										</div>
										
										<div class="layui-form-item woverflow mdt30">
											<label class="layui-form-label label_input"><i style="color:red;">*</i> 拼团成团规则：</label>
								            <div class="layui-input-block lh45 wleft mdl20">
								            	<label for="gz1">
								            		<input type="radio" id="gz1" class="radio_inputs" name="team_ok_type" value="队员入队后" title="队员入队后" {eq name="$data.team_ok_type" value="队员入队后"}checked="true"{/eq}> 队员入队后
								            	</label>
								            	<label for="gz2" class="mdl20">
								            		<input type="radio" id="gz2" class="radio_inputs" name="team_ok_type" value="队员进店后" title="队员进店后" {eq name="$data.team_ok_type" value="队员进店后"}checked="true"{/eq}> 队员进店后
								            	</label>
								            	<label for="gz3" class="mdl20">
								            		<input type="radio" id="gz3" class="radio_inputs" name="team_ok_type" value="队员交定后" title="队员交定后" {eq name="$data.team_ok_type" value="队员交定后"}checked="true"{/eq}> 队员交定后
								            	</label>
								            	<label for="gz4" class="mdl20">
								            		<input type="radio" id="gz4" class="radio_inputs" name="team_ok_type" value="队员签单后" title="队员签合同后" {eq name="$data.team_ok_type" value="队员签单后"}checked="true"{/eq}> 队员签合同后
								            	</label>
								            </div>
										</div>
										
										<div class="mdt80 mdl80">
											<button type="button" class="layui-btn layui-btn-normal layuiSubmit" lay-submit lay-filter="spellgroup-submit" id="spellgroup-submit">保存</button>
											<button  type="button" class="layui-btn">取消</button>
										</div>

									</form>
                            	</div>
                          	</div>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
</body>
{/block} {block name="js"}
<script type="text/html" id="table-user-bind">
	<a class="layui-btn layui-btn-normal layui-btn-xs pdlr20" lay-event="toview"><i class="layui-icon layui-icon-toview"></i>查看</a>
	{auth:check name="spellgroup/toview"}
		<a class="layui-btn layui-btn-normal layui-btn-xs pdlr20" lay-event="toview"><i class="layui-icon layui-icon-toview"></i>查看</a>
    {/auth:check}
</script>
<script type="text/html" id="teamname">
	{{# if(d.user){ }}
		<span>{{d.user.nickname}}的团队</span>
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
</script>
<script type="text/html" id="empname">
	{{# if(d.employee){ }}
		<span>{{d.employee.name}}</span>
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
</script>
<script type="text/html" id="teamtype">
	{{# if(d.number){ }}
		<span>{{d.number}}人团</span>
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="__STATIC__/ueditor/dist/utf8-php/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__STATIC__/ueditor/dist/utf8-php/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
	var ue = UE.getEditor('content');
</script>
<script>
	
	layui.config({
		base: '__LAYUI__/',
		urlbase: '/sys'
	}).extend({
		index: 'lib/index' //主入口模块
	}).use(['index', 'form','layedit','element','upload','table'], function() {
		
		var form = layui.form,
        upload = layui.upload,
        element = layui.element,
		layedit = layui.layedit;
        table = layui.table;
		$ = layui.jquery;
	
		
		upload.render({
			elem: '#anlicoverimg',
			accept: 'images',
			url: '/upload/',
			exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
			field: 'cover',
			size: 1 * 1024,
			auto: false,
			choose: function(obj) {
				files = obj.pushFile();
				length = $('.imageDiv').length;
				obj.preview(function(index, file, result) {
					length++;
					if(length > 1) {
						 layer.msg('限制1张图片以下',{time: 1000});
						delete files[index];
					} else {
						$("#anlicoverimg").html(`<img src="${result}" style="width: 134px;height: 134px;"/>`)
					}
				});
			}
		});
	   $('.radio_input').click(function(){
	   		if($(this).attr('id')==1){
	   			$('.jl_input').hide();
	   			$('.jl_input2').show();
	   		}else{
	   			$('.jl_input2').hide();
	   			$('.jl_input').show();
	   		}
	   });
       var heads_reward_type = '{$data.heads_reward_type}';
	   if(heads_reward_type == 2){
	   $('.radio_input').click();
	   }
		// layedit.set({
		// 	//暴露layupload参数设置接口 --详细查看layupload参数说明
		// 	uploadImage: {
		// 		url: '{:url("train/fileupload")}',
		// 		accept: 'image',
		// 		acceptMime: 'image/*',
		// 		exts: 'jpg|png|gif|bmp|jpeg',
		// 		size: '10240'
		// 	},
		// 	calldel: {
		// 		url: '{:url("train/filedelete")}'
		// 	},
		// 	devmode: true,
		// 	codeConfig: {
		// 		hide: true, //是否显示编码语言选择框
		// 		default: 'javascript' //hide为true时的默认语言格式
		// 	},
		// 	tool: [
		//         'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
		//         , '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image_alt', 'video', 'anchors','image'
		//         , '|', 'fullScreen'
		//     ],
		// 	height: '80%'
		// });
		// var ieditor = layedit.build('content');

		form.on('submit(LAY-user-front-search)', function(data) {
			var field = {};
			var team_num = $("[name=team_num]").val();
			var keyword = $('#keyword').val();
			field['keyword'] = keyword;
            field['team_num'] = team_num;
			//console.log(data);
			//return false;
			//执行重载
			table.reload('spellgroup', {
				where: field
				,page: {curr:1}
			});
		});
	
		//活动列表
		table.render({
			elem: '#spellgroup',
			autoSort: false,
			url: "{:url('spellgroup/team_list')}",
			cols: [
				[{
						align: 'center',
						templet: '#teamname',
						width: 200,
						title: '发起的拼团',
					}, {
						align: 'center',
						field: 'title',
						title: '隶属销售',
						minWidth: 100,
						templet: '#empname'
					}, {
						align: 'center',
						title: '团队类型',
						templet: '#teamtype'
					}, {
					field: 'start_date',
					title: '拼团进程',
					minWidth: 400,
					align:'center',
					templet:function(e){
						//console.log(e)
						var str='';
						str+='<div class="width93_ wleft"><div class="layui-progress layui-progress-big mdt08 wpsr" lay-filter="demo'+e.id+'">';
						str+=`<div class="layui-progress-bar layui-bg-green" lay-percent="${e.join_num}">${(e.join_num != e.number) ?`<p class="wpsa jctext">${e.join_num}</p>`:''}</div><p class="wpsa zjctext">${e.number}</p></div></div>`;
						 var n = 0, timer = setInterval(function(){
					        n++;  
					        if(n>e.join_num){
					          n = e.join_num;
					          clearInterval(timer);
					        }
					        element.progress('demo'+e.id, n*(100/e.number)+'%');
					      },100);
						return str;
					}
				}, {
					field: 'end_time',
					minWidht:100,
					title: '截止时间',
					align:'center'
				},
				 {
					title: '团队状态',
					width: '15%',
					toolbar: '#table-user-bind',
					align:'center'
				}]
			],
			page: true,
			limit: 30,
			height: 'full-220',
			text: '对不起，加载出现异常！'
		});
		//监听审核
		table.on('tool(spellgroup)', function(obj) {
			var data = obj.data;
			if(obj.event === 'toview') {
				layer.open({
					type: 2,
					title: '查看',
					content: "{:url('spellgroup/sel_team_detail')}?id="+data.id,
					maxmin: false,
					area: ['30%','80%']
				});
			} 
		});
		// var textarea = layedit.build('content', {
		// 	'height': 500
		// });
		form.render();
		/* 监听提交 */
		form.on('submit(spellgroup-submit)', function(obj) {
			//var index = parent.layer.getFrameIndex(window.name);
			//alert('www');
			var formData = new FormData(obj.form);
			ue.ready(function () {
				formData.append('content', ue.getContent());
			});
			//formData.set('content', layedit.getContent(textarea));
			//close.log(formData);
			console.log(formData);
			//return false;
			$.ajax({
				url: '{:url("spellgroup/addSave")}',
				type: 'post',
				data: formData,
				dataType: 'json',
				processData: false,
				contentType: false,
				success: function(res) {
					if(res.code === 0) {
						layer.msg(res.msg, {
							anim: 0
						}, function() {
							//parent.layui.table.reload('spellgroup'); //重载表格
							//parent.layer.close(index); //再执行关闭
							//parent.location.reload();
							window.location.reload();
						});
					} else {
						layer.msg(res.msg, {
							anim: 6
						});
					}
				}
			});
			return false;
		});
		
		
		
    })
</script>

{/block}