profile.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. /**
  2. * 账号相关js
  3. *
  4. * @author CaiAoLin
  5. * @date 2018/1/26
  6. * @version
  7. */
  8. $(document).ready(function() {
  9. autoFlashHeight();
  10. try {
  11. if (user !== '') {
  12. $(".sidebar-title").text(user);
  13. }
  14. $.validator.addMethod("isMobile", function(value, element) {
  15. var length = value.length;
  16. var mobile = /^1[3456789]\d{9}$/;
  17. return this.optional(element) || (length == 11 && mobile.test(value));
  18. }, "请正确填写您的手机号码");
  19. const options = {
  20. rules: '',
  21. errorPlacement: function(error, element) {
  22. $(element).addClass('is-invalid');
  23. $('.input-group-append').after(error);
  24. },
  25. errorClass: "invalid-feedback",
  26. errorElement: "div",
  27. highlight: false,
  28. success: function(element) {
  29. $(element).siblings('input').removeClass('is-invalid');
  30. $(element).remove();
  31. },
  32. };
  33. options.rules = {
  34. auth_mobile: {
  35. required: true,
  36. isMobile: true,
  37. },
  38. };
  39. $("#mobile-form").validate(options);
  40. // 获取验证码
  41. let isPosting = false;
  42. $("#get-code").click(function() {
  43. if (isPosting) {
  44. return false;
  45. }
  46. if(!$("#mobile-form").valid()) {
  47. return false;
  48. }
  49. const mobile = $("input[name='auth_mobile']").val();
  50. const btn = $(this);
  51. $.ajax({
  52. url: '/profile/code?_csrf_j=' + csrf,
  53. type: 'post',
  54. data: { mobile: mobile },
  55. dataTye: 'json',
  56. error: function() {
  57. isPosting = false;
  58. },
  59. beforeSend: function() {
  60. isPosting = true;
  61. },
  62. success: function(response) {
  63. isPosting = false;
  64. if (response.err === 0) {
  65. codeSuccess(btn);
  66. $("input[name='code']").removeAttr('readonly');
  67. $("#bind-btn").removeClass('disabled').removeClass('btn-secondary').addClass('btn-primary');
  68. } else {
  69. toast(response.msg, 'error');
  70. }
  71. }
  72. });
  73. });
  74. // 绑定按钮
  75. $("#bind-btn").click(function() {
  76. const code = $("input[name='code']").val();
  77. const mobile = $("input[name='auth_mobile']").val();
  78. if ($(this).hasClass('disabled')) {
  79. return false;
  80. }
  81. if (!(/^1[3456789]\d{9}$/.test(mobile))) {
  82. toast('请填写正确的手机号码', 'error');
  83. return false;
  84. }
  85. if (code.length < 6) {
  86. // alert('请填写正确的验证码');
  87. toast('请填写正确的验证码', 'error');
  88. return false;
  89. }
  90. $.ajax({
  91. url: '/profile/bind?_csrf_j=' + csrf,
  92. type: 'post',
  93. data: { auth_mobile: mobile, code: code },
  94. dataTye: 'json',
  95. success: function(response) {
  96. if (response.err === 0) {
  97. window.location.href = response.url;
  98. } else {
  99. toast(response.msg, 'error');
  100. }
  101. }
  102. });
  103. });
  104. // 修改手机
  105. $('#change-mobile').click(function () {
  106. $(this).parents('.form-group').hide();
  107. $('#mobile-form').show();
  108. });
  109. // 移除签名
  110. $('#delete-sign').click(function () {
  111. postData('/profile/sign/delete', {}, function (result) {
  112. $('#sign-show').html('');
  113. toastr.success('移除成功');
  114. })
  115. });
  116. // 移除签章
  117. $('body').on('click', '.delete-stamp', function () {
  118. let imgSrc = $(this).siblings('img').attr('src');
  119. imgSrc = _.replace(imgSrc, fujianOssPath, '');
  120. const _self = $(this);
  121. postData('/profile/sign/delete', { type: 'stamp', src: imgSrc }, function (result) {
  122. _self.parents('.stamp-show').remove();
  123. toastr.success('移除成功');
  124. })
  125. });
  126. // 签名模式切换
  127. $('.sign-type').on('click', function () {
  128. if (parseInt($(this).val()) === 1) {
  129. $(this).parents('.form-group').siblings('.show-upload').hide();
  130. $(this).parents('.form-group').siblings('.show-qrcode').show();
  131. } else {
  132. $(this).parents('.form-group').siblings('.show-upload').show();
  133. $(this).parents('.form-group').siblings('.show-qrcode').hide();
  134. }
  135. });
  136. // 上传签名
  137. $('#sign-upload').change(function () {
  138. const file = this.files[0];
  139. const filesize = file.size;
  140. if (filesize > 1 * 1024 * 1024) {
  141. toastr.error('存在上传文件大小过大!');
  142. return false;
  143. }
  144. const ext = file.name.toLowerCase().split('.').splice(-1)[0];
  145. const imgStr = /(jpg|jpeg|png|bmp|BMP|JPG|PNG|JPEG)$/;
  146. if (!imgStr.test(ext)) {
  147. toastr.error('请上传正确的图片格式文件');
  148. return
  149. }
  150. if ($(this).val()) {
  151. const formData = new FormData();
  152. formData.append('file', this.files[0]);
  153. postDataWithFile('/profile/sign/upload', formData, function (result) {
  154. const html = '<img src="/public/upload/sign/'+ result.sign_path +'" width="90">';
  155. $('#sign-show').html(html);
  156. $('#sign-upload').val('');
  157. });
  158. }
  159. })
  160. // 上传签章
  161. $('#stamp-upload').change(function () {
  162. const hadstamp = $('#show-stamp .stamp-show').length;
  163. const files = this.files;
  164. if (hadstamp + files.length > 5) {
  165. toastr.error('最多只能5个签章');
  166. return
  167. }
  168. const formData = new FormData();
  169. for (const file of files) {
  170. if (file === undefined) {
  171. toast('未选择上传文件!', 'error');
  172. return false;
  173. }
  174. const ext = file.name.toLowerCase().split('.').splice(-1)[0];
  175. const imgStr = /(jpg|jpeg|png|bmp|BMP|JPG|PNG|JPEG)$/;
  176. if (!imgStr.test(ext)) {
  177. toastr.error('请上传正确的图片格式文件');
  178. return
  179. }
  180. const filesize = file.size;
  181. if (filesize > 1 * 1024 * 1024) {
  182. toastr.error('存在上传文件大小过大!');
  183. return false;
  184. }
  185. formData.append('file[]', file);
  186. }
  187. postDataWithFile('/profile/stamp/upload', formData, function (result) {
  188. let html = '';
  189. for (const [index, sp] of result.stamp_path.entries()) {
  190. html += '<div class="position-absolute fixed-top stamp-show" style="left:'+ (50 + index*130) + 'px;top: 280px;width: 100px">\n' +
  191. ' <div class="position-relative">\n' +
  192. ' <a href="javascript:void(0);" title="移除签章" class="position-absolute delete-stamp" style="right: 0;top: 0;color: red;font-size:20px;font-weight: bold;text-decoration:none;">×</a>\n' +
  193. ' <img src="'+ fujianOssPath + sp +'" width="90">\n' +
  194. ' </div>\n' +
  195. ' </div>';
  196. }
  197. $('#show-stamp').html(html);
  198. $('#stamp-upload').val('');
  199. });
  200. })
  201. } catch (error) {
  202. console.log(error);
  203. }
  204. });
  205. /**
  206. * 获取成功后的操作
  207. *
  208. * @param {Object} btn - 点击的按钮
  209. * @return {void}
  210. */
  211. function codeSuccess(btn) {
  212. let counter = 60;
  213. btn.addClass('disabled').text('重新获取 ' + counter + 'S');
  214. btn.parent().siblings('input').removeAttr('readonly').attr('placeholder', '输入短信中的6位验证码');
  215. const bindBtn = $("#bind-btn");
  216. bindBtn.removeClass('btn-secondary disabled').addClass('btn-primary');
  217. const countDown = setInterval(function() {
  218. const countString = counter - 1 <= 0 ? '' : ' ' + (counter - 1) + 'S';
  219. // 倒数结束后
  220. if (countString === '') {
  221. clearInterval(countDown);
  222. btn.removeClass('disabled');
  223. }
  224. const text = '重新获取' + countString;
  225. btn.text(text);
  226. counter -= 1;
  227. }, 1000);
  228. }