my_parttimeapp.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  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. <link href="../../css/menu.min.css" rel="stylesheet" />
  9. <style>
  10. .top{position: fixed;width: 100%;z-index: 666;top:-1px ; background-color: white;overflow: hidden;box-shadow: 0 1px 6px #ccc;}
  11. .ui.secondary.pointing.menu{overflow:auto;border-bottom:0px;margin-top: 65px;}
  12. .ui.secondary.pointing.menu::-webkit-scrollbar {display:none}
  13. .main{margin-top: 115px;background-color: white;}
  14. .item{color: #717171!important;}
  15. .items{padding: 15px;font-size: 15px;color: #3a3939;border-bottom: 1px solid #efefef;}
  16. .items:last-child{border: 0px;}
  17. .cn{font-size: 10px;color: darkgray;padding-top: 3px;}
  18. .isTop{color: red;font-weight: bold;}
  19. .icon{font-size: 48px;display: block;}
  20. .no_data{line-height:20px;}
  21. .dd{padding-left: 20px;}
  22. .sps{background: #00B5AD;padding: 1px 6px;border-radius: 3px;color: white;text-align: center;margin-left: 20px;}
  23. .lyy{float: right;margin-top: -20px;font-size: 15px;color: orange;}
  24. [v-cloak] {display: none;}
  25. </style>
  26. </head>
  27. <body>
  28. <div id="app" v-cloak>
  29. <div class="mui-content">
  30. <div class="top">
  31. <header class="mui-bar mui-bar-nav">
  32. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  33. <h1 class="mui-title">我的应聘</h1>
  34. </header>
  35. <div class="ui secondary pointing menu">
  36. <a class="item" :style="{'color':index==current?'#00a0ea!important':'','border-bottom':index==current?'4px solid #00a0ea':''}" v-for="(item,index) in column_list" @click="selected(param.columnId=item.id,current=index)">{{item.mColumnName}} </a>
  37. </div>
  38. </div>
  39. <div class="main" v-if="news_list.length>0">
  40. <div class="items" v-for="(item,index) in news_list" >
  41. <div class="omit">{{item.parttime_title}}</div>
  42. <div class="cn">
  43. <span class="isTop" v-show="item.isTop==1">置顶</span>
  44. <span class="dc"> {{item.work_region}}</span>
  45. <span class="dc"> {{item.parttime_date}}</span>
  46. <span class="dd">{{item.address}}</span>
  47. <span class="sps">{{item.yname}}</span>
  48. <div class="lyy" v-if="item.pstate=='0' && item.contract=='0'">待录用</div>
  49. <div class="lyy" @click="detail(item)" style="color: #00B5AD;" v-else-if="item.pstate=='0' && item.contract=='1'">待签合同</div>
  50. <div class="lyy" @click="finance(item)" v-if="item.pstate=='1' && item.finance=='0'">待请款</div>
  51. <div class="lyy" @click="finance(item)" style="color: #00B5AD;" v-if="item.pstate=='1' && item.finance=='1'">请款中</div>
  52. <div class="lyy" @click="evaluate(item)" style="color: #00B5AD;" v-if="item.pstate=='2' && item.finance=='2'">已完成待评价</div>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="no_data" v-else>
  57. <i class="icon icon-48">&#xe61a;</i><br />没有数据
  58. </div>
  59. <!--加载更多-->
  60. <div class="more">
  61. <div class="loading" v-if="loading">
  62. <span class="mui-spinner"></span>
  63. <div class="mc">加载中...</div>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. <script src="../../js/mui.min.js"></script>
  69. <script src="../../js/app.js"></script>
  70. <script src="../../js/vue.min.js"></script>
  71. <script type="text/javascript">
  72. var vm = new Vue({
  73. el: "#app",
  74. data: {
  75. news_list:[],
  76. column_list: [{mColumnName:'已报名',id:0},{mColumnName:'已签合同',id:1},{mColumnName:'已结算',id:2},{mColumnName:'已评价',id:3}],
  77. param: {page: 1,columnId:0,id:getUser().id},
  78. current: 0,
  79. loading: false,
  80. hasMore: false,
  81. },
  82. mounted: function() {
  83. mui.plusReady(function() {
  84. // vm.param.current=0;
  85. vm.getData();
  86. })
  87. //监听滚动加载
  88. window.addEventListener('scroll', function() {
  89. //滚动高度+内高度>=文档高度
  90. if(document.body.scrollTop + window.innerHeight + 20 >= document.body.offsetHeight) {
  91. if(vm.hasMore) {
  92. vm.loading = true;
  93. //避免重复加载
  94. vm.hasMore = false;
  95. vm.param.page++;
  96. setTimeout(function() {
  97. vm.getData()
  98. }, 1000);
  99. }
  100. }
  101. })
  102. },
  103. methods: {
  104. //获取数据
  105. getData: function() {
  106. request(urls().myparttime_rapp_List, this.param, function(res) {
  107. res.list.forEach(function(item) {
  108. vm.news_list.push(item);
  109. });
  110. vm.hasMore = vm.param.page < res.total ? true : false;
  111. vm.loading = false;
  112. plus.nativeUI.closeWaiting();
  113. })
  114. },
  115. //选择栏目
  116. selected: function(columnId, index) {
  117. vm.refresh();
  118. },
  119. //详情
  120. detail: function(id) {
  121. open('detail', 'contract_detail.html', id, 'slide-in-bottom');
  122. },//详情
  123. finance: function(id) {
  124. open('finance', 'finance.html', id, 'slide-in-bottom');
  125. },
  126. evaluate: function(id) {
  127. open('evaluate', 'add_evaluate.html', id, 'slide-in-bottom');
  128. },
  129. //刷新
  130. refresh: function() {
  131. vm.news_list = [];
  132. vm.param.page = 1;
  133. vm.getData();
  134. }
  135. }
  136. })
  137. </script>
  138. </body>
  139. </html>