crm/app/sys/view/material/casedetail.html

{extend name="public/layout" /} {block name="title"}素材案例修改{/block} {block name="body"}
<script src="/static/js/jquery.min.js"></script>
<style type="text/css">
	html,
	body {
		display: block;
		width: 100%;
		background-color: #fff;
	}

	.layui-fluid {
		display: block;
		border-radius: 5px;
		background-color: #ffffff;
		padding: 15px 30px;
	}
	.layui-icon{font-size:20px !important;line-height: 38px;}
	.layui-input-inline{line-height: 38px;}
	.layui-input-inline input{margin-right: 10px;}
	.layui-form-item .layui-input-inline{}
	.input-indent-box-small{margin-left:10px;}
	.layui-tab {
		padding: 15px;
		height: 100%;
	}

	.layui-table-view .layui-table th,
	.layui-table-view .layui-table td {
		text-align: center;
		border-color: #B6CADE;
	}

	.layui-table thead tr,
	.layui-table-header {
		background-color: #D8E6F1;
	}

	.input-indent-box {
		display: inline;
		width: 80%;
	}

	.input-indent-box-small {
		display: inline;
		width: 20%;
	}

	.adding {
		cursor: pointer;
	}

	.upload-img .area i {
		font-size: 50px;
		color: #009688;
	}

	.evi-block {
		float: left;
		margin-right: 10px;
	}
	/*///*/

	.imageDiv {
		display: inline-block;
		width: 140px;
		height: 125px;
		-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 {
		display: inline-block;
		width: 140px;
		height: 125px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border: 1px dashed darkgray;
		background: #f8f8f8;
		position: relative;
		overflow: hidden;
	}

	.text-detail {
		margin-top: 40px;
		text-align: center;
	}

	.text-detail>span {
		font-size: 40px;
	}

	.imageDiv div {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		background-color: #e6e6e600;
	}

	.imageDiv div i {
		display: none;
		font-size: 31px;
		position: absolute;
		top: 37%;
		left: 40%;
	}

	.imageDiv div:hover {
		background-color: #e6e6e680;
	}

	.imageDiv div:hover i {
		display: block;
		cursor: pointer;
	}

	.rotate180 {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	.layui-edge.rotate180 {
		margin-top: -9px;
	}

	.layui-input-inline.input-longer-inline {
		width: 290px;
	}
	.goback {
		float: right;
	}

	.goback a {
		color: #269efb;
	}

	.goback i {
		position: relative !important;
	}
	.layui-btn-primary {
		color: #249EFB;
		/* border: 1px solid #249EFB; */
	}
	.layui-btn-primary:hover {
		background-color: #E3F7FF;
		color: #249EFB;
	}
	.layui-form-itme-left{
		float:left;
		clear: none;
		width:330px;
		position: relative;
	}
	.layui-form{overflow:hidden;}
	.layui-mj-t{position:absolute;right: 8%;top:6%;}
	.relative {
		position: relative;
	}
	.wordlist {
		width: 20px;
		position: absolute;
		top: 44px;
		right: 1px;
		display: flex;
		flex-direction: column;
		z-index: 99999;
		height: auto;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		padding: 3px 0px;
		overflow: hidden;
		max-height: 295px;
		-ms-overflow-style: none;
		/* IE 10+ */
		scrollbar-width: none;
		/* Firefox */
		overflow-y: scroll;
		background-color: #f5f5f5;
	}

	.wordlist::-webkit-scrollbar {
		display: none;
		/* Chrome Safari */
	}

	.wordlist>li {
		width: 20px;
		height: 37px;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 0px;
		line-height: 37px;
	}

	.li_active {
		font-weight: 700;
		background-color: #249EFB;
		color: #fff;
	}
	.noneClass {
		display: none !important;
	}
	.c_wordlist {
		width: 20px;
		position: absolute;
		top: 43px;
		right: 30px;
		display: flex;
		flex-direction: column;
		z-index: 99999;
		height: auto;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		padding: 4px 0px;
		overflow: hidden;
		max-height: 298px;
		-ms-overflow-style: none;
		/* IE 10+ */
		scrollbar-width: none;
		/* Firefox */
		overflow-y: scroll;
		background-color: #f5f5f5;
	}

	.c_wordlist::-webkit-scrollbar {
		display: none;
		/* Chrome Safari */
	}

	.c_wordlist>li {
		width: 20px;
		height: 37px;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 0px;
		line-height: 37px;
	} 
	dd {
		border-bottom: 1px solid #EFEFEF;
	}
	.layui-anim-upbit {
		-ms-overflow-style: none;
		/* IE 10+ */
		scrollbar-width: none;
		/* Firefox */
		overflow-y: scroll;
		background-color: #fff;
	}
	.layui-anim-upbit::-webkit-scrollbar {
		display: none;
		/* Chrome Safari */
	}
	.layui-form-xxkbg{background:#ECECEC;overflow: hidden;padding-top: 10px;}
	.layui-form-xxk-ul{float:left;overflow: hidden;width:36%;}
	.layui-form-xxk-ul li{float:left;width:25%;height:36px;line-height: 36px;text-align: center;cursor: pointer;font-size: 14px;}
	.layui-zhu{color:#BF0505;line-height: 23px;float:right;font-size: 14px;}
	.addxxkli{background: #fff;border-radius: 6px 6px 0 0;}
	.width94_{width:96%;}
	.wauto{margin:0 auto;}
	.layui-xxk-body-box{clear:both;}
	.layui-xxk-bodys{margin-top:20px;}
	.layui-xxk-bodys dd{display: none;border: 0;}
	.layui-form-select dl {
		width: 100% !important;
	}
	.center {
		text-align: center;
	}
	.vrlishow{display: none;}
	.housetype>i{
		font-size: 12px !important;
		line-height: 38px;
		color: #4e8bfd;
		float: right;
	}
	.flexBox {
		display: flex !important;
	}
	.vrBtnSelect {
		max-width: 100px;
        white-space: nowrap;
        padding: 0px 10px;
        height: 38px;
        background-color: #249EFB;
        color: #ffffff;
        text-align: center;
        line-height: 38px;
        border-radius: 4px;
        margin-left: 5px;
        cursor: pointer;
    }
</style>

<body>
<div class="layui-fluid">
	<div class="layui-card">
		<!-- <div class="layui-card-header ">
			<div class="layui-form-item">
				<div class="layui-inline">
					<strong>装修案例</strong>
				</div>
			</div>
		</div> -->
		<div class="layui-card-body">
			<form class="layui-form" enctype="multipart/form-data" lay-filter="anli-form">
				<div class="layui-form-item layui-form-itme-left">
					<label class="layui-form-label"><i style="color:red;">*</i>标题</label>
					<div class="layui-input-inline" style="width: 200px;">
						<input class="layui-input inputBox" name="title" type="text" value="" placeholder="请输入标题" autocomplete="off">
					</div>
				</div>
		        <div class="layui-form-item layui-form-itme-left relative">
		            <label class="layui-form-label"><i style="color:red;">*</i>小区</label>
					<div class="layui-input-inline" id="box212">
		                <select name="community_id" id="label" lay-verify="required" lay-search  lay-filter="type">
		                    <option value="">请选择小区</option>
							{notempty name="communities"}
							{volist name="communities.arr" id="vo"}
								<option data-py="{$vo.s}" value="{$vo.id}" >{$vo.name}</option>
							{/volist}
							{/notempty}
		                </select>
		            </div>
					<ul class="c_wordlist noneClass">
						{notempty name="communities"}
						{volist name="communities.sort" id="vo"}
						<li data-py="{$vo}">{$vo}</li>
						{/volist}
						{/notempty}
					</ul>
		            <i class="layui-icon layui-icon-add-circle adding" style="font-size: 32px" id="community-add"></i>
		        </div>
				<div class="layui-form-item layui-form-itme-left">
					<label class="layui-form-label">设计师</label>
					<div class="layui-input-inline">
						<div class="layui-unselect layui-form-select">
							<div class="layui-select-title designer-ele-group box121 select_designer_input">
								<input type="text" id="select_designer" class="layui-input layui-unselect designer-ele-group" value="" readonly="readonly" data-selectedid="" placeholder="--设计师--" autocomplete="off" />
								<i class="layui-edge designer-ele-group" id="designer_arrow"></i>
							</div>
							<dl class="layui-anim layui-anim-upbit designer-ele-group box121" id="dropdown_designer">
								{notempty name="designers.arr"}
								{volist name="designers.arr" id="vo"}
								<dd class="designer_option designer-ele-group designerlist" data-py="{$vo.s}" data-id="{$vo.id}"> {$vo.name}</dd>
								{/volist}
								{else/}
								<dd class="center">暂无数据</dd>
								{/notempty}
							</dl>
							<ul class="wordlist noneClass">
								{notempty name="designers"}
								{volist name="designers.sort" id="vo"}
								<li data-word="{$vo}">{$vo}</li>
								{/volist}
								{/notempty}
							</ul>
						</div>
					</div>
				</div>
				<div class="layui-form-item layui-form-itme-left">
					<label class="layui-form-label"><i style="color:red;">*</i>风格</label>
					<div class="layui-input-inline">
						<div class="layui-unselect layui-form-select">
							<div class="layui-select-title decostyle-ele-group select_decostyle_input">
								<input type="text" id="select_decostyle" class="layui-input layui-unselect decostyle-ele-group" readonly="readonly" value="" data-selectedid="" placeholder="--风格--" autocomplete="off" />
								<i class="layui-edge decostyle-ele-group" id="decostyle_arrow"></i>
							</div>
							<dl class="layui-anim layui-anim-upbit decostyle-ele-group" id="dropdown_decostyle">
								{volist name="decostyles" id="vo"}
								<dd class="decostyle_option decostyle-ele-group" data-id="{$vo.id}"> {$vo.name}</dd>
								{/volist}
							</dl>
						</div>

					</div>
					<i class="layui-icon layui-icon-add-circle adding" style="font-size: 32px" id="decostyle-add"></i>
				</div>
				<div class="layui-form-item layui-form-itme-left">
					<label class="layui-form-label"><i style="color:red;">*</i>房屋类型</label>
					<div class="layui-input-inline">
						<div class="layui-unselect layui-form-select">
							<div class="layui-select-title housetype-ele-group select_housetype_input">
								<input type="text" readonly="readonly" id="select_housetype" class="layui-input layui-unselect housetype-ele-group" value="" data-selectedid="" placeholder="--户型--" autocomplete="off" />
								<input type="hidden" id="housetype" name="housetype_type" value="{$data.housetype_type}"/>
								<i class="layui-edge housetype-ele-group" id="housetype_arrow"></i>
							</div>
							<dl class="layui-anim layui-anim-upbit housetype-ele-group" id="dropdown_housetype">
								<dd class="topselectbtn housetype-ele-group" data-ref="adddehousetype"> + 添加户型 + </dd>
								{volist name="housetype" id="vo"}
								<dd class="housetype_option housetype-ele-group" data-id="{$vo.id}"> {$vo.name}</dd>
								{/volist}
							</dl>
						</div>

					</div>
					<i class="layui-icon layui-icon-add-circle adding" style="font-size: 32px" id="housetype-add"></i>
				</div>
				<div class="layui-form-item layui-form-itme-left">
					<label class="layui-form-label"><i style="color:red;">*</i>面积</label>
					<div class="layui-input-inline" style="width:200px;">
						<input class="layui-input input-indent-box" onkeyup="RegularInt(this)" style="width:100%;" name="square" type="text" placeholder="请输入面积" value="" lay-verify="subject_add"/>
						<span class="layui-mj-t">平米</span>
					</div>
				</div>
				<div class="layui-form-item layui-form-itme-left">
					<label class="layui-form-label">价格</label>
					<div class="layui-input-inline" style="width: 200px;">
						<input class="layui-input input-indent-box" onkeyup="RegularNum(this)" style="width:100%;" name="money" type="text" value="" placeholder="请输入价格" />
						<span class="layui-mj-t">万元</span>
					</div>
				</div>
				<!-- <div class="layui-form-item">
					<label class="layui-form-label"><i style="color:red;">*</i>户型</label>
					<div class="layui-input-inline" style="width:400px;">
						<input class="layui-input input-indent-box-small" style="margin-left: 0;" name="room" type="number" value="" placeholder="几" min="0" oninput="validity.valid||(value='');" />房
						<input class="layui-input input-indent-box-small" name="hall" type="number" value="" placeholder="几" min="0" oninput="validity.valid||(value='');" />厅
						<input class="layui-input input-indent-box-small" name="toilet" type="number" value="" placeholder="几" min="0" oninput="validity.valid||(value='');" />卫
					</div>
				</div> -->
				<div class="layui-form-item " style="clear: both;">
					<label class="layui-form-label"><i style="color:red;">*</i>封面图</label>
					<div style="margin: 20px 20px 0px;">
						<!--  -->
						<div class="addImages" id="anlicoverimg">
							<div class="text-detail">
								<span>+</span>
								<p>选择替换封面图</p>
							</div>
							<img src="{:$data['cover_img']}?x-oss-process=image/resize,l_125" class="layui-upload-img" width="100%" height="100%">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"></label>
					<div><i style="color: red;margin-right:5px;">*</i>建议上传封面图宽高比例5:3，图片大小不超过1M</div>
				</div>

				<div class="layui-form-item " style="clear:both;width: 100%;">
					<label class="layui-form-label">分享封面</label>
					<div style="margin: 20px 20px 0px;">
						<div class="addImages" id="cover">
							<div class="text-detail">
								<span>+</span>
								<p>选择分享封面</p>
							</div>
							<img src="{:$data['cover_share_img']}?x-oss-process=image/resize,l_125" class="layui-share-upload-img" id="cover_share_img" width="100%" height="100%">
						</div>
					</div>
				</div>
				<div class="layui-form-item" style="width: 100%;">
					<label class="layui-form-label"></label>
					<div><i style="color: red;margin-right:5px;">*</i>上传分享封面图宽高比例5:4，图片大小不超过1M</div>
				</div>

				<div class="layui-xxk-body-box">
					<div class="layui-form-xxkbg">
						<div class="width94_ wauto">
							<ul class="layui-form-xxk-ul">
								<li class="addxxkli">效果案例</li>
								<li>实景案例</li>
								<li>视频案例</li>
								<li>VR案例</li>
							</ul>
							<p class="layui-zhu">注：四种案例形式可同时展现</p>
						</div>
					</div>
					<dl class="layui-xxk-bodys">
						<dd style="display:block;">
							<div class="layui-form-item" style="clear:both;width:100%;">
								<label class="layui-form-label">描述</label>
								<div class="layui-input-block">
									<!-- <textarea id="anli_content1" name="anli_desc" placeholder="描述" autocomplete="off" class="layui-textarea">{:$data["desc"]}</textarea> -->
									<script id="anli_content1" name="anli_desc" type="text/plain" style="height: 350px;">{:$data["desc"]}</script>
								</div>
							</div>
						</dd>
						<dd>
							<div class="layui-form-item" style="clear:both;width:100%;">
								<label class="layui-form-label">描述</label>
								<div class="layui-input-block">
									<!-- <textarea id="anli_content2" name="real_case" placeholder="描述" autocomplete="off" class="layui-textarea">{:$data["real_case"]}</textarea> -->
									<script id="anli_content2" name="real_case" type="text/plain" style="height: 350px;">{:$data["real_case"]}</script>
								</div>
							</div>
						</dd>
						<dd>
							<div class="layui-form-item layui-hide" >
								<div class="layui-input-inline" style="width: 290px;">
									<input type="radio" name="myradio" value="random_name" checked=true/> 上传文件名字是随机文件名, 后缀保留
								</div>
							</div>
							<div class="layui-form-item" style="clear:both;width:100%;">
								<label class="layui-form-label">选择视频</label>
								<div class="layui-input-block">
									<div class="layui-input-inline" style="width: 290px;display: block;" id="container">
										<a class="layui-btn btn layui-border-btn" id="selectfiles" href="javascript:void(0);" >选择视频</a>
										<a class="layui-btn btn layui-border-btn" id="postfiles" href="javascript:void(0);">开始上传</a>
										<div id="ossfile"></div>
										<div id="symbshowed">{$data.video_case}</div>
										<!--报错信息返回展示-->
										<pre id="console"></pre>
										<input type="hidden" value="" id="fileuri">
										<!--上传到OSS哪个文件下，在这里定义-->
										<input type="hidden" value="Video" id="category_name">
									</div>
								</div>
							</div>
							<div class="layui-form-item" style="clear:both;width:100%;">
								<label class="layui-form-label"><i style="color:red;">*</i> 视频格式：</label>
								<div class="layui-input-block lh45 mdl20" style="max-width: 300px !important;">
									<input type="radio" id="1" class="radio_input" lay-filter="video_type"
										name="video_type" value="0" title="全屏" {if $data.video_type == 0} checked {/if}>
									<input type="radio" id="2" class="radio_input" lay-filter="video_type"
										name="video_type" value="1" title="横屏" {if $data.video_type == 1} checked {/if}>
								</div>
							</div>
							<div class="layui-form-item videolimit">
								<label class="layui-form-label"></label>
								<div><i style="color:red;margin-right:5px;">*</i><span id="limitVA">上传视频大小不超过280M</span></div>
							</div> 
						</dd>
						<dd>
							<div class="layui-form-item" style="clear:both;width:100%;">
								<div class="vrlishow"  style="display: block;">
									<label class="layui-form-label">VR链接：</label>
									<div class="layui-input-block flexBox">
										<input type="text" id="vrlink1" name="vr_link" value="{$data.vr_case}" placeholder="请输入VR链接" autocomplete="off" class="layui-input">
										<div class="vrBtnSelect">选择vr作品</div>
									</div>
								</div>
							</div>
						</dd>
					</dl>
				</div>
				<div class="layui-form-item" style="clear:both;">
					<label class="layui-form-label">推荐</label>
					<div class="layui-input-block">
						<input type="checkbox" name="recommend" title="" lay-skin="primary" {if $data.recommend}checked{/if}>
					</div>
				</div>
				<input type="hidden" name="id" id="id" value="" />
				<div class="layui-form-item submit-btn">
					<input class="layui-btn layui-btn-primary " style="margin-left:110px;" type="button" lay-submit lay-filter="layuiadmin-anli-submit" id="layuiadmin-anli-submit" value="确认提交">
				</div>
			</form>
		</div>
	</div>
</div>
<script type="text/javascript">
    function RegularNum(obj) {
        obj.value = obj.value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
        obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字
        obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个, 清除多余的
        obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两位小数
    }
    function RegularInt(obj) {
        obj.value = obj.value.replace(/[^\d]/g, ""); //清除"数字以外的字符
        obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字
    }
</script>
</body>
{/block} {block name="js"}
<!-- 配置文件 -->
<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('anli_content1');
	var ues = UE.getEditor('anli_content2');
</script>
<script type="text/javascript" src="__STATIC__/js/plupload/js/plupload.full.min.js"></script>
<script type="text/javascript" src="__STATIC__/js/plupload/ossupload.js"></script>
<script>
	layui.config({
		base: '__LAYUI__/' //静态资源所在路径
		,urlbase: '/sys'
	}).extend({
		index: 'lib/index' //主入口模块
	}).use(['index', 'form', 'upload','layedit'], function() {
		var form = layui.form,
			upload = layui.upload,
			layedit = layui.layedit,
			files = [],
			$ = layui.jquery;
			var cover_img='';
		form.render();

		layedit.set({
			uploadImage: {
				url: '{:url("material/fileupload")}'
			}
		});
		
		//vr作品
		$('.vrBtnSelect').click(function(){
			let vrStr = $('input[name="vr_link"]').val();
			let vrSid = "";
			if (vrStr && ((vrStr.indexOf("saastest.zhuangqixiaoguan.com") > -1)||(vrStr.indexOf("h5.zqxg.cc") > -1))) {
				vrSid = vrStr.split("/#/")[1];
			}
		    layer.open({
		        type: 2,
		        title: ['选择VR作品', 'color:#333333;background-color:#D8E6F1;'],
		        content: '{:url("building/group")}?id=' + vrSid,
		        area: ['80%', '80%'],
		        btn: ['确定', '取消'],
		        yes: function (index, layero) {
		            let data = layero.find('iframe').contents().find("#hiddentext").val();
		            if (data) {
		                let vrObject = JSON.parse(data);
						$('input[name="vr_link"]').val(vrObject.show_url);
		            }
		            layer.close(index);
		            //点击确认触发 iframe 内容中的按钮提交
		        }
		    });
		})
		
		
		if('{:$data["cover_img"]}'){
			$('#anlicoverimg>.text-detail').hide();
			$('.layui-upload-img').show();
		}else{
			$('#anlicoverimg>.text-detail').show();
			$('.layui-upload-img').hide();
		}
		if('{:$data["cover_share_img"]}'){
			$('#cover>.text-detail').hide();
			$('.layui-share-upload-img').show();
		}else{
			$('#cover>.text-detail').show();
			$('.layui-share-upload-img').hide();
		}
		
		//var anliediterindex = layedit.build('anli_content1');
		//var anliediterindex2 = layedit.build('anli_content2');
		$('.layui-form-xxk-ul li').click(function(){
			var n=$(this).index();
			$(this).addClass('addxxkli').siblings().removeClass('addxxkli');
			$('.layui-xxk-bodys dd').eq(n).show().siblings().hide();
		})

	    //自定义验证规则
	    form.verify({
	        subject_add: function(value) {
	            if (value > 5000) {
	            	return '面积最大值5000';
	            }
	        },
	    });
		/////////
		var obj = {
			title : "{:$data['title']}",
			community_id: "{:$data['community_id']}",
			designer_id: "{:$data['designer_id']}",
			style_id : "{:$data['style_id']}",
			housetype_id : "{:$data['housetype_id']}",
			housetype_type:"{:$data['housetype_type']}",
			square: "{:$data['square']}",
			money: "{$data->getData('money')|floatval}" != 0 ? "{$data->getData('money')|floatval}":'',
			//money: "{:$data['new_money']}"!='暂无报价'? "{:$data['new_money']}":'',
			room: "{:$data['room']}",
			hall: "{:$data['hall']}",
			toilet: "{:$data['toilet']}",
			id: "{:$data['id']}"
		};
		// 给表单初始赋值，但是无法实现对复选框赋值
		form.val("anli-form", obj);
		var select_community = $('#select_community');
		select_community.data('selectedid', "{:$data['community_id']}");
        select_community.val("{:isset($data['community']['name'])?$data['community']['name']:''}");

		var select_designer = 	$('#select_designer');
		select_designer.data('selectedid', "{:$data['designer_id']}");
		select_designer.val("{:isset($data['designer']['name'])?$data['designer']['name']:''}");

		var select_decostyle = 	$('#select_decostyle');
		// select_decostyle.data('selectedid', "{:$data['decostyle_id']}");
		select_decostyle.data('selectedid', "{:$data['style_id']}");
		select_decostyle.val("{:isset($data['decostyle']['name'])?$data['decostyle']['name']:''}");


		var select_housetype = 	$('#select_housetype');
		select_housetype.data('selectedid', "{:$data['housetype_id']}");
        select_housetype.val("{:isset($data['housetype']['name'])?$data['housetype']['name']:''}");


		// ue.ready(function() {
		// 	ue.setContent('{:$data["desc"]}');  //注意单双引号的位置
		// });

		/////
		form.on('submit(layuiadmin-anli-submit)', function(data){
			var index = parent.layer.getFrameIndex(window.name);
			// layer.msg(JSON.stringify(data.field)+ layedit.getContent(editerindex));
			var formData = new FormData(data.form);
			// formData.append('desc',layedit.getContent(anliediterindex));
			// formData.append('real_case',layedit.getContent(anliediterindex2));
			formData.append('video_case',$('#fileuri').val());
			formData.append('cover_img',$('.layui-upload-img').attr('src'));
			formData.append('cover_share_img',$('.layui-share-upload-img').attr('src'));

			ue.ready(function () {
			 	formData.append('desc', ue.getContent('anli_content1'));
			});	
			ue.ready(function () {
				formData.append('real_case', ues.getContent('anli_content2'));
			});	
			formData.append('community_id', $('#label').val());
			formData.append('designer_id', $('#select_designer').data('selectedid'));
			formData.append('style_id', $('#select_decostyle').data('selectedid'));
			formData.append('housetype_id', $('#select_housetype').data('selectedid'));
			formData.append('vr_case',$('[name=vr_link]').val());

			$.ajax({
				url: '{:url("material/apicaseupdate")}',
				type: 'post',
				data: formData,
				dataType: 'json',
				processData: false,
				contentType: false,
				success: function(res) {
					if(res.code === 0) {
						layer.msg(res.msg, {
							anim: 0,time: 1000,icon: 6,
						}, function() {
							parent.layui.table.reload('anli-table');
							parent.layer.close(index);
						});
					} else {
						layer.msg(res.msg, {anim: 0,time: 1000,icon: 5});
					}
				}
			});
			return false;
		});

		/*---------------------------------------------------------*/
        $(document).click((e) => {
			let displayState = $('#dropdown_designer').attr('style');
			if (displayState === 'display: none;') {
				$('.wordlist').addClass('noneClass');
			}

			let c_element = $('#label').next();
			if (c_element[0].className.indexOf('layui-form-selected') < 0) {
				$('.c_wordlist').addClass('noneClass');
			}

		})

		$('dd').click(() => {
			$('.c_wordlist').addClass('noneClass');
		})

		$('.box121').click(() => {
			$('.wordlist').toggleClass('noneClass')
		})

		$('.wordlist').click((e) => {
			if (e.target.localName != 'li') {
				e.stopPropagation();
				return;
			}
			let index = 0;
			let curWord = e.target.dataset.word;
			let lilist = $('.wordlist').children();
			for (let i = 0; i < lilist.length; i++) {
				lilist[i].className = '';
			}
			let options = $('.designerlist');
			for (let j = 0; j < options.length; j++) {
				if (options[j].dataset.py.toUpperCase() == curWord) {
					index = j;
					setTimeout(() => {
						e.target.className = 'li_active';
						let num = j * 37;
						$('.box121').scrollTop(num);
					}, 50)
					e.stopPropagation();
					return;
				}
			}
		})

		$('#box212').click(() => {
			$('.c_wordlist').toggleClass('noneClass');
		})
		let xqElement = $('.layui-anim-upbit')[0];
		xqElement.classList.add('xqElement');

		let options = [];
		let xqDatalist = $('#label').children();
		for (let i = 0; i < xqDatalist.length; i++) {
			if (xqDatalist[i].dataset.py) {
				options.push(xqDatalist[i].dataset.py)
			}
		}
		
		$('.c_wordlist').click((e) => {
			if (e.target.localName != 'li') {
				e.stopPropagation();
				return;
			}
			let index = 0;
			let curWord = e.target.dataset.py;
			let lilist = $('.c_wordlist').children();
			for (let i = 0; i < lilist.length; i++) {
				lilist[i].className = '';
			}
			if (parseInt(curWord) != NaN) {
				let word1 = curWord.toLowerCase();
				index = options.indexOf(word1)
			} else {
				index = options.indexOf(curWord)
			}
			setTimeout(() => {
				e.target.className = 'li_active';
				let num = index * 37 + 37;
				$('.xqElement').scrollTop(num);
			}, 50)
			e.stopPropagation();
		})

		$('.layui-select-title input').on('input',function(e) {
			if (e.target.placeholder == '请选择小区') {
				let val = $(this).val();
				if (!val) {
					$('.c_wordlist').removeClass('noneClass');
					return;
				}
				$('.c_wordlist').addClass('noneClass');
			}
		})
		/*--------------------------------------------*/

		$('.layui-fluid').on('click', function(e) {
			if(!$(e.target).hasClass('commu-ele-group')) {
				$('#dropdown_community').hide();
				$('#commu_arrow').removeClass('rotate180');
			}
			if(!$(e.target).hasClass('designer-ele-group')) {
				$('#dropdown_designer').hide();
				$('#designer_arrow').removeClass('rotate180');
			}
			if(!$(e.target).hasClass('decostyle-ele-group')) {
				$('#dropdown_decostyle').hide();
				$('#decostyle_arrow').removeClass('rotate180');
			}
			if(!$(e.target).hasClass('housetype-ele-group')) {
				$('#dropdown_housetype').hide();
				$('#housetype_arrow').removeClass('rotate180');
			}
		});

		///////
		$('.select_community_input').on('click', function() {
			$('#dropdown_community').toggle();
			$('#commu_arrow').toggleClass('rotate180');
		});
		$('.select_designer_input').on('click', function() {
			$('#dropdown_designer').toggle();
			$('#designer_arrow').toggleClass('rotate180');
		});
		$('.select_decostyle_input').on('click', function() {
			$('#dropdown_decostyle').toggle();
			$('#decostyle_arrow').toggleClass('rotate180');
		});
		$('.select_housetype_input').on('click', function() {
			$('#dropdown_housetype').toggle();
			$('#housetype_arrow').toggleClass('rotate180');
		});

		////////
		$(".commu_option").on('click', function() {
			var commu_name = $(this).text();
			var commu_id = $(this).data('id');
			var select_community = $("#select_community");
			select_community.val(commu_name);
			select_community.data('selectedid', commu_id);
			select_community.click();
		});
		$(".designer_option").on('click', function() {
			var designer_name = $(this).text();
			var designer_id = $(this).data('id');
			var select_designer = $("#select_designer");
			select_designer.val(designer_name);
			select_designer.data('selectedid', designer_id);
			select_designer.click();
		});
		$(".decostyle_option").on('click', function() {
			var decostyle_name = $(this).text();
			var decostyle_id = $(this).data('id');
			var select_decostyle = $("#select_decostyle");
			select_decostyle.val(decostyle_name);
			select_decostyle.data('selectedid', decostyle_id);
			select_decostyle.click();
		});
		$('#dropdown_housetype').on('click', ".housetype_option", function() {
			var housetype_name = $(this).text();
			var housetype_id = $(this).data('id');
			var select_housetype = $("#select_housetype");
			select_housetype.val(housetype_name);
			select_housetype.data('selectedid', housetype_id);
			select_housetype.click();
			if($(this).hasClass('housetype')){
				$('#housetype').val('building_housetype');
			}else{
				$('#housetype').val('housetype');
			}
		});

		///
		$('.topselectbtn').on('click', function() {
			var gonnado = $(this).data('ref');
			if(gonnado == 'addcommu') {
				addcommunity();
				$('#select_community').click();
			}
			if(gonnado == 'adddesigner') {
				adddesigner();
				$('#select_designer').click();
			}
			if(gonnado == 'adddecostyle') {
				adddecostyle();
				$('#select_decostyle').click();
			}
			if(gonnado == 'adddehousetype'){
				adddehousetype();
				$('#select_housetype').click();
			}

		});
		//小区添加
		$('#community-add').on('click', function() {
			addcommunity();
		});
		var addcommunity = function() {
        	layer.prompt({
				title: ['小区添加', 'color:#333333;background-color:#D8E6F1;'],
			}, function(value, index, elem) {
				var value = $.trim(value);
				if(value == '') {
					layer.msg('请输入小区名称', {anim: 6});
					return false;
				}
				if(value.length > 6) {
					layer.msg('小区名称超长', {anim: 6});
					return false;
				}
				$.post('{:url("material/apicommunityadding")}', {
					community: value
				}, function(res) {
					if(res.code == 0) {
						$('#label').append("<option selected value='"+res.data.id+"'>"+res.data.name+"</option>")
						// $("#select_community").val(res.data.name);
						// $("#select_community").attr('data-selectedid',res.data.id);
						form.render('select'); 
						layer.msg(res.msg, {
							anim: 0
						}, function() {
							layer.close(index); //再执行关闭
						});
					} else {
						layer.msg(res.msg, {
							anim: 6
						});
					}
				});
			});
		}
		//设计师添加
		$('#designer-add').on('click', function() {
			adddesigner();
		});
		var adddesigner = function() {
			layer.open({
				type: 2,
				title: ['设计师添加', 'color:#333333;background-color:#D8E6F1;'],
				content: '{:url("material/choiceadding")}?type=' + 'designer',
				resize: false,
				area: ['400px', '350px'],
				btn: ['确认提交', '取消'],
				yes: function(index, layero) {
					//点击确认触发 iframe 内容中的按钮提交
					var submit = layero.find('iframe').contents().find("#layuiadmin-designer-submit");
					submit.click();
				}
			});
		}
		//风格添加
		$('#decostyle-add').on('click', function() {
			adddecostyle();
		});
		var adddecostyle = function() {
			layer.open({
				type: 2,
				title: ['风格添加', 'color:#333333;background-color:#D8E6F1;'],
				content: '{:url("material/choiceadding")}?type=' + 'decostyle',
				resize: false,
				area: ['400px', '200px'],
				btn: ['确认提交', '取消'],
				yes: function(index, layero) {
					//点击确认触发 iframe 内容中的按钮提交
					var submit = layero.find('iframe').contents().find("#layuiadmin-decostyle-submit");
					submit.click();
				}
			});
		}
		//户型添加
		$('#housetype-add').on('click', function() {
			adddehousetype();
		});
		var adddehousetype = function() {
			layer.open({
				type: 2,
				title: ['户型添加', 'color:#333333;background-color:#D8E6F1;'],
				content: '{:url("material/choiceadding")}?type=' + 'housetype',
				resize: false,
				area: ['400px', '200px'],
				btn: ['确认提交', '取消'],
				yes: function(index, layero) {
					//点击确认触发 iframe 内容中的按钮提交
					var submit = layero.find('iframe').contents().find("#layuiadmin-housetype-submit");
					submit.click();
				}
			});
		}


		$('.upload-img-btn').on('click', function() {
			layer.open({
				title: ['图文添加', 'color:#333333;background-color:#D8E6F1;'],
				type: 2,
				content: '{:url("material/evidenceadd")}',
				resize: false,
				area: ['80%', '80%']
			});

		});


		var uploading = function(){
			upload.render({
				elem: '#anlicoverimg',
				accept: 'images',
				url: '{:url("fileupload")}',
				exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
				field: 'file',
				size: 5 * 1024,
				auto: true,
				choose: function(obj) {
					files = obj.pushFile();
					length = $('.imageDiv').length;
					obj.preview(function(index, file, result) {
						length++;
						if (length > 1) {
							if (length == 10) layer.msg('限制1张图片以下', {time: 2000});
							delete files[index];
						} else {
							$('#anlicoverimg>.text-detail').hide();
							$('.layui-upload-img').show();
							// $('.y_img').remove();
							// $('#anlicoverimg').html('<div class="imageDiv" data-id="' + index + '"><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" width="100%" height="100%"><div><i class="layui-icon layui-icon-delete" onclick="deleting"></i></div></div>');
							


							// $('#anlicoverimg').html('<div class="imageDiv" data-id="' + index + '"><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" width="100%" height="100%"><div class="iconwrapper"></div></div>');
							// var idom = document.createElement('i');
							// idom.classList.add("layui-icon", "layui-icon-delete");
							// idom.addEventListener("click", function(e){
							// 	e.stopPropagation();
							// 	var that = this;
							// 	layer.confirm('确定删除该图片么？', function(index) {
							// 		var imgDiv = $(that).closest('.imageDiv');
							// 		if(id = imgDiv.data('id')) {
							// 			delete files[id];
							// 		}
							// 		imgDiv.remove();
							// 		$('#anlicoverimg').html('<div class="text-detail"><span>+</span><p>选择替换封面图</p></div>');
							// 		uploading();
							// 		layer.close(index);
							// 	});
							// });
							// $('.iconwrapper').append(idom);
						}
					});
				},
				done:function(res){
					$('.layui-upload-img').attr('src',res.data.src)
				}
			});
		}
		uploading();

		// upload.render({
		// 	elem: '#anlicoverimg',
		// 	accept: 'images',
		// 	url: '/upload/',
		// 	exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
		// 	field: 'cover_img',
		// 	size: 5 * 1024,
		// 	auto: false,
		// 	choose: function(obj) {
		// 		files = obj.pushFile();
		// 		length = $('.imageDiv').length;
		// 		obj.preview(function(index, file, result) {
		// 			length++;
		// 			if (length > 9) {
		// 				if (length == 10) layer.msg('限制九张图片以下', {time: 2000});
		// 				delete files[index];
		// 			} else {
		// 				// $('#anlicoverimg').html('<div class="imageDiv" data-id="' + index + '"><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" width="100%" height="100%"><div><i class="layui-icon layui-icon-delete" onclick="deleting"></i></div></div>');
		// 				$('#anlicoverimg').html('<div class="imageDiv" data-id="' + index + '"><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" width="100%" height="100%"><div class="iconwrapper"></div></div>');
		// 				var idom = document.createElement('i');
		// 				idom.classList.add("layui-icon", "layui-icon-delete");
		// 				idom.addEventListener("click", function(e){
		// 					e.stopPropagation();
		// 					var that = this;
		// 					layer.confirm('确定删除该图片么？', function(index) {
		// 						var imgDiv = $(that).closest('.imageDiv');
		// 						if(id = imgDiv.data('id')) {
		// 							delete files[id];
		// 						}
		// 						// imgDiv.remove();
		// 						imgDiv.html('<div class="text-detail"><span>+</span><p>选择替换封面图</p></div>');
		// 						layer.close(index);
		// 					});
		// 				});
		// 				$('.iconwrapper').append(idom);
		// 			}
		// 		});
		// 	}
		// });

		upload.render({
				elem: '#cover',
				accept: 'images',
				url: '{:url("fileupload")}',
				exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
				field: 'file',
				size: 5 * 1024,
				auto: true,
				choose: function(obj) {
					files = obj.pushFile();
					length = $('.imageDiv').length;
					obj.preview(function(index, file, result) {
						length++;
						if (length > 1) {
							if (length == 10) layer.msg('限制1张图片以下', {time: 2000});
							delete files[index];
						} else {
							$('#cover>.text-detail').hide();
							$('.layui-share-upload-img').show();
						}
					});
				},
				done:function(res){
					$('.layui-share-upload-img').attr('src',res.data.src)
				}
			});
		
		form.on('select(type)', function (data) {
			getHousetype(data.value);
		})
		function getHousetype(community_id){
			$.post('{:url("building/housetype")}', {community_id}, function(res){
				if(res.code == 1) return;

				let btn = $('#dropdown_housetype').find('.topselectbtn');
				$('#dropdown_housetype').find('.housetype').remove();
				$.each(res.data, function(i,item){
					btn.after('<dd class="housetype_option housetype-ele-group housetype" data-id="'+item.id+'">'+item.housetype+'<i class="layui-icon layui-icon-link"></i></dd>');
				});
			})
		}
		getHousetype(obj.community_id);
	});
</script>
{/block}