patients-consult-reply.html 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>添加病友圈回复</title>
  6. <meta name="format-detection" content="telephone=no"/>
  7. <meta name="viewport"
  8. content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  9. <meta name="apple-mobile-web-app-capable" content="yes"/>
  10. <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  11. <link rel="stylesheet" href="../../../css/cross.css" type="text/css"/>
  12. <link rel="stylesheet" href="../../../css/cross.ui.css" type="text/css"/>
  13. <link rel="stylesheet" type="text/css" href="../../../iconfont/iconfont.css" />
  14. <link rel="stylesheet" type="text/css" href="../../../css/ss-style.css">
  15. <link rel="stylesheet" type="text/css" href="../css/zx-style.css">
  16. <script type="text/javascript" src="../../../js/jquery/2.1.3/jquery.js"></script>
  17. <script src="../js/ui_search_one.js"></script>
  18. <link rel="stylesheet" type="text/css" href="../../../widget/mobiscroll/2.15.1/css/mobiscroll.css">
  19. <script src="../../../widget/mobiscroll/2.15.1/js/mobiscroll.js"></script>
  20. <script src="../../../js/mui.min.js"></script>
  21. <script src="../../../js/app.js"></script>
  22. <script src="../../../js/common_http.js"></script>
  23. <script type="text/javascript" src="../../../js/weixin_common.js" ></script>
  24. <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  25. <link rel="stylesheet" type="text/css" href="../../../widget/artDialog/6.0.5/css/ui-dialog.min.css">
  26. <script src="../../../widget/artDialog/6.0.5/js/dialog-plus.min.js"></script>
  27. <script type="text/javascript" src="../../../js/commit_validate.js" ></script>
  28. <style>
  29. .ui-dialog-content{font-size: 16px;}
  30. .ax-popup .ui-dialog-footer button{color:#323232 !important;}
  31. .ax-popup .ui-dialog-footer button.ui-dialog-autofocus{color:#75BF00 !important;}
  32. </style>
  33. </head>
  34. <body>
  35. <!--<div class="h45">
  36. <div class="demo-comtop">
  37. <a class="mui-action-back"></a>
  38. <h1>添加问题</h1>
  39. </div>
  40. </div>-->
  41. <ul class="n-list c-border-tb mt10 doc-detail">
  42. <li class="ptb12">
  43. <div class="n-list-key pr15 c-f17"><i class="required"></i>回复内容</div>
  44. </li>
  45. <li class="n-list-cover ptb12">
  46. <div class="n-list-info">
  47. <textarea id="txtContent" class="r-textarea" rows="4" placeholder="请填写您的回复内容,(请至少输入10个字)。"></textarea>
  48. </div>
  49. </li>
  50. </ul>
  51. <div class="mod mod-record mt15">
  52. <!--新增图片上传-->
  53. <ul class="n-list">
  54. <li class="ptb12">
  55. <div class="n-list-key pr15 c-f17">上传报告、照片</div>
  56. <div class="n-list-info c-t-right">
  57. <p class="c-ccc c-f12 c-t-right img-count" id="image_tips">0/9</p>
  58. </div>
  59. </li>
  60. <li class="n-list-cover ptb12">
  61. <div class="upload-img mt10">
  62. <ul id="img_ul">
  63. <li id="add_img_li">
  64. <a href="javascript:;" class="add-btn" onclick="chooseImage()"></a>
  65. </li>
  66. </ul>
  67. </div>
  68. </li>
  69. </ul>
  70. </div>
  71. <div id="info" style="display:none;color: red;text-align: center"></div>
  72. <div id="info2" style="display:none;color: green;text-align: center"></div>
  73. <div class="mb15 mlr15 mt20">
  74. <a href="javascript:;" id="commit" class="c-btn c-btn-4dcd70 c-btn-full c-btn-radius c-f18">提交回复</a>
  75. </div>
  76. &nbsp;
  77. <script>
  78. var dd = dialog({contentType:'load', skin:'bk-popup', content:'提交中...'});
  79. var Request = new Object();
  80. Request = GetRequest();
  81. var code = Request["code"];
  82. $(function(){
  83. //从后台那边获取签名等信息
  84. var params = {};
  85. params.pageUrl = window.location.href;
  86. $.ajax(server + "weixin/getSign", {
  87. data: params,
  88. dataType: "json",
  89. type: "post",
  90. success: function(res){
  91. if (res.status == 200) {
  92. var t = res.data.timestamp;
  93. var noncestr = res.data.noncestr;
  94. var signature = res.data.signature;
  95. wx.config({
  96. // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  97. appId: appId, // 必填,公众号的唯一标识
  98. timestamp: t, // 必填,生成签名的时间戳
  99. nonceStr: noncestr, // 必填,生成签名的随机串
  100. signature: signature,// 必填,签名,见附录1
  101. jsApiList: [
  102. 'chooseImage',
  103. 'uploadImage'
  104. ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
  105. });
  106. }
  107. else{
  108. dialog({
  109. skin:"ui-dialog ax-popup pror",
  110. content:"获取微信签名失败",
  111. ok: function (){}
  112. }).showModal();
  113. window.location.href = "online-consulting.html";
  114. }
  115. }
  116. });
  117. //提交咨询
  118. document.querySelector("#commit").addEventListener("tap", function() {
  119. var data = {};
  120. data.consult = code;
  121. data.content = utf16toEntities($("#txtContent").val());
  122. if (validate(data)) {
  123. //验证通过执行
  124. dd.showModal();
  125. var images = getImages();
  126. if(images.length == 0){
  127. doSubmit(data);
  128. }
  129. else{
  130. uploadImage(data);
  131. }
  132. }
  133. });
  134. })
  135. //验证信息
  136. function validate(data) {
  137. if (data.content == '') {
  138. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请描述您的回复内容'}).show();
  139. return false;
  140. }
  141. if (data.content.length > 500) {
  142. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请用500字以内完成您的回复'}).show();
  143. return false;
  144. }
  145. if(data.content.length<10){
  146. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'回复内容不能少于10个字'}).show();
  147. return false;
  148. }
  149. return true;
  150. }
  151. //微信上传图片
  152. var serverId = "";
  153. function chooseImage(){
  154. wx.chooseImage({
  155. count: 9-getImages().length,
  156. success: function (res) {
  157. for (var i in res.localIds) {
  158. appendFile(res.localIds[i]);
  159. }
  160. }
  161. });
  162. }
  163. function uploadImage(data){
  164. var images = getImages();
  165. if (images.length == 0) {
  166. return;
  167. }
  168. var i = 0, length = images.length;
  169. serverId = "";
  170. function upload() {
  171. wx.uploadImage({
  172. localId: images[i],
  173. isShowProgressTips: 0,
  174. success: function (res) {
  175. i++;
  176. if(serverId.length == 0){
  177. serverId = res.serverId;
  178. }
  179. else{
  180. serverId =serverId + "," + res.serverId;
  181. }
  182. if (i < length) {
  183. upload();
  184. }
  185. if(i == images.length){
  186. doSubmit(data);
  187. }
  188. },
  189. fail: function (res) {
  190. alert(JSON.stringify(res));
  191. }
  192. });
  193. }
  194. upload();
  195. }
  196. // 添加文件
  197. function appendFile(p) {
  198. var amount = getImages().length;
  199. if (amount >= 8) {
  200. $("#add_img_li").hide();
  201. }
  202. if(amount < 9){
  203. 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>');
  204. var $add_img_li = $("#add_img_li");
  205. $add_img_li.before($li);
  206. $("#image_tips").text(getImages().length + "/9");
  207. }
  208. }
  209. //获取需要上传的图片
  210. function getImages() {
  211. var images = [];
  212. $("#img_ul").find("img").each(function() {
  213. var imgSrc = $(this).attr("data-src");
  214. images.push(imgSrc);
  215. });
  216. return images;
  217. }
  218. //查看图片
  219. function viewImg(dom) {
  220. var $img = $(dom);
  221. var thissrc = $img.attr("data-src");
  222. var mWid = $(window).width();
  223. var mHei = $(window).height();
  224. 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>';
  225. $("body").append(nHtml);
  226. $(".delimgpop").click(function() {
  227. $(this).remove()
  228. });
  229. };
  230. //删除图片
  231. function delImg(dom) {
  232. var $li = $(dom).parent();
  233. $li.remove();
  234. $("#image_tips").text(getImages().length + "/9");
  235. var amount = getImages().length;
  236. if(amount <= 8){
  237. $("#add_img_li").show();
  238. }
  239. return;
  240. }
  241. //微信sdk配置出错
  242. wx.error(function (res) {
  243. alert("wx.error:" + res.errMsg);
  244. });
  245. //提交咨询
  246. function doSubmit(data) {
  247. data.mediaIds = serverId;
  248. sendPost('patient/consult/communication/reply', data, 'json', 'post', submitFailed, submitSuccess);
  249. }
  250. function submitFailed(res) {
  251. dd.close();
  252. if (res && res.msg) {
  253. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:res.msg}).show();
  254. } else {
  255. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'提交失败'}).show();
  256. }
  257. }
  258. function submitSuccess(res) {
  259. if (res.status == 200) {
  260. dd.close();
  261. window.history.go(-1);
  262. //window.location.href = "patients-consult-detail.html?code=" + code;
  263. } else {
  264. submitFailed(res);
  265. }
  266. }
  267. </script>
  268. </body>
  269. </html>