trick9191
/
wlyy2.0
Fork de Amoy2/wlyy2.0


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <title>二维码管理</title>
    <link rel="stylesheet" href="../iconfont/iconfont.css" type="text/css" />
    <link rel="stylesheet" href="../cross/css/cross.css" type="text/css" />
    <link rel="stylesheet" href="../cross/css/cross.ui.css" type="text/css" />
    <link rel="stylesheet" href="../css/health-edu.css" type="text/css" />
    <link rel="stylesheet" href="../widget/artDialog/4.1.7/css/artDialog.css" type="text/css" />
    <link rel="stylesheet" href="../widget/fileUpload/9.11.2/css/jquery.fileupload.css" type="text/css" />
	
</head>
<body>
<div class="c-hidden">
    <div class="phone-part fr">
       <div class="c-t-center mb30">
       		<a id="preview" href="javascript:;" class="c-btn bgc-ec6941 btn-w60">预览</a>
       </div>
    	<div class="phone">
    		<div class="phone-wrap">
	    		<div class="phone-header">
	    			<img src="../images/health-edu/top.png" class="width-100" />
	    			<div class="phone-tit">
	    				<a href="javascript:;" class="btn-return"><i class="iconfont icon-xiangzuo c-f12"></i> 返回</a>
	    				<h1>二维码管理</h1>
	    				<a href="#" class="btn-more"><i class="iconfont icon-more"></i></a>	
	    			</div>
	    		</div>
	        	<div class="phone-main">
	        		
	        		<div class="c-position-r c-t-center height-100">
	        			<div class="position-t width-100 mtb20">
		           			<img id="phoneTopImgUrl" src="" alt="" />
		           			<p class="mt10 c-f14 c-666">文章顶部位置</p>
		           		</div>
		           		<div class="position-b width-100 mtb20 c-hide">
		           			<img id="phoneBottomImgUrl" src="" alt="" />
		           			<p class="mt10 c-f14 c-666">文章尾部位置</p>
		           		</div>
	        		</div>
	            </div>
            </div>
       </div>
    </div>
    <div class="main-part p20">
        <div class="form-layout form-horizontal form-horizontal-wider c-f14 c-666 mtb20">
        	<input type="hidden" id="id"/>
        	<div class="control-group">
	            <label class="control-label mt25 c-t-right">上传二维码图片：</label>
	            <div class="control-form">
            		<span id="showImgUrlDiv">
	                </span>
	                <span class="btn-file btn-file-3 fileinput-button" id="uploadFileFlag">
						<i class="c-f40 c-bold">+</i>
						<input id="uploadImg" class="fileupload-btn" type="file" name="file" multiple="">
					</span>
					<span class="control-tip">注：为了前端的优质显示效果，建议图片大小控制在100kb以内，像素200x200以内（支持jpg/png/gif）</span>
	            </div>
	        </div>
	        <div class="control-group">
	            <label class="control-label c-t-right">添加位置：</label>
	            <div class="control-form" id="position">
	                <label class="radio checked" data-toggle="radio">
	                    <input type="radio" class="c-hide" name="position" value="1">
	                    <i class="icon-radio"></i>文章顶部
	                </label>
	                <label class="radio ml40" data-toggle="radio">
	                    <input type="radio" class="c-hide" name="position" value="2">
	                    <i class="icon-radio"></i>文章尾部
	                </label>
	            </div>
	        </div>
	        <div class="control-group">
	            <div class="control-form">
	            	<a href="javascript:save()" class="c-btn c-btn-blue btn-w60"><i class="iconfont">&#xe652;</i>保存</a>
	            </div>
	        </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="../cross/js/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="../cross/js/cross.ui.js"></script>
<script type="text/javascript" src="../widget/placeholder/2.0.7/js/jquery.placeholder.js"></script>
<script type="text/javascript" src="../widget/artDialog/4.1.7/js/artDialog.js"></script>
<script type="text/javascript" src="../widget/fileUpload/9.11.2/js/jquery.fileupload.js"></script>
<script src="../cross/js/jquery/1.8.3/ajaxfileupload.js"></script>
	
