service-setting.html 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="author" content=""/>
  6. <meta name="description" content=""/>
  7. <meta name="keywords" content="扫码支付,线上投币,运营数据,物联网"/>
  8. <meta name="format-detection" content="telphone=no,email=no"/>
  9. <meta name="viewport"
  10. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
  11. <meta http-equiv="pragma" content="no-cache">
  12. <meta http-equiv="cache-control" content="no-cache">
  13. <meta http-equiv="expires" content="0">
  14. <title>客服设置</title>
  15. <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.min.css"/>
  16. <link rel="stylesheet" href="../components/custom/css/common.css"/>
  17. <link rel="stylesheet" href="css/xyf.common.min.css"/>
  18. <style>
  19. .strong {
  20. padding: 2px 5px;
  21. font-size: 12px;
  22. color: #fff;
  23. background: red;
  24. border-radius: 3px;
  25. }
  26. .phone-change-show{
  27. display: none;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <div class="input-group-vertical">
  33. <h5 class="mui-content-padded c-black">客服名称 <span class="strong">限20个字</span></h5>
  34. <div class="input-row input-clear">
  35. <input type="text" maxlength="20" placeholder="名称" id="name">
  36. </div>
  37. <div class="phone-change-show">
  38. <h5 class="mui-content-padded c-black">人机交互验证</h5>
  39. <div class="input-row" id="captcha" style="min-height: 46px">
  40. </div>
  41. </div>
  42. <h5 class="mui-content-padded c-black">客服电话</h5>
  43. <div class="input-row input-clear">
  44. <input type="tel" maxlength="11" placeholder="电话" id="phone">
  45. </div>
  46. <div class="input-row code input-clear phone-change-show">
  47. <input id="code" type="tel" maxlength="4" placeholder="验证码">
  48. <button id="sendBtn" type="button" disabled>验证短信</button>
  49. </div>
  50. <h5 class="mui-content-padded c-black">微信二维码 <span class="strong">10MB以内</span></h5>
  51. <div class="input-row input-clear padding-10">
  52. <div class="mui-col-xs-4 padding-5">
  53. <div class="upload-pic">
  54. <i class="delpic mui-hidden">x</i>
  55. <i class="iconfont icon-add-more"></i>
  56. <input id="qrcodePic" type="file" draggable="false" accept="image/*">
  57. <img class="mui-hidden" id="showPic" src="">
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. <div class="subt">
  63. <input class="mui-btn-block" type="button" value="保存" onclick="save()">
  64. </div>
  65. </body>
  66. <script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script>
  67. <script src="https://cdn.washpayer.com/components/lib/mui.min.js"></script>
  68. <script charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
  69. <script src="https://cdn.washpayer.com/components/lib/image-compressor.min.js"></script>
  70. <script src="/components/custom/js/common.js"></script>
  71. <script src="js/xyf.common.js"></script>
  72. <script>
  73. var $qrcodeInput = $('#qrcodePic')
  74. var qrcodeUrl = "";
  75. var basicConfig = {
  76. imgPrefix: ""
  77. };
  78. function myImageCompressor(file, callback) {
  79. if (window.ImageCompressor) {
  80. const imageCompressor = new ImageCompressor();
  81. if (file) {
  82. imageCompressor.compress(file, {
  83. quality: .7,
  84. // logo图片不需要太清晰,也不需要太大
  85. maxWidth: 800,
  86. maxHeight: 800,
  87. success: function (result) {
  88. var formData = new FormData();
  89. formData.append('file', result, result.name);
  90. if (callback) {
  91. callback(formData);
  92. }
  93. }
  94. })
  95. }
  96. } else {
  97. //图片插件未加载完成提示
  98. mui.toast("图片上传工具未加载,刷新页面重试...");
  99. }
  100. }
  101. var oldPhone = ''
  102. //获取基本信息
  103. $(function () {
  104. var url = "/dealer/getServiceInfo";
  105. var data = {};
  106. sendRequest(url, "GET", data, function (res) {
  107. if (res.result == 1) {
  108. var para = res.para;
  109. $("#name").val(para.serviceName);
  110. $("#phone").val(para.servicePhone);
  111. oldPhone = para.servicePhone
  112. qrcodeUrl = para.qrcodeUrl;
  113. if (qrcodeUrl && qrcodeUrl != "") {
  114. $qrcodeInput.siblings('.iconfont').addClass('mui-hidden');
  115. $qrcodeInput.siblings('img').attr('src', qrcodeUrl).removeClass('mui-hidden');
  116. $qrcodeInput.siblings('.delpic').removeClass('mui-hidden');
  117. }
  118. $("#phone").trigger("keyup");
  119. } else {
  120. mui.toast(res.description);
  121. }
  122. });
  123. $('.delpic').tap(function (e) {
  124. var self = $(this);
  125. self.siblings('img').attr('src', '').addClass('mui-hidden');
  126. self.addClass('mui-hidden');
  127. self.siblings('.iconfont').removeClass('mui-hidden');
  128. self.siblings('input').show();
  129. qrcodeUrl = '';
  130. checkBtnStatus();
  131. return false;
  132. });
  133. });
  134. //按钮样式状态
  135. var checkBtnStatus = function () {
  136. };
  137. var qrcodeUpload = $("#qrcodePic");
  138. if (typeof FileReader === 'undefined') {
  139. qrcodeUpload.attr('disabled', true);
  140. qrcodeUpload.tap(function () {
  141. mui.alert('当前微信浏览器版本过低,请升级微信后再试!', '温馨提示', '我知道了');
  142. });
  143. } else {
  144. qrcodeUpload.change(function (e) {
  145. var self = $(this);
  146. var file = qrcodeUpload[0].files[0];
  147. //大小限制为200k以内
  148. if (file && file.size > 10000 * 1024) {
  149. msgPopup('温馨提示', '图片大小超出规定范围!', '知道了');
  150. return;
  151. }
  152. if (!(/^image\/.*$/i.test(file.type))) {
  153. mui.toast('该文件不是图片,请重新选择!');
  154. return;
  155. } else {
  156. myImageCompressor(file, function (formData) {
  157. var url = '/common/upload?type=serviceQrcode';
  158. myAjax({
  159. url: url,
  160. type: 'POST',
  161. data: formData,
  162. processData: false,
  163. contentType: false,
  164. beforeSend: function () {
  165. showLoading('上传中...');
  166. },
  167. success: function (res) {
  168. if (res.result == 1) {
  169. qrcodeUrl = res.para;
  170. checkBtnStatus();
  171. self.hide();
  172. self.siblings('.iconfont').addClass('mui-hidden');
  173. self.siblings('img').attr('src', qrcodeUrl).removeClass('mui-hidden');
  174. self.siblings('.delpic').removeClass('mui-hidden');
  175. } else {
  176. mui.toast('上传失败,请重试');
  177. }
  178. },
  179. complete: function () {
  180. hideLoading();
  181. //重置文件路径,避免选中重复不触发onchange
  182. var imgUpload = $("#qrcodePic");
  183. imgUpload[0].value = "";
  184. }
  185. });
  186. });
  187. }
  188. });
  189. }
  190. //保存客服信息
  191. function save() {
  192. var url = "/dealer/saveServiceInfo";
  193. var toastOption = {"duration": 5000};
  194. var code = $("#code").val();
  195. //检查手机号码
  196. var phone = $("#phone").val();
  197. // if (!isPhone(phone) && phone != "") {
  198. // mui.toast("请输入11位正确手机号码", toastOption);
  199. // return;
  200. // }
  201. if (phone && oldPhone != phone) {
  202. //填了就检查验证码
  203. var codeReg = /^\d{4}$/;
  204. if (!codeReg.test(code)) {
  205. mui.toast("请输入正确的验证码");
  206. return;
  207. }
  208. }
  209. var data = {
  210. "qrcodeUrl": qrcodeUrl,
  211. "serviceName": $("#name").val(),
  212. "code": code,
  213. "servicePhone": phone
  214. };
  215. sendRequest(url, "POST", data, function (res) {
  216. if (res.result == 1) {
  217. mui.toast("保存成功");
  218. } else {
  219. mui.toast(res.description);
  220. }
  221. });
  222. }
  223. $("#phone").on('keyup', function () {
  224. var phone = $("#phone").val();
  225. if (phone != "") {
  226. $("#sendBtn").attr("disabled", false);
  227. } else {
  228. $("#sendBtn").attr("disabled", true);
  229. }
  230. }).on('change', function () {
  231. $('.phone-change-show').show()
  232. })
  233. //初始化验证码控件
  234. initCheck('dealerModify', function () {
  235. var phone = $("#phone").val();
  236. if (!isPhone(phone)) {
  237. mui.toast("请输入11位正确手机号码");
  238. return;
  239. }
  240. var data = {
  241. phone: phone,
  242. }
  243. return data
  244. }, '/dealer/getCheckCode');
  245. </script>
  246. </html>