record.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  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,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link href="../../css/mui.min.css" rel="stylesheet" />
  8. <style>
  9. .m_box {padding: 10px 10px 25px 15px;box-shadow: 0 1px 6px #dbdbdb;border-radius: 8px;position: relative;overflow: hidden;}
  10. .fm{width: 100%;z-index: 1;}
  11. .mui-content{padding: 0px 15px!important;margin-top: -65px;z-index: 11111;}
  12. .items{padding: 10px;font-size: 12px;margin-top:10px;background-color: white;border-bottom: 1px solid #eeeded;}
  13. .items:last-child{border: 0px;}
  14. .divider{margin-top: 25px;margin-bottom: 25px;}
  15. .qian{float: left;width: 40px;height: 40px;border-radius: 50%;background-color: orange;text-align: center;line-height: 40px;}
  16. .icsf{color: white;}
  17. .ccn{float: left;padding-left: 10px;width: 75%;}
  18. .ccn .stitle{font-size: 14px;width: 100%;color: #6c6c6c;}
  19. .sm7{overflow: hidden;}
  20. .money{float: right;color: orange;font-size: 15px;}
  21. .ccn .time{color: darkgray;}
  22. .ty{float: right;color: #F44336;}
  23. [v-cloak] {display: none;}
  24. </style>
  25. </head>
  26. <body>
  27. <div id="app" v-cloak>
  28. <header class="mui-bar mui-bar-nav">
  29. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  30. <h1 class="mui-title">请款记录</h1>
  31. </header>
  32. <img src="../../images/top.png" class="fm" />
  33. <div class="mui-content">
  34. <div class="m_box">
  35. <div v-if="list.length>0">
  36. <div class="items" v-for="(item,index) in list">
  37. <div class="row">
  38. <div class="sm7">
  39. <div class="qian"><i class="icon icsf">&#xe615;</i></div>
  40. <div class="ccn omit">
  41. <div class="stitle omit">{{item.parttime_title}}</div>
  42. <div class="time">{{item.pay_date}} 发起收款</div>
  43. </div>
  44. </div>
  45. <div class="sm3">
  46. <div class="money">{{item.amount}}元</div>
  47. <div class="ty">待甲方同意</div>
  48. </div>
  49. <div class="clear"></div>
  50. </div>
  51. </div>
  52. </div>
  53. <div class="no_data" v-else style="padding-top: 50px;">
  54. <i class="icon icon-48">&#xe61a;</i><br />没有数据
  55. </div>
  56. </div>
  57. </div>
  58. </div>
  59. <script src="../../js/mui.min.js"></script>
  60. <script src="../../js/app.js"></script>
  61. <script src="../../js/vue.min.js"></script>
  62. <script type="text/javascript">
  63. var vm = new Vue({
  64. el: "#app",
  65. data: {
  66. list: [],
  67. },
  68. mounted: function() {
  69. this.getData();
  70. },
  71. methods: {
  72. getData: function() {
  73. request(urls().finance_list, {userId: getUser().id,state:0}, function(res) {
  74. vm.list = res.data;
  75. plus.nativeUI.closeWaiting();
  76. })
  77. }
  78. }
  79. })
  80. </script>
  81. </body>
  82. </html>