<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <?php $shoname_name = D('Home/Front')->get_config_by_name('shoname'); ?>
  <title><?php echo $shoname; ?></title>
  <link rel="shortcut icon" href="" />
        
  <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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

  <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
 
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->  

<link href="./resource/css/bootstrap.min.css?v=201903260001" rel="stylesheet">
<link href="./resource/css/common.css?v=201903260001" rel="stylesheet">
<script type="text/javascript">
            window.sysinfo = {
            <?php if (!empty($_W['uniacid']) ){ ?>'uniacid': '{$_W['uniacid']}',<?php } ?>
			
            <?php if( !empty($_W['acid'])  ){ ?>'acid': '{$_W['acid']}',<?php } ?>
			
            <?php if (!empty($_W['openid']) ) { ?>'openid': '{$_W['openid']}',<?php } ?>
			
            <?php if( !empty($_W['uid']) ) {  ?>'uid': '{$_W['uid']}',<?php } ?>
			
            'isfounder': <?php if (!empty($_W['isfounder']) ) { ?>1<?php  }else{  ?>0<?php } ?>,
			
            'siteroot': '{$_W['siteroot']}',
                    'siteurl': '{$_W['siteurl']}',
                    'attachurl': '{$_W['attachurl']}',
                    'attachurl_local': '{$_W['attachurl_local']}',
                    'attachurl_remote': '{$_W['attachurl_remote']}',
                    'module' : {'url' : '<?php if( defined('MODULE_URL') ) { ?>{MODULE_URL}<?php } ?>', 'name' : '<?php if (defined('IN_MODULE') ) { ?>{IN_MODULE}<?php } ?>'},
            'cookie' : {'pre': ''},
            'account' : {:json_encode($_W['account'])},
            };
        </script>
		
