orzar-admin/page/table/brandedit.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="../../assets/css/public.css" media="all">
		<style>
			body {
				background-color: #ffffff;
			}

			.img-3 {
				max-width: 36px;
				max-height: 36px;
				border-radius: 6px;
			}

			.upload-item img {
				height: 40px;
			}
		</style>
	</head>
	<body>
		<div class="layui-form layuimini-form" lay-filter="edit">
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				<ul class="layui-tab-title">
					<li class="layui-this" data-i18n="carlist.basic_info"></li>
					<li data-i18n="brand.album"></li>
					<li data-i18n="brand.advantage"></li>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<div class="layui-row">
							<div class="layui-col-md6 layui-col-sm6">
								<div class="layui-form-item">
									<label class="layui-form-label" data-i18n="brand.name"></label>
									<div class="layui-input-block">
										<input type="hidden" name="id" id="idedt" value="" />
										<input type="text" name="name" data-i18n-placeholder="pleaseenter" value=""
											class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-col-md6 layui-col-sm6">
								<div class="layui-form-item layui-form-text">
									<label class="layui-form-label" data-i18n="seach.status"></label>
									<div class="layui-input-block">
										<input type="checkbox" id="status" lay-filter="status" lay-skin="switch"
											lay-text="">
										<input type="text" style="display:none" name="status" value="1" />
									</div>
								</div>
							</div>
							<div class="layui-col-md6 layui-col-sm6">
								<div class="layui-form-item">
									<label class="layui-form-label " data-i18n="brand.logo"></label>
									<div class="layui-input-block upload-item">
										<img class="img-3 logo" src="../../assets/images/noimg.png" alt="" />
										<input type="text" style="display:none" name="logo" value="" />
										<button type="button" class="layui-btn btnup"><i class="layui-icon"></i><span
												data-i18n="userlist.uploadig"></span></button>
									</div>
								</div>
							</div>
							<div class="layui-col-md6 layui-col-sm6">
								<div class="layui-form-item">
									<label class="layui-form-label " data-i18n="brand.logoalt"></label>
									<div class="layui-input-block upload-item">
										<input type="text" name="logo_alt" data-i18n-placeholder="pleaseenter" value=""
											class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-col-md6 layui-col-sm6">
								<div class="layui-form-item">
									<label class="layui-form-label " data-i18n="brand.banner"></label>
									<div class="layui-input-block upload-item">
										<img class="img-3 toppic" src="../../assets/images/noimg.png" alt="" />
										<input type="text" style="display:none" name="toppic" value="" />
										<button type="button" class="layui-btn btnup"><i class="layui-icon"></i><span
												data-i18n="userlist.uploadig"></span></button>
										(<span data-i18n="Imagesize"></span>1536 × 368)		
									</div>
								</div>
							</div>
							<div class="layui-col-md6 layui-col-sm6">
								<div class="layui-form-item">
									<label class="layui-form-label " data-i18n="brand.banneralt"></label>
									<div class="layui-input-block upload-item">
										<input type="text" name="toppic_alt" data-i18n-placeholder="pleaseenter" value=""
											class="layui-input">
									</div>
								</div>
							</div>

							<div class="layui-col-md6 layui-col-sm6">
								<div class="layui-form-item">
									<label class="layui-form-label " data-i18n="brand.thumbnail"></label>
									<div class="layui-input-block upload-item">
										<img class="img-3 descpic" src="../../assets/images/noimg.png" alt="" />
										<input type="text" style="display:none" name="descpic" value="" />
										<button type="button" class="layui-btn btnup"><i class="layui-icon"></i><span
												data-i18n="userlist.uploadig"></span></button>
										(<span data-i18n="Imagesize"></span>720 × 450)	
									</div>
								</div>
							</div>
							<div class="layui-col-md6 layui-col-sm6">
								<div class="layui-form-item">
									<label class="layui-form-label " data-i18n="brand.thumbnailalt"></label>
									<div class="layui-input-block upload-item">
										<input type="text" name="descpic_alt" data-i18n-placeholder="pleaseenter" value=""
											class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
							    <label class="layui-form-label" data-i18n="brand.is_hot"></label>
							    <div class="layui-input-block">
									<select name="is_hot"  class="layui-input" >
										<option value="0" data-i18n="alls.no"></option>
										<option value="1" data-i18n="alls.yes"></option>
									</select>
							    </div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label" data-i18n="brand.desc"></label>
								<div class="layui-input-block">
									<textarea name="desc" class="layui-textarea" id="desc"></textarea>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-tab-item">
						<div class="layui-row">
							<div class="layui-form-item">
								<label class="layui-form-label">品牌图册</label>
								<div class="layui-input-block">
									<div class="layui-upload">
										<button type="button" class="layui-btn" id="albumUpload">
											<i class="layui-icon">&#xe67c;</i><span data-i18n="userlist.uploadig"></span>
										</button>
										(<span data-i18n="Imagesize"></span>400 × 300)
										<div class="layui-upload-list" id="albumList">
											<!-- 图片预览区域 -->
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-tab-item">
						<div class="layui-row">
							<div class="layui-form-item">
								<label class="layui-form-label" data-i18n="brand.advantage"></label>
								<div class="layui-input-block">
									<div class="feature-list" id="itemList">
										<!-- 特点列表 -->
									</div>
									<div style="margin-top: 10px;">
										<button type="button" class="layui-btn layui-btn-normal" id="addItem">
											<i class="layui-icon">&#xe654;</i><span data-i18n="brand.advantage"></span>
										</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-form-item layui-hide">
					<div class="layui-input-block bootm">
						<input type="button" lay-submit lay-filter="saveBtn" id="saveBtn" value="确认">
					</div>
				</div>
			</div>
		</div>
		<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
		<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
		<script src="../../assets/main.js" charset="utf-8"></script>
		<script src="../../assets/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../assets/js/i18n1.js"></script>
		<script>
			function getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			}
			layui.use(['form', 'upload'], function() {
				var form = layui.form,
					layer = layui.layer,
					upload = layui.upload,
					$ = layui.$;
				form.render();
				$("#idedt").val(getQueryString('id'))
				self.branddetail({
					type: 'get',
					data: {
						id: getQueryString('id')
					},
					successCallBack: function(result) {

						if (result.code == 0) {
							$(".toppic").attr("src", result.data.toppic_full)
							$(".logo").attr("src", result.data.logo_full)
							$(".descpic").attr("src", result.data.descpic_full)
							form.val('edit', result.data)
							form.render();
							// 字段 状态 status
							layui.use(["form"], function() {
								layui.$("#status").attr("checked", layui.$('input[name="status"]')
									.val() != 0);
								layui.form.render();
								layui.form.on("switch(status)", function(data) {
									layui.$('input[name="status"]').val(this.checked ? 1 :
									0);
								});
							})
							 // 回显图册
							 if(result.data.banner && result.data.banner.length > 0) {
								result.data.banner.forEach(function(item) {
									var imgId = 'img_' + new Date().getTime() + '_' + Math.random();
									$('#albumList').append(`
										<div class="upload-itemm" style="display: inline-block; margin: 10px;">
											<img src="${item.pic_full}" alt="${item.alt || ''}" id="${imgId}" class="img-3">
											<input type="hidden" name="pic[]" value="${item.pic}">
											<input type="hidden" name="idimg[]" value="${item.id}" />
											<input type="text" class="layui-input" data-i18n-placeholder="brand.image_desc" 
												style="margin: 5px 0px;height: 30px;" name="alt[]" value="${item.alt || ''}">
											<button type="button" class="layui-btn layui-btn-danger layui-btn-xs delete-img">
												<i class="layui-icon">&#xe640;</i><span data-i18n="btn.delete"></span>
											</button>
										</div>
									`);
								});
							}
							// 回显特点数据
							if(result.data.trait && result.data.trait.length > 0) {
							    result.data.trait.forEach(function(item) {
									addFeature('itemList',form,'标题','内容', item.title, item.content,item.id)
							    });
							} else {
							    // 如果没有添加一个空的
								// addFeature('itemList',form,'标题','标题','','')
							}
						};
					},
					failCallBack: function(result) {
						alert(result.message);
					}
				})
				// 添加按钮点击事件
				$('#addItem').on('click', function() {
					addFeature('itemList', form, '标题', '内容','','')
				});
				// 删除特点按钮点击事件
				$(document).on('click', '.delete-feature', function() {
					$(this).closest('.feature-item').remove();
					// 重新排序索引
					$('#itemList .feature-item').each(function(index) {
						$(this).find('input[name^="title"]').attr('name', 'title[' + index + ']');
						$(this).find('textarea[name^="content"]').attr('name', 'content[' + index + ']');
					});
				});
				$('.btnup').each(function(index, item) {
					var $item = $(item).closest('.upload-item');
					upload.render({
						elem: item,
						url: baseUrl + 'console/upload/image',
						accept: 'images',
						field: 'image',
						done: function(res) {
							if (res.code == 0) {
								$item.find('img').attr('src', res.data.image_url);
								$item.find('input').val(res.data.image_name);
							}
						}
					});
				});
				$('.upload-item img').on('click', function() {
					var imgList = [];
					$('.upload-item img').each(function() {
						imgList.push({ src: $(this).attr('src') });
					});
					console.log(imgList)
					layer.photos({
						photos: {
							data: imgList
						},
						anim: 5, // 动画类型
						shadeClose: true, // 点击遮罩关闭
						closeBtn: 1, // 显示关闭按钮
					});
				});
				$(document).on('click', '.upload-itemm img', function() {
					var imgList = [];
					$('.upload-itemm img').each(function() {
						imgList.push({ src: $(this).attr('src') });
					});
					layer.photos({
						photos: {
							data: imgList
						},
						anim: 5,
						shadeClose: true,
						closeBtn: 1,
					});
				});
				// 图片上传
				uploadimage(upload,baseUrl)

				//监听提交
				form.on('submit(saveBtn)', function(data) {
					var index = layer.alert(JSON.stringify(data.field), {
						title: '最终的提交信息'
					}, function() {

						// 关闭弹出层
						layer.close(index);

						var iframeIndex = parent.layer.getFrameIndex(window.name);
						parent.layer.close(iframeIndex);

					});

					return false;
				});

			});
		</script>
	</body>
</html>