index.blade.php 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. @extends('user.layouts')
  2. @section('css')
  3. <link href="/assets/global/fonts/font-awesome/font-awesome.min.css" type="text/css" rel="stylesheet">
  4. <link href="/assets/global/vendor/aspieprogress/asPieProgress.min.css" type="text/css" rel="stylesheet">
  5. @endsection
  6. @section('content')
  7. <div class="page-content container-fluid">
  8. <div class="row" data-plugin="matchHeight" data-by-row="true">
  9. @if (Session::has('successMsg'))
  10. <x-alert type="success" :message="Session::get('successMsg')" class="col-md-12"/>
  11. @endif
  12. <div class="col-xxl-3 col-xl-4 col-lg-5 col-md-6 col-12">
  13. <div class="card card-shadow">
  14. <div class="card-block p-20">
  15. <button type="button" class="btn btn-floating btn-sm btn-pure">
  16. <i class="wb-heart red-500"></i>
  17. </button>
  18. <span class="font-weight-400">{{trans('home.account_status')}}</span>
  19. @if(sysConfig('is_checkin'))
  20. <button class="btn btn-md btn-round btn-info float-right" onclick="checkIn()">
  21. <i class="wb-star yellow-400 mr-5"></i>
  22. {{trans('home.sign_in')}}
  23. </button>
  24. @endif
  25. <div class="content-text text-center mb-0">
  26. @if($not_paying_user)
  27. <p class="ml-15 mt-15 text-left">更长使用<code>时间</code></p>
  28. <p class="text-center">更多<code>流量</code></p>
  29. <p class="mb-15 mr-15 text-right">更多优质<code>线路</code></p>
  30. <a href="{{route('shop')}}" class="btn btn-block btn-danger">快 来 购 买 服 务 吧!</a>
  31. @elseif(Auth::getUser()->enable)
  32. <i class="wb-check green-400 font-size-40 mr-10"></i>
  33. <span class="font-size-40 font-weight-100">{{trans('home.enabled')}}</span>
  34. <p class="font-weight-300 m-0 green-500">{{trans('home.normal')}}</p>
  35. @elseif($remainDays == 0)
  36. <i class="wb-close red-400 font-size-40 mr-10"></i>
  37. <span class="font-size-40 font-weight-100">{{trans('home.expired')}}</span>
  38. <p class="font-weight-300 m-0 red-500">{{trans('home.reason_expired')}}</p>
  39. @elseif($unusedTransfer == 0)
  40. <i class="wb-close red-400 font-size-40 mr-10"></i>
  41. <span class="font-size-40 font-weight-100">{{trans('home.disabled')}}</span>
  42. <p class="font-weight-300 m-0 red-500">{{trans('home.reason_traffic_exhausted')}}</p>
  43. @elseif($isTrafficWarning || $banedTime != 0)
  44. <i class="wb-alert orange-400 font-size-40 mr-10"></i>
  45. <span class="font-size-40 font-weight-100">{{trans('home.limited')}}</span>
  46. <p class="font-weight-300 m-0 orange-500">{!!trans('home.reason_overused', ['data'=>sysConfig('traffic_ban_value')])!!}</p>
  47. @else
  48. <i class="wb-help red-400 font-size-40 mr-10"></i>
  49. <span class="font-size-40 font-weight-100">{{trans('home.disabled')}}</span>
  50. <p class="font-weight-300 m-0 red-500">{{trans('home.reason_unknown')}}</p>
  51. @endif
  52. </div>
  53. </div>
  54. </div>
  55. <div class="card card-shadow">
  56. <div class="card-block p-20">
  57. <div class="row">
  58. <div class="col-lg-7 col-md-12 col-sm-7">
  59. <button type="button" class="btn btn-floating btn-sm btn-pure">
  60. <i class="wb-stats-bars cyan-500"></i>
  61. </button>
  62. <span class="font-weight-400">{{trans('home.account_bandwidth_usage')}}</span>
  63. <div class="text-center font-weight-100 font-size-40">
  64. {{flowAutoShow($unusedTransfer)}}
  65. <br>
  66. <h4>账号等级:<code class="font-size-20">{{Auth::getUser()->level}}</code></h4>
  67. </div>
  68. <div class="text-center font-weight-300 blue-grey-500 mb-10">
  69. @if(!$not_paying_user && sysConfig('reset_traffic') && $resetDays != 0 && $remainDays>$resetDays)
  70. {{trans('home.account_reset_notice', ['reset_day' => $resetDays])}}
  71. @endif
  72. </div>
  73. </div>
  74. <div class="col-lg-5 col-md-12 col-sm-5">
  75. <div class="w-only-xs-p50 w-only-sm-p75 w-only-md-p50" data-plugin="pieProgress"
  76. data-valuemax="100"
  77. data-barcolor="#96A3FA" data-size="100" data-barsize="10"
  78. data-goal="{{$unusedPercent * 100}}" aria-valuenow="{{$unusedPercent * 100}}"
  79. role="progressbar">
  80. <span class="pie-progress-number blue-grey-700 font-size-20">
  81. {{$unusedPercent * 100}}%</span>
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86. </div>
  87. <div class="card card-shadow">
  88. <div class="card-block p-20">
  89. <button type="button" class="btn btn-floating btn-sm btn-pure">
  90. <i class="wb-calendar green-500"></i>
  91. </button>
  92. <span class="font-weight-400">{{trans('home.account_expire')}}</span>
  93. <div class="content-text text-center mb-0">
  94. @if($remainDays != -1)
  95. <span class="font-size-40 font-weight-100">{{$remainDays}} {{trans('home.day')}}</span>
  96. <p class="blue-grey-500 font-weight-300 m-0">{{$expireTime}}</p>
  97. @else
  98. <span class="font-size-40 font-weight-100">{{trans('home.expired')}}</span>
  99. <br/>
  100. <a href="{{route('shop')}}" class="btn btn-danger">{{trans('home.service_buy_button')}}</a>
  101. @endif
  102. </div>
  103. </div>
  104. </div>
  105. @if($userLoginLog)
  106. <div class="card card-shadow">
  107. <div class="card-block p-20">
  108. <button type="button" class="btn btn-floating btn-sm btn-pure">
  109. <i class="wb-globe purple-500"></i>
  110. </button>
  111. <span class="font-weight-400 mb-10">{{trans('home.account_last_login')}}</span>
  112. <ul class="list-group list-group-dividered px-20 mb-0">
  113. <li class="list-group-item px-0">
  114. <i class="icon wb-time"></i>时间:{{date_format($userLoginLog->created_at,'Y/m/d H:i')}}
  115. </li>
  116. <li class="list-group-item px-0"><i class="icon wb-code"></i>IP地址:{{$userLoginLog->ip}}
  117. </li>
  118. <li class="list-group-item px-0"><i class="icon wb-cloud"></i>运营商:{{$userLoginLog->isp}}
  119. </li>
  120. <li class="list-group-item px-0"><i class="icon wb-map"></i>地区:{{$userLoginLog->area}}
  121. </li>
  122. </ul>
  123. </div>
  124. </div>
  125. @endif
  126. </div>
  127. <div class="col-xxl-9 col-xl-8 col-lg-7 col-md-6 col-12">
  128. <div class="row" data-plugin="matchHeight" data-by-row="true">
  129. <div class="col-xl-4 col-lg-6 pb-30">
  130. <div class="card card-shadow h-full">
  131. <div class="card-block text-center p-20">
  132. <i class="font-size-40 wb-wrench"></i>
  133. <h4 class="card-title">客户端</h4>
  134. <p class="card-text">下载 & 教程 </p>
  135. <a href="{{route('help')}}#answer-2" class="btn btn-primary mb-10">前往</a>
  136. </div>
  137. </div>
  138. </div>
  139. <div class="col-xl-4 col-lg-6 pb-30">
  140. <div class="card card-shadow text-center h-full">
  141. <div class="card-block">
  142. @if(sysConfig('is_push_bear') && sysConfig('push_bear_qrcode'))
  143. <h4 class="card-title"><i class="wb-bell mr-10 yellow-600"></i>微信公告推送</h4>
  144. <div id="qrcode"></div>
  145. @else
  146. <h4 class="card-title"><i class="wb-bell mr-10 yellow-600"></i>交流群</h4>
  147. @endif
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. <div class="row" data-plugin="matchHeight" data-by-row="true">
  153. <div class="col-xxl-6 mb-35">
  154. <div class="panel panel-info panel-line h-full">
  155. <div class="panel-heading">
  156. <h2 class="panel-title">
  157. <i class="wb-volume-high mr-10"></i>
  158. {{trans('home.announcement')}}
  159. </h2>
  160. <div class="panel-actions">
  161. <nav>
  162. <ul class="pagination pagination-no-border">
  163. <li class="page-item">
  164. {{ $noticeList->links() }}
  165. </li>
  166. </ul>
  167. </nav>
  168. </div>
  169. </div>
  170. <div class="panel-body" data-show-on-hover="false" data-direction="vertical"
  171. data-skin="scrollable-shadow" data-plugin="scrollable">
  172. <div data-role="container">
  173. <div class="pb-10" data-role="content">
  174. @if(!$noticeList -> isEmpty())
  175. @foreach($noticeList as $notice)
  176. <h3 class="text-center">{!!$notice->title!!}</h3>
  177. {!! $notice->content !!}
  178. @if($notice->updated_at)
  179. <small class="text-bottom">更新于 <code>{{$notice->updated_at}}</code></small>
  180. @endif
  181. @endforeach
  182. @else
  183. <p class="text-center font-size-40">暂无公告</p>
  184. @endif
  185. </div>
  186. </div>
  187. </div>
  188. </div>
  189. </div>
  190. <div class="col-xxl-6">
  191. <div class="panel panel-primary panel-line h-full">
  192. <div class="panel-heading">
  193. <h1 class="panel-title"><i class="wb-pie-chart mr-10"></i>{{trans('home.traffic_log')}}
  194. </h1>
  195. <div class="panel-actions">
  196. <ul class="nav nav-pills" role="tablist">
  197. <li class="nav-item">
  198. <a class="nav-link active" data-toggle="tab" href="#daily" aria-controls="daily" role="tab" aria-expanded="true" aria-selected="false">天</a>
  199. </li>
  200. <li class="nav-item">
  201. <a class="nav-link" data-toggle="tab" href="#monthly" aria-controls="monthly" role="tab" aria-selected="true">月</a>
  202. </li>
  203. </ul>
  204. </div>
  205. </div>
  206. <x-alert type="danger" :message="trans('home.traffic_log_tips')"/>
  207. <div class="panel-body">
  208. <div class="tab-content">
  209. <div class="tab-pane active" id="daily" role="tabpanel">
  210. <canvas id="dailyChart" aria-label="小时流量图" role="img"></canvas>
  211. </div>
  212. <div class="tab-pane" id="monthly" role="tabpanel">
  213. <canvas id="monthlyChart" aria-label="月流量图" role="img"></canvas>
  214. </div>
  215. </div>
  216. </div>
  217. </div>
  218. </div>
  219. </div>
  220. </div>
  221. </div>
  222. </div>
  223. @endsection
  224. @section('script')
  225. <script src="/assets/global/vendor/aspieprogress/jquery-asPieProgress.js" type="text/javascript"></script>
  226. <script src="/assets/global/vendor/matchheight/jquery.matchHeight-min.js" type="text/javascript"></script>
  227. <script src="/assets/global/vendor/chart-js/Chart.min.js" type="text/javascript"></script>
  228. <script src="/assets/global/js/Plugin/aspieprogress.js" type="text/javascript"></script>
  229. <script src="/assets/global/js/Plugin/matchheight.js" type="text/javascript"></script>
  230. @if(sysConfig('is_push_bear') && sysConfig('push_bear_qrcode'))
  231. <script src="/assets/custom/qart.min.js"></script>
  232. <script type="text/javascript">
  233. $(document).ready(function() {
  234. new QArt({
  235. value: '{{sysConfig('push_bear_qrcode')}}',
  236. imagePath: '{{asset('/assets/images/wechat.png')}}',
  237. filter: 'color',
  238. version: 10,
  239. size: 175,
  240. fillType: 'scale_to_fit',
  241. }).make(document.getElementById('qrcode'));
  242. });
  243. </script>
  244. @endif
  245. <script type="text/javascript">
  246. // 签到
  247. function checkIn() {
  248. $.post('{{route('checkIn')}}', {_token: '{{csrf_token()}}'}, function(ret) {
  249. if (ret.status === 'success') {
  250. swal.fire('长者的微笑', ret.message, 'success');
  251. }
  252. else {
  253. swal.fire({
  254. title: ret.message,
  255. icon: 'error',
  256. });
  257. }
  258. });
  259. }
  260. const dailyChart = new Chart(document.getElementById('dailyChart').getContext('2d'), {
  261. type: 'line',
  262. data: {
  263. labels: {{$dayHours}},
  264. datasets: [
  265. {
  266. fill: true,
  267. backgroundColor: 'rgba(98, 168, 234, .1)',
  268. borderColor: Config.colors('primary', 600),
  269. pointRadius: 4,
  270. borderDashOffset: 2,
  271. pointBorderColor: '#fff',
  272. pointBackgroundColor: Config.colors('primary', 600),
  273. pointHoverBackgroundColor: '#fff',
  274. pointHoverBorderColor: Config.colors('primary', 600),
  275. data: {{$trafficHourly}},
  276. }],
  277. },
  278. options: {
  279. legend: {
  280. display: false,
  281. },
  282. responsive: true,
  283. scales: {
  284. xAxes: [
  285. {
  286. display: true,
  287. scaleLabel: {
  288. display: true,
  289. labelString: '小时',
  290. },
  291. }],
  292. yAxes: [
  293. {
  294. display: true,
  295. ticks: {
  296. beginAtZero: true,
  297. userCallback: function(tick) {
  298. return tick.toString() + ' GB';
  299. },
  300. },
  301. scaleLabel: {
  302. display: true,
  303. labelString: '{{trans('home.traffic_log_24hours')}}',
  304. },
  305. }],
  306. },
  307. },
  308. });
  309. const monthlyChart = new Chart(document.getElementById('monthlyChart').getContext('2d'), {
  310. type: 'line',
  311. data: {
  312. labels: {{$monthDays}},
  313. datasets: [
  314. {
  315. fill: true,
  316. backgroundColor: 'rgba(98, 168, 234, .1)',
  317. borderColor: Config.colors('primary', 600),
  318. pointRadius: 4,
  319. borderDashOffset: 2,
  320. pointBorderColor: '#fff',
  321. pointBackgroundColor: Config.colors('primary', 600),
  322. pointHoverBackgroundColor: '#fff',
  323. pointHoverBorderColor: Config.colors('primary', 600),
  324. data: {{$trafficDaily}},
  325. }],
  326. },
  327. options: {
  328. legend: {
  329. display: false,
  330. },
  331. responsive: true,
  332. scales: {
  333. xAxes: [
  334. {
  335. display: true,
  336. scaleLabel: {
  337. display: true,
  338. labelString: '天',
  339. },
  340. }],
  341. yAxes: [
  342. {
  343. display: true,
  344. ticks: {
  345. beginAtZero: true,
  346. userCallback: function(tick) {
  347. return tick.toString() + ' GB';
  348. },
  349. },
  350. scaleLabel: {
  351. display: true,
  352. labelString: '{{trans('home.traffic_log_30days')}}',
  353. },
  354. }],
  355. },
  356. },
  357. });
  358. @if($banedTime)
  359. // 每秒更新计时器
  360. const countDownDate = new Date("{{$banedTime}}").getTime();
  361. const x = setInterval(function() {
  362. const distance = countDownDate - new Date().getTime();
  363. const hours = Math.floor(distance % 86400000 / 3600000);
  364. const minutes = Math.floor((distance % 3600000) / 60000);
  365. const seconds = Math.floor((distance % 60000) / 1000);
  366. document.getElementById('countdown').innerHTML = hours + '时 ' + minutes + '分 ' + seconds + '秒';
  367. if (distance <= 0) {
  368. clearInterval(x);
  369. document.getElementById('countdown').remove();
  370. }
  371. }, 1000);
  372. @endif
  373. </script>
  374. @endsection