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"></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>
|