apply-cash.html 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>申请提现</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <link rel="stylesheet" type="text/css" href="css/mui.min.css" />
  10. <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
  11. <link rel="stylesheet" type="text/css" href="css/main.css" />
  12. <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
  13. <script>
  14. //屏蔽分享
  15. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  16. WeixinJSBridge.call('hideOptionMenu');
  17. });
  18. </script>
  19. <style>
  20. .radio_inline input[type=radio]{
  21. width: 7%;
  22. right: auto;
  23. }
  24. input[type="radio"] {
  25. -webkit-appearance: none;
  26. background:url(./images/bg_icon.png) no-repeat;
  27. height:18px;
  28. vertical-align: middle;
  29. width: 20px;
  30. background-position: -154px -2px;
  31. }
  32. input[type="radio"]:checked {background-position: -130px -2px;}
  33. </style>
  34. </head>
  35. <body style="background: #fff;">
  36. <div class="loading-bg">
  37. <div class="mui-loading">
  38. <div class="mui-spinner">
  39. </div>
  40. &nbsp;&nbsp;加载中...
  41. </div>
  42. </div>
  43. <div class="mui-content" style="background: #fff;">
  44. <form class="mui-input-group apply-cash-group">
  45. <div class="mui-radio-row" style="margin-left: 12px; width: 380px; height: 30px;border-bottom:1px solid #dcdcdc;">
  46. <label style="margin-right: 10px;margin-left: 4px;">提款方式</label>
  47. <span class="radio_inline">
  48. <input id="ipt-atType1" class="values" type="radio" name="atType" value="1" checked>
  49. <label for="ipt-atType1" >银行卡支付</label>
  50. </span>
  51. <span class="radio_inline">
  52. <input id="ipt-atType2" class="values" type="radio" name="atType" value="2">
  53. <label for="ipt-atType2" >支付宝支付</label>
  54. </span>
  55. </div>
  56. <div class="mui-input-row">
  57. <label>姓&nbsp;&nbsp;&nbsp;&nbsp;名</label>
  58. <input id="ipt-name" maxlength="12" type="text" placeholder="收款人姓名">
  59. </div>
  60. <div class="mui-input-row">
  61. <label>电&nbsp;&nbsp;&nbsp;&nbsp;话</label>
  62. <input id="ipt-tel" maxlength="11" type="text" placeholder="收款人电话">
  63. </div>
  64. <div id="yhkDiv">
  65. <div class="mui-input-row">
  66. <label>卡&nbsp;&nbsp;&nbsp;&nbsp;号</label>
  67. <input id="ipt-card" maxlength="19" type="text" placeholder="收款人储蓄卡账号">
  68. </div>
  69. <div class="mui-input-row">
  70. <label>开户行</label>
  71. <input id="ipt-bank" maxlength="20" type="text" placeholder="储蓄卡开户的开户行">
  72. </div>
  73. </div>
  74. <div class="mui-input-row" id="zfbDiv" style="display: none;">
  75. <label>支付宝</label>
  76. <input id="ipt-atZfb" maxlength="20" type="text" placeholder="支付宝号">
  77. </div>
  78. <div class="mui-input-row">
  79. <label>金&nbsp;&nbsp;&nbsp;&nbsp;额</label>
  80. <input id="ipt-money" maxlength="10" type="tel" placeholder="填写提现金额">
  81. </div>
  82. <div style="margin:10px 14px;">
  83. <span class="mui-h5">可提现:¥<span id="uables-amount">0.00</span></span>
  84. <a class="btn-all-apply-cash">全部提现</a>
  85. </div>
  86. <br /><br /><br />
  87. <button type="button" class="mui-btn btn-apply-cash" disabled="disabled">立即提现</button>
  88. <br /><p class="mui-text-center">温馨提示:申请提现到账时间一般为3个工作日内</p>
  89. </form>
  90. </div>
  91. <script type="text/javascript" src="js/mui.min.js"></script>
  92. <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  93. <script type="text/javascript" src="js/main.js"></script>
  94. <script type="text/javascript">
  95. $(document).on('click','.values',function(){
  96. if(this.value === '1'){
  97. $("#zfbDiv").hide();
  98. $("#yhkDiv").show();
  99. }
  100. if(this.value === '2'){
  101. $("#zfbDiv").show();
  102. $("#yhkDiv").hide();
  103. }
  104. });
  105. var amount = 0;
  106. mui.ready(function() {
  107. $('.loading-bg').hide();
  108. ajax("post", "/wechat/welfare/getAmount", {"time":new Date().getTime()}, function(res) {
  109. amount = res.data.amonutUsable;
  110. $("#uables-amount").text((amount/100).toFixed(2));
  111. });
  112. $(document).on("tap", ".btn-all-apply-cash", function() {
  113. $("#ipt-money").val((amount/100).toFixed(0));
  114. });
  115. });
  116. //立即提现
  117. $(document).on('tap', '.btn-apply-cash', function() {
  118. validate();
  119. var atType = getRadioRes('values');
  120. if(flag){
  121. ajax("post", "/wechat/welfare/addAtLogs",
  122. {
  123. "atTel":$("#ipt-tel").val(),
  124. "atCardNo":$("#ipt-card").val(),
  125. "atBankName":$("#ipt-bank").val(),
  126. "atAmonut":(new Number($("#ipt-money").val()) * 100),
  127. "atName":$("#ipt-name").val(),
  128. "time":new Date().getTime(),
  129. "atType":atType,
  130. "atZfb":$("#ipt-atZfb").val()
  131. },
  132. function(res) {
  133. if (res.status) {
  134. mui.alert("申请成功(申请提现到账时间一般为3个工作日内)", function(){
  135. location.href="my-reward.html";
  136. });
  137. } else {
  138. mui.alert("提现失败,请重试(若重试后任然无法提现,请在微信联系客服)");
  139. }
  140. });
  141. }else{
  142. mui.alert(msg);
  143. }
  144. });
  145. //实时监听文本框字数
  146. $(document).on('input', '#ipt-name', function() {
  147. if($(this).val().length > 1) {
  148. $(".btn-apply-cash").removeAttr("disabled");
  149. } else {
  150. $(".btn-apply-cash").attr("disabled", "disabled");
  151. }
  152. });
  153. var msg = '',flag = false;
  154. function validate() {
  155. msg = '';
  156. flag = false;
  157. var atType = getRadioRes('values');
  158. var ch = /^[\u4e00-\u9fa5]{2,}$/; //简体中文(2位以上)
  159. var bankcard = /\d{16}|\d{19}/; //银行卡号(16位-19位)
  160. var ch_en_num = /^[A-Za-z0-9_\-\u4e00-\u9fa5]{1,}$/; //简体中文英文数字(1位以上)
  161. var positive_int = /^[0-9]\d*$/; //正整数
  162. var ch_tel = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(19[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
  163. $.each($('.apply-cash-group input'), function() {
  164. switch($(this).attr('id')) {
  165. case 'ipt-tel':
  166. if (ch_tel.test($(this).val())) {
  167. flag = true;
  168. } else {
  169. msg = "请正确填写手机号码";
  170. return false;
  171. }
  172. break;
  173. case 'ipt-money':
  174. console.log(positive_int.test($(this).val()));
  175. if(positive_int.test($(this).val())) {
  176. flag = true;
  177. } else {
  178. flag = false;
  179. if($(this).val() === '' || $(this).val() == null){
  180. msg = '提现金额不能为空';
  181. }else if($(this).val().length()==0){
  182. msg = '请填写提现金额';
  183. }else{
  184. msg = '提现金额格式有误!';
  185. }
  186. return false;
  187. }
  188. break;
  189. case 'ipt-bank':
  190. if(atType == '2'){
  191. flag = true;
  192. }else if(ch_en_num.test($(this).val())) {
  193. flag = true;
  194. } else {
  195. flag = false;
  196. if($(this).val().length==0){
  197. msg = '请填写银行开户行';
  198. }else{
  199. msg = '银行开户行格式有误!';
  200. }
  201. return false;
  202. }
  203. break;
  204. case 'ipt-card':
  205. if(atType === '2'){
  206. flag = true;
  207. }else if(bankcard.test($(this).val())) {
  208. flag = true;
  209. } else {
  210. flag = false;
  211. if($(this).val().length==0){
  212. msg = '请填写银行卡号';
  213. }else{
  214. msg = '银行卡号格式有误!';
  215. }
  216. return false;
  217. }
  218. break;
  219. case 'ipt-atZfb':
  220. if(atType === '1'){
  221. flag = true;
  222. }else if($(this).val() != null && $(this).val() != "") {
  223. flag = true;
  224. } else {
  225. flag = false;
  226. if($(this).val()== null || $(this).val()== ""){
  227. msg = '请填写支付宝号';
  228. }
  229. return false;
  230. }
  231. break;
  232. case 'ipt-name':
  233. if(ch.test($(this).val())) {
  234. flag = true;
  235. } else {
  236. flag = false;
  237. if($(this).val().length==0){
  238. msg = '请填写姓名';
  239. }else{
  240. msg = '姓名格式有误!';
  241. }
  242. return false;
  243. }
  244. break;
  245. default:
  246. break;
  247. }
  248. });
  249. };
  250. function getRadioRes(className) {
  251. var rdsObj = document.getElementsByClassName(className);
  252. var chackVal = null;
  253. for(i = 0; i < rdsObj.length; i++) {
  254. if (rdsObj[i].checked) {
  255. chackVal = rdsObj[i].value;
  256. }
  257. }
  258. return chackVal;
  259. }
  260. </script>
  261. </body>
  262. </html>