raolu
/
iHealth-wx-demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
							<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>新增病友咨询</title>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <link rel="stylesheet" href="../../../css/cross.css" type="text/css"/>
    <link rel="stylesheet" href="../../../css/cross.ui.css" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="../../../iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/ss-style.css">
    <link rel="stylesheet" type="text/css" href="../css/zx-style.css">
    <script type="text/javascript" src="../../../js/jquery/2.1.3/jquery.js"></script>
    <script src="../js/ui_search_one.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../widget/mobiscroll/2.15.1/css/mobiscroll.css">
    <script src="../../../widget/mobiscroll/2.15.1/js/mobiscroll.js"></script>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/app.js"></script>
    <script src="../../../js/common_http.js"></script>
    <script type="text/javascript" src="../../../js/weixin_common.js" ></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../widget/artDialog/6.0.5/css/ui-dialog.min.css">
    <script src="../../../widget/artDialog/6.0.5/js/dialog-plus.min.js"></script>
    <script type="text/javascript" src="../../../js/commit_validate.js" ></script>
    <style>
    	.ui-dialog-content{font-size: 16px;}
    	.ax-popup .ui-dialog-footer button{color:#323232 !important;}
    	.ax-popup .ui-dialog-footer button.ui-dialog-autofocus{color:#75BF00 !important;}
    </style>
</head>
<body>
	<!--<div class="h45">
        <div class="demo-comtop">
            <a class="mui-action-back"></a>
            <h1>添加问题</h1>
        </div>
    </div>-->
    <ul class="n-list c-border-tb mt10 doc-detail">
		<li class="list-arrow-d ptb12 ill-time1">
			<div class="n-list-key pr15 c-f15"><i class="required"></i>疾病社区</div>
			<div class="n-list-info c-t-right">
				<input id="txtDiseases" type="text" data-time="illTime1" class="r-input c-5b5b5b" value="" placeholder="请选择疾病类型" readonly/>
				<input id="txtDiseasesCode" type="text" style="display: none;"/>
			</div>
		</li>
	</ul>
    <ul class="n-list c-border-tb mt10 doc-detail">
		<li class="ptb12">
			<div class="n-list-key pr15 c-f17"><i class="required"></i>标题</div>
		</li>
		<li class="n-list-cover ptb12">
			<div class="n-list-info">
				<textarea id="txtTitle" class="r-textarea" rows="2" placeholder="请填写您的标题，（请至少输入5个字）。"></textarea>
			</div>
		</li>
	</ul>
	<ul class="n-list c-border-tb mt10 doc-detail">
		<li class="ptb12">
			<div class="n-list-key pr15 c-f17"><i class="required"></i>内容</div>
		</li>
		<li class="n-list-cover ptb12">
			<div class="n-list-info">
				<textarea id="txtContent" class="r-textarea" rows="4" placeholder="请填写内容，（请至少输入10个字）。"></textarea>
			</div>
		</li>
	</ul>
    <div class="mod mod-record mt15">
    	<!--新增图片上传-->
		<ul class="n-list">
			<li class="ptb12">
				<div class="n-list-key pr15 c-f17">附件</div>
				<div class="n-list-info c-t-right">
					<p class="c-ccc c-f12 c-t-right img-count" id="image_tips">0/9</p>
				</div>
			</li>
			<li class="n-list-cover ptb12">
				<div class="upload-img mt10">
					<ul id="img_ul">
						<li id="add_img_li">
							<a href="javascript:;" class="add-btn" onclick="chooseImage()"></a>
						</li>
					</ul>
				</div>
			</li>
		</ul>
    </div>
    <div id="info" style="display:none;color: red;text-align: center"></div>
    <div id="info2" style="display:none;color: green;text-align: center"></div>
    <div class="mb15 mlr15 mt20">
        <a href="javascript:;" id="commit" class="c-btn c-btn-4dcd70 c-btn-full c-btn-radius c-f18">提交问题</a>
    </div>    
    &nbsp;
    <script>
        var d = dialog({contentType:'load', skin:'bk-popup'});
        var dd = dialog({contentType:'load', skin:'bk-popup', content:'提交中...'});
        var Request = new Object();
		Request = GetRequest(); 
		var disease = Request["disease"];
		var diseaseName = Request["diseaseName"];
        $(function(){
        	queryDisease();
			//从后台那边获取签名等信息
			var params = {};
			params.pageUrl = window.location.href;
			$.ajax(server + "weixin/getSign", {
				data: params,
				dataType: "json",
				type: "post",
				success: function(res){
					if (res.status == 200) {
						var t = res.data.timestamp;
						var noncestr = res.data.noncestr;
						var signature = res.data.signature;
						wx.config({		
//							debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						    appId: appId, // 必填，公众号的唯一标识
						    timestamp: t, // 必填，生成签名的时间戳
						    nonceStr: noncestr, // 必填，生成签名的随机串
						    signature: signature,// 必填，签名，见附录1
						    jsApiList: [
						    	'chooseImage',
						        'uploadImage'
						    ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
						});
					} 
					else{
						dialog({
						  	skin:"ui-dialog ax-popup pror", 
						  	content:"获取微信签名失败", 
						  	ok: function (){},
						  	cancle:function(){}
						}).showModal();
						window.location.href = "online-consulting.html";
					}
				}
			});	
			//提交咨询
			document.querySelector("#commit").addEventListener("tap", function() {
				var data = {};
				data.disease = disease==0?"":disease;//0为界面传入的全部
				data.diseaseName = decodeURI(diseaseName);
				if($("#txtTitle").val() == null)
					data.question = "";
				else
					data.question = utf16toEntities($("#txtTitle").val().replace(/\s+/g,""));
				if($("#txtContent").val() == null)
					data.content = "";
				else
					data.content = utf16toEntities($("#txtContent").val().replace(/\s+/g,""));
				if (validate(data)) {
					//验证通过执行
					dd.showModal();
		            var images = getImages();
		            if(images.length == 0){
		            	doSubmit(data);
		            }
		            else{
						uploadImage(data);
					}
				}
			});	
        })
        
        //查询疾病类型
        function queryDisease(){
        		d.show();
				var arr_key=['1', '2'];
                var arr_value=['高血压社区', '糖尿病社区'];                           
                $('li.ill-time1').mobiscroll({
					theme: 'ios',
					lang: 'zh',
					formatValue: function(d) {
						return d.join(',');
					},
					customWheels: true,
					wheels: [
						[{
							keys: arr_key,
							values: arr_value
						}]
					],
					onSelect: function(valueText, inst) {
						var dd = eval("[" + valueText + "]");
						$('#txtDiseasesCode').val(dd[0].keys);
						$('input[data-time=illTime1]').val(dd[0].values);
						disease = dd[0].keys;
						diseaseName = dd[0].values;
					}
				});
				$('#txtDiseasesCode').val(disease);
				$('input[data-time=illTime1]').val(decodeURI(diseaseName));
				d.close();	
        }
        
        function queryDiseaseFailed(res) {
			d.close();
			if (res && res.msg) {
				dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:res.msg}).show();      
			} else {
				dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'疾病类型获取失败'}).show(); 
			}
		}
		
		function queryDiseaseSuccess(res) {
			if (res.status == 200) {} else {
				queryDiseaseFailed(res);
			}
		}
        
        //验证信息
		function validate(data) {
			if (data.disease == '') {
				dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请选择疾病类型'}).show();
				return false;
			}
			if (data.question.length < 5) {
				dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请至少用5个字描述您的标题'}).show();
				return false;
			}
			if (data.content.length < 10) {
				dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请至少用10个字描述您的内容'}).show();
				return false;
			}
			if (data.question.length > 300) {
				dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请用300字以内完成您的标题'}).show();
				return false;
			}
			if (data.content.length > 500) {
				dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请在500字以内完成您的内容'}).show();
				return false;
			}
			return true;
		}
		//微信上传图片
		var serverId = "";
		function chooseImage(){
			wx.chooseImage({
				count: 9-getImages().length,
		        success: function (res) {
			        for (var i in res.localIds) {
						appendFile(res.localIds[i]);
					}        
		        }
		    });
		}
		function uploadImage(data){
			var images = getImages();
			if (images.length == 0) {
		      return;
		    }
		    var i = 0, length = images.length;
		    serverId = "";
		    function upload() {
		      wx.uploadImage({
		        localId: images[i],
		        isShowProgressTips: 0,
		        success: function (res) {
		          i++;
		          if(serverId.length == 0){
		          	serverId = res.serverId;
		          }
		          else{
		          	serverId =serverId + "," + res.serverId;
		          }          
		          if (i < length) {
		            upload();
		          }
		          if(i == images.length){
		          	doSubmit(data);
		          }          
		        },
		        fail: function (res) {
		          alert(JSON.stringify(res));
		        }
		      });
		    }
		    upload();
		}
		// 添加文件
		function appendFile(p) {
			var amount = getImages().length;
			if (amount >= 8) {
				$("#add_img_li").hide();
			}
			if(amount < 9){
				var $li = $('<li>' + '   <img src="' + p + '" data-src="' + p + '" onclick="viewImg(this)">' + '  <a href="javascript:;" class="del-img" onclick="delImg(this)"><i class="iconfont icon-laji"></i></a>' + '</li>');
				var $add_img_li = $("#add_img_li");
				$add_img_li.before($li);
				$("#image_tips").text(getImages().length + "/9");
			}
		}
		//获取需要上传的图片
		function getImages() {
			var images = [];
			$("#img_ul").find("img").each(function() {
				var imgSrc = $(this).attr("data-src");
				images.push(imgSrc);
			});
			return images;
		}
		//查看图片
		function viewImg(dom) {
			var $img = $(dom);
			var thissrc = getImgUrl($img.attr("data-src"));
			var mWid = $(window).width();
			var mHei = $(window).height();
			var nHtml = '<div class="delimgpop"><div class="del-img-box"><div class="del-img-con"><img class="del-pop-img" src="' + thissrc + '" style="max-width:' + mWid + 'px; max-height:' + mHei + 'px;"></div></div></div>';
			$("body").append(nHtml);
			$(".delimgpop").click(function() {
				$(this).remove()
			});
		};
		//删除图片
		function delImg(dom) {
			var $li = $(dom).parent();
			$li.remove();
			$("#image_tips").text(getImages().length + "/9");
			var amount = getImages().length;
			if(amount <= 8){
				$("#add_img_li").show();
			}
			return;
		}
		
		//微信sdk配置出错
		wx.error(function (res) {
		  alert("wx.error:" + res.errMsg);
		});
		
		//提交咨询
		function doSubmit(data) {
			data.mediaIds = serverId;
			sendPost('patient/consult/communication/add', data, 'json', 'post', submitFailed, submitSuccess);
		}
		
		function submitFailed(res) {
			dd.close();
			if (res && res.msg) {
				dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:res.msg}).show();      
			} else {
				dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'提交失败'}).show(); 
			}
		}
		
		function submitSuccess(res) {
			if (res.status == 200) {
				dd.close();
				location.href = "disease-community.html?type=2";
			} else {
				submitFailed(res);
			}
		}
    </script>
</body>
</html>