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

{extend name="public/layout" /} {block name="title"}素材库{/block} {block name="body"}
<!--<link rel="stylesheet" href="__LAYUI__/common.css" media="all">-->
<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: 18px !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-card-body {
		overflow: hidden;
	}

	.layui-card-body .layui-form-item {
		float: left;
		clear: none;
		width: 330px;
		text-align: left;
	}

	.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: 100%;
	}

	.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;
	}

	@media screen and (max-width: 450px) {
		.layui-form-item {
			position: relative;
		}

		.layui-form-item .layui-input-inline {
			padding-right: 40px !important;
		}

		.adding {
			position: absolute;
			right: 10px;
			top: 0;
		}
	}

	input:disabled,
	input[disabled] {
		color: black;
		opacity: 1;
		-webkit-text-fill-color: black;
		-webkit-opacity: 1;
	}

	.textlh1 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pingmi {
		position: absolute;
		right: 9%;
		top: 0;
	}

	.layui-btn-primary {
		color: #249EFB;
		/* border: 1px solid #249EFB; */
	}

	.layui-btn-primary:hover {
		background-color: #E3F7FF;
		color: #249EFB;
	}

	.layui-card-body {
		padding: 10px 0px;
	}

	.relative {
		position: relative;
	}

	.noneClass {
		display: none !important;
	}

	.wordlist {
		width: 20px;
		position: absolute;
		top: 43px;
		right: 2px;
		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: 297px;
		-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;
	}

	.c_wordlist {
		width: 20px;
		position: absolute;
		top: 43px;
		right: 31px;
		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: 297px;
		-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;
	}
	#symbshowed video{max-height:400px;max-width:100%;margin-top:15px;}
	.center {
		text-align: center;
	}
	.vrlishow{display: none;}
	.housetype>i{
		font-size: 12px !important;
		line-height: 38px;
		color: #4e8bfd;
		float: right;
	}
	.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;
    }
	.flexBox {
		display: flex !important;
	}
</style>

<body>
	<div class="layui-fluid">
		<div class="layui-card">
			<!-- <div class="layui-card-header ">
				<div class="layui-form-item">
					<div class="layui-inline wzh_ays-inline">
						<strong>装修案例</strong>
					</div>
					<div class="goback">
						<a href="{:url('material/caselisting')}"><i class="layui-icon layui-icon-return"></i>
							<span>返回列表</span>
						</a>
					</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">
						<label class="layui-form-label textlh1"><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">
						<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 commu-ele-group select_community_input">
									<input type="text" id="select_community" class="layui-input layui-unselect commu-ele-group" value="" data-selectedid="" readonly="readonly" placeholder="请选择小区" autocomplete="off" />
									<i class="layui-edge commu-ele-group" id="commu_arrow"></i>
								</div>
								<dl class="layui-anim layui-anim-upbit commu-ele-group" id="dropdown_community">
									<dd class="topselectbtn commu-ele-group" data-ref="addcommu"> + 添加小区 + </dd>
									{volist name="communities.arr" id="vo"}
									<dd class="commu_option commu-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="community-adda"></i>
					</div> -->
					<div class="layui-form-item 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-filter="type" lay-search>
								<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">
						<label class="layui-form-label">
							设计师
						</label>
						<div class="layui-input-inline">
							<div class="layui-unselect layui-form-select relative">
								<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" readonly="readonly"
										value="" data-selectedid="" placeholder="请选择设计师" autocomplete="off" />
									<i class="layui-edge designer-ele-group" id="designer_arrow"></i>
									<input type="text" id="select_designer_hd" value="" name="designer_id" style="display: none;">
								</div>
								<dl class="layui-anim layui-anim-upbit designer-ele-group box121 select_type"
									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">
						<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" value=""
										data-selectedid="" readonly="readonly" placeholder="请选择风格" autocomplete="off" />
									<i class="layui-edge decostyle-ele-group" id="decostyle_arrow"></i>
									<input type="text" id="select_decostyle_hd" value="" name="style_id" style="display: none;">
								</div>
								<dl class="layui-anim layui-anim-upbit decostyle-ele-group select_type" id="dropdown_decostyle">
									<dd class="topselectbtn decostyle-ele-group" data-ref="adddecostyle"> + 添加风格 + </dd>
									{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">
						<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" id="select_housetype"
										class="layui-input layui-unselect housetype-ele-group" value=""
										data-selectedid="" readonly="readonly" placeholder="请选择户型" autocomplete="off" />
									<i class="layui-edge housetype-ele-group" id="housetype_arrow"></i>
									<input type="hidden" id="select_housetype_hd" value="" name="housetype_id">
									<input type="hidden" id="bh_type" value="1" name="bh_type">
								</div>
								<dl class="layui-anim layui-anim-upbit housetype-ele-group select_type" 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">
						<label class="layui-form-label"><i style="color:red;">*</i>面积</label>
						<div class="layui-input-inline" style="position: relative;width:200px;">
							<input type='text' onkeyup="RegularInt(this)" name="square" placeholder="请输入面积"
								class="layui-input input-indent-box" lay-verify="subject_add" value="">
							<span class="pingmi">平米</span>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">价格</label>
						<div class="layui-input-inline" style="position: relative;width:200px;">
							<input class="layui-input input-indent-box" onkeyup="RegularNum(this)" style="" name="money"
								placeholder="请输入价格" type="text" value="" />

							<span class="pingmi">万起</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;width: 100%;">
						<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>
							</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: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>
							</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"></textarea> -->
										<script id="anli_content1" name="anli_desc" type="text/plain" style="height: 350px;"></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"></textarea> -->
										<script id="anli_content2" name="real_case" type="text/plain" style="height: 350px;"></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"></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="全屏" checked>
										<input type="radio" id="2" class="radio_input" lay-filter="video_type"
											name="video_type" value="1" title="横屏">
									</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" name="vr_link" 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="adding" title="" lay-skin="primary" {if
								condition="$adding eq 1" }checked{/if}>
						</div>
					</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">
						</div>
					</div>
					<div class="layui-form-item submit-btn" style="clear:both;">
						<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>
</body>
<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>
{/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', 'table', 'layedit', 'element', 'upload'], function () {
		var form = layui.form,
			layedit = layui.layedit,
			element = layui.element,
			upload = layui.upload,
			$ = layui.jquery;
			var objdata={};
			var htmls2 = '';
			var htmls1 = '';

		function set_select(id,value){
			let obj=$("#"+id);
			let names='';
			for(var i=0;i<obj.find('option').length;i++){
				if(obj.find('option').eq(i).val()==value){
					obj.find("option").eq(i).attr("selected",true);
					getHousetype(value);
					names=obj.find('option').eq(i).html();
				}
			}
			setTimeout(function(){
				obj.parent().find(".layui-select-title").find("input").val(names);
			},500)
		}

		//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(localStorage.getItem('anlidata')){
			var bodyjson = JSON.parse(localStorage.getItem('anlidata'));
			if(bodyjson){
				$('input[name="title"]').val(bodyjson.title);
				forlist('#dropdown_community dd',parseInt(bodyjson.community_id),'#select_community');
				forlist('#dropdown_designer dd',parseInt(bodyjson.designer_id),'#select_designer');
				forlist('#dropdown_decostyle dd',parseInt(bodyjson.style_id),'#select_decostyle');
				forlist('#dropdown_housetype dd',parseInt(bodyjson.housetype_id),'#select_housetype');
				$('#select_designer_hd').val(bodyjson.designer_id);
				$('#select_housetype_hd').val(bodyjson.housetype_id);
				$('#select_decostyle_hd').val(bodyjson.style_id);
				$('input[name="square"]').val(bodyjson.square);
				$('input[name="money"]').val(bodyjson.money!='暂无报价'? bodyjson.money:'');
				$('input[name="vr_link"]').val(bodyjson.vr_link);
				if(bodyjson.cover_img){
					$('#anlicoverimg').html('<div class="imageDiv"><img src="' + bodyjson.cover_img + '" class="layui-upload-img" width="100%" height="100%"><div class="iconwrapper"></div></div>');
				}
				objdata['cover_img'] = bodyjson.cover_img;
				htmls1 = bodyjson.anli_desc;
				htmls2 = bodyjson.real_case;
				editcon(htmls1);
				editcons(htmls2);
				if(bodyjson.community_id){
				set_select('label',bodyjson.community_id);	
				}
				
				if(bodyjson.video_case){
					$('#fileuri').val(bodyjson.video_case);
					$('#symbshowed').html('<video controls src="https://o.nczyzs.com/'+bodyjson.video_case+'" name="media"><source src="https://o.nczyzs.com/'+bodyjson.video_case+'" type="video/mp4"></video>');
				}
			}
		}	
	
		
		function editcon(content){
		 	ue.setContent(content);
		}
		function editcons(content){
			ues.setContent(content);
		}
		$('.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();
		})

		function forlist(obj,ids,objname){
			for(var i=0;i<$(obj).length;i++){
				if($(obj).eq(i).attr('data-id')==ids){
					$(objname).val($(obj).eq(i).html());
					$(objname).attr('selectedid',ids);
				}
			}
		}

		$('input,textarea').off('input').on('input',function(obj){
			cache();
		})
		form.on('select(type)', function (data) {	
			cache();
			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>');
				});
			})
		}


		$(document).on('click','.select_type dd',function (data) {
			cache();
		})
		$('#ueditor_0').contents().find('body').bind("keyup paste copy cut", function(e) {
			cache();
		});
		$('#ueditor_1').contents().find('body').bind("keyup paste copy cut", function(e) {
			cache();
		});

		$('#postfiles').click(function(){
			var timess=setInterval(function(){
				if($('#ossfile').find('.progress-bar').attr('aria-valuenow')==100){
					setTimeout(function(){
						objdata['video_case']=$('#fileuri').val();
						cache();
					},1000)
					clearInterval(timess);
				}
			},100)
		})


		function cache(){
			setTimeout(function(){
				var formarray=$("form").serializeArray();
				for(var i in formarray){
					objdata[formarray[i]['name']]=formarray[i]['value']
				}
				objdata['anli_desc']=ue.getContent('anli_content1');
				objdata['real_case']=ues.getContent('anli_content2');
				objdata['video_case']=$('#fileuri').val();
				var datas=JSON.stringify(objdata);
				localStorage.setItem('anlidata',datas);
			},500)
		}

		
	
		//自定义验证规则
		form.verify({
			subject_add: function (value) {
				if (value > 5000) {
					return '面积最大值5000';
				}
			},
		});

		//案例添加保存
		form.on('submit(layuiadmin-anli-submit)', function (data) {
			if($('.imageDiv img').attr('src')== "" || $('.imageDiv img').attr('src')== undefined || $('.imageDiv img').attr('src')== null){
				if (data.field.cover_img == "" || data.field.cover_img == null || data.field.cover_img == undefined) {
					layer.msg('请选择封面图', { anim: 0, time: 1000, icon: 5 });
					return false;
				}
			}
			var formData = new FormData(data.form);
			ue.ready(function () {
			 	formData.append('desc', ue.getContent('anli_content1'));
			});	
			ue.ready(function () {
				formData.append('real_case', ues.getContent('anli_content2'));
			});		
			formData.append('cover_img',objdata['cover_img']);
			if(objdata['cover_share_img'])
			formData.append('cover_share_img',objdata['cover_share_img']);
			//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('video_case',$('#fileuri').val());
			formData.append('vr_case',$('input[name=vr_link]').val());
			// 单击之后提交按钮不可选,防止重复提交
			var DISABLED = 'layui-btn-disabled';
			var target = '#layuiadmin-anli-submit';
			$(target).addClass(DISABLED);
			$(target).attr('disabled', 'disabled');
			
			$.ajax({
				url: '{:url("material/apicaseadding")}',
				type: 'post',
				data: formData,
				dataType: 'json',
				processData: false,
				contentType: false,
				success: function (res) {
					if (res.code === 0) {
						objdata={};
						localStorage.setItem('anlidata','');
						layer.msg(res.msg, {
							anim: 0, time: 1000, icon: 6,
						}, function () {
							var adding = $("input[name='adding']").is(":checked");
							if (adding) {
								// window.location.reload();
								location.href = "{:url('material/case_add')}?adding=1";
							} else {
								var index = parent.layer.getFrameIndex(window.name);
								parent.layer.close(index);
								parent.layui.table.reload('anli-table');

							}
						});
					} else {
						layer.msg(res.msg, { anim: 0, time: 1000, icon: 5 });
						$(target).removeClass(DISABLED);
						$(target).removeAttr('disabled');
					}
				},
				error: function (e) {
					$(target).removeClass(DISABLED);
					$(target).removeAttr('disabled');
				}
			});

			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();
			$('#select_designer_hd').val(designer_id);
		});
		$(".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();
			$('#select_decostyle_hd').val(decostyle_id);
		});
		$('#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();
			$('#select_housetype_hd').val(housetype_id);
			if($(this).hasClass('housetype')){
				$('#bh_type').val(2);
			}
		});

		///
		$('.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 > 20) {
					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.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 内容中的按钮提交
					setTimeout(function(){
						$('#select_decostyle_hd').val($("#select_decostyle").attr('data-selectedid'))
					},1000)
					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) {
					setTimeout(function(){
						$('#select_housetype_hd').val($("#select_housetype").attr('data-selectedid'))
					},1000)
					//点击确认触发 iframe 内容中的按钮提交
					var submit = layero.find('iframe').contents().find("#layuiadmin-housetype-submit");
					submit.click();
				}
			});
		}
		//案例封面图
		upload.render({
			elem: '#anlicoverimg',
			accept: 'images',
			url: '{:url("fileupload")}',
			exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
			field: 'file',
			size: 1 * 1024,
			auto: true,
			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: 1000 });
						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"></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>');
								layer.close(index);
							});
						});
						$('.iconwrapper').append(idom);
					}
				});
			},
			done:function(res){
				objdata['cover_img']=res.data.src;
				cache();
			}
		});


		upload.render({
			elem: '#cover',
			accept: 'images',
			url: '{:url("fileupload")}',
			exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
			field: 'file',
			size: 1 * 1024,
			auto: true,
			choose: function (obj) {
				files = obj.pushFile();
				obj.preview(function (index, file, result) {
						$('#cover').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();
								$('#cover').html('<div class="text-detail"><span>+</span><p>选择替换封面图</p></div>');
								layer.close(index);
							});
						});
						$('.iconwrapper').append(idom);
				});
			},
			done:function(res){
				objdata['cover_share_img'] = res.data.src;
				cache();
			}
		});

		// $('.imageDiv').on('click', 'i', function() {
		// 	var that = this;
		// 	layer.confirm('确定删除该图片么？', function(index) {
		// 		var imgDiv = $(that).closest('.imageDiv');
		// 		if(id = imgDiv.data('id')) {
		// 			delete files[id];
		// 		}
		// 		imgDiv.remove();
		// 		layer.close(index);
		// 	});
		// });

	});
</script>
{/block}