<script type="text/javascript">
$(function() {
	$('.phone-main').height($('.phone-wrap').height() - $('.phone-header').height());
	//预览
	$('#preview').click(function(){
		if($.trim($('#position .checked').text()) == '文章顶部'){
			$('.position-t').show().siblings().hide();
		}else{
			$('.position-b').show().siblings().hide();
		}
	});
	
	//点击上传图片
	$('#uploadImg').change(function() {
		uploadImage();
    });
	
	//初始化查询
	query();
});

function query(newImgUrl) {
	artLoading = art.dialog({lock: true,content: '<img src="../widget/artDialog/4.1.7/images/loading.gif" class="mr10" />数据加载中，请稍候...', tips:true});
	$.post("/JkEdu/articleQRCode/getArticleQRCode", {}, function(result) {
		artLoading.close();
		var data = eval("(" + result + ")");
		if (data.Code = 1) {
			var ret = data.Result;
			var html = "";
			var phoneTopHtml = "";
			var phoneBottomHtml = "";
			if (ret.length > 0) {
				$("#id").val(ret[0].id);
				$('#position').radioGroup({operate:'setKey',opreateDataKey:ret[0].position});
				if (ret[0].imgurl) {
					$("#phoneTopImgUrl").attr('src',ret[0].imgurl); 
					$("#phoneBottomImgUrl").attr('src',ret[0].imgurl);
					html += '<div class="upload-img mr20">';
					html += '<img id="codeImgUrl" src="'+ret[0].imgurl+'" alt="" />';
					html += '<i class="icon icon-close" id="remove"></i></div>';
					$("#showImgUrlDiv").html(html);
					$("#uploadFileFlag").hide();
				} else {
					$("#uploadFileFlag").show();
				}
			} else {
				$('#position').radioGroup({operate:'setKey',opreateDataKey:"1"});
			}
			
			//删除图片
			$('#remove').click(function(){
				removeImageUrl();
			})
		} else {
			ask(data.Message);
		}
	});
}

//保存
function save() {
	var id = $("#id").val();
	var position = $('#position').radioGroup({operate:'getKey'});
	//获取上传图片src地址
	var imgUrl = $("#codeImgUrl").attr('src');
	var display =$('#showImgUrlDiv').css('display');
	if (display == 'none' || imgUrl == null || imgUrl == "") {
		ask("二维码图片不能为空");
		return;
	}
	
	var param = {};
	if (id) {
		param.id = id;
	}
	param.position = position;
	param.imgUrl = imgUrl;
	
	artLoading = art.dialog({lock: true,content: '<img src="../widget/artDialog/4.1.7/images/loading.gif" class="mr10" />数据加载中，请稍候...', tips:true});
	$.post("/JkEdu/articleQRCode/saveArticleQRCode", param, function(result) {
		artLoading.close();
		var data = eval("(" + result + ")");
		ask(data.Message);
		query();
	});
	
}

//上传图片
function uploadImage() {
	var val = $("#uploadImg").val();
	if (val == null||val == "") {
		ask("文件上传有问题，请从新上传！");
		return;
	}
	
	$.ajaxFileUpload({
		url : '/JkEdu/file/upload', //需要链接到服务器地址  
		secureuri : false,
		fileElementId : 'uploadImg', //文件选择框的id属性  
		dataType : 'json',
		success : function(data, status) {
			var html = '';
			if (data.Code = 10000) {
				$("#phoneTopImgUrl").attr('src',data.url.Uri); 
				$("#phoneBottomImgUrl").attr('src',data.url.Uri);
				html += '<div class="upload-img mr20">';
				html += '<img id="codeImgUrl" src="'+data.url.Uri+'" alt="" />';
				html += '<i class="icon icon-close" id="remove"></i></div>';
				$("#showImgUrlDiv").html(html);
				$("#showImgUrlDiv").show();
				$("#uploadFileFlag").hide();
				
				//删除图片
				$('#remove').click(function(){
					removeImageUrl();
				})
			} else {
				ask(data.Message);
			}
		} 
	});
}

function removeImageUrl() {
	$("#showImgUrlDiv").hide();
	$("#uploadFileFlag").show();
	$('#uploadImg').change(function() {
		uploadImage();
    });
}

//消息提示
function ask(message){
 	art.dialog({
		lock : true,
		artIcon : 'ask',
		opacity : 0.4,
		width : 250,
		title : '提示',
		content : message,
		ok : function() {
			
		}
	});
}
</script>
</body>
</html>