crm/app/sys/view/smart_screen/add1.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;
	}
	.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-body">
				<form class="layui-form" enctype="multipart/form-data" lay-filter="anli-form">
                    <input type="hidden" name="cate1" value='{$cate1}'/>
					<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" lay-verify="required" name="title" type="text" value="" placeholder="请输入标题"
								autocomplete="off">
						</div>
					</div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="colorRed" style="color:red;margin-right:5px;"></span>分类</label>
                        <div class="layui-input-inline">
                            <select name="cate2" lay-filter="type" id="type" lay-search>
                                <option value="">请选择分类</option>
                                {volist name="type" id="t"}
                                    {if($t.title != '小区' && $t.title != '户型' && $t.title != '风格')}
                                        <option value="{$t.id}">{$t.title}</option>
                                    {/if}
                                
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="colorRed" style="color:red;margin-right:5px;"></span>标签</label>
                        <div class="layui-input-inline">
                            <select name="cate3" id="label" lay-filter="type2">
                                <option value="">请选择标签</option>
                            </select>
                        </div>
                    </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" autocomplete="off" lay-verify="subject_add" value="">
							<span class="pingmi">平米</span>
						</div>
					</div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="colorRed" style="color:red;margin-right:5px;"></span>设计师</label>
                        <div class="layui-input-inline">
                            <select name="designer_id" lay-filter="designer_id" id="designer_id"  lay-search>
                                <option value="">请选择设计师</option>
                                {volist name="designer" id="t"}
                                <option value="{$t.id}">{$t.name}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="colorRed" style="color:red;margin-right:5px;"></span>小区</label>
                        <div class="layui-input-inline">
                            <select name="community_id" lay-filter="community_id" id="community_id" lay-search>
                                <option value="">请选择小区</option>
                                {volist name="community" id="t"}
                                <option value="{$t.id}">{$t.title}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="colorRed" style="color:red;margin-right:5px;"></span>户型</label>
                        <div class="layui-input-inline">
                            <select name="housetype_id" lay-filter="housetype_id" id="housetype_id"  lay-search>
                                <option value="">请选择户型</option>
                                {volist name="housetype" id="t"}
                                <option value="{$t.id}">{$t.title}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="colorRed" style="color:red;margin-right:5px;"></span>风格</label>
                        <div class="layui-input-inline">
                            <select name="decostyle_id" lay-filter="decostyle_id" id="decostyle_id" lay-search>
                                <option value="">请选择风格</option>
                                {volist name="decostyle" id="t"}
                                <option value="{$t.id}">{$t.title}</option>
                                {/volist}
                            </select>
                        </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)" name="money"
								placeholder="请输入价格" type="text" autocomplete="off" value="" />

							<span class="pingmi">万起</span>
						</div>
					</div>
                    <div class="layui-form-item" style="clear:both;width:100%;">
                        <label class="layui-form-label"> 类别：</label>
                        <div class="layui-input-block lh45 mdl20" style="max-width: 300px !important;">
                            <input type="radio" class="radio_input" lay-filter="video_type"
                                name="type" value="0" title="推荐" checked>
                            <input type="radio" class="radio_input" lay-filter="video_type"
                                name="type" value="1" title="必看">
                        </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-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">
										<script id="anli_content1" name="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">
										<script id="anli_content2" name="real_case" 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">
										<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_format" value="0" title="竖屏" checked>
										<input type="radio" id="2" class="radio_input" lay-filter="video_type"
											name="video_format" 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%;">
                                    <label class="layui-form-label">VR链接：</label>
                                    <div class="layui-input-block flexBox">
                                        <input type="text" name="vr_case" placeholder="请输入VR链接" autocomplete="off" class="layui-input">
										<div class="vrBtnSelect">选择vr作品</div>
									</div>
                                </div>
							</dd>
						</dl>
					</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>
{/block} {block name="js"}
<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>
<!-- 配置文件 -->
<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 src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.3.1.min.js" async></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 files = '';

		//案例添加保存
		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;
			// 	}
			// }
            if (files == "" || files == null || files == 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',files);
			formData.append('video_case',$('#fileuri').val());
			formData.append('vr_case',$('input[name=vr_case]').val());
			// 单击之后提交按钮不可选,防止重复提交
			var DISABLED = 'layui-btn-disabled';
			var target = '#layuiadmin-anli-submit';
			$(target).addClass(DISABLED);
			$(target).attr('disabled', 'disabled');
			
			$.ajax({
				url: '{:url("smartScreen/add")}',
				type: 'post',
				data: formData,
				dataType: 'json',
				processData: false,
				contentType: false,
				success: function (res) {
					$(target).removeClass(DISABLED);
					$(target).removeAttr('disabled');
					if (res.code === 0) {
						localStorage.setItem('anlidata','');
						layer.msg(res.msg, {
							anim: 0, time: 1000, icon: 6,
						}, function () {
                            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;
		});

		//vr作品
		$('.vrBtnSelect').click(function(){
			let vrStr = $('input[name="vr_case"]').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_case"]').val(vrObject.show_url);
		            }
		            layer.close(index);
		            //点击确认触发 iframe 内容中的按钮提交
		        }
		    });
		})

		/*---------------------------------------------------------*/
		//案例封面图
		upload.render({
			elem: '#anlicoverimg',
			accept: 'images',
			url: '/upload/',
			exts: 'png|jpg|jpeg',
			field: 'file',
			size: 3 * 1024,
			auto: false,
			choose: function (obj) {
				length = $('.imageDiv').length;
				obj.preview(function (index, file, result) {
					var loadingIndex = layer.load('Loading...', {
						shade: [0.6,'#000'] //0.1透明度的白色背景
					});
                    ossuploadimg(file).then(f => {
						layer.close(loadingIndex);
						files = `https://o.nczyzs.com/${f}`;
						$('#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')) {
									files = '';
								}
								imgDiv.remove();
								$('#anlicoverimg').html('<div class="text-detail"><span>+</span><p>选择替换封面图</p></div>');
								layer.close(index);
							});
						});
						$('.iconwrapper').append(idom);
					})
				});
			},
		});

		function ossuploadimg(file) {
			return new Promise((resolve,reject) => {
				var client = new OSS({
					region: "oss-cn-hangzhou",
					accessKeyId: "LTAI5tHjWupJSCAycy2yVbQZ",
					accessKeySecret: "eNFicm77Cfq3u7ZnQyw1urFmFNpf3w",
					bucket: "zyzswzh",
					secure: true
				});
				var date = new Date().getTime();
				var objectName = 'SmartScreen/' + date + "/" + Date.now() + ".jpeg";
				client.put(objectName, file).then(function (result) {
					resolve(result.name);
				}).catch(function (error) {
					reject(error)
				});
			})
		}

        //切换
		$('.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();
		})

        //下拉框关联
        var typeData = JSON.parse('{$label|raw}');
        form.on('select(type)', function (data) {
            var typeJson = typeData[data.value];
            var typeLabel = $('#label');
            typeLabel.empty().append('<option value="">请选择标签</option>');
            for (r in typeJson) {
                typeLabel.append('<option value=' + r + '>' + typeJson[r] + '</option>');
            }
            form.render();
        });
	});
</script>
{/block}