<script type="text/javascript" src="./resource/js/lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./resource/js/lib/bootstrap.min.js"></script>
<script type="text/javascript" src="./resource/js/app/util.js?v=201903260001"></script>
<script type="text/javascript" src="./resource/js/app/common.min.js?v=201903260001"></script>
<script type="text/javascript" src="./resource/js/require.js?v=201903260001"></script>
<script type="text/javascript" src="./resource/js/lib/jquery.nice-select.js?v=201903260001"></script>
	<script type="text/javascript" src="./resource/components/colpick/colpick.js"></script>
  <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
   <link href="/static/css/snailfish.css" rel="stylesheet">
	<link href="./resource/components/colpick/colpick.css" rel="stylesheet">
	<style>
		.layadmin-name {background-color: #009688;color: #fff;width: 90px;text-align: center;height: 22px;margin-bottom:2px;}
		a {color: #333;text-decoration: none;cursor: pointer;}
		a:hover{color: #333;text-decoration: none;}
		a:active{color: #333;text-decoration: none;}
		a:focus {color:#999;text-decoration: none;}
		.half {width: 50%;float: left;font-size: 15px;}
		.back_pimu{width: 300px;text-align: center;margin: 0 auto;}
		.back_pimu img{width: 100%;}
		.resetBtn{color: #3276b1;}
		a.resetBtn:hover{color: #3276b1;}
	</style>
</head>
<body layadmin-themealias="default">

<div class="layui-fluid" style="min-width: 1000px;">
	<div class="layui-card">
		<div class="layui-card-header layui-elem-quote">当前位置：<span class="line-text">邀新海报</span></div>
		<div class="layui-card-body" style="padding:15px;">
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				<ul class="layui-tab-title">
					<li class="layui-this">背景</li>
					<li><a href="{:U('invitegift/poster_qrcode')}">二维码</a></li>
				</ul>
				<div class="layui-tba-content" style="height: 100%;">
					<form action="" method="post" class="layui-form" lay-filter="component-layui-form-item" enctype="multipart/form-data">
						<div class="layui-form-item" style="height: 750px;">
							<div class="half" style="background: #f1f1f1;padding: 5px;height: auto;min-height: 100%;">
								<div class="back_pimu" style="position: relative;background: #fff;width: 375px;height: auto;min-height: 100%;">
									<div class="phone_top" style="position: relative;width: 375px;height: 64px;">
										<img class="img" src="/static/images/diy/poster_1.png" style="width: 375px;height: 20px;position: absolute;top: 0px;left: 0px;z-index: 100;">
										<img class="img" src="/static/images/diy/poster_2.png" style="position: absolute;right: 7px;width: 87px;height: 32px;bottom: 6px;">
									</div>
									<div class="back_body" style="width:375px;height: 667px;<?php if($data['invite_poster_back_type'] == 0){?>background: <?php echo $data['invite_poster_back_color'];?>;<?php }else{ ?>background: url('<?php echo tomedia($data['invite_poster_back_img']);?>') no-repeat;background-size:100% 100%;<?php } ?>"></div>
								</div>
							</div>
							<div class="half">
								<div class="layui-form-item">
									<label class="layui-form-label">背景</label>
									<div class="layui-input-block">
										<label class='radio-inline'>
											<input type='radio' name='invite_poster_back_type' lay-filter="invite_poster_back_type" value='0' <?php if( !isset($data['invite_poster_back_type']) || $data['invite_poster_back_type'] == 0){ ?>checked<?php } ?> title="纯色背景" />
										</label>
										<label class='radio-inline'>
											<input type='radio' name='invite_poster_back_type' lay-filter="invite_poster_back_type" value='1' <?php if( isset($data['invite_poster_back_type']) && $data['invite_poster_back_type'] == 1){ ?>checked<?php } ?> title="背景图片" />
										</label>
									</div>
								</div>
								<div class="layui-form-item" id="invite_poster_back_type_0" <?php if( !isset($data['invite_poster_back_type']) || $data['invite_poster_back_type'] == 0){ ?>style="display:block"<?php }else{ ?>style="display:none"<?php } ?>>
								<label class="layui-form-label">背景颜色</label>
								<div class="layui-input-block">
									<div class="layui-input-inline" style="width: 120px;">
										<input type="text" name="invite_poster_back_color" value="{$data['invite_poster_back_color'] }" placeholder="请选择颜色" class="layui-input" id="invite_poster_back_color-input">
									</div>
									<div class="layui-inline" style="left: -11px;margin-right: 0px;">
										<div id="invitePosterBackColors" class="layui-inline">
											<div class="layui-unselect layui-colorpicker"><span><span class="layui-colorpicker-trigger-span" lay-type="" style="background: {$data['invite_poster_back_color']}"><i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i></span></span></div>
										</div>
									</div>
									<div class="layui-inline" style="vertical-align:top;line-height: 35px;margin-right: 0px;">
										<a class="resetBtn resetBackColor">重置</a>
									</div>
								</div>
							</div>
							<div class="layui-form-item" id="invite_poster_back_type_1" <?php if( isset($data['invite_poster_back_type']) && $data['invite_poster_back_type'] == 1){ ?>style="display:block"<?php }else{ ?>style="display:none"<?php } ?>>
								<label class="layui-form-label">背景图片</label>
								<div class="layui-input-block">
									{:tpl_form_field_image2('invite_poster_back_img', $data['invite_poster_back_img'])}
									<span class='layui-form-mid layui-word-aux'>建议图片尺寸为750x1334，比例为9:16</span>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label"> </label>
								<div class="layui-input-block">
									<input type="submit" value="提交" lay-submit lay-filter="formDemo" class="btn btn-primary"  />
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
	   </div>
    </div>
</div>

<script src="/layuiadmin/layui/layui.js"></script>

<script>
	layui.config({
		base: '/layuiadmin/' //静态资源所在路径
	}).extend({
		index: 'lib/index' //主入口模块
	}).use('index');
</script>

<script>
//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
var layer = layui.layer;
var $;

var cur_open_div;

layui.use(['jquery', 'layer','form','colorpicker'], function(){ 
  $ = layui.$;
  var form = layui.form;
  var colorpicker = layui.colorpicker;

	form.on('radio(invite_poster_back_type)',function(data){
		if(data.value == 1){
			$('#invite_poster_back_type_1').show();
			$('#invite_poster_back_type_0').hide();

			var back_img = $('#invite_poster_back_type_1').find('.img-thumbnail').attr('src');
			$('.back_body').css('background', "url('"+back_img+"') no-repeat");
			$('.back_body').css('background-size', "100% 100%");
		}else if(data.value == 0){
			$('#invite_poster_back_type_1').hide();
			$('#invite_poster_back_type_0').show();

			var back_color = $('input[name="invite_poster_back_color"]').val();
			$('.back_body').css('background', back_color);
		}
	});

  //监听提交
  form.on('submit(formDemo)', function(data){
	
	 $.ajax({
		url: data.form.action,
		type: data.form.method,
		data: data.field,
		dataType:'json',
		success: function (info) {
		  
			if(info.status == 0)
			{
				layer.msg(info.result.message,{icon: 1,time: 2000});
			}else if(info.status == 1){
				var go_url = location.href;
				if( info.result.hasOwnProperty("url") )
				{
					go_url = info.result.url;
				}
				
				layer.msg('操作成功',{time: 1000,
					end:function(){
						location.href = info.result.url;
					}
				}); 
			}
		}
	});
	
    return false;
  });
})

var default_color = "#ffffff";

var invite_poster_back_color = "{ $data['invite_poster_back_color'] }";
$('#invitePosterBackColors').colpick({
	submit:true,
	color: invite_poster_back_color,
	onSubmit: function(color,color2){
		$('#invite_poster_back_color-input').val('#'+color2);
		$('#invitePosterBackColors').find('.layui-colorpicker-trigger-span').css('background','#'+color2);
		$('.colpick_full').hide();
		$('.back_body').css('background-color', '#'+color2);
	}
});

$('input[name="invite_poster_back_img"]').on('input propertychange',function(e){
	alert('Changed!');
})

$('.resetBackColor').click(function(){
	$('#invite_poster_back_color-input').val(default_color);
	$('#invitePosterBackColors').find('.layui-colorpicker-trigger-span').css('background',default_color);
	$('.colpick_full').hide();
	$('.back_body').css('background-color', default_color);
});

</script>  
</body>
