Нет описания

borrow-money.html 9.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta content="yes" name="apple-mobile-web-app-capable">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  7. <title>借款</title>
  8. <link rel="stylesheet" type="text/css" href="../common/reset.css"/>
  9. <link rel="stylesheet" type="text/css" href="./css/borrow-money.css?v=5"/>
  10. <script type="text/javascript" src="../common/jquery-2.1.0.js"></script>
  11. <script type="text/javascript">
  12. var viewport = document.querySelector("meta[name=viewport]")
  13. if (window.devicePixelRatio == 1) {
  14. viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
  15. }
  16. if (window.devicePixelRatio == 2) {
  17. viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
  18. }
  19. if (window.devicePixelRatio == 3) {
  20. viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
  21. }
  22. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  23. window.onresize = function(){
  24. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  25. }
  26. </script>
  27. </head>
  28. <body>
  29. <div class="container">
  30. <div class="top_hint"><span>i</span>警惕“兼职刷单”、“假冒客服退款”、“转账到安全账户“等骗术!</div>
  31. <div class="borrow">
  32. <div class="money">
  33. <span>¥</span>
  34. <em></em>
  35. </div>
  36. <p>借多少</p>
  37. <div class="month borrow_money">
  38. <div class="active" data-money="5千">5千</div>
  39. <div data-money="5万">5万</div>
  40. <div data-money="10万">10万</div>
  41. </div>
  42. </div>
  43. <!-- 借多久 -->
  44. <div class="how_borrow">
  45. <p class="how_borrow_title">借多久</p>
  46. <p class="how_borrow_hint">可提前还款,利息按天计算,免手续费</p>
  47. <div class="month borrow_month">
  48. <div class="active" data-month="3月">3个月</div>
  49. <div data-month="6月">6个月</div>
  50. <div data-month="12月">12个月</div>
  51. </div>
  52. </div>
  53. <!-- 怎么还 -->
  54. <ul class="how_return">
  55. <li>
  56. <div class="left">怎么还</div>
  57. <div class="right">
  58. <p>先息后本</p>
  59. <p>先还利息,到期还本金</p>
  60. </div>
  61. </li>
  62. <li>
  63. <div class="left">还款计划</div>
  64. <div class="right repayment_Date">
  65. <p>-</p>
  66. </div>
  67. </li>
  68. <li>
  69. <div class="left">总利息</div>
  70. <div class="right total_interest">
  71. <p>131.60</p>
  72. </div>
  73. </li>
  74. <li>
  75. <div class="left">收款账户</div>
  76. <div class="right">
  77. <p>6214830193746285</p>
  78. </div>
  79. </li>
  80. </ul>
  81. <button class="go_borrow_money" onclick="go_borrow_money()">去借钱</button>
  82. </div>
  83. <!-- 费用详情 -->
  84. <div class="cost_detail">
  85. <div class="content">
  86. <div class="top">
  87. <div></div>
  88. </div>
  89. <div class="detail">
  90. <div class="detail_con">
  91. <h3>费用详情</h3>
  92. <p class="borrowing_costs_title">借款费用</p>
  93. <ul class="borrowing_costs">
  94. <li><span>借款总额</span><span class="total_loan_money">2100.00元</span></li>
  95. <li><span>到账金额</span><span class="total_loan_money">2100.00元</span></li>
  96. <li><span>借款期限</span><span class="total_loan_month">3个月</span></li>
  97. <li><span>年利率</span><span>1.01%x12个月</span></li>
  98. <li><span>每期应还</span><span class="monthly_money">2100.00元</span></li>
  99. <li><span>收款账户</span><span class="">6214830193746285</span></li>
  100. </ul>
  101. <ul class="borrowing">
  102. <li><span>含服务费</span><span>10元</span></li>
  103. <li><span>含担保责任金</span><span>20元</span></li>
  104. <li><span>含担保服务费</span><span>28元</span></li>
  105. </ul>
  106. <p class="detail_con_hint">违约风险提示</p>
  107. <p class="detail_con_hint">以上数据均根据选择的金额及期数计算得出。每期还款金额仅供参考,具体费用说明以最终协议为准。</p>
  108. <p class="detail_con_hint">违约后果:如您违反合同约定,未按期足额还款,服务方有权自行或委托第三方代理人出借</p>
  109. </div>
  110. <button class='cost_detail_yes' onclick="go_identity_authentication()">确定</button>
  111. </div>
  112. </div>
  113. </div>
  114. <!--提示弹框-->
  115. <div class="alert-info" style="display: none;">
  116. <!-- tip提示,2s后消失 -->
  117. <p></p>
  118. </div>
  119. </body>
  120. </html>
  121. <script>
  122. var data_json ={
  123. "5千_3月": {"loan_amount":"5000","loan_month":"3","total_interest":"8.42","monthly_money":"1669.47"},
  124. "5千_6月": {"loan_amount":"5000","loan_month":"6","total_interest":"14.74","monthly_money":"835.79"},
  125. "5千_12月": {"loan_amount":"5000","loan_month":"12","total_interest":"27.4","monthly_money":"418.95"},
  126. "5万_3月": {"loan_amount":"50000","loan_month":"3","total_interest":"84.19","monthly_money":"16694.73"},
  127. "5万_6月": {"loan_amount":"50000","loan_month":"6","total_interest":"147.39","monthly_money":"8357.90"},
  128. "5万_12月": {"loan_amount":"50000","loan_month":"12","total_interest":"273.96","monthly_money":"4189.50"},
  129. "10万_3月": {"loan_amount":"100000","loan_month":"3","total_interest":"168.38","monthly_money":"33389.46"},
  130. "10万_6月": {"loan_amount":"100000","loan_month":"6","total_interest":"294.79","monthly_money":"16715.80"},
  131. "10万_12月": {"loan_amount":"100000","loan_month":"12","total_interest":"547.93","monthly_money":"8378.99"}
  132. }
  133. var loan_amount,loan_month
  134. $().ready(function () {
  135. clickEvent()
  136. init();
  137. })
  138. function clickEvent () {
  139. $(".borrow_month div").click(function () {
  140. $(".borrow_month div").removeClass('active')
  141. $(this).addClass('active');
  142. init()
  143. })
  144. $(".borrow_money div").click(function () {
  145. $(".borrow_money div").removeClass('active')
  146. $(this).addClass('active');
  147. init()
  148. })
  149. }
  150. function init () {
  151. loan_amount = $(".borrow_money .active").attr('data-money');//借款金额
  152. loan_month = $(".borrow_month .active").attr('data-month');//借款期限
  153. $(".borrow .money em").html(data_json[loan_amount+'_'+loan_month].loan_amount);//借款金额
  154. var today = new Date().getTime()
  155. var lastDay = today + 60 * 60 * 1000 * 24 * 30 //获取30天后的日期
  156. $('.repayment_Date p').html('首期'+ format(lastDay) + ' 应还<span>' + ((data_json[loan_amount+'_'+loan_month].loan_amount)/(data_json[loan_amount+'_'+loan_month].loan_month*30)).toFixed(2) + '</span>')
  157. $(".total_interest p").html(data_json[loan_amount+'_'+loan_month].total_interest)//总利息
  158. $(".total_loan_money").html(data_json[loan_amount+'_'+loan_month].loan_amount + '元')
  159. $(".total_loan_month").html(data_json[loan_amount+'_'+loan_month].loan_month + '个月')
  160. $(".monthly_money").html(data_json[loan_amount+'_'+loan_month].monthly_money)
  161. }
  162. function go_borrow_money () {
  163. // 去借款
  164. $(".cost_detail").show();
  165. }
  166. function go_identity_authentication () {
  167. //去身份证页面
  168. window.location.href = './InfoAuthentication.html?type=1'
  169. }
  170. function format (shijianchuo) {
  171. //shijianchuo是整数,否则要parseInt转换
  172. var time = new Date(shijianchuo);
  173. var y = time.getFullYear();
  174. var m = time.getMonth() + 1;
  175. var d = time.getDate();
  176. var h = time.getHours();
  177. var mm = time.getMinutes();
  178. var s = time.getSeconds();
  179. return m + '月' + d + '日';
  180. }
  181. </